Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
Week 9 Files
- Loading branch information
Showing
3 changed files
with
273 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,213 @@ | ||
| /* | ||
| Color Palette | ||
| #FB8500 | ||
| #FFB703 | ||
| #023047 | ||
| #219EBC | ||
| */ | ||
| .holy-grail{ | ||
| background-color: #219EBC; | ||
| } | ||
| .header { | ||
| color: #023047; | ||
| grid-area: header; | ||
| background-color: #FB8500; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
| .footer { | ||
| color: #023047; | ||
| grid-area: footer; | ||
| background-color: #FB8500; | ||
| } | ||
| .main { | ||
| color: white; | ||
| grid-area: main; | ||
| background-color: #023047; | ||
| } | ||
| .left { | ||
| color: #023047; | ||
| grid-area: navigation; | ||
| background-color: #FFB703; | ||
| } | ||
| .right { | ||
| color: #023047; | ||
| grid-area: ads; | ||
| background-color: #FFB703; | ||
| } | ||
| .ad-2 { | ||
| color: #023047; | ||
| grid-area: ad-2; | ||
| background-color: #FFB703; | ||
| } | ||
|
|
||
| h1 { | ||
| margin: 0; | ||
| } | ||
| h2 { | ||
| margin: 0; | ||
| } | ||
| h3 { | ||
| margin: 0; | ||
| } | ||
| h4 { | ||
| margin: 0; | ||
| } | ||
| p { | ||
| margin: 0; | ||
| padding-top: 10px; | ||
| } | ||
| ul { | ||
| padding: 0; | ||
| margin: 0; | ||
| } | ||
| li { | ||
| list-style: none; | ||
| padding-top: 10px; | ||
| } | ||
| @media (min-width: 320px) { | ||
| .holy-grail { | ||
| grid-template-areas: "header" | ||
| "navigation" | ||
| "main" | ||
| "ads" | ||
| "ad-2" | ||
| "footer"; | ||
| grid-template-columns: 100%; | ||
| grid-template-rows: 75px auto 1fr auto auto 75px; | ||
| margin: 0; | ||
| } | ||
| .header { | ||
| padding: 10px; | ||
| } | ||
| .main { | ||
| padding: 10px; | ||
| margin-left: 5px; | ||
| margin-right: 5px; | ||
| margin-top: 10px; | ||
| } | ||
| .left { | ||
| display: flex; | ||
| justify-content: center; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| padding: 10px; | ||
| margin-left: 5px; | ||
| margin-right: 5px; | ||
| margin-top: 10px; | ||
| } | ||
| .right { | ||
| padding: 10px; | ||
| margin-left: 5px; | ||
| margin-right: 5px; | ||
| margin-top: 10px; | ||
| } | ||
| .ad-2 { | ||
| padding: 10px; | ||
| margin-left: 5px; | ||
| margin-right: 5px; | ||
| margin-top: 10px; | ||
| } | ||
| .footer { | ||
| display: flex; | ||
| justify-content: center; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| padding: 10px; | ||
| margin-top: 10px; | ||
| } | ||
| } | ||
|
|
||
| @media (min-width: 768px) { | ||
| .holy-grail { | ||
| display: grid; | ||
| grid-template-areas: "header header header" | ||
| "navigation main ads" | ||
| "navigation main ad-2" | ||
| "footer footer footer"; | ||
| grid-template-columns: 1fr 3fr 1fr; | ||
| grid-template-rows: 75px 1fr 1fr 75px; | ||
| min-height: 100vh; | ||
| margin: 0; | ||
| gap: 10px; | ||
| } | ||
| .main { | ||
| padding: 10px; | ||
| } | ||
| .left { | ||
| display: flex; | ||
| justify-content: flex-start; | ||
| flex-direction: column; | ||
| align-items: flex-start; | ||
| margin-left: 10px; | ||
| padding: 10px; | ||
| } | ||
| .right { | ||
| margin-right: 10px; | ||
| padding: 10px; | ||
| } | ||
| .ad-2 { | ||
| margin-right: 10px; | ||
| padding: 10px; | ||
| } | ||
| } | ||
|
|
||
| @media (min-width: 1024px) { | ||
| .holy-grail { | ||
| display: grid; | ||
| grid-template-areas: "header header header" | ||
| "navigation main ads" | ||
| "navigation main ad-2" | ||
| "footer footer footer"; | ||
| grid-template-columns: 1fr 3fr 1fr; | ||
| grid-template-rows: 75px 1fr 1fr 75px; | ||
| min-height: 100vh; | ||
| margin: 0; | ||
| gap: 20px; | ||
| } | ||
| .main { | ||
| padding: 15px; | ||
| } | ||
| .left { | ||
| padding: 15px; | ||
| margin-left: 20px; | ||
| } | ||
| .right { | ||
| padding: 15px; | ||
| margin-right: 20px; | ||
| } | ||
| .ad-2 { | ||
| padding: 15px; | ||
| margin-right: 20px; | ||
| } | ||
| } | ||
|
|
||
| @media (min-width: 1440px) { | ||
| .holy-grail { | ||
| display: grid; | ||
| grid-template-areas: "header header header" | ||
| "navigation main ads" | ||
| "navigation main ad-2" | ||
| "footer footer footer"; | ||
| grid-template-columns: 1fr 3fr 1fr; | ||
| grid-template-rows: 75px 1fr 1fr 75px; | ||
| min-height: 100vh; | ||
| margin: 0; | ||
| } | ||
| .main { | ||
| padding: 20px; | ||
| } | ||
| .left { | ||
| padding: 20px; | ||
| margin-left: 20px; | ||
| } | ||
| .right { | ||
| padding: 20px; | ||
| margin-right: 20px; | ||
| } | ||
| .ad-2 { | ||
| padding: 20px; | ||
| margin-right: 20px; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <link rel="stylesheet" href="css/style.css" /> | ||
| <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>Document</title> | ||
| </head> | ||
| <body class="holy-grail"> | ||
| <header class="header"><h1>Holy Grail Practice</h1></header> | ||
| <aside class="left"> | ||
| <h3>Menu</h3> | ||
| <ul> | ||
| <li>Item 1</li> | ||
| <li>Item 2</li> | ||
| <li>Item 3</li> | ||
| <li>Item 4</li> | ||
| <li>Item 5</li> | ||
| </ul> | ||
| </aside> | ||
| <main class="main"> | ||
| <h2>Main Content</h2> | ||
| <p> | ||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima ratione | ||
| adipisci tempora obcaecati eveniet quidem at doloremque, corporis unde | ||
| id? Omnis delectus ipsam aperiam nostrum deserunt quae voluptate qui | ||
| molestias? | ||
| </p> | ||
| <p> | ||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor explicabo | ||
| modi cupiditate velit nostrum id voluptates, eum officia exercitationem | ||
| hic tempora sunt fuga quam labore ea neque dolore repellat perspiciatis. | ||
| </p> | ||
| <p> | ||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus optio | ||
| saepe aperiam libero pariatur eligendi facilis! Necessitatibus, facilis | ||
| dolorum quae consequatur in excepturi. Inventore consectetur dignissimos | ||
| odit odio veniam magnam! | ||
| </p> | ||
| </main> | ||
| <aside class="right"> | ||
| <h4>Ad</h4> | ||
| <p> | ||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam modi | ||
| atque quis quia perferendis maxime. | ||
| </p> | ||
| </aside> | ||
| <aside class="ad-2"> | ||
| <h4>Ad</h4> | ||
| <p> | ||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam modi | ||
| atque quis quia perferendis maxime. | ||
| </p> | ||
| </aside> | ||
| <footer class="footer"> | ||
| <h4>Footer</h4> | ||
| </footer> | ||
| </body> | ||
| </html> |
Empty file.