Merge pull request #107 from dm-murphy/feature/grid-exercise-3
Add Holy Grail exercise 3 to Grid exercises
This commit is contained in:
Cody Loyd
GitHub
commit
a3463cb99c
|
|
@ -0,0 +1,36 @@
|
|||
# Holy Grail Mockup with Grid
|
||||
|
||||
Now that you've made your Holy Grail layout responsive, we are going to have some fun making it a bit more complicated and adding some features. You might find this to be a bit more challenging than you expected. You might even be tempted to use Flexbox. But for the sake of this practice assignment, try and see if you can figure out how to recreate this entire mockup using only Grid. Feel free to add in your own dummy content or styling too!
|
||||
|
||||
### Hints
|
||||
- Take the layout one section at a time
|
||||
- You don't need to add or change anything to the HTML, but it will be helpful to look through the parent and child relationships between elements
|
||||
- You only need to add to the current CSS selectors
|
||||
- Just like with Flexbox, you can easily center an item by making it into a grid
|
||||
- Don't worry about the placeholder image element stretching when resizing the browser window. This will be covered in the Responsive lessons
|
||||
|
||||
## Desired Outcome
|
||||
|
||||
|
||||
|
||||
If you use the tools in the Advanced Grid Properties lesson you should be able to get your article cards to automatically fit as the browser window is adjusted:
|
||||
|
||||
|
||||
|
||||
### Self Check
|
||||
- The container element has two columns
|
||||
- The container's second column is 4 times larger than the first column
|
||||
- The container element has a gap of 4px
|
||||
- The header element has two columns
|
||||
- The header element contains another grid that has two columns
|
||||
- The `ul` inside the menu element contains another grid
|
||||
- The `ul` inside the nav element contains another grid
|
||||
- The sidebar element has a gap of 50px
|
||||
- The text elements in the sidebar are centered with grid
|
||||
- The article element should set grid columns using `repeat` along with the `auto-fit` and `minmax` properties
|
||||
- The article columns should have a minimum value of 250px and a maximum of 1fr unit
|
||||
- The article element has a gap of 15px
|
||||
- The card elements inside the article container have a height of 200px
|
||||
- The header and footer span across both columns
|
||||
- The sidebar only spans across the first column
|
||||
- The nav and article elements only span across the second column
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 466 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 366 KiB |
|
|
@ -0,0 +1,102 @@
|
|||
<!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>Holy Grail Mockup</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
|
||||
<div class="header">
|
||||
<div class="logo">Header Logo</div>
|
||||
<div class="menu">
|
||||
<ul>
|
||||
<li>header link one</li>
|
||||
<li>header link two</li>
|
||||
<li>header link three</li>
|
||||
<li>header link four</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar">
|
||||
<div class="photo">
|
||||
<p>placeholder for image</p>
|
||||
</div>
|
||||
<div class="side-content">Box 1
|
||||
</div>
|
||||
<div class="side-content">Box 2
|
||||
</div>
|
||||
<div class="side-content">Box 3
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav">
|
||||
<ul>
|
||||
<li>Latest Articles</li>
|
||||
<li>Most Views</li>
|
||||
<li>Featured</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="article">
|
||||
<div class="card">
|
||||
<p class="title">Article Title</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<p class="title">Article Title</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<p class="title">Article Title</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<p class="title">Article Title</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<p class="title">Article Title</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<p class="title">Article Title</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<p class="title">Article Title</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<p class="title">Article Title</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<p class="title">Article Title</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<p class="title">Article Title</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<p class="title">Article Title</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<p class="title">Article Title</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<p>Copyright © The Odin Project 2021
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,179 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container div {
|
||||
padding: 15px;
|
||||
font-size: 32px;
|
||||
font-family: Helvetica;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: #393f4d;
|
||||
}
|
||||
|
||||
.logo {
|
||||
}
|
||||
|
||||
.menu {
|
||||
}
|
||||
|
||||
.menu ul {
|
||||
}
|
||||
|
||||
.menu ul,
|
||||
.menu li {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background-color: #FF7755;
|
||||
}
|
||||
|
||||
.sidebar .photo {
|
||||
background-color: white;
|
||||
color: black;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.photo {
|
||||
}
|
||||
|
||||
.sidebar .side-content {
|
||||
background-color: white;
|
||||
color: black;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.nav {
|
||||
background-color: #FF7755;
|
||||
}
|
||||
|
||||
.nav ul {
|
||||
}
|
||||
|
||||
.nav ul li {
|
||||
font-size: 16px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.article {
|
||||
background-color: #bccbde;
|
||||
}
|
||||
|
||||
.article p {
|
||||
font-size: 18px;
|
||||
font-family: sans-serif;
|
||||
color: white;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.article .card {
|
||||
background-color: #FFFFFF;
|
||||
color: black;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card p {
|
||||
color: black;
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.card .title {
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-color: #393f4d;
|
||||
}
|
||||
|
||||
.footer p {
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* SOLUTION */
|
||||
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 4fr;
|
||||
gap: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header {
|
||||
grid-column: 1 / 3;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
}
|
||||
|
||||
.logo {
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.menu {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.menu ul {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
.menu ul,
|
||||
.menu li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
grid-row: 2 / 4;
|
||||
display: grid;
|
||||
gap: 50px;
|
||||
}
|
||||
|
||||
.photo {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sidebar .side-content {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav ul {
|
||||
list-style-type: none;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
.article {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.article .card {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.card p {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<!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>Holy Grail Mockup</title>
|
||||
<link rel="stylesheet" href="solution.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
|
||||
<div class="header">
|
||||
<div class="logo">Header Logo</div>
|
||||
<div class="menu">
|
||||
<ul>
|
||||
<li>header link one</li>
|
||||
<li>header link two</li>
|
||||
<li>header link three</li>
|
||||
<li>header link four</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar">
|
||||
<div class="photo">
|
||||
<p>placeholder for image</p>
|
||||
</div>
|
||||
<div class="side-content">Box 1
|
||||
</div>
|
||||
<div class="side-content">Box 2
|
||||
</div>
|
||||
<div class="side-content">Box 3
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav">
|
||||
<ul>
|
||||
<li>Latest Articles</li>
|
||||
<li>Most Views</li>
|
||||
<li>Featured</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="article">
|
||||
<div class="card">
|
||||
<p class="title">Article Title</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<p class="title">Article Title</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<p class="title">Article Title</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<p class="title">Article Title</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<p class="title">Article Title</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<p class="title">Article Title</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<p class="title">Article Title</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<p class="title">Article Title</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<p class="title">Article Title</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<p class="title">Article Title</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<p class="title">Article Title</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<p class="title">Article Title</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<p>Copyright © The Odin Project 2021
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container div {
|
||||
padding: 15px;
|
||||
font-size: 32px;
|
||||
font-family: Helvetica;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: #393f4d;
|
||||
}
|
||||
|
||||
.logo {
|
||||
}
|
||||
|
||||
.menu {
|
||||
}
|
||||
|
||||
.menu ul {
|
||||
}
|
||||
|
||||
.menu ul,
|
||||
.menu li {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background-color: #FF7755;
|
||||
}
|
||||
|
||||
.sidebar .photo {
|
||||
background-color: white;
|
||||
color: black;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.photo {
|
||||
}
|
||||
|
||||
.sidebar .side-content {
|
||||
background-color: white;
|
||||
color: black;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.nav {
|
||||
background-color: #FF7755;
|
||||
}
|
||||
|
||||
.nav ul {
|
||||
}
|
||||
|
||||
.nav ul li {
|
||||
font-size: 16px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.article {
|
||||
background-color: #bccbde;
|
||||
}
|
||||
|
||||
.article p {
|
||||
font-size: 18px;
|
||||
font-family: sans-serif;
|
||||
color: white;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.article .card {
|
||||
background-color: #FFFFFF;
|
||||
color: black;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card p {
|
||||
color: black;
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.card .title {
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-color: #393f4d;
|
||||
}
|
||||
|
||||
.footer p {
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
}
|
||||
Loading…
Reference in New Issue