Posts

Showing posts with the label HTML

Complex Usecases Of Flex Box Profile Box Model

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 = "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 > ...
Post a Comment
Read more

FLEX BOX USE CASE 1

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 = "parent" >         < div class = "box one" >                 < img class = "box-img" src = "https://source.unsplash.com/1600x1000/?burger" alt = "" >                 < div class = "content" >                     < h3 class = "title" >Welcome To CSS</ h3 >                 < p class = "desc" >Lorem ipsum dolor sit amet consectetur adipisicing elit. Consecte...
Post a Comment
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...
Post a Comment
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...
Post a Comment
Read more