<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Give your project a title so that it will appear in relevant web searches</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script type="text/javascript" src="myscripts.js"></script>
</head>
<body>
<header>
<h1></h1>
<nav></nav>
</header>
<div id="hero-image">
<h2></h2>
<a></a>
</div>
<div id="features">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="primary-content">
<article></article>
</div>
<div id="secondary-content">
<article></article>
<article></article>
</div>
<div id="cta">
</div>
<footer>
<div id="footer-info"></div>
<div id="footer-links">
<ul></ul>
<ul></ul>
<ul></ul>
</div>
</footer>
</body>
</html>
A sample CSS page
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Style the header */
.header {
grid-area: header;
background-color: #f1f1f1;
padding: 30px;
text-align: center;
font-size: 35px;
}
/* The grid container */
.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'left left middle middle right right'
'footer footer footer footer footer footer';
/* grid-column-gap: 10px; - if you want gap between the columns */
}
.left,
.middle,
.right {
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}
/* Style the left column */
.left {
grid-area: left;
}
/* Style the middle column */
.middle {
grid-area: middle;
}
/* Style the right column */
.right {
grid-area: right;
}
/* Style the footer */
.footer {
grid-area: footer;
background-color: #f1f1f1;
padding: 10px;
text-align: center;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
.grid-container {
grid-template-areas:
'header header header header header header'
'left left left left left left'
'middle middle middle middle middle middle'
'right right right right right right'
'footer footer footer footer footer footer';
}
}