CSS VAR ()

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>


    <div class="profile">
       

        <img class="img" src="Profile.jpg" alt="">

        <div class="content">

            <h3 class="title">Welcome to my profile</h3>

            <p class="desc">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officia, iste?</p>

            <button class="btn1">Follow Me</button>

            <button class="btn2">Downloard Resume</button>


        </div>



    </div>
   


</body>
</html>

//CSS File

body{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;



}

:root{

    --first: green;
    --pad: 16px 32px;




}

.profile{
    display: flex;
    width: 700px;
    margin: 200px auto;
    gap: 20px;






}
.img{

    width: 170px;
    height: 170px;
    border-radius: 50%;
    object-fit: cover;






}

.content{





}

.title{





}

.desc{






}

.btn1{
    background-color: var(--first);
    padding: var(--pad);
    font-size: 16px;
    border: 1px solid transparent;
    border-radius: 15px;
    color: white;



}

.btn2{

    background-color: white;
    padding: 16px 32px;
    font-size: 16px;
    border: 1px solid blueviolet;
    border-radius: 15px;
    color: blueviolet;
    margin-left: 10px;




}

Comments

Post a Comment

Popular posts from this blog

Array Mapping and Filters Assignment

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >         < title >Document</ title > </ head > < body >         < script src = "am.js" ></ script > </ body > </ html > // JAVA SCRIPT FILE const users = [     {         name : "Akash Sharma" ,         age : 17 ,         gender : "Male" ,         location : "Delhi, India"     },     {         name : "Neha Patel" ,         age : 16 ,         gender : "Female" ,         location : "Mumbai, India"     },     {         name : "Rajesh Singh" ,         age : 17 ,         gender : "Male" ,         location : "Bangalore, India"     },     {         name : "Priya Gupta" ,         age : 20 ,         gende
Read more

BOX MODEL BURGER

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < link rel = "stylesheet" href = "style.css" >     < title >Document</ title > </ head > < body > < div class = "box" >     < img class = "box-img" src = "Burger.jpg" alt = "" >     < div class = "content" >         < h3 class = "title" >Welcome T CSS</ h3 >     < p class = "description" >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio, dolorum?</ p > </ div > < a class = "buff" href = "" >Explore Now</ a > </ div >     </ body > </ html > // CSS FILE .box {     font-family: system-ui , -apple-system, Bl
Read more

Login Form

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < link rel = "stylesheet" href = "style.css" >     < title >Document</ title > </ head > < body > < div class = "box" >     < h3 >Welcome to mcdonal</ h3 >     < p >Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, nulla.</ p >     < input type = "text" placeholder = "Name" >     < input type = "text" placeholder = "Number" >     < a class = " login" href = "" >Login</ a > </ div > </ body > </ html > // CSS File .box {     width: 300 px ;     font-family: system-ui , -apple-system, BlinkMacSystemFont, 'Segoe UI' , Roboto, Oxy
Read more