tod
/
odin-default-css-exercises
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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 2022-01-13 09:49:20 -06:00 committed by GitHub
parent faa47dac62 5dbb8ff5a4
commit a3463cb99c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 524 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
grid/03-grid-layout-3/README.md Normal file
View File

@ -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
![desired outcome](./desired-outcome.png)
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:
![desired outcome stretched](./desired-outcome-stretched.png)
### 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

BIN
grid/03-grid-layout-3/desired-outcome-stretched.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 466 KiB

BIN
grid/03-grid-layout-3/desired-outcome.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 366 KiB

102
grid/03-grid-layout-3/index.html Normal file
View File

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

179
grid/03-grid-layout-3/solution/solution.css Normal file
View File

@ -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;
}

102
grid/03-grid-layout-3/solution/solution.html Normal file
View File

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

105
grid/03-grid-layout-3/style.css Normal file
View File

@ -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;
}