Posts

Showing posts with the label css

grid tamplate rows

 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>grid tamplate rows </title>     <style>         .grid{             display: grid;             grid-template-rows: 1fr 6fr 2fr;             grid-gap: 1rem;             grid-template-columns: 1fr 4fr 2fr;             grid-template-columns: repeat(5, 1fr);             /* grid-auto-rows: 5fr; */         }         .item{             background-color: #3084e4;             border:2px solid red;         }     </style> <...

Grid Min-Max

<!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>         .container{             display: grid;             grid-template-columns: repeat(4, 4fr);             /* is ka matlab he jab screen chota ho jaye to shirph 1rf show kare aur uska max width: 300px; rahe; */             grid-template-columns: repeat( auto-fit, minmax( 300px ,1fr) );         }         .box{             background-color: rgb(213, 243, 41);             padding: 19px 10px;             margin: 1rem 2rem;         } ...

css grid 2

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>css grid</title>     <style>         .container {             display: grid;             grid-template-columns: repeat(3, 4fr);             /* grid-template-rows: repeat(8, 1fr); */             grid-template-rows: 2fr 4fr 2fr;             /* grid-column-gap: 1rem ;             grid-row-gap: 2rem; */             grid-gap: 1rem;                   }         .box {             background-color: rgb(236, 214, 15);       ...

css grid

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>css grid</title>     <style>         .grid {             display: grid;             /* iska matlab 4 coulumns bnao aur uska size 100px 200px 100px 150px kar do  */             grid-template-columns: 100px 200px 100px 150px;             grid-template-columns: 300px auto 100px;             grid-template-columns: 1fr 4fr 1fr;             /* iska matlab 3bar repeat karo aur size auto  */             grid-template-columns: repeat(3, auto);             /* iska matlab grid ke bis me 2rem ka g...

More on selectors in css

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <title>More on selectors</title> </head> <style>     h1{         background-color: red;         color: black;         font-weight: bold;         text-align: center;     }     /* if p is contained by any li which is contained by div */     div li p{         color: yellow;         background-color: green;         font-weight: bold;     }     /* div > p ka matlab shirf div ke undar wala element ko hi select karo */     div > p{         color: rgb(0, 132, 255);...

position 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>     <style>         .box{             width: 150px;             height: 150px;             border: 2px solid tomato;             display: inline-block;         }         #boxe2{             position: sticky;             top: 2px;         }         #boxe1{             position: absolute;             top: 20px;             left: 25px;         } ...

Use Before and after pseudo etement is css

 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>This is A My friest Website</title>          <Style>         * {             margin: 0px;             padding: 0px;         }         body {             background-color: black;             color: #fff;             font-family: 'Balsamiq Sans', cursive;         }         .header::before {             background: url(https://source.unsplash.com/collection/190727/1600x900) no-repeat center center/cover;             /* backgroun...