Posts

Bbootstrap 1

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Bootstrap </ title >     < link rel = "stylesheet" href = "style.css" >     < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" > </ head > < body >     < nav class = "navbar bg-dark  border-bottom border-body" data-bs-theme = "dark" fixed-top navbar-expand-lg " >         < div class = "container-fluid" >         < a href = "#" class = "navbar-brand" > Captureholics </ a >         < button class = "navbar-toggler" data-bs-toggle = "collapse" data-bs-target = "#navbarNavAltMarkup" >   ...
Post a Comment
Read more

bootstrap

Image
<! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Bootstrap </ title >     < link rel = "stylesheet" href = "style.css" >     < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" > </ head > < body >     < nav class = "navbar bg-dark  border-bottom border-body" data-bs-theme = "dark" fixed-top navbar-expand-lg " >         < div class = "container-fluid" >         < a href = "#" class = "navbar-brand" > Captureholics </ a >         < button class = "navbar-toggler" data-bs-toggle = "collapse" data-bs-target = "#navbarNavAltMarkup" >     ...
Post a Comment
Read more

Gid Properties

Image
  HTML <! DOCTYPE html > < html lang = "en" > < head >   < meta charset = "UTF-8" >   < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >   < link rel = "stylesheet" href = "hello.css" >   < title > GRID </ title > </ head > < body > < h1 > Grid Playground </ h1 > < div class = "container" > < div class = "item one" > 1 </ div > < div class = "item" > 2 </ div > < div class = "item" > 3 </ div > < div class = "item" > 4 </ div > < div class = "item" > 5 </ div > < div class = "item" > 6 </ div > < div class = "item" > 7 </ div > < div class = "item" > 8 </ div > < div class = "item" > 9 </ div > </ div...
Post a Comment
Read more

GRID ROW & COULMN

Image
  HTML <! DOCTYPE html > < html lang = "en" > < head >   < meta charset = "UTF-8" >   < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >   < link rel = "stylesheet" href = "hello.css" >   < title > GRID </ title > </ head > < body > < h1 > Grid Playground </ h1 > < div class = "container" > < div class = "item one" > 1 </ div > < div class = "item" > 2 </ div > < div class = "item" > 3 </ div > < div class = "item" > 4 </ div > < div class = "item" > 5 </ div > <!-- <div class="item">6</div> --> </ div > </ body > </ html > CSS .container {     width : 600px ;     height : 300px ;     background-color : rgb ( 244 , 226 , 204 );     display : grid ; ...
Post a Comment
Read more

Grid Template

Image
  HTML <! DOCTYPE html > < html lang = "en" > < head >   < meta charset = "UTF-8" >   < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >   < link rel = "stylesheet" href = "hello.css" >   < title > GRID </ title > </ head > < body > < h1 > Grid Playground </ h1 > < div class = "container" > < div class = "item" > 1 </ div > < div class = "item" > 2 </ div > < div class = "item" > 3 </ div > < div class = "item" > 4 </ div > < div class = "item" > 5 </ div > < div class = "item" > 6 </ div > </ div > </ body > </ html > CSS .container {     width : 600px ;     height : 300px ;     background-color : rgb ( 244 , 226 , 204 );     display : grid ;     /* 1st...
Post a Comment
Read more

CSS Grid & Grid Gap

Image
  Html <! DOCTYPE html > < html lang = "en" > < head >   < meta charset = "UTF-8" >   < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >   < link rel = "stylesheet" href = "hello.css" >   < title > GRID </ title > </ head > < body > < h1 > Grid Playground </ h1 > < div class = "container" > < div class = "item" > 1 </ div > < div class = "item" > 2 </ div > < div class = "item" > 3 </ div > < div class = "item" > 4 </ div > < div class = "item" > 5 </ div > < div class = "item" > 6 </ div > </ div > </ body > </ html > Css .container {     width : 600px ;     height : 300px ;     background-color : rgb ( 244 , 226 , 204 );     display : grid ;     grid-t...
Post a Comment
Read more

FLEX-BOX

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 >   < h1 > Flexbox Playground </ h1 >   < div id = "container" >   < div style = " background-color:#9400d3" > voilet </ div >   < div style = " background-color:#4b0082" > indigo </ div >   < div id = "one" style = " background-color:#0000ff" > blue </ div >   < div style = " background-color:#00ff00" > green </ div >   < div style = " background-color:#ffff00" > yello </ div >   < div style = " background-color:#ff7f00" > orange <...
Post a Comment
Read more