Posts

Showing posts from March, 2024

CSS Positions , absolute and relative

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 = "india" >                   < img class = "india-img" src = "https://source.unsplash.com/700x500/?india" alt = "" >         < div class = "bag" ></ div >                 <!-- this is for background image -->         < div class = "content" >             < h2 class = "title" >Explore India Book Now And Get 10% Off</ h2 >             < p c...
Post a Comment
Read more

Sticky On Colum2

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 = "bar1" >                             < p >Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus distinctio sunt dolore eveniet voluptatem dolorem recusandae, doloribus consectetur velit ex esse quod corporis vel quisquam labore maiores consequatur commodi obcaecati aperiam officiis beatae dicta modi harum? Distinctio est ratione tempore velit perspiciatis, numquam aliquid! Necessitatibus eveniet, sed porro possimus facilis nulla nih...
Post a Comment
Read more

CSS Positions Sticky & Fixed

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 >         < button class = "btn" >Need Help?</ button >     < div class = "card" >         < img class = "card-img" src = "https://source.unsplash.com/1600x1000/?burger" alt = "" >         < p >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, nam.</ p >     </ div >     < div class = "box" >         < h3 class = "title" >Book Now 😊& Get 10% OFF🎉.</ h3 >         < p class = "description" >Lorem ipsum ...
Post a Comment
Read more

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