-

+ 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>

		<div id="middle"><!-- extra markup -->

			<main>Main</main>

			<div id="sidebar"><!-- extra markup -->

				<aside>Aside</aside>

				<nav>Nav</nav>

			</div>

		</div>

		<footer>Footer</footer>

	</div>

</body>

Comments

Post a Comment

Popular posts from this blog

Tables-Page2

-
                                    TABLES-Page 2 <!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> HTML Tables </title> </head> <body> TABLE # 1     <h2> BASIC TABLE STRUCTURE </h2>     <table border = "3" width= "40%" >         <tr>             <td> cell1 </td>             <td> cell2 </td>             <td> cell3 </td>         </tr>         <tr>           ...
Read more
-
Image
HTML AND A LITTLE CSS  APPLIED       <!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> Table </title>         </head> <body>     <table border = "2" width= "90%" >         <!-- 10 rows and 8 columns -->         <caption> Overall Performance of the Team </caption>         <thead class= "merge" >   <!-- 1st ROW -->       <tr bgcolor = "#A9A9A9" >                 <th rowspan= "2" > Equips </th>             <th colspan= "6" > Table of Performance </t...
Read more

Html Tables

-
Image
  <! 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 > HTML TABLES </ title > </ head > < body >     < h1 > TABLE 1 </ h1 >     < table border = "4" width = "35%" >             < thead >                 <!-- 1st Row Spanned-->               < tr >                 < th colspan = "4" > Purchased Equipment (June,2006) </ th >               </ tr >                       <!-- 2nd Row Spanned...
Read more