HTML , CSS

  src = "https://source.unsplash.com/1400x600/?coding"

  < div class=" text-bg-primary p-3 ">Primary with contrasting color</ div > < div class=" text-bg-secondary p-3 ">Secondary with contrasting color</ div > < div class=" text-bg-success p-3 ">Success with contrasting color</ div > < div class=" text-bg-danger p-3 ">Danger with contrasting color</ div > < div class=" text-bg-warning p-3 ">Warning with contrasting color</ div > < div class=" text-bg-info p-3 ">Info with contrasting color</ div > < div class=" text-bg-light p-3 ">Light with contrasting color</ div > < div class=" text-bg-dark p-3 ">Dark with contrasting color</ div >

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > whatsapp </ title >     < style >         * {             margin : 0px ;             padding : 0px ;             box-sizing : border-box ;         }         .whatsbtn {             width : 50px ;             height : 50px ;             position : fixed ;             bottom : 40px ;             right : 20px ;         }     </ style > </ head > < body >     < div c...

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > button </ title >     < style >         body {             background-color : black ;         }         button {             background-color : cyan ;             border : none ;             padding : 20px ;             font-size : 20px ;             box-shadow : 0 0 5px cyan , 0 0 25px cyan ;         }         button:hover {             box-shadow : 0 0 5px cyan , 0 0 25px cyan ,       ...

  @media screen and ( min-width : 320px ) and ( max-width : 640px ) {     .nav1 ul {       display : none ;     }     .main2 {         height : auto ;     }     .main2 > div {         width : 45% ;         margin-top : 20px ;     }     .main4 {         height : auto ;     }     .main4 > div {         width : 48% ;     } }

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Flex here </ title >     < style >         * {             margin : 0 ;             padding : 0 ;         }         .parent {             min-height : 100vh ;             width : 100vw ;             background-color : blue ;             display : flex ;             padding : 30px 0px ;             /* justify-content: space-evenly;     6 */             /* align-items: start;   ...

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Document </ title >     < style >         * {             margin : 0 ;             padding : 0 ;         }         div {             height : 30vh ;             width : 30vw ;             border : 2px solid red ;             background-image : linear-gradient ( rgba ( 143 , 63 , 63 , 0.781 ), rgba ( 69 , 17 , 212 , 0.781 ), rgba ( 0 , 255 , 0 , 0.5 )), url ( ./farmhouse.jpg );             background-size : cover ;         }   ...

  ! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=\, initial-scale=1.0" >     < title > Document </ title >     < style >         * {             margin : 0px ;             padding : 0px ;             box-sizing : border-box ;             list-style : none ;             text-decoration : none ;         }         nav {             display : flex ;             align-items : center ;             justify-content : center ;             font-size : 20px ;             back...