├── 10. Checkerboard-layout
    ├── start.css
    ├── finished.css
    ├── start.html
    └── finished.html
├── 2. Centered-Content
    ├── start.css
    ├── finished.css
    ├── start.html
    └── finished.html
├── 3. Reordering-Content
    ├── start.css
    ├── start.js
    ├── finished.js
    ├── finished.css
    ├── start.html
    └── finished.html
├── 4. Responsive-Navbar
    ├── start.css
    ├── finished.css
    ├── start.html
    └── finished.html
├── 5. Asymetric-Dashboard
    ├── start.css
    ├── finished.css
    ├── start.html
    └── finished.html
├── 1. responsive-3-column-grid
    ├── start.css
    ├── finished.css
    ├── start.html
    └── finished.html
├── 6. Asymetric-Gallery-Layout
    ├── start.css
    ├── finished.css
    ├── start.html
    └── finished.html
├── 7. Responsive-Card-Gallery
    ├── start.css
    ├── start.js
    ├── start.html
    ├── finished.html
    ├── finished.css
    └── finished.js
├── 8. Responsive-2-column-with-footer
    ├── start.css
    ├── finished.css
    ├── start.html
    └── finished.html
├── 9. Responsive-2-column-with-footer (grid areas)
    ├── start.css
    ├── finished.css
    ├── start.html
    └── finished.html
├── media
    ├── 1.png
    ├── 10.png
    ├── 2.png
    ├── 3.png
    ├── 4.png
    ├── 5.png
    ├── 6.png
    ├── 7.png
    ├── 8.png
    └── 9.png
├── global.css
└── ReadMe.md


/10. Checkerboard-layout/start.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/2. Centered-Content/start.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/3. Reordering-Content/start.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/3. Reordering-Content/start.js:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/4. Responsive-Navbar/start.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/5. Asymetric-Dashboard/start.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/1. responsive-3-column-grid/start.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/6. Asymetric-Gallery-Layout/start.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/7. Responsive-Card-Gallery/start.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/7. Responsive-Card-Gallery/start.js:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/8. Responsive-2-column-with-footer/start.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/9. Responsive-2-column-with-footer (grid areas)/start.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/media/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamesqquick/Getting-Started-with-CSS-Grid-by-Example/HEAD/media/1.png


--------------------------------------------------------------------------------
/media/10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamesqquick/Getting-Started-with-CSS-Grid-by-Example/HEAD/media/10.png


--------------------------------------------------------------------------------
/media/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamesqquick/Getting-Started-with-CSS-Grid-by-Example/HEAD/media/2.png


--------------------------------------------------------------------------------
/media/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamesqquick/Getting-Started-with-CSS-Grid-by-Example/HEAD/media/3.png


--------------------------------------------------------------------------------
/media/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamesqquick/Getting-Started-with-CSS-Grid-by-Example/HEAD/media/4.png


--------------------------------------------------------------------------------
/media/5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamesqquick/Getting-Started-with-CSS-Grid-by-Example/HEAD/media/5.png


--------------------------------------------------------------------------------
/media/6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamesqquick/Getting-Started-with-CSS-Grid-by-Example/HEAD/media/6.png


--------------------------------------------------------------------------------
/media/7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamesqquick/Getting-Started-with-CSS-Grid-by-Example/HEAD/media/7.png


--------------------------------------------------------------------------------
/media/8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamesqquick/Getting-Started-with-CSS-Grid-by-Example/HEAD/media/8.png


--------------------------------------------------------------------------------
/media/9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamesqquick/Getting-Started-with-CSS-Grid-by-Example/HEAD/media/9.png


--------------------------------------------------------------------------------
/2. Centered-Content/finished.css:
--------------------------------------------------------------------------------
 1 | .grid-container {
 2 |     display: grid;
 3 |     height: 40vh;
 4 |     width: 60vw;
 5 |     margin: 0 auto;
 6 |     box-shadow: 1px 1px 4px #ccc;
 7 |     border: 1px solid #ccc;
 8 |     justify-items: center;
 9 |     align-items: center;
10 |     border-radius: 5px;
11 |     padding: 40px;
12 | }
13 | 


--------------------------------------------------------------------------------
/3. Reordering-Content/finished.js:
--------------------------------------------------------------------------------
 1 | const shuffleBtn = document.getElementById('shuffleBtn');
 2 | const items = [...document.querySelectorAll('.grid-item')];
 3 | 
 4 | shuffleBtn.addEventListener('click', () => {
 5 |     items.forEach((item) => {
 6 |         const random = Math.floor(Math.random() * 4);
 7 |         item.setAttribute('style', `order: ${random};`);
 8 |     });
 9 | });
10 | 


--------------------------------------------------------------------------------
/8. Responsive-2-column-with-footer/finished.css:
--------------------------------------------------------------------------------
 1 | .grid-container {
 2 |     display: grid;
 3 |     grid-gap: 20px;
 4 | }
 5 | 
 6 | @media (min-width: 786px) {
 7 |     .grid-container {
 8 |         grid-template-columns: repeat(3, 1fr);
 9 |     }
10 | 
11 |     .header {
12 |         grid-column: span 3;
13 |     }
14 | 
15 |     .main {
16 |         grid-column: span 2;
17 |     }
18 | 
19 |     .footer {
20 |         grid-column: span 3;
21 |     }
22 | }
23 | 


--------------------------------------------------------------------------------
/10. Checkerboard-layout/finished.css:
--------------------------------------------------------------------------------
 1 | .row {
 2 |     display: grid;
 3 |     grid-template-columns: repeat(2, 1fr);
 4 |     align-items: stretch;
 5 |     color: white;
 6 | }
 7 | 
 8 | .row__image {
 9 |     width: 100%;
10 |     object-fit: cover;
11 |     height: 400px;
12 | }
13 | 
14 | .row__details {
15 |     padding: 20px;
16 | }
17 | 
18 | @media (max-width: 786px) {
19 |     .row {
20 |         grid-template-columns: 1fr;
21 |     }
22 | 
23 |     .row__image {
24 |         grid-row: -1;
25 |     }
26 | }
27 | 


--------------------------------------------------------------------------------
/3. Reordering-Content/finished.css:
--------------------------------------------------------------------------------
 1 | .grid-container {
 2 |     display: grid;
 3 |     grid-gap: 20px;
 4 | }
 5 | 
 6 | .btn {
 7 |     padding: 15px 20px;
 8 |     border-radius: 5px;
 9 |     margin-bottom: 20px;
10 |     font-size: 18px;
11 |     text-transform: uppercase;
12 |     cursor: pointer;
13 | }
14 | 
15 | @media (max-width: 786px) {
16 |     .item1 {
17 |         order: 3;
18 |     }
19 |     .item2 {
20 |         order: 4;
21 |     }
22 |     .item3 {
23 |         order: 1;
24 |     }
25 |     .item4 {
26 |         order: 2;
27 |     }
28 | }
29 | 


--------------------------------------------------------------------------------
/1. responsive-3-column-grid/finished.css:
--------------------------------------------------------------------------------
 1 | .grid-container {
 2 |     display: grid;
 3 |     grid-template-columns: 200px 1fr 200px;
 4 |     grid-gap: 20px;
 5 | }
 6 | 
 7 | @media (max-width: 1000px) {
 8 |     .grid-container {
 9 |         /* grid-template-columns: 1fr; */
10 |         grid-template-columns: 200px 1fr;
11 |     }
12 | 
13 |     .item3 {
14 |         grid-column: span 2;
15 |     }
16 | }
17 | 
18 | @media (max-width: 786px) {
19 |     .grid-container {
20 |         /* grid-template-columns: 1fr; */
21 |         grid-template-columns: 1fr;
22 |     }
23 |     .item3 {
24 |         grid-column: span 1;
25 |     }
26 | }
27 | 


--------------------------------------------------------------------------------
/4. Responsive-Navbar/finished.css:
--------------------------------------------------------------------------------
 1 | .nav {
 2 |     display: grid;
 3 |     grid-template-columns: 1fr auto;
 4 |     align-items: center;
 5 |     padding: 20px;
 6 |     color: white;
 7 | }
 8 | 
 9 | .nav__items {
10 |     display: grid;
11 |     grid-gap: 20px;
12 |     grid-auto-flow: column;
13 |     list-style: none;
14 |     padding-inline-start: 0;
15 | }
16 | 
17 | .nav__brand {
18 |     font-size: 24px;
19 |     font-weight: 700;
20 | }
21 | 
22 | @media (max-width: 1000px) {
23 | }
24 | 
25 | @media (max-width: 786px) {
26 |     .nav {
27 |         grid-template-columns: 1fr;
28 |         justify-items: center;
29 |     }
30 | }
31 | 


--------------------------------------------------------------------------------
/9. Responsive-2-column-with-footer (grid areas)/finished.css:
--------------------------------------------------------------------------------
 1 | .grid-container {
 2 |     display: grid;
 3 |     grid-gap: 20px;
 4 |     grid-template-areas:
 5 |         'header'
 6 |         'sidebar'
 7 |         'main'
 8 |         'footer';
 9 | }
10 | 
11 | .header {
12 |     grid-area: header;
13 | }
14 | 
15 | .main {
16 |     grid-area: main;
17 | }
18 | 
19 | .sidebar {
20 |     grid-area: sidebar;
21 | }
22 | 
23 | .footer {
24 |     grid-area: footer;
25 | }
26 | 
27 | @media (min-width: 786px) {
28 |     .grid-container {
29 |         grid-template-areas:
30 |             'header header header'
31 |             'sidebar main main'
32 |             'footer footer footer';
33 |     }
34 | }
35 | 


--------------------------------------------------------------------------------
/7. Responsive-Card-Gallery/start.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |         <title>Document</title>
 8 |         <link rel="stylesheet" href="start.css" />
 9 |         <link rel="stylesheet" href="../global.css" />
10 |     </head>
11 |     <body>
12 |         <div class="container">
13 |             <h1 class="title">&#x2728;Responsive (HP) Card Gallery &#x2728;</h1>
14 |             <ul id="charactersList" class="gallery"></ul>
15 |         </div>
16 |     </body>
17 |     <script src="start.js"></script>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/2. Centered-Content/start.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |         <title>Document</title>
 8 |         <link rel="stylesheet" href="start.css" />
 9 |         <link rel="stylesheet" href="../global.css" />
10 |     </head>
11 | 
12 |     <body>
13 |         <div class="container">
14 |             <h1 class="title">Centered Content with Grid</h1>
15 |             <div class="grid-container grid-item red">
16 |                 <h2>Centered Title!</h2>
17 |             </div>
18 |         </div>
19 |     </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/7. Responsive-Card-Gallery/finished.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |         <title>Document</title>
 8 |         <link rel="stylesheet" href="finished.css" />
 9 |         <link rel="stylesheet" href="../global.css" />
10 |     </head>
11 |     <body>
12 |         <div class="container">
13 |             <h1 class="title">&#x2728;Responsive (HP) Card Gallery &#x2728;</h1>
14 |             <ul id="charactersList" class="gallery"></ul>
15 |         </div>
16 |     </body>
17 |     <script src="finished.js"></script>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/2. Centered-Content/finished.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |         <title>Document</title>
 8 |         <link rel="stylesheet" href="finished.css" />
 9 |         <link rel="stylesheet" href="../global.css" />
10 |     </head>
11 | 
12 |     <body>
13 |         <div class="container">
14 |             <h1 class="title">Centered Content with Grid</h1>
15 |             <div class="grid-container grid-item red">
16 |                 <h2>Centered Title!</h2>
17 |             </div>
18 |         </div>
19 |     </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/5. Asymetric-Dashboard/finished.css:
--------------------------------------------------------------------------------
 1 | .dashboard {
 2 |     display: grid;
 3 |     grid-template-columns: repeat(6, 1fr);
 4 |     grid-gap: 20px;
 5 | }
 6 | 
 7 | .item {
 8 |     border: 1px solid;
 9 |     border-radius: 3px;
10 |     box-shadow: 1px 1px 4px #ccc;
11 |     border: 1px solid #ccc;
12 |     height: 100px;
13 |     display: grid;
14 |     align-items: center;
15 |     justify-items: center;
16 | }
17 | 
18 | .item:hover {
19 |     box-shadow: 4px 4px 4px #ccc;
20 |     cursor: pointer;
21 | }
22 | 
23 | .main {
24 |     grid-column: span 3;
25 | }
26 | 
27 | .secondary {
28 |     grid-column: span 2;
29 | }
30 | 
31 | @media (max-width: 786px) {
32 |     .dashboard {
33 |         grid-template-columns: 1fr;
34 |     }
35 | 
36 |     .dashboard > * {
37 |         grid-column: span 1;
38 |     }
39 | }
40 | 


--------------------------------------------------------------------------------
/global.css:
--------------------------------------------------------------------------------
 1 | html {
 2 |     box-sizing: border-box;
 3 |     font-family: sans-serif;
 4 | }
 5 | 
 6 | body {
 7 |     /* background-image: linear-gradient(to bottom right, #eee, #bbb); */
 8 |     min-height: 100vh;
 9 |     padding: 0;
10 |     margin: 0;
11 | }
12 | 
13 | .container {
14 |     max-width: 1200px;
15 |     margin: 0 auto;
16 |     padding: 50px 20px;
17 | }
18 | 
19 | .text-center {
20 |     text-align: center;
21 | }
22 | 
23 | .blue {
24 |     background-color: royalblue;
25 | }
26 | .orange {
27 |     background-color: peru;
28 | }
29 | .red {
30 |     background-color: palevioletred;
31 | }
32 | 
33 | .green {
34 |     background-color: seagreen;
35 | }
36 | 
37 | .grid-item {
38 |     color: white;
39 |     border-radius: 5px;
40 |     padding: 20px;
41 |     box-shadow: 1px 1px 4px #ccc;
42 | }
43 | 
44 | .title {
45 |     text-align: center;
46 |     margin-bottom: 40px;
47 | }
48 | 


--------------------------------------------------------------------------------
/4. Responsive-Navbar/start.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |         <title>Document</title>
 8 |         <link rel="stylesheet" href="start.css" />
 9 |         <link rel="stylesheet" href="../global.css" />
10 |     </head>
11 |     <body>
12 |         <nav class="nav green">
13 |             <div class="nav__brand">
14 |                 Responsive Nav
15 |             </div>
16 |             <ul class="nav__items">
17 |                 <li>About</li>
18 |                 <li>Blog</li>
19 |                 <li>Contact</li>
20 |             </ul>
21 |         </nav>
22 |         <div class="container">
23 |             <h1 class="title">Responsive Navbar</h1>
24 |         </div>
25 |     </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/4. Responsive-Navbar/finished.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |         <title>Document</title>
 8 |         <link rel="stylesheet" href="finished.css" />
 9 |         <link rel="stylesheet" href="../global.css" />
10 |     </head>
11 |     <body>
12 |         <nav class="nav green">
13 |             <div class="nav__brand">
14 |                 Responsive Nav
15 |             </div>
16 |             <ul class="nav__items">
17 |                 <li>About</li>
18 |                 <li>Blog</li>
19 |                 <li>Contact</li>
20 |             </ul>
21 |         </nav>
22 |         <div class="container">
23 |             <h1 class="title">Responsive Navbar</h1>
24 |         </div>
25 |     </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/7. Responsive-Card-Gallery/finished.css:
--------------------------------------------------------------------------------
 1 | .gallery {
 2 |     display: grid;
 3 |     grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
 4 |     grid-template: 20px;
 5 |     grid-gap: 20px;
 6 |     padding-inline-start: 0;
 7 |     list-style: none;
 8 | }
 9 | 
10 | .card {
11 |     display: grid;
12 |     grid-template-columns: 1fr 3fr;
13 |     grid-gap: 20px;
14 |     box-shadow: 1px 1px 4px #ccc;
15 |     border: 1px solid #ccc;
16 |     align-items: center;
17 |     /* padding: 10px; */
18 |     border-radius: 3px;
19 |     transition: all 250ms;
20 | }
21 | 
22 | .card:hover {
23 |     box-shadow: 4px 4px 4px #ccc;
24 |     cursor: pointer;
25 | }
26 | 
27 | .card__image > img {
28 |     height: 160px;
29 |     width: 100%;
30 |     object-fit: cover;
31 |     display: block;
32 |     border-radius: 2px 0 0 2px;
33 | }
34 | 
35 | .card__title {
36 |     margin-bottom: 0;
37 | }
38 | .card__details {
39 |     margin-top: 5px;
40 | }
41 | 
42 | @media (max-width: 1000px) {
43 | }
44 | 
45 | @media (max-width: 786px) {
46 | }
47 | 


--------------------------------------------------------------------------------
/7. Responsive-Card-Gallery/finished.js:
--------------------------------------------------------------------------------
 1 | const charactersList = document.getElementById('charactersList');
 2 | 
 3 | const loadCharacters = async () => {
 4 |     try {
 5 |         const res = await fetch('https://hp-api.herokuapp.com/api/characters');
 6 |         hpCharacters = await res.json();
 7 |         displayCharacters(hpCharacters);
 8 |     } catch (err) {
 9 |         console.error(err);
10 |     }
11 | };
12 | 
13 | const displayCharacters = (characters) => {
14 |     const htmlString = characters
15 |         .map((character) => {
16 |             return `
17 |             <li class="card">
18 |                 <div class="card__image">
19 |                     <img src="${character.image}"></img>
20 |                 </div>
21 |                 <div class="card__details">
22 |                     <h2 class="card__title">${character.name}</h2>
23 |                     <p class="card__details">House: ${character.house}</p>
24 |                 </div>
25 |             </li>
26 |         `;
27 |         })
28 |         .join('');
29 |     charactersList.innerHTML = htmlString;
30 | };
31 | 
32 | loadCharacters();
33 | 


--------------------------------------------------------------------------------
/5. Asymetric-Dashboard/start.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |         <title>Document</title>
 8 |         <link rel="stylesheet" href="start.css" />
 9 |         <link rel="stylesheet" href="../global.css" />
10 |     </head>
11 |     <body>
12 |         <div class="container">
13 |             <h1 class="title">Asymetric Dashboard</h1>
14 |             <!-- <p class="text-center"><a href="https://codesandbox.io/s/css-grid-example-djtwr" target="_blank">Inspiration for this demo</p></a> -->
15 |             <br />
16 |             <div class="dashboard">
17 |                 <div class="main grid-item red">Section 1</div>
18 |                 <div class="main grid-item orange">Section 2</div>
19 |                 <div class="secondary grid-item green">Section 3</div>
20 |                 <div class="secondary grid-item blue">Section 4</div>
21 |                 <div class="secondary grid-item red">Section 5</div>
22 |             </div>
23 |         </div>
24 |     </body>
25 |     <script src="app.js"></script>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/3. Reordering-Content/start.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |         <title>Document</title>
 8 |         <link rel="stylesheet" href="start.css" />
 9 |         <link rel="stylesheet" href="../global.css" />
10 |     </head>
11 | 
12 |     <body>
13 |         <div class="container">
14 |             <h1 class="title">Reordering Content</h1>
15 |             <button id="shuffleBtn" class="btn">shuffle</button>
16 |             <div class="grid-container">
17 |                 <div class="grid-item item1 green">
18 |                     Item 1
19 |                 </div>
20 |                 <div class="grid-item item2 red">
21 |                     Item 2
22 |                 </div>
23 |                 <div class="grid-item item3 orange">
24 |                     Item 3
25 |                 </div>
26 |                 <div class="grid-item item4 blue">
27 |                     Item 4
28 |                 </div>
29 |             </div>
30 |         </div>
31 |         <script src="start.js"></script>
32 |     </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/5. Asymetric-Dashboard/finished.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |         <title>Document</title>
 8 |         <link rel="stylesheet" href="finished.css" />
 9 |         <link rel="stylesheet" href="../global.css" />
10 |     </head>
11 |     <body>
12 |         <div class="container">
13 |             <h1 class="title">Asymetric Dashboard</h1>
14 |             <!-- <p class="text-center"><a href="https://codesandbox.io/s/css-grid-example-djtwr" target="_blank">Inspiration for this demo</p></a> -->
15 |             <br />
16 |             <div class="dashboard">
17 |                 <div class="main grid-item red">Section 1</div>
18 |                 <div class="main grid-item orange">Section 2</div>
19 |                 <div class="secondary grid-item green">Section 3</div>
20 |                 <div class="secondary grid-item blue">Section 4</div>
21 |                 <div class="secondary grid-item red">Section 5</div>
22 |             </div>
23 |         </div>
24 |     </body>
25 |     <script src="app.js"></script>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/3. Reordering-Content/finished.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |         <title>Document</title>
 8 |         <link rel="stylesheet" href="finished.css" />
 9 |         <link rel="stylesheet" href="../global.css" />
10 |     </head>
11 | 
12 |     <body>
13 |         <div class="container">
14 |             <h1 class="title">Reordering Content</h1>
15 |             <button id="shuffleBtn" class="btn">shuffle</button>
16 |             <div class="grid-container">
17 |                 <div class="grid-item item1 green">
18 |                     Item 1
19 |                 </div>
20 |                 <div class="grid-item item2 red">
21 |                     Item 2
22 |                 </div>
23 |                 <div class="grid-item item3 orange">
24 |                     Item 3
25 |                 </div>
26 |                 <div class="grid-item item4 blue">
27 |                     Item 4
28 |                 </div>
29 |             </div>
30 |         </div>
31 |         <script src="finished.js"></script>
32 |     </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/6. Asymetric-Gallery-Layout/finished.css:
--------------------------------------------------------------------------------
 1 | .grid-container {
 2 |     display: grid;
 3 |     grid-gap: 20px;
 4 |     grid-template-columns: repeat(3, 1fr);
 5 |     grid-template-rows: repeat(3, 160px);
 6 | }
 7 | 
 8 | .img {
 9 |     height: 100%;
10 |     width: 100%;
11 |     object-fit: cover;
12 | }
13 | 
14 | .gallery-img {
15 |     position: relative;
16 |     overflow: hidden;
17 | }
18 | 
19 | .gallery-img:hover .overlay {
20 |     transform: translateY(0);
21 | }
22 | 
23 | .overlay {
24 |     position: absolute;
25 |     top: 0;
26 |     left: 0;
27 |     right: 0;
28 |     bottom: 0;
29 |     background-color: rgba(0, 0, 0, 0.5);
30 |     display: grid;
31 |     color: white;
32 |     justify-items: center;
33 |     align-items: center;
34 |     font-size: 24px;
35 |     transform: translateY(-100%);
36 |     transition: 0.2s;
37 | }
38 | 
39 | .featured {
40 |     grid-row: 1 / span 2;
41 |     grid-column: 1 / span 2;
42 | }
43 | 
44 | @media (max-width: 786px) {
45 |     .grid-container {
46 |         grid-template-columns: 1fr 1fr;
47 |         grid-template-rows: 300px;
48 |         grid-auto-rows: 160;
49 |     }
50 | 
51 |     .featured {
52 |         grid-row: span 1;
53 |         grid-column: span 2;
54 |     }
55 | 
56 |     .overlay {
57 |         font-size: 16px;
58 |     }
59 | }
60 | 
61 | @media (max-width: 500px) {
62 |     .grid-container {
63 |         grid-template-columns: 1fr;
64 |     }
65 | 
66 |     .grid-container > * {
67 |         grid-column: 1 / span 1;
68 |     }
69 | }
70 | 


--------------------------------------------------------------------------------
/ReadMe.md:
--------------------------------------------------------------------------------
 1 | # Getting Started with CSS Grid By Example
 2 | 
 3 | This project contains different examples of using CSS Grid. Hopefully, you will find them informative and useful!
 4 | 
 5 | For each example, there is a set of starter files and finished files. Open the finished files to see what you need to build. Then, open up the starter files to see if you can complete the example on your own.
 6 | 
 7 | 1. Responsive 3 Column Grid
 8 | ![Example 1](https://github.com/jamesqquick/Getting-Started-with-CSS-Grid-by-Example/raw/master/media/1.png)
 9 | 
10 | 2. Centered Content
11 | ![Example 2](https://github.com/jamesqquick/Getting-Started-with-CSS-Grid-by-Example/raw/master/media/2.png)
12 | 
13 | 3. Reordered Content
14 | ![Example 3](https://github.com/jamesqquick/Getting-Started-with-CSS-Grid-by-Example/raw/master/media/3.png)
15 | 
16 | 4. Responsive Navbar
17 | ![Example 4](https://github.com/jamesqquick/Getting-Started-with-CSS-Grid-by-Example/raw/master/media/4.png)
18 | 
19 | 5. Asymetric Dashboard
20 | ![Example 5](https://github.com/jamesqquick/Getting-Started-with-CSS-Grid-by-Example/raw/master/media/5.png)
21 | 
22 | 6. Responsive Card Gallery
23 | ![Example 6](https://github.com/jamesqquick/Getting-Started-with-CSS-Grid-by-Example/raw/master/media/7.png)
24 | 
25 | 7. Asymetric Gallery Layout
26 | 
27 | ![Example 7](https://github.com/jamesqquick/Getting-Started-with-CSS-Grid-by-Example/raw/master/media/6.png)
28 | 
29 | 8. Responsive 2 Column with Footer
30 | ![Example 8](https://github.com/jamesqquick/Getting-Started-with-CSS-Grid-by-Example/raw/master/media/8.png)
31 | 
32 | 9. Responsive 2 Column Grid with Footer (Grid Areas)
33 | ![Example 9](https://github.com/jamesqquick/Getting-Started-with-CSS-Grid-by-Example/raw/master/media/8.png)
34 | 
35 | 10. Checkerboard Layout
36 | ![Example 10](https://github.com/jamesqquick/Getting-Started-with-CSS-Grid-by-Example/raw/master/media/10.png)
37 | 


--------------------------------------------------------------------------------
/1. responsive-3-column-grid/start.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |         <title>Document</title>
 8 |         <link rel="stylesheet" href="start.css" />
 9 |         <link rel="stylesheet" href="../global.css" />
10 |     </head>
11 |     <body>
12 |         <div class="container">
13 |             <h1 class="title">Responsive 3 Column Grid</h1>
14 |             <div class="grid-container">
15 |                 <div class="grid-item item1 red">
16 |                     Lorem ipsum dolor sit amet consectetur adipisicing elit.
17 |                     Quam fuga labore placeat at eos.
18 |                 </div>
19 |                 <div class="grid-item item2 green">
20 |                     Lorem ipsum dolor sit, amet consectetur adipisicing elit.
21 |                     Sed ea, repellendus culpa ut et a consequatur recusandae
22 |                     iste possimus suscipit praesentium id, soluta molestias,
23 |                     tempore tenetur debitis. Repellat, nostrum recusandae. Lorem
24 |                     ipsum dolor sit, amet consectetur adipisicing elit. Sed ea,
25 |                     repellendus culpa ut et a consequatur recusandae iste
26 |                     possimus suscipit praesentium id, soluta molestias, tempore
27 |                     tenetur debitis. Repellat, nostrum recusandae.
28 |                 </div>
29 |                 <div class="grid-item item3 orange ">
30 |                     Lorem ipsum dolor sit amet consectetur adipisicing elit.
31 |                     Laudantium officia dolores vel error eveniet esse obcaecati
32 |                     corrupti.
33 |                 </div>
34 |             </div>
35 |         </div>
36 |     </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/1. responsive-3-column-grid/finished.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |         <title>Document</title>
 8 |         <link rel="stylesheet" href="finished.css" />
 9 |         <link rel="stylesheet" href="../global.css" />
10 |     </head>
11 |     <body>
12 |         <div class="container">
13 |             <h1 class="title">Responsive 3 Column Grid</h1>
14 |             <div class="grid-container">
15 |                 <div class="grid-item item1 red">
16 |                     Lorem ipsum dolor sit amet consectetur adipisicing elit.
17 |                     Quam fuga labore placeat at eos.
18 |                 </div>
19 |                 <div class="grid-item item2 green">
20 |                     Lorem ipsum dolor sit, amet consectetur adipisicing elit.
21 |                     Sed ea, repellendus culpa ut et a consequatur recusandae
22 |                     iste possimus suscipit praesentium id, soluta molestias,
23 |                     tempore tenetur debitis. Repellat, nostrum recusandae. Lorem
24 |                     ipsum dolor sit, amet consectetur adipisicing elit. Sed ea,
25 |                     repellendus culpa ut et a consequatur recusandae iste
26 |                     possimus suscipit praesentium id, soluta molestias, tempore
27 |                     tenetur debitis. Repellat, nostrum recusandae.
28 |                 </div>
29 |                 <div class="grid-item item3 orange ">
30 |                     Lorem ipsum dolor sit amet consectetur adipisicing elit.
31 |                     Laudantium officia dolores vel error eveniet esse obcaecati
32 |                     corrupti.
33 |                 </div>
34 |             </div>
35 |         </div>
36 |     </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/8. Responsive-2-column-with-footer/start.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |         <title>Document</title>
 8 |         <link rel="stylesheet" href="start.css" />
 9 |         <link rel="stylesheet" href="../global.css" />
10 |     </head>
11 |     <body>
12 |         <div class="container">
13 |             <h1 class="title">Responsive 2 Column With Footer</h1>
14 |             <!-- <p class="text-center"><a href="https://gridbyexample.com/examples/code/layout9.html" target="_blank">Inspiration for this demo</a></p> -->
15 |             <br />
16 |             <div class="grid-container">
17 |                 <div class="header grid-item red">
18 |                     <h1>Header Title</h1>
19 |                     <p>Lorem ipsum dolor sit amet.</p>
20 |                 </div>
21 |                 <div class="sidebar grid-item blue">
22 |                     <h2>Sidebar</h2>
23 |                     <ul>
24 |                         <li>List Item 1</li>
25 |                         <li>List Item 2</li>
26 |                         <li>List Item 3</li>
27 |                         <li>List Item 4</li>
28 |                         <li>List Item 5</li>
29 |                         <li>List Item 6</li>
30 |                     </ul>
31 |                 </div>
32 |                 <div class="main grid-item green">
33 |                     <h2>Main Content</h2>
34 |                     <p>
35 |                         Lorem ipsum dolor sit amet consectetur adipisicing elit.
36 |                         Nisi a voluptas ratione quo, fugiat accusantium
37 |                         provident laborum quis voluptatibus quisquam obcaecati,
38 |                         perspiciatis corrupti optio architecto rerum iste
39 |                         asperiores beatae maxime.
40 |                     </p>
41 |                     <p>
42 |                         Lorem ipsum dolor sit amet, consectetur adipisicing
43 |                         elit. Dicta alias commodi ex aspernatur culpa, magni
44 |                         laborum! In, dolore tenetur pariatur rem aliquam
45 |                         repellendus quod, aspernatur, facilis autem ipsam
46 |                         distinctio deserunt.
47 |                     </p>
48 |                 </div>
49 |                 <div class="footer grid-item orange">
50 |                     <h3>Footer</h3>
51 |                     <p>
52 |                         Lorem ipsum dolor sit, amet consectetur adipisicing
53 |                         elit. Illo aut, ipsa laboriosam officia maxime odit,
54 |                         accusantium nisi voluptas.
55 |                     </p>
56 |                 </div>
57 |             </div>
58 |         </div>
59 |     </body>
60 |     <script src="app.js"></script>
61 | </html>
62 | 


--------------------------------------------------------------------------------
/8. Responsive-2-column-with-footer/finished.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |         <title>Document</title>
 8 |         <link rel="stylesheet" href="finished.css" />
 9 |         <link rel="stylesheet" href="../global.css" />
10 |     </head>
11 |     <body>
12 |         <div class="container">
13 |             <h1 class="title">Responsive 2 Column With Footer</h1>
14 |             <!-- <p class="text-center"><a href="https://gridbyexample.com/examples/code/layout9.html" target="_blank">Inspiration for this demo</a></p> -->
15 |             <br />
16 |             <div class="grid-container">
17 |                 <div class="header grid-item red">
18 |                     <h1>Header Title</h1>
19 |                     <p>Lorem ipsum dolor sit amet.</p>
20 |                 </div>
21 |                 <div class="sidebar grid-item blue">
22 |                     <h2>Sidebar</h2>
23 |                     <ul>
24 |                         <li>List Item 1</li>
25 |                         <li>List Item 2</li>
26 |                         <li>List Item 3</li>
27 |                         <li>List Item 4</li>
28 |                         <li>List Item 5</li>
29 |                         <li>List Item 6</li>
30 |                     </ul>
31 |                 </div>
32 |                 <div class="main grid-item green">
33 |                     <h2>Main Content</h2>
34 |                     <p>
35 |                         Lorem ipsum dolor sit amet consectetur adipisicing elit.
36 |                         Nisi a voluptas ratione quo, fugiat accusantium
37 |                         provident laborum quis voluptatibus quisquam obcaecati,
38 |                         perspiciatis corrupti optio architecto rerum iste
39 |                         asperiores beatae maxime.
40 |                     </p>
41 |                     <p>
42 |                         Lorem ipsum dolor sit amet, consectetur adipisicing
43 |                         elit. Dicta alias commodi ex aspernatur culpa, magni
44 |                         laborum! In, dolore tenetur pariatur rem aliquam
45 |                         repellendus quod, aspernatur, facilis autem ipsam
46 |                         distinctio deserunt.
47 |                     </p>
48 |                 </div>
49 |                 <div class="footer grid-item orange">
50 |                     <h3>Footer</h3>
51 |                     <p>
52 |                         Lorem ipsum dolor sit, amet consectetur adipisicing
53 |                         elit. Illo aut, ipsa laboriosam officia maxime odit,
54 |                         accusantium nisi voluptas.
55 |                     </p>
56 |                 </div>
57 |             </div>
58 |         </div>
59 |     </body>
60 |     <script src="app.js"></script>
61 | </html>
62 | 


--------------------------------------------------------------------------------
/9. Responsive-2-column-with-footer (grid areas)/start.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |         <title>Document</title>
 8 |         <link rel="stylesheet" href="start.css" />
 9 |         <link rel="stylesheet" href="../global.css" />
10 |     </head>
11 | 
12 |     <body>
13 |         <div class="container">
14 |             <h1 class="title">Responsive 2 Column With Footer</h1>
15 |             <!-- <p class="text-center">
16 |                 <a
17 |                     href="https://gridbyexample.com/examples/code/layout9.html"
18 |                     target="_blank"
19 |                     >Inspiration for this demo</a
20 |                 >
21 |             </p> -->
22 |             <br />
23 |             <div class="grid-container">
24 |                 <div class="header grid-item red">
25 |                     <h1>Header Title</h1>
26 |                     <p>Lorem ipsum dolor sit amet.</p>
27 |                 </div>
28 |                 <div class="sidebar grid-item blue">
29 |                     <h2>Sidebar</h2>
30 |                     <ul>
31 |                         <li>List Item 1</li>
32 |                         <li>List Item 2</li>
33 |                         <li>List Item 3</li>
34 |                         <li>List Item 4</li>
35 |                         <li>List Item 5</li>
36 |                         <li>List Item 6</li>
37 |                     </ul>
38 |                 </div>
39 |                 <div class="main grid-item green">
40 |                     <h2>Main Content</h2>
41 |                     <p>
42 |                         Lorem ipsum dolor sit amet consectetur adipisicing elit.
43 |                         Nisi a voluptas ratione quo, fugiat accusantium
44 |                         provident laborum quis voluptatibus quisquam obcaecati,
45 |                         perspiciatis corrupti optio architecto rerum iste
46 |                         asperiores beatae maxime.
47 |                     </p>
48 |                     <p>
49 |                         Lorem ipsum dolor sit amet, consectetur adipisicing
50 |                         elit. Dicta alias commodi ex aspernatur culpa, magni
51 |                         laborum! In, dolore tenetur pariatur rem aliquam
52 |                         repellendus quod, aspernatur, facilis autem ipsam
53 |                         distinctio deserunt.
54 |                     </p>
55 |                 </div>
56 |                 <div class="footer grid-item orange">
57 |                     <h3>Footer</h3>
58 |                     <p>
59 |                         Lorem ipsum dolor sit, amet consectetur adipisicing
60 |                         elit. Illo aut, ipsa laboriosam officia maxime odit,
61 |                         accusantium nisi voluptas.
62 |                     </p>
63 |                 </div>
64 |             </div>
65 |         </div>
66 |     </body>
67 |     <script src="app.js"></script>
68 | </html>
69 | 


--------------------------------------------------------------------------------
/9. Responsive-2-column-with-footer (grid areas)/finished.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |         <title>Document</title>
 8 |         <link rel="stylesheet" href="finished.css" />
 9 |         <link rel="stylesheet" href="../global.css" />
10 |     </head>
11 | 
12 |     <body>
13 |         <div class="container">
14 |             <h1 class="title">Responsive 2 Column With Footer</h1>
15 |             <!-- <p class="text-center">
16 |                 <a
17 |                     href="https://gridbyexample.com/examples/code/layout9.html"
18 |                     target="_blank"
19 |                     >Inspiration for this demo</a
20 |                 >
21 |             </p> -->
22 |             <br />
23 |             <div class="grid-container">
24 |                 <div class="header grid-item red">
25 |                     <h1>Header Title</h1>
26 |                     <p>Lorem ipsum dolor sit amet.</p>
27 |                 </div>
28 |                 <div class="sidebar grid-item blue">
29 |                     <h2>Sidebar</h2>
30 |                     <ul>
31 |                         <li>List Item 1</li>
32 |                         <li>List Item 2</li>
33 |                         <li>List Item 3</li>
34 |                         <li>List Item 4</li>
35 |                         <li>List Item 5</li>
36 |                         <li>List Item 6</li>
37 |                     </ul>
38 |                 </div>
39 |                 <div class="main grid-item green">
40 |                     <h2>Main Content</h2>
41 |                     <p>
42 |                         Lorem ipsum dolor sit amet consectetur adipisicing elit.
43 |                         Nisi a voluptas ratione quo, fugiat accusantium
44 |                         provident laborum quis voluptatibus quisquam obcaecati,
45 |                         perspiciatis corrupti optio architecto rerum iste
46 |                         asperiores beatae maxime.
47 |                     </p>
48 |                     <p>
49 |                         Lorem ipsum dolor sit amet, consectetur adipisicing
50 |                         elit. Dicta alias commodi ex aspernatur culpa, magni
51 |                         laborum! In, dolore tenetur pariatur rem aliquam
52 |                         repellendus quod, aspernatur, facilis autem ipsam
53 |                         distinctio deserunt.
54 |                     </p>
55 |                 </div>
56 |                 <div class="footer grid-item orange">
57 |                     <h3>Footer</h3>
58 |                     <p>
59 |                         Lorem ipsum dolor sit, amet consectetur adipisicing
60 |                         elit. Illo aut, ipsa laboriosam officia maxime odit,
61 |                         accusantium nisi voluptas.
62 |                     </p>
63 |                 </div>
64 |             </div>
65 |         </div>
66 |     </body>
67 |     <script src="app.js"></script>
68 | </html>
69 | 


--------------------------------------------------------------------------------
/10. Checkerboard-layout/start.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |         <title>Document</title>
 8 |         <link rel="stylesheet" href="start.css" />
 9 |         <link rel="stylesheet" href="../global.css" />
10 |     </head>
11 |     <body>
12 |         <h1 class="title">Checkerboard Layout</h1>
13 |         <div class="checkerboard">
14 |             <div class="row">
15 |                 <img
16 |                     src="https://cdn.pixabay.com/photo/2020/03/10/11/55/netherlands-4918751_1280.jpg"
17 |                     alt="House in the netherlands"
18 |                     class="row__image"
19 |                 />
20 |                 <div class="row__details red">
21 |                     <h2>The Netherlands</h2>
22 |                     <p>
23 |                         Lorem ipsum dolor sit amet consectetur adipisicing elit.
24 |                         Vero explicabo, consequatur odit unde animi natus porro
25 |                         tempore modi consectetur! Distinctio esse modi enim
26 |                         repellat unde recusandae mollitia? Exercitationem,
27 |                         facilis totam!
28 |                     </p>
29 |                 </div>
30 |             </div>
31 |             <div class="row">
32 |                 <div class="row__details green">
33 |                     <h2>New York City Skyline</h2>
34 |                     <p>
35 |                         Lorem ipsum dolor sit amet consectetur adipisicing elit.
36 |                         Vero explicabo, consequatur odit unde animi natus porro
37 |                         tempore modi consectetur! Distinctio esse modi enim
38 |                         repellat unde recusandae mollitia? Exercitationem,
39 |                         facilis totam!
40 |                     </p>
41 |                 </div>
42 |                 <img
43 |                     src="https://cdn.pixabay.com/photo/2014/05/03/01/04/manhattan-336708_1280.jpg"
44 |                     alt="New York City Skyline"
45 |                     class="row__image"
46 |                 />
47 |             </div>
48 |             <div class="row orange">
49 |                 <img
50 |                     src="https://cdn.pixabay.com/photo/2014/09/11/18/23/london-441853_1280.jpg"
51 |                     alt="London Bridge"
52 |                     class="row__image"
53 |                 />
54 |                 <div class="row__details">
55 |                     <h2>london Bridge</h2>
56 |                     <p>
57 |                         Lorem ipsum dolor sit amet consectetur adipisicing elit.
58 |                         Vero explicabo, consequatur odit unde animi natus porro
59 |                         tempore modi consectetur! Distinctio esse modi enim
60 |                         repellat unde recusandae mollitia? Exercitationem,
61 |                         facilis totam!
62 |                     </p>
63 |                 </div>
64 |             </div>
65 |         </div>
66 |     </body>
67 |     <script src="app.js"></script>
68 | </html>
69 | 


--------------------------------------------------------------------------------
/10. Checkerboard-layout/finished.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |         <title>Document</title>
 8 |         <link rel="stylesheet" href="finished.css" />
 9 |         <link rel="stylesheet" href="../global.css" />
10 |     </head>
11 |     <body>
12 |         <h1 class="title">Checkerboard Layout</h1>
13 |         <div class="checkerboard">
14 |             <div class="row">
15 |                 <img
16 |                     src="https://cdn.pixabay.com/photo/2020/03/10/11/55/netherlands-4918751_1280.jpg"
17 |                     alt="House in the netherlands"
18 |                     class="row__image"
19 |                 />
20 |                 <div class="row__details red">
21 |                     <h2>The Netherlands</h2>
22 |                     <p>
23 |                         Lorem ipsum dolor sit amet consectetur adipisicing elit.
24 |                         Vero explicabo, consequatur odit unde animi natus porro
25 |                         tempore modi consectetur! Distinctio esse modi enim
26 |                         repellat unde recusandae mollitia? Exercitationem,
27 |                         facilis totam!
28 |                     </p>
29 |                 </div>
30 |             </div>
31 |             <div class="row">
32 |                 <div class="row__details green">
33 |                     <h2>New York City Skyline</h2>
34 |                     <p>
35 |                         Lorem ipsum dolor sit amet consectetur adipisicing elit.
36 |                         Vero explicabo, consequatur odit unde animi natus porro
37 |                         tempore modi consectetur! Distinctio esse modi enim
38 |                         repellat unde recusandae mollitia? Exercitationem,
39 |                         facilis totam!
40 |                     </p>
41 |                 </div>
42 |                 <img
43 |                     src="https://cdn.pixabay.com/photo/2014/05/03/01/04/manhattan-336708_1280.jpg"
44 |                     alt="New York City Skyline"
45 |                     class="row__image"
46 |                 />
47 |             </div>
48 |             <div class="row orange">
49 |                 <img
50 |                     src="https://cdn.pixabay.com/photo/2014/09/11/18/23/london-441853_1280.jpg"
51 |                     alt="London Bridge"
52 |                     class="row__image"
53 |                 />
54 |                 <div class="row__details">
55 |                     <h2>london Bridge</h2>
56 |                     <p>
57 |                         Lorem ipsum dolor sit amet consectetur adipisicing elit.
58 |                         Vero explicabo, consequatur odit unde animi natus porro
59 |                         tempore modi consectetur! Distinctio esse modi enim
60 |                         repellat unde recusandae mollitia? Exercitationem,
61 |                         facilis totam!
62 |                     </p>
63 |                 </div>
64 |             </div>
65 |         </div>
66 |     </body>
67 |     <script src="app.js"></script>
68 | </html>
69 | 


--------------------------------------------------------------------------------
/6. Asymetric-Gallery-Layout/start.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |         <title>Document</title>
 8 |         <link rel="stylesheet" href="../global.css" />
 9 |         <link rel="stylesheet" href="start.css" />
10 |     </head>
11 |     <body>
12 |         <div class="container">
13 |             <h1 class="title">Asymetric Gallery Layout</h1>
14 |             <div class="grid-container">
15 |                 <div class="featured gallery-img">
16 |                     <img
17 |                         class="img"
18 |                         src="https://images.unsplash.com/photo-1584243795289-d975cefb4b95?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
19 |                         alt="Manhattan Picture"
20 |                     />
21 |                     <a class="overlay" href="https://www.google.com">
22 |                         <p>Manhattan Picture</p>
23 |                     </a>
24 |                 </div>
25 |                 <div class="gallery-img">
26 |                     <img
27 |                         class="img"
28 |                         src="https://vignette.wikia.nocookie.net/ghostbusters/images/2/2c/Ecto_02.jpg/revision/latest?cb=20110720124909"
29 |                         alt=""
30 |                     />
31 |                     <a class="overlay" href="https://www.google.com">
32 |                         <p>Ecto One</p>
33 |                     </a>
34 |                 </div>
35 | 
36 |                 <div class="gallery-img">
37 |                     <img
38 |                         class="img"
39 |                         src="https://www.nycgo.com/images/articles/9147/turtles_skyline_bkg_v2__large.jpg"
40 |                         alt=""
41 |                     />
42 |                     <a class="overlay" href="https://www.google.com">
43 |                         <p>Ninja Turtles</p>
44 |                     </a>
45 |                 </div>
46 | 
47 |                 <div class="gallery-img">
48 |                     <img
49 |                         class="square-1 img"
50 |                         src="https://cdn.getyourguide.com/img/tour_img-1739965-148.jpg"
51 |                         alt=""
52 |                     />
53 |                     <a class="overlay" href="https://www.google.com">
54 |                         <p>Empire State Building</p>
55 |                     </a>
56 |                 </div>
57 |                 <div class="gallery-img">
58 |                     <img
59 |                         class="square-1 img"
60 |                         src="https://legends-cloudinary.corebine.com/legends-production/image/upload/c_fit,dpr_3.0,f_webp,g_center,q_auto,w_767/v1/owo-prod/One_World_Observatory-_An_Experience_Above_HomePage_72dpi"
61 |                         alt=""
62 |                     />
63 |                     <a class="overlay" href="https://www.google.com">
64 |                         <p>One World Trade</p>
65 |                     </a>
66 |                 </div>
67 |                 <div class="gallery-img">
68 |                     <img
69 |                         class="square-1 img"
70 |                         src="https://images.unsplash.com/photo-1579434402425-efc04578672a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2125&q=80"
71 |                         alt=""
72 |                     />
73 |                     <a class="overlay" href="https://www.google.com">
74 |                         <p>Williamsburg</p>
75 |                     </a>
76 |                 </div>
77 |             </div>
78 |         </div>
79 |     </body>
80 | </html>
81 | 


--------------------------------------------------------------------------------
/6. Asymetric-Gallery-Layout/finished.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |         <title>Document</title>
 8 |         <link rel="stylesheet" href="../global.css" />
 9 |         <link rel="stylesheet" href="finished.css" />
10 |     </head>
11 |     <body>
12 |         <div class="container">
13 |             <h1 class="title">Asymetric Gallery Layout</h1>
14 |             <div class="grid-container">
15 |                 <div class="featured gallery-img">
16 |                     <img
17 |                         class="img"
18 |                         src="https://images.unsplash.com/photo-1584243795289-d975cefb4b95?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
19 |                         alt="Manhattan Picture"
20 |                     />
21 |                     <a class="overlay" href="https://www.google.com">
22 |                         <p>Manhattan Picture</p>
23 |                     </a>
24 |                 </div>
25 |                 <div class="gallery-img">
26 |                     <img
27 |                         class="img"
28 |                         src="https://vignette.wikia.nocookie.net/ghostbusters/images/2/2c/Ecto_02.jpg/revision/latest?cb=20110720124909"
29 |                         alt=""
30 |                     />
31 |                     <a class="overlay" href="https://www.google.com">
32 |                         <p>Ecto One</p>
33 |                     </a>
34 |                 </div>
35 | 
36 |                 <div class="gallery-img">
37 |                     <img
38 |                         class="img"
39 |                         src="https://www.nycgo.com/images/articles/9147/turtles_skyline_bkg_v2__large.jpg"
40 |                         alt=""
41 |                     />
42 |                     <a class="overlay" href="https://www.google.com">
43 |                         <p>Ninja Turtles</p>
44 |                     </a>
45 |                 </div>
46 | 
47 |                 <div class="gallery-img">
48 |                     <img
49 |                         class="square-1 img"
50 |                         src="https://cdn.getyourguide.com/img/tour_img-1739965-148.jpg"
51 |                         alt=""
52 |                     />
53 |                     <a class="overlay" href="https://www.google.com">
54 |                         <p>Empire State Building</p>
55 |                     </a>
56 |                 </div>
57 |                 <div class="gallery-img">
58 |                     <img
59 |                         class="square-1 img"
60 |                         src="https://legends-cloudinary.corebine.com/legends-production/image/upload/c_fit,dpr_3.0,f_webp,g_center,q_auto,w_767/v1/owo-prod/One_World_Observatory-_An_Experience_Above_HomePage_72dpi"
61 |                         alt=""
62 |                     />
63 |                     <a class="overlay" href="https://www.google.com">
64 |                         <p>One World Trade</p>
65 |                     </a>
66 |                 </div>
67 |                 <div class="gallery-img">
68 |                     <img
69 |                         class="square-1 img"
70 |                         src="https://images.unsplash.com/photo-1579434402425-efc04578672a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2125&q=80"
71 |                         alt=""
72 |                     />
73 |                     <a class="overlay" href="https://www.google.com">
74 |                         <p>Williamsburg</p>
75 |                     </a>
76 |                 </div>
77 |             </div>
78 |         </div>
79 |     </body>
80 | </html>
81 | 


--------------------------------------------------------------------------------