Watch the result of this project >> here
- visually organize content on a page in a hierarchical way
- create a responsive layout using CSS only, while respecting a semantic HTML structure
- Use CSS flexbox to place block-level elements beside each other
- Use CSS grid to place block-level elements beside each other
- Create a responsive layout using CSS only, and respecting a semantic HTML structure
- Do NOT use any CSS frameworks
Create a new repository,and add 3 HTML files called: index.html, flexbox.html and grid.html. index.html will only contain the links to the other two files. Make sure each of the two files uses the following HTML structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Layout - Holy Grail</title>
</head>
<body>
<header>
<!-- Place a title here -->
</header>
<nav>
<!-- Place a list of links here -->
</nav>
<main>
<!-- Place a long text here -->
</main>
<aside>
<!-- Place a small image here -->
</aside>
<footer>
<!-- Place a copyright notice here -->
</footer>
</body>
</html>Create two CSS files called, you guessed it: flexbox.css, grid.css. Make sure each HTML file includes the corresponding CSS file.
Implement the holy-grail layout with flexbox and grid.
Make your work available online via Github pages.
Make it responsive. It should have 1 breakpoint only.