tbennett · November 1, 2022 08:23
diff --git a/css_grid_example.html b/css_grid_example.html

 <!doctype>
 <html lang="en">
 <head>
    <meta charset="utf-8">
    <title>CSS Grid and Flexbox Demo</title>
 	<meta name="Author" content="tb"/>
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<style>
        /* These styles are the default for mobile and desktop */
        *, *:before, *:after {
            box-sizing: border-box;
        }

        html {
            margin:0;
            padding:0;
            background: #333;
            height:100vh;
        }

        body {
            font-family: "Century Gothic", arial, sans-serif;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-areas: 
                "header header"
                "main main" 
                "aside aside"
                "footer footer"
                "nav nav";
                padding:0 0 5rem;
                margin:0 auto;
                height:100%;
            }

        .logo {
            width:100px; 
            height:100px; 
            display:block;
            background:#d90;
            border-radius:50px;
            margin:auto;
        }
        
        header h1 {
            text-shadow: 0px 0px 4px #fff,0px 0px 2px #fff;
        }

        header {
            grid-area: header;
            display:flex;
            align-items:center;
            flex-direction: column;
            background:#abc url(http://unsplash.it/400/250) no-repeat;
            background-size:cover;
            padding:2rem;
        }

        nav {
            grid-area: nav;
            display:flex;
            place-items:center;
            background:#123;
            position:fixed;
            bottom:0;
            padding:1rem;
            width:100%;
            z-index: 2; /* stacks it above the rest of page */
        }
        nav>ul {
            display: flex; 
            justify-content: space-around; 
            list-style: none; 
            margin:0;
            padding:0;
            width:100%;
        }
        nav>li {
            margin:1rem;
        }
        nav a {
            color: white;
        }
        main {
            grid-area: main;
            background:#cde;
            padding:2rem;
        }
        aside {
            grid-area: aside;
            display:flex;
            justify-content:space-around;
            background:#890;
            padding:1rem;
        }
        .ad {
            outline:2px solid;
            width: 5rem;
            height:5rem;
        }
        footer {
            grid-area: footer;
            background:#345;
            padding:1rem;
            color:white;
        }

        
         /* These styles are overrides for widescreens */
        @media screen and  (min-width:50rem) {
            body {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                grid-template-areas: 
                    "header header header header"
                    "nav nav nav nav"
                    "main main main aside"
                    "footer footer footer footer";
                padding:0;
            }

            body,header, nav {
                max-width:80rem;
            }
            
            nav {
                position:static;
                bottom:auto;
            }
            
            .logo {
                margin:.5rem;
        }

            header {
                align-items:start;
                flex-direction: row;
                background:#abc url(http://unsplash.it/810/150) no-repeat;
                background-size: cover;
            }
            header h1 {
                font-size:3rem;
            }
            aside {
                flex-direction: column;
                align-items: center;
            }
        }
    </style>
 </head>
 <body>

 <header>
    <span class="logo"></span>
    <h1>My Demo Website</h1>
 </header>
 <nav>
    <ul>
        <li><a href="">link 1</a></li>
        <li><a href="">link 2</a></li>
        <li><a href="">link 3</a></li>
        <li><a href="">link 4</a></li>
    </ul>
 </nav>

 <main>
    <article>
        <h2>Section 1</h2>
        <h3>The Map</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, voluptates deserunt temporibus enim, earum mollitia aliquam consequuntur odit, autem facere ex ipsam dicta, quaerat sint. Quo ad, eius doloremque eligendi?</p>
        <p>Esse quisquam laudantium unde placeat dolorem, officia sunt, labore architecto, consequuntur assumenda magnam voluptatem. Beatae quidem similique aut iste. Recusandae quis consequatur quae nisi ea nemo, architecto, obcaecati sit autem.</p>
        <p>Accusantium eum ea minus ullam dolorem saepe nam, consequatur dolores, alias voluptas veritatis perspiciatis, sunt odit. Quo nobis voluptatum ullam necessitatibus eum officia! Accusantium expedita magni, veritatis in neque dolorem!</p>
    </article>    
 </main>
 <aside>
    <div class="ad">ad 1</div>
    <div class="ad">ad 2</div>
    <div class="ad">ad 3</div>
 </aside>
 <footer>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo accusamus quibusdam tenetur dolores distinctio autem dignissimos sint quis! Eligendi facere rerum quod laboriosam ex, adipisci expedita eum at. Corporis, earum.</p>
 </footer>
 </body>
 </html>

	<!doctype>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>CSS Grid and Flexbox Demo</title>
	<meta name="Author" content="tb"/>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	/* These styles are the default for mobile and desktop */
	, :before, *:after {
	box-sizing: border-box;
	}

	html {
	margin:0;
	padding:0;
	background: #333;
	height:100vh;
	}

	body {
	font-family: "Century Gothic", arial, sans-serif;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
	"header header"
	"main main"
	"aside aside"
	"footer footer"
	"nav nav";
	padding:0 0 5rem;
	margin:0 auto;
	height:100%;
	}

	.logo {
	width:100px;
	height:100px;
	display:block;
	background:#d90;
	border-radius:50px;
	margin:auto;
	}

	header h1 {
	text-shadow: 0px 0px 4px #fff,0px 0px 2px #fff;
	}

	header {
	grid-area: header;
	display:flex;
	align-items:center;
	flex-direction: column;
	background:#abc url(http://unsplash.it/400/250) no-repeat;
	background-size:cover;
	padding:2rem;
	}

	nav {
	grid-area: nav;
	display:flex;
	place-items:center;
	background:#123;
	position:fixed;
	bottom:0;
	padding:1rem;
	width:100%;
	z-index: 2; /* stacks it above the rest of page */
	}
	nav>ul {
	display: flex;
	justify-content: space-around;
	list-style: none;
	margin:0;
	padding:0;
	width:100%;
	}
	nav>li {
	margin:1rem;
	}
	nav a {
	color: white;
	}
	main {
	grid-area: main;
	background:#cde;
	padding:2rem;
	}
	aside {
	grid-area: aside;
	display:flex;
	justify-content:space-around;
	background:#890;
	padding:1rem;
	}
	.ad {
	outline:2px solid;
	width: 5rem;
	height:5rem;
	}
	footer {
	grid-area: footer;
	background:#345;
	padding:1rem;
	color:white;
	}


	/* These styles are overrides for widescreens */
	@media screen and (min-width:50rem) {
	body {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-areas:
	"header header header header"
	"nav nav nav nav"
	"main main main aside"
	"footer footer footer footer";
	padding:0;
	}

	body,header, nav {
	max-width:80rem;
	}

	nav {
	position:static;
	bottom:auto;
	}

	.logo {
	margin:.5rem;
	}

	header {
	align-items:start;
	flex-direction: row;
	background:#abc url(http://unsplash.it/810/150) no-repeat;
	background-size: cover;
	}
	header h1 {
	font-size:3rem;
	}
	aside {
	flex-direction: column;
	align-items: center;
	}
	}
	</style>
	</head>
	<body>

	<header>
	<span class="logo"></span>
	<h1>My Demo Website</h1>
	</header>
	<nav>
	<ul>
	<li><a href="">link 1</a></li>
	<li><a href="">link 2</a></li>
	<li><a href="">link 3</a></li>
	<li><a href="">link 4</a></li>
	</ul>
	</nav>

	<main>
	<article>
	<h2>Section 1</h2>
	<h3>The Map</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, voluptates deserunt temporibus enim, earum mollitia aliquam consequuntur odit, autem facere ex ipsam dicta, quaerat sint. Quo ad, eius doloremque eligendi?</p>
	<p>Esse quisquam laudantium unde placeat dolorem, officia sunt, labore architecto, consequuntur assumenda magnam voluptatem. Beatae quidem similique aut iste. Recusandae quis consequatur quae nisi ea nemo, architecto, obcaecati sit autem.</p>
	<p>Accusantium eum ea minus ullam dolorem saepe nam, consequatur dolores, alias voluptas veritatis perspiciatis, sunt odit. Quo nobis voluptatum ullam necessitatibus eum officia! Accusantium expedita magni, veritatis in neque dolorem!</p>
	</article>
	</main>
	<aside>
	<div class="ad">ad 1</div>
	<div class="ad">ad 2</div>
	<div class="ad">ad 3</div>
	</aside>
	<footer>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo accusamus quibusdam tenetur dolores distinctio autem dignissimos sint quis! Eligendi facere rerum quod laboriosam ex, adipisci expedita eum at. Corporis, earum.</p>
	</footer>
	</body>
	</html>