Posts

Showing posts from July, 2024

font

  <!DOCTYPE html > <html lang ="en" > <head> <meta charset ="UTF-8" > <title> Title </title> <style> @font-face { font-family : "Sabir" ; src : url ( "font/Longevity.ttf" ) ; } h1 { font-family : "Sabir" ; } </style> </head> <body> <h1> Computer </h1> </body> </html>
Post a Comment
Read more

pesudo element

  <!DOCTYPE html > <html lang ="en" > <head> <meta charset ="UTF-8" > <title> Title </title> <style> . box { height : 200 px ; width : 200 px ; background : #22bf60 ; } . box : hover { height : 250 px ; width : 250 px ; background : red ; } . p : first-line { color : red ; } . p : before { content : "*" ; color : green ; font-size : x-large ; } . p : after { content : '*' ; color : green ; font-size : x-large ; } . p : first-letter { color : #042a84 ; font-size : x-large ; } </style> </head> <body> <div class ="box" > </div> <p class ="p" > CSS pseudo-elements a...
Post a Comment
Read more

Layer

  <!DOCTYPE html > <html lang ="en" > <head> <meta charset ="UTF-8" > <title> Title </title> <style> . red { height : 400 px ; width : 400 px ; background : red ; position : absolute ; left : 60 px ; top : 60 px ; } . green { height : 400 px ; width : 400 px ; background : green ; position : absolute ; top : 30 px ; left : 30 px ; } . blue { height : 400 px ; width : 400 px ; background : blue ; position : absolute ; } </style> </head> <body> <div style =" position : relative" > <div class ="red" > </div> <div class ="green" > </div> <div class ="blue" > ...
Post a Comment
Read more

sticky

  <!DOCTYPE html > <html lang ="en" > <head> <meta charset ="UTF-8" > <title> Title </title> <style> . menu { background : #22bf60 ; height : 50 px ; font-size : large ; position : sticky ; top : 0 px ; } p { width : 20 % ; } </style> </head> <body> <p> CSS gives you an opportunity to create layers of various divisions. The CSS layers refer to applying the z-index property to elements that overlap with each other.M <br> The z-index property is used along with the position property to create an effect of layers. You can specify which element should come on top and which element should come at bottom. <br> A z-index property can help you to create more complex webpage layouts. The following example shows how to create layers in CSS. <b...
Post a Comment
Read more

Fixed

  <!DOCTYPE html > <html lang ="en" > <head> <meta charset ="UTF-8" > <title> Title </title> <style> . box { width : 60 % ; height : 400 px ; border : 2 px ; border-radius : 15 px ; background : #80c79c ; position : fixed ; top : 15 % ; left : 25 % ; right : 25 % ; } p { width : 30 % ; } </style> </head> <body> <p> CSS gives you an opportunity to create layers of various divisions. The CSS layers refer to applying the z-index property to elements that overlap with each other.M <br> The z-index property is used along with the position property to create an effect of layers. You can specify which element should come on top and which element should come at bottom. <br> A z-index property can help you...
Post a Comment
Read more

IMages

Image
 
Post a Comment
Read more

ProductItemCard

  <!DOCTYPE html > <html lang ="en" > <head> <meta charset ="UTF-8" > <title> Title </title> <style> . Productist { display : flex ; gap : 3 px ; flex-wrap : wrap ; } . ProductItem { height : 200 px ; position : relative ; width : 200 px ; background : #80c79c ; overflow : hidden ; } . ProductItem img { width : 100 % ; } . new { background : yellow ; padding : 9 px ; padding-top : 5 px ; border-radius : 5 px ; font-weight : bold ; position : absolute ; /* right: 0; */ } . dis { background : #ff0052 ; padding : 9 px ; padding-top : 5 px ; border-radius : 5 px ; font-weight : bold ; co...
Post a Comment
Read more

Daimention And Scrollbard

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < title > Title </ title >     < style >         div {             height : 144px ;     width : 400px ;     border : solid ;     min-height : 200px ;     max-height : 600px ;     overflow : auto ;         }         .p {             line-height : 23px ;         }         header {     font-family : 'Lobster' , cursive;     text-align : center ;     font-size : 25px ;     } #info {     font-size : 18px ;     color : #555 ;     text-align : center ;     margin-bottom : 25px ; } a {     color : #074E8C ; } .scrollbar {     ma...
Post a Comment
Read more