Posts

Create Website Layout with CSS Flexbox

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0, shrink-to-fit=no" >     < meta http-equiv = "X-UA-Compatible" content = "ie=edge" >     < title > Website Layout Flexbox CSS </ title >     < link rel = "stylesheet"         href = "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css"         integrity = "sha384-NvKbDTEnL+A8F/AA5Tc5kmMLSJHUO868P+lDtTpJIeQdGYaUIuLr4lVGOEA1OcMy" crossorigin = "anonymous" >     < link rel = "stylesheet" href = "css/Create_Website_Layout_Flexbox_CSS.css" > </ head > < body >     < header >         < nav id = "menu" >             < ul >     ...
Post a Comment
Read more

Align Form Elements tutorial in Flexbox CSS

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0, shrink-to-fit=no" >     < meta http-equiv = "X-UA-Compatible" content = "ie=edge" >     < title > Align Form Elements Flexbox CSS </ title >     < link rel = "stylesheet" href = "css/Align_Form_Elements_Flexbox_CSS.css" > </ head > < body >     < h1 > Hello World : Align Form with Flexbox </ h1 >     < form action = "" >         < ul id = "wrapper" >             < li >                 < label for = "" > Name </ label >                 < input type = "text" >             <...
Post a Comment
Read more

Nested Flex tutorial in Flexbox CSS

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0, shrink-to-fit=no" >     < meta http-equiv = "X-UA-Compatible" content = "ie=edge" >     < title > Nested Flex Flexbox CSS </ title >     < link rel = "stylesheet" href = "css/Nested_Flex_Flexbox_CSS.css" > </ head > < body >     < h1 > Hello World : Nested Flex Flexbox CSS </ h1 >     < div class = "container" >         < div class = "items item1" > One </ div >         < div class = "items item2" >             < div class = "subitem subitem1" > A </ div >             < div class = "subitem subitem2" > B </ div >   ...
Post a Comment
Read more

Margin Auto tutorial in Flexbox CSS

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0, shrink-to-fit=no" >     < meta http-equiv = "X-UA-Compatible" content = "ie=edge" >     < title > Margin Auto Flexbox CSS </ title >     < link rel = "stylesheet" href = "css/Margin_Auto_Flexbox_CSS.css" > </ head > < body >     < h1 > Margin Auto Flexbox CSS </ h1 >     < div class = "container" >         < div class = "items item1" > One </ div >         < div class = "items item2" > Two </ div >         < div class = "items item3" > Three </ div >         < div class = "items item4" > Four </ div >     </ div > <...
Post a Comment
Read more

Flex-Shrink tutorial in Flexbox CSS

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0, shrink-to-fit=no" >     < meta http-equiv = "X-UA-Compatible" content = "ie=edge" >     < title > Flex Shrink Flexbox CSS </ title >     < link rel = "stylesheet" href = "css/Flex_Shrink_Flexbox_CSS.css" > </ head > < body >     < h1 > Hello World : CSS Flex-Shrink </ h1 >     < div class = "container" >         < div class = "items item1" > One </ div >         < div class = "items item2" > Two </ div >         < div class = "items item3" > Three </ div >         < div class = "items item4" > Four </ div >     </ div ...
Post a Comment
Read more