Posts

Showing posts from May, 2022
-
Image
  https://www.otallu.com/tutorials/create-basic-website-layout-with-html-css/   !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> Demo Layout </title>     <link rel= "stylesheet" type= "text/css" href= "/LayOuts/DemoLayout.css" > </head> <body>     <div class= "wrap" >         <div class= "header" >             HEADER         </div>         <div class= "content" >            CONTENT         </div>         <div class= "sidebar" >             ...
Post a Comment
Read more
-
+ GitHub Repo - https://github.com/iamshaunjp/css-gri... https://github.com/iamshaunjp/css-grid-playlist/commit/54a3fcc39d6bd4e9a77d797ee5406a64304b5b49   <!DOCTYPE html> <html> <head> <title>Using Flexbox</title> <style> body{ color: #fff; font-family: 'Nunito Semibold'; text-align: center; line-height: 3em; } #content{ max-width: 960px; margin: 0 auto; } #middle{ display: flex; } #sidebar{ flex-grow: 1; } header{ background: #3bbced; height: 50px; } main{ background: #e82b69; flex-grow: 2; } aside{ background: #fac24a; flex-grow: 1; height: 200px; } nav{ background: #8ae348; flex-grow: 1; height: 200px; } footer{ background: #a56dda; height: 100px; } #middle:after{ content: ''; display: block; clear: both; } </style> </head> <body> <div id="content"> <header>Header</header...
Post a Comment
Read more