Complex Usecases Of Flex Box Profile Box Model

 <!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="post">



    <div class="header">



        <div class="profile">

            <img class="user" src="https://source.unsplash.com/1600x1000/?profile" alt="">

            <div class="username">

                <p class="u1">username</p>
                <p class="u2">@user</p>


            </div>



        </div>

        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="50" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
            <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/>
            </svg>



    </div>

    <img class="postimage" src="https://source.unsplash.com/1600x1000/?india" alt="">

    <p class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, voluptatum.</p>



</div>




   
</body>
</html>


// CSS FILE

.post{
    margin: 50px auto;
    border: solid grey;
    border-width: 1px;
    width: 600px;
    padding: 5px;
    border-radius: 10px;
   





}

.header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
   





}


.profile{

    display: flex;
    gap:15px;
    align-items: center;
   





}


.user{
    width: 80px;
    height: 80px;
    border-radius: 50%;
   





}

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

}

.icon{


}

.postimage{

    width: 100%;
    border-radius: 10px;



}

.desc{

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

    font-weight: 500;


}


.u1{
    margin: 0px;



}

.u2{
    margin: 0px;
    font-size: 14px;

/* font-weight: lighter; */
color: rgb(106, 106, 106);


}
Output



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" ,     ...
Read more

Rolling Dice

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 = "container" >         < audio id = "diceaudio" src = "dice.mp3" ></ audio >         < h1 class = "heading" >Roll The Dice To Get Random Number</ h1 >         < p class = "desc" >Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, eligendi.</ p >         < div id = "dice" >6</ div >         < div class = "button" onclick = " roll ()" >Roll The Dice</ div >     </ div >     ...
Read more

Basics Of Java Script Till DOM Beggining

  <! 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 = "container" >         < h1 id = "title" >Welcome to css</ h1 >         < button id = "btn" class = "btn" onclick = " feedback ()" >Give Feedback</ button >         < input id = "inp1" type = "text" placeholder = "Enter Name" >         < input id = "inp2" type = "text" placeholder = "Enter Number" >     </ div >     < script src = "app.js" >         </ script >     </ body > </ html ...
Read more