Posts

Showing posts from November, 2024

PROFILE CARD CSS

  * {   margin : 0 ;   padding : 0 ;   box-sizing : border-box ;   font-family : "Poppins" , sans-serif ; } body {   height : 100vh ;     display : flex ;     align-items : center ;     justify-content : center ;     background-color :   beige ; } .profile-card {   display : flex ;   align-items : center ;   justify-content : center ;   max-width : 570px ;   width : 100% ;   background : bisque ;   box-shadow : 0 5px 10px black ;   border-radius : 24px ;   padding : 85px ; } .image {   position : relative ;   height : 150px ;   width : 150px ;   border-radius : 50% ;   background-color : rgb ( 182 , 36 , 51 );   padding : 3px ;   img{     height : 100% ;     width : 100% ;     object-fit : cover ;     border-radius : 50% ;     border : 2px solid white ;   } } .text-data { ...

PROFILE CARD HTML

  <! DOCTYPE html > < html lang = "en" >     < head >         < meta charset = "UTF-8" >         < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >         < title > Profile card </ title >         <!-- Boxicons here !! -->         < link href = 'https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css'             rel = 'stylesheet' >         < link rel = "preconnect" href = "https://fonts.googleapis.com" >         <!-- google fonts -->         < link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin >         < link             href = "https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Popp...

Profile page {simplified}

<! 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 >             body {                 margin : 0 ;                 padding : 0 ;                 background-color : black ;             }         input {             text-align : center ;                                 }         .container {             margin-top : 3% ; ...

CSS HOMEWORK #1

  <! 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 >     < style > * {     margin : 0 ;     padding : 0 ; } body {     background-color : rgb ( 188 , 151 , 151 ); } .nav {     width : 2000px ;     height : 70px ;     background-color : rgb ( 196 , 57 , 57 );     color : aliceblue ;     font-size : small ;     img{         margin : -50px 0px 0px 15px ;         padding : 0px 0px 0px 0px ;         border-radius : 50px ;     }   } li {     display : inline-block ;     padding : 0px ...

FORM STYLING IN CSS

<! DOCTYPE html > < html lang = "en" >   < head >     < meta charset = "UTF-8" />     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" />     < title > forms </ title >   </ head >   < style >     body {       margin : 0 ;       padding : 0 ;     }     .csf {       display : flexbox;       text-align : center ;       background-color : rgb ( 216 , 216 , 216 );       height : 400px ;       width : 550px ;       padding : 90px 0px 0px 15px ;       margin-left : 40% ;       margin-top : 10% ;       border-radius : 2px ;       border : 2px solid ;       font-size : 19px ;     }     input {       mar...

DISPLAY INLINE/BLOCK/INLINE BLOCK PROPERTY IN CSS

  <! 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 > < style >     .box1 { text-align : center ;         height : 124px ; display : inline-block ;     width : 431px ; background-color : aqua ;}     .box2 { display : inline-block ; text-align : center ;         height : 124px ; width : 431px ; background-color : rgb ( 150 , 13 , 13 );         font-family : ui-rounded ;} </ style > < body > < div class = "box1" > Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit unde nobis asperiores adipisci. </ div > < div class = "box2" > Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum blanditiis nam architecto...

GLOWING SEARCH BAR HTML+CSS

  <! 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 > Glowing Pulse Search Bar </ title >     < link rel = "stylesheet" type = "text/css" href = "styles.css" >     < STYLE >         @import url ( https://fonts.googleapis.com/css?family=Cabin:400 ); .webdesigntuts-workshop {     background : #151515 ;     height : 100% ;     position : absolute ;     text-align : center ;     width : 100% ; } .webdesigntuts-workshop:before , .webdesigntuts-workshop:after {     content : '' ;     display : block ;     height : 1px ;     left : 50% ;     margin : 0 0 0...