My html css works

HTML CODE < body >         < div class = "container" >             < div class = "box box1" >Box 1</ div >             < div class = "box box2" >Box 2</ div >             < div class = "box box3" >Box 3</ div >             < div class = "box box4" >Box 4</ div >             < div class = "box box5" >Box 5</ div >             < div class = "box box6" >Box 6</ div >             < div class = "box box7" >Box 7</ div >         </ div > </ body > CSS CODE * {     padding: 0 ;     margin: 0 ;     box-sizing: border-box ; } .container {     display: grid ;     height: 100 vh ;   ...

 HTML CODE < body >     < div class = "container" >         < div class = "item item1" >ONE</ div >         < div class = "item" >TWO</ div >         < div class = "item" >THREE</ div >         < div class = "item" >FOUR</ div >         < div class = "item " >FIVE</ div >         < div class = "item last" >LAST</ div >     </ div > </ body > CSS CODE * {     margin: 0 ;     padding: 0 ;     box-sizing: border-box ; } html {     font-family: Product Sans; } @media (max-width: 360 px ){     .container {         padding: 0.5 rem ;         display: grid ;         height: 100 vh ;         grid-template-columns: 1 fr ; ...

HTML CODE < body >     < div class = "container" >         < div class = "item item1" >ONE</ div >         < div class = "item" >TWO</ div >         < div class = "item" >THREE</ div >         < div class = "item" >FOUR</ div >         < div class = "item last" >LAST</ div >     </ div > </ body > CSS CODE * {     margin: 0 ;     padding: 0 ;     box-sizing: border-box ; } html {     font-family: Product Sans; } .container {     display: grid ;     height: 100 VH ;     grid-template-columns: 100 px repeat ( 1 , 1 fr ) 100 px ;     grid-template-rows: 80 px repeat ( 1 , 1 fr ) 80 px ;     gap: 1 rem ;     padding: 1 rem ; } .item {     border: 5 px solid red ; } .item1 ...

 Responsive flexbox design HTML CODE: <! DOCTYPE html > < html lang = "en"> < head >     < meta charset = "UTF-8" >     < meta http-equiv = "X-UA-Compatible" content = "IE=edge" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < link rel = "stylesheet" href = "try.css" >     < title >Document</ title > </ head > < body >     < div class = "main love" >         < div class = "bb b1" ></ div >         < div class = "bb b2" ></ div >     </ div >     < div class = "main2 love" >     </ div >     < div class = "fle" >         < div class = "one box1" ></ div >         < div class = "one box2" ></ div >   ...

 Animated Homepage design only using css HTML CODE:  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta http-equiv = "X-UA-Compatible" content = "IE=edge" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < link rel = "stylesheet" href = "style.css" >     < title >Document</ title > </ head > < body >     < header class = "background" >         < div class = "container" >             < nav class = "navbox" >                 < div class = "secondary" >                     < a href = "" class = "info" >HOME</ a >                     < a hre...

Using Scale in the Transition along with moving background image HTML CODE:  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta http-equiv = "X-UA-Compatible" content = "IE=edge" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title >Document</ title >     < link rel = "stylesheet" href = "./try.css" > </ head > < body >     < header >< a href = "https://www.unspash.com" >Hover me</ a ></ header > </ body > </ html > CSS CODE: * {     margin: 0 ;     padding: 0 ;     box-sizing: border-box ; } html {     font-size: 62.5 % ; } header {     background: linear-gradient ( rgb ( 0 , 0 , 0 , 0.5 ), rgb ( 0 , 0 , 0 , 0.5 )), url ( "./canada.jpg" );     height: 100 vh ;    ...

Animated Gradient Shadow HTML CODE <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta http-equiv = "X-UA-Compatible" content = "IE=edge" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < link rel = "stylesheet" href = "try.css" >     < title >Document</ title > </ head > < body >     < div class = "main" >< h1 >Jennie Kim</ h1 ></ div > </ body > </ html > CSS CODE * {     padding: 0 ;     margin: 0 ;     box-sizing: border-box ; } body {     margin: 0 ;     padding: 0 ;     background-color: black ;     width: 100 % ;     height: 100 vh ;     display: flex ;     justify-content: center ;   /*To bring div at Center*/     align-i...

Hover with Transition and moving gradient Effect  HTML CODE <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta http-equiv = "X-UA-Compatible" content = "IE=edge" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < link rel = "stylesheet" href = "try.css" >     < title >Document</ title > </ head > < body >     < header > < a href = "https://google.com" >Click Me</ a ></ header > </ body > </ html > CSS CODE @import url ( 'https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap' ); * {     margin: 0 ;     padding: 0 ;     box-sizing: border-box ; } html {     font-size: 62.5 % ; } body {     font-family: 'Montserrat' , sans-serif ; } header {     height: 100...

 Advertisement Home page design HTML CODE <! DOCTYPE html > < html lang = "en" > < head >     < script src = "https://kit.fontawesome.com/0e138b760b.js" crossorigin = "anonymous" ></ script >     < meta charset = "UTF-8" >     < meta http-equiv = "X-UA-Compatible" content = "IE=edge" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title >Document</ title >     < link rel = "stylesheet" href = "./css/style.css" > </ head > < body >     < header class = "background" >         < div class = "container" >             < nav class = "navbar" >                 < div class = "navbox" >                         < div ...