Posts

Showing posts from September, 2023

Smile

Image
  HTML <! DOCTYPE html > < html lang = "en" > < head >   < meta charset = "UTF-8" >   < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >   < title > Document </ title >   < link rel = "stylesheet" href = "hello.css" > </ head > < body >   < div class = "face" >     < div class = "mouth" ></ div >     < div class = "eyes" >       < div class = "left-eye" ></ div >       < div class = "right-eye" ></ div >           </ div >       </ div >   </ body > </ html > CSS .face {     width : 400px ;     height : 400px ;     background-color : #ffa511 ;     border-radius : 50% ; } .mouth {     width : 200px ;     height : 5 0px ;     bac...

Position

Image
  HTML <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Document </ title >     < link rel = "stylesheet" href = "hello.css" > </ head > < body >   < section >     < h2 > Position-Static </ h2 >     < div ></ div >     < div id = "static" ></ div >   </ section >   < section >     < h2 > Position-absolute </ h2 >     < div ></ div >     < div id = "absolute" ></ div >   </ section >   < section >     < h2 > Position-fixed </ h2 >     < div ></ div >     < div id = "fixed" ></ div >   </ section ...

Card Hover Effect

  HTML: <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Document </ title >     < link rel = "stylesheet" href = "hello.css" > </ head > < body >   < div class = "card" >       < img src = "man.png"   alt = "man" >       < div class = "disc" >         < h3 > Jonny Deep </ h3 >         < p > Actor </ p >       </ div >   </ div >   < div class = "card" >     < img src = "man.png"   alt = "women" >       < div class = "disc" >         < h3 > Jennefer Connelly </ h3 >         < p > Actres...

BOX SHADOW

Image
 

Transitions in CSS

Image

Transition CSS

  CSS :-  div {     background-color : rgba ( 207 , 12 , 12 , 0.648 );     height : 50px ;     width : 50px ;     margin : 0 auto ;     margin-top : 10px ;     transition : margin-top 2s ease-in 0.2s ; } div:hover {     background-color : blue ;     margin-top : 400px ; }

Traffic Light

Image
  HTML:- <! DOCTYPE html > < html lang = "en" > < head >   < meta charset = "UTF-8" >   < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >   < title > Document </ title >   < link rel = "stylesheet" href = "hello.css" > </ head > < body >   < div id = "outer" >     < div class = "inner" id = "red" ></ div >     < div class = "inner" id = "orange" ></ div >     < div class = "inner" id = "green" ></ div >   </ div >   </ body > </ html > CSS:- #outer {     height : 200px ;     width : 70px ;     border : 2px solid black ; } .inner {     height : 50px ;     width : 50px ;     border : 2 px solid black ;     margin : 10px ;     border-radius : 50% ;   } #green {   ...

BORDER

Image
CSS :- * {     background-color : #B0C4DE ; } h1 {     color : rgb ( 201 , 49 , 49 );     border-style : solid ;     width : 490px ;     padding-left : 15px ;     border-color : black ;     border-radius : 15% ;     background-color : #F0F8FF     ;     } p {     color : rgb ( 4 , 3 , 3 );     background-color : #90EE90   ;     height : 300px ;     width : 300px ;     border-style : solid ;     border-width : 1px ;     border-color : #070708 ;     border-radius : 50% ;     padding-left : 50px ;     padding-right : 50px ;     padding-bottom : -50px ;     padding-top : 120px ;     } a {     background-color : #90EE90   ;     color : rgb ( 201 , 49 , 49 ); }

Practice CSS 2

Image
  HTML: <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Document </ title >     < link rel = "stylesheet" href = "facebook.css" > </ head > < body >   < h1 > Facebook </ h1 >   < div >     < button id = "Register" > Log In </ button >     < button id = "Register" > Sign Up </ button >       </ div >     < hr >   < div >   Search   < input type = "text" placeholder = "Search your friends" >   < button id = "Search" > Search </ button >   </ div >     </ body > </ html > CSS: *     *{ font-family : Cambria, Cochin, Georgia , Times , 'Times New Roman' , seri...

Quora page

Image
  Html: <! 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 > MOHIT CSS </ title >     < link rel = "stylesheet" href = "style.css" >   </ head >   < body >     < header >         < h1 > Quora             < button id = "login" > Log in </ button >             < button id = "signup" > Sign up </ button >         </ h1 >         < div >             < input type = "text" placeholder = "Username" >             < i...

Practice 2

Image
Html - <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Document </ title >     < link rel = "stylesheet" href = "style.css" > </ head > < body >     < h2 >         Mohit < br > Choubey     </ h2 >     </ body > </ html > CSS- h2 {     color : #ffa551 ;     text-decoration : teal double underline ;     font-family : Georgia , 'Times New Roman' , Times , serif ;     text-align : center ;     font-size : 55px ;     font-weight : 900 ;     letter-spacing : 2px ;     line-height : 1.5 ;     text-transform : uppercase ; }

Practice 1

Image
  <! DOCTYPE html > < html lang = "en" > < head >   < link rel = "stylesheet" href = "style.css" >   < meta charset = "UTF-8" >   < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >   < title > Document </ title > </ head > < body >   < h2 > Hi there ! </ h2 >   < p > My name is Tom & I am there to help you. </ p >   < button > Need Help </ button >   </ body > </ html > p {     color : aliceblue ;     background-color : black ; } h2 {     color : orange ; } button {     color : aquamarine ;     background-color : darkkhaki ; }