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

Merge pull request #125 from ZebraMilk/main 

TheOdinProject/css-exercises/foundations: add indent to the <body> and <head> tags within <html> for readability
This commit is contained in:
Eric Olkowski 2022-03-14 16:30:19 -04:00 committed by GitHub
parent 501cac67b1 73a0b5ee4f
commit cce37cdd35
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
36 changed files with 855 additions and 854 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
flex/01-flex-center/index.html
View File

@ -1,15 +1,15 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CENTER THIS DIV</title> <title>CENTER THIS DIV</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class="box">center this div</div> <div class="box">center this div</div>
</div> </div>
</body> </body>
</html> </html>

24
flex/01-flex-center/solution/solution.html
View File

@ -1,15 +1,15 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CENTER THIS DIV</title> <title>CENTER THIS DIV</title>
<link rel="stylesheet" href="solution.css"> <link rel="stylesheet" href="solution.css">
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class="box">center this div</div> <div class="box">center this div</div>
</div> </div>
</body> </body>
</html> </html>

50
flex/02-flex-header/index.html
View File

@ -1,29 +1,29 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Header</title> <title>Flex Header</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<div class="header"> <div class="header">
<div class="left-links"> <div class="left-links">
<ul> <ul>
<li><a href="#">ONE</a></li> <li><a href="#">ONE</a></li>
<li><a href="#">TWO</a></li> <li><a href="#">TWO</a></li>
<li><a href="#">THREE</a></li> <li><a href="#">THREE</a></li>
</ul> </ul>
</div>
<div class="logo">LOGO</div>
<div class="right-links">
<ul>
<li><a href="#">FOUR</a></li>
<li><a href="#">FIVE</a></li>
<li><a href="#">SIX</a></li>
</ul>
</div>
</div> </div>
<div class="logo">LOGO</div> </body>
<div class="right-links">
<ul>
<li><a href="#">FOUR</a></li>
<li><a href="#">FIVE</a></li>
<li><a href="#">SIX</a></li>
</ul>
</div>
</div>
</body>
</html> </html>

50
flex/02-flex-header/solution/solution.html
View File

@ -1,29 +1,29 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Header</title> <title>Flex Header</title>
<link rel="stylesheet" href="solution.css"> <link rel="stylesheet" href="solution.css">
</head> </head>
<body> <body>
<div class="header"> <div class="header">
<div class="left-links"> <div class="left-links">
<ul> <ul>
<li><a href="#">ONE</a></li> <li><a href="#">ONE</a></li>
<li><a href="#">TWO</a></li> <li><a href="#">TWO</a></li>
<li><a href="#">THREE</a></li> <li><a href="#">THREE</a></li>
</ul> </ul>
</div>
<div class="logo">LOGO</div>
<div class="right-links">
<ul>
<li><a href="#">FOUR</a></li>
<li><a href="#">FIVE</a></li>
<li><a href="#">SIX</a></li>
</ul>
</div>
</div> </div>
<div class="logo">LOGO</div> </body>
<div class="right-links">
<ul>
<li><a href="#">FOUR</a></li>
<li><a href="#">FIVE</a></li>
<li><a href="#">SIX</a></li>
</ul>
</div>
</div>
</body>
</html> </html>

44
flex/03-flex-header-2/index.html
View File

@ -1,26 +1,26 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Header 2</title> <title>Flex Header 2</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<div class="header"> <div class="header">
<div class="logo"> <div class="logo">
LOGO LOGO
</div>
<ul class="links">
<li><a href="google.com">link-one</a></li>
<li><a href="google.com">link-two</a></li>
<li><a href="google.com">link-three</a></li>
</ul>
<button class="notifications">
1 new notification
</button>
<div class="profile-image"></div>
</div> </div>
<ul class="links"> </body>
<li><a href="google.com">link-one</a></li>
<li><a href="google.com">link-two</a></li>
<li><a href="google.com">link-three</a></li>
</ul>
<button class="notifications">
1 new notification
</button>
<div class="profile-image"></div>
</div>
</body>
</html> </html>

50
flex/03-flex-header-2/solution/solution.html
View File

@ -1,30 +1,30 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Header 2</title> <title>Flex Header 2</title>
<link rel="stylesheet" href="solution.css"> <link rel="stylesheet" href="solution.css">
</head> </head>
<body> <body>
<div class="header"> <div class="header">
<div class="left"> <div class="left">
<div class="logo"> <div class="logo">
LOGO LOGO
</div>
<ul class="links">
<li><a href="google.com">link-one</a></li>
<li><a href="google.com">link-two</a></li>
<li><a href="google.com">link-three</a></li>
</ul>
</div>
<div class="right">
<button class="notifications">
1 new notification
</button>
<div class="profile-image"></div>
</div> </div>
<ul class="links">
<li><a href="google.com">link-one</a></li>
<li><a href="google.com">link-two</a></li>
<li><a href="google.com">link-three</a></li>
</ul>
</div> </div>
<div class="right"> </body>
<button class="notifications">
1 new notification
</button>
<div class="profile-image"></div>
</div>
</div>
</body>
</html> </html>

44
flex/04-flex-information/index.html
View File

@ -1,30 +1,30 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Information</title> <title>Information</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<div class="title">Information!</div> <div class="title">Information!</div>
<img src="./images/barberry.png" alt="barberry"> <img src="./images/barberry.png" alt="barberry">
<div class="text">This is a type of plant. We love this one.</div> <div class="text">This is a type of plant. We love this one.</div>
<img src="./images/chilli.png" alt="chili"> <img src="./images/chilli.png" alt="chili">
<div class="text">This is another type of plant. Isn't it nice</div> <div class="text">This is another type of plant. Isn't it nice</div>
<img src="./images/pepper.png" alt="pepper"> <img src="./images/pepper.png" alt="pepper">
<div class="text">We have so many plants. Yay plants.</div> <div class="text">We have so many plants. Yay plants.</div>
<img src="./images/saffron.png" alt="saffron"> <img src="./images/saffron.png" alt="saffron">
<div class="text">I'm running out of things to say about plants.</div> <div class="text">I'm running out of things to say about plants.</div>
<!-- disregard this section, it's here to give attribution to the creator of these icons --> <!-- disregard this section, it's here to give attribution to the creator of these icons -->
<div class="footer"> <div class="footer">
<div>Icons made by <a href="https://www.flaticon.com/authors/icongeek26" title="Icongeek26">Icongeek26</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div> <div>Icons made by <a href="https://www.flaticon.com/authors/icongeek26" title="Icongeek26">Icongeek26</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>
</div> </div>
</body> </body>
</html> </html>

62
flex/04-flex-information/solution/solution.html
View File

@ -1,37 +1,37 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Information</title> <title>Information</title>
<link rel="stylesheet" href="solution.css"> <link rel="stylesheet" href="solution.css">
</head> </head>
<body> <body>
<div class="title">Information!</div> <div class="title">Information!</div>
<div class="container"> <div class="container">
<div class="info"> <div class="info">
<img src="./images/barberry.png" alt="barberry"> <img src="./images/barberry.png" alt="barberry">
<div class="text">This is a type of plant. We love this one.</div> <div class="text">This is a type of plant. We love this one.</div>
</div>
<div class="info">
<img src="./images/chilli.png" alt="chili">
<div class="text">This is another type of plant. Isn't it nice</div>
</div>
<div class="info">
<img src="./images/pepper.png" alt="pepper">
<div class="text">We have so many plants. Yay plants.</div>
</div>
<div class="info">
<img src="./images/saffron.png" alt="saffron">
<div class="text">I'm running out of things to say about plants.</div>
</div>
</div> </div>
<div class="info">
<img src="./images/chilli.png" alt="chili">
<div class="text">This is another type of plant. Isn't it nice</div>
</div>
<div class="info">
<img src="./images/pepper.png" alt="pepper">
<div class="text">We have so many plants. Yay plants.</div>
</div>
<div class="info">
<img src="./images/saffron.png" alt="saffron">
<div class="text">I'm running out of things to say about plants.</div>
</div>
</div>
<!-- disregard this section, it's here to give attribution to the creator of these icons --> <!-- disregard this section, it's here to give attribution to the creator of these icons -->
<div class="footer"> <div class="footer">
<div>Icons made by <a href="https://www.flaticon.com/authors/icongeek26" title="Icongeek26">Icongeek26</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div> <div>Icons made by <a href="https://www.flaticon.com/authors/icongeek26" title="Icongeek26">Icongeek26</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>
</div> </div>
</body> </body>
</html> </html>

34
flex/05-flex-modal/index.html
View File

@ -1,20 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<title>Modal</title> <title>Modal</title>
</head> </head>
<body> <body>
<div class="modal"> <div class="modal">
<div class="icon">!</div> <div class="icon">!</div>
<div class="header">Are you sure you want to do that?</div> <div class="header">Are you sure you want to do that?</div>
<div class="close-button">✖</div> <div class="close-button">✖</div>
<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!</div> <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!</div>
<button class="continue">Continue</button> <button class="continue">Continue</button>
<button class="cancel">Cancel</button> <button class="cancel">Cancel</button>
</div> </div>
</body> </body>
</html> </html>

36
flex/05-flex-modal/solution/solution.html
View File

@ -1,23 +1,23 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="solution.css"> <link rel="stylesheet" href="solution.css">
<title>Modal</title> <title>Modal</title>
</head> </head>
<body> <body>
<div class="modal"> <div class="modal">
<div class="icon">!</div> <div class="icon">!</div>
<div class="container"> <div class="container">
<div class="header">Are you sure you want to do that? <div class="header">Are you sure you want to do that?
<div class="close-button">✖</div> <div class="close-button">✖</div>
</div>
<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!</div>
<button class="continue">Continue</button>
<button class="cancel">Cancel</button>
</div> </div>
<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!</div>
<button class="continue">Continue</button>
<button class="cancel">Cancel</button>
</div> </div>
</div> </body>
</body>
</html> </html>

74
flex/06-flex-layout/index.html
View File

@ -1,42 +1,42 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LAYOUT</title> <title>LAYOUT</title>
<link rel="stylesheet" href="./style.css"> <link rel="stylesheet" href="./style.css">
</head> </head>
<body> <body>
<div class="header"> <div class="header">
<ul class="left-links"> <ul class="left-links">
<li><a href="google.com">About</a></li> <li><a href="google.com">About</a></li>
<li><a href="google.com">Store</a></li> <li><a href="google.com">Store</a></li>
</ul> </ul>
<ul class="right-links"> <ul class="right-links">
<li><a href="google.com">Profile</a></li> <li><a href="google.com">Profile</a></li>
<li><a href="google.com">Settings</a></li> <li><a href="google.com">Settings</a></li>
</ul> </ul>
</div>
<div class="content">
<img src="./logo.png" alt="">
<div class="input">
<input type="text">
</div> </div>
<div class="buttons"> <div class="content">
<button>Do the thing!</button> <img src="./logo.png" alt="">
<button>Do the other thing!</button> <div class="input">
<input type="text">
</div>
<div class="buttons">
<button>Do the thing!</button>
<button>Do the other thing!</button>
</div>
</div> </div>
</div> <div class="footer">
<div class="footer"> <ul class="left-links">
<ul class="left-links"> <li><a href="google.com">Advertising</a></li>
<li><a href="google.com">Advertising</a></li> <li><a href="google.com">Business</a></li>
<li><a href="google.com">Business</a></li> </ul>
</ul> <ul class="right-links">
<ul class="right-links"> <li><a href="google.com">Privacy</a></li>
<li><a href="google.com">Privacy</a></li> <li><a href="google.com">Terms</a></li>
<li><a href="google.com">Terms</a></li> </ul>
</ul> </div>
</div> </body>
</body>
</html> </html>

74
flex/06-flex-layout/solution/solution.html
View File

@ -1,42 +1,42 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LAYOUT</title> <title>LAYOUT</title>
<link rel="stylesheet" href="./solution.css"> <link rel="stylesheet" href="./solution.css">
</head> </head>
<body> <body>
<div class="header"> <div class="header">
<ul class="left-links"> <ul class="left-links">
<li><a href="google.com">About</a></li> <li><a href="google.com">About</a></li>
<li><a href="google.com">Store</a></li> <li><a href="google.com">Store</a></li>
</ul> </ul>
<ul class="right-links"> <ul class="right-links">
<li><a href="google.com">Profile</a></li> <li><a href="google.com">Profile</a></li>
<li><a href="google.com">Settings</a></li> <li><a href="google.com">Settings</a></li>
</ul> </ul>
</div>
<div class="content">
<img src="./logo.png" alt="">
<div class="input">
<input type="text">
</div> </div>
<div class="buttons"> <div class="content">
<button>Do the thing!</button> <img src="./logo.png" alt="">
<button>Do the other thing!</button> <div class="input">
<input type="text">
</div>
<div class="buttons">
<button>Do the thing!</button>
<button>Do the other thing!</button>
</div>
</div> </div>
</div> <div class="footer">
<div class="footer"> <ul class="left-links">
<ul class="left-links"> <li><a href="google.com">Advertising</a></li>
<li><a href="google.com">Advertising</a></li> <li><a href="google.com">Business</a></li>
<li><a href="google.com">Business</a></li> </ul>
</ul> <ul class="right-links">
<ul class="right-links"> <li><a href="google.com">Privacy</a></li>
<li><a href="google.com">Privacy</a></li> <li><a href="google.com">Terms</a></li>
<li><a href="google.com">Terms</a></li> </ul>
</ul> </div>
</div> </body>
</body>
</html> </html>

62
flex/07-flex-layout-2/index.html
View File

@ -1,35 +1,35 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Holy Grail</title> <title>The Holy Grail</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<div class="header"> <div class="header">
MY AWESOME WEBSITE MY AWESOME WEBSITE
</div> </div>
<div class="sidebar"> <div class="sidebar">
<ul> <ul>
<li><a href="google.com">⭐ - link one</a></li> <li><a href="google.com">⭐ - link one</a></li>
<li><a href="google.com">🦸🏽‍♂️ - link two</a></li> <li><a href="google.com">🦸🏽‍♂️ - link two</a></li>
<li><a href="google.com">🖌️ - link three</a></li> <li><a href="google.com">🖌️ - link three</a></li>
<li><a href="google.com">👌🏽 - link four</a></li> <li><a href="google.com">👌🏽 - link four</a></li>
</ul> </ul>
</div> </div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div> <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
<div class="card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div> <div class="card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div> <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div> <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div> <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div> <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
<div class="footer"> <div class="footer">
The Odin Project ❤️ The Odin Project ❤️
</div> </div>
</body> </body>
</html> </html>

62
flex/07-flex-layout-2/solution/solution.html
View File

@ -1,36 +1,36 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Holy Grail</title> <title>The Holy Grail</title>
<link rel="stylesheet" href="solution.css"> <link rel="stylesheet" href="solution.css">
</head> </head>
<body> <body>
<div class="header"> <div class="header">
MY AWESOME WEBSITE MY AWESOME WEBSITE
</div>
<div class="body">
<div class="sidebar">
<ul>
<li><a href="google.com">⭐ - link one</a></li>
<li><a href="google.com">🦸🏽‍♂️ - link two</a></li>
<li><a href="google.com">🖌️ - link three</a></li>
<li><a href="google.com">👌🏽 - link four</a></li>
</ul>
</div> </div>
<div class="container"> <div class="body">
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div> <div class="sidebar">
<div class="card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div> <ul>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div> <li><a href="google.com">⭐ - link one</a></li>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div> <li><a href="google.com">🦸🏽‍♂️ - link two</a></li>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div> <li><a href="google.com">🖌️ - link three</a></li>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div> <li><a href="google.com">👌🏽 - link four</a></li>
</ul>
</div>
<div class="container">
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
<div class="card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
</div>
</div> </div>
</div> <div class="footer">
<div class="footer"> The Odin Project ❤️
The Odin Project ❤️ </div>
</div> </body>
</body>
</html> </html>

22
foundations/01-css-methods/index.html
View File

@ -1,14 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Methods for Adding CSS</title> <title>Methods for Adding CSS</title>
</head> </head>
<body> <body>
<div>Style me via the external method!</div> <div>Style me via the external method!</div>
<p>I would like to be styled with the internal method, please.</p> <p>I would like to be styled with the internal method, please.</p>
<button>Inline Method</button> <button>Inline Method</button>
</body> </body>
</html> </html>

38
foundations/01-css-methods/solution/solution.html
View File

@ -1,23 +1,23 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Methods for Adding CSS</title> <title>Methods for Adding CSS</title>
<link rel="stylesheet" href="solution.css"> <link rel="stylesheet" href="solution.css">
<style> <style>
p { p {
background-color: green; background-color: green;
color: white; color: white;
font-size: 18px; font-size: 18px;
} }
</style> </style>
</head> </head>
<body> <body>
<div>Style me via the external method!</div> <div>Style me via the external method!</div>
<p>I would like to be styled with the internal method, please.</p> <p>I would like to be styled with the internal method, please.</p>
<button style="background-color: orange; font-size: 18px;">Inline Method</button> <button style="background-color: orange; font-size: 18px;">Inline Method</button>
</body> </body>
</html> </html>

28
foundations/02-class-id-selectors/index.html
View File

@ -1,17 +1,17 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Class and ID Selectors</title> <title>Class and ID Selectors</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<p>Number 1 - I'm a class!</p> <p>Number 1 - I'm a class!</p>
<div>Number 2 - I'm one ID.</div> <div>Number 2 - I'm one ID.</div>
<p>Number 3 - I'm a class, but cooler!</p> <p>Number 3 - I'm a class, but cooler!</p>
<div>Number 4 - I'm another ID.</div> <div>Number 4 - I'm another ID.</div>
<p>Number 5 - I'm a class!</p> <p>Number 5 - I'm a class!</p>
</body> </body>
</html> </html>

28
foundations/02-class-id-selectors/solution/solution.html
View File

@ -1,17 +1,17 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Class and ID Selectors</title> <title>Class and ID Selectors</title>
<link rel="stylesheet" href="solution.css"> <link rel="stylesheet" href="solution.css">
</head> </head>
<body> <body>
<p class="odd">Number 1 - I'm a class!</p> <p class="odd">Number 1 - I'm a class!</p>
<div id="two">Number 2 - I'm one ID.</div> <div id="two">Number 2 - I'm one ID.</div>
<p class="odd oddly-cool">Number 3 - I'm a class, but cooler!</p> <p class="odd oddly-cool">Number 3 - I'm a class, but cooler!</p>
<div id="four">Number 4 - I'm another ID.</div> <div id="four">Number 4 - I'm another ID.</div>
<p class="odd">Number 5 - I'm a class!</p> <p class="odd">Number 5 - I'm a class!</p>
</body> </body>
</html> </html>

22
foundations/03-grouping-selectors/index.html
View File

@ -1,14 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grouping Selectors</title> <title>Grouping Selectors</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<button>Click Me!</button> <button>Click Me!</button>
<button>No, Click Me!</button> <button>No, Click Me!</button>
</body> </body>
</html> </html>

24
foundations/03-grouping-selectors/solution/solution.html
View File

@ -1,14 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grouping Selectors</title> <title>Grouping Selectors</title>
<link rel="stylesheet" href="solution.css"> <link rel="stylesheet" href="solution.css">
</head> </head>
<body> <body>
<button class="inverted">Click Me!</button> <button class="inverted">Click Me!</button>
<button class="fancy">No, Click Me!</button> <button class="fancy">No, Click Me!</button>
</body> </body>
</html> </html>

38
foundations/04-chaining-selectors/index.html
View File

@ -1,22 +1,22 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chaining Selectors</title> <title>Chaining Selectors</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<!-- Use the classes BELOW this line --> <!-- Use the classes BELOW this line -->
<div> <div>
<img class="avatar proportioned" src="./pexels-katho-mutodo-8434791.jpg" alt=""> <img class="avatar proportioned" src="./pexels-katho-mutodo-8434791.jpg" alt="">
<img class="avatar distorted" src="./pexels-andrea-piacquadio-3777931.jpg" alt=""> <img class="avatar distorted" src="./pexels-andrea-piacquadio-3777931.jpg" alt="">
</div> </div>
<!-- Use the classes ABOVE this line --> <!-- Use the classes ABOVE this line -->
<div> <div>
<img class="original proportioned" src="./pexels-katho-mutodo-8434791.jpg" alt=""> <img class="original proportioned" src="./pexels-katho-mutodo-8434791.jpg" alt="">
<img class="original distorted" src="./pexels-andrea-piacquadio-3777931.jpg" alt=""> <img class="original distorted" src="./pexels-andrea-piacquadio-3777931.jpg" alt="">
</div> </div>
</body> </body>
</html> </html>

34
foundations/04-chaining-selectors/solution/solution.html
View File

@ -1,20 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chaining Selectors</title> <title>Chaining Selectors</title>
<link rel="stylesheet" href="solution.css"> <link rel="stylesheet" href="solution.css">
</head> </head>
<body> <body>
<div> <div>
<img class="avatar proportioned" src="../pexels-katho-mutodo-8434791.jpg" alt=""> <img class="avatar proportioned" src="../pexels-katho-mutodo-8434791.jpg" alt="">
<img class="avatar distorted" src="../pexels-andrea-piacquadio-3777931.jpg" alt=""> <img class="avatar distorted" src="../pexels-andrea-piacquadio-3777931.jpg" alt="">
</div> </div>
<div> <div>
<img class="original proportioned" src="../pexels-katho-mutodo-8434791.jpg" alt=""> <img class="original proportioned" src="../pexels-katho-mutodo-8434791.jpg" alt="">
<img class="original distorted" src="../pexels-andrea-piacquadio-3777931.jpg" alt=""> <img class="original distorted" src="../pexels-andrea-piacquadio-3777931.jpg" alt="">
</div> </div>
</body> </body>
</html> </html>

36
foundations/05-descendant-combinator/index.html
View File

@ -1,21 +1,21 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Descendant Combinator</title> <title>Descendant Combinator</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<p class="text">This should be styled.</p> <p class="text">This should be styled.</p>
</div> </div>
<p class="text">This should be unstyled.</p> <p class="text">This should be unstyled.</p>
<p class="text">This should be unstyled.</p> <p class="text">This should be unstyled.</p>
<div class="container"> <div class="container">
<p class="text">This should be styled.</p> <p class="text">This should be styled.</p>
<p class="text">This should be styled.</p> <p class="text">This should be styled.</p>
</div> </div>
</body> </body>
</html> </html>

36
foundations/05-descendant-combinator/solution/solution.html
View File

@ -1,21 +1,21 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Descendant Combinator</title> <title>Descendant Combinator</title>
<link rel="stylesheet" href="solution.css"> <link rel="stylesheet" href="solution.css">
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<p class="text">This should be styled.</p> <p class="text">This should be styled.</p>
</div> </div>
<p class="text">This should be unstyled.</p> <p class="text">This should be unstyled.</p>
<p class="text">This should be unstyled.</p> <p class="text">This should be unstyled.</p>
<div class="container"> <div class="container">
<p class="text">This should be styled.</p> <p class="text">This should be styled.</p>
<p class="text">This should be styled.</p> <p class="text">This should be styled.</p>
</div> </div>
</body> </body>
</html> </html>

34
foundations/06-cascade-fix/index.html
View File

@ -1,22 +1,22 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fix the Cascade</title> <title>Fix the Cascade</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<p class="para">I'm just a paragraph with red text!</p> <p class="para">I'm just a paragraph with red text!</p>
<p class="para small-para">I'm a smaller paragraph, also with red text!</p> <p class="para small-para">I'm a smaller paragraph, also with red text!</p>
<button id="confirm-button" class="button confirm">Confirm</button> <button id="confirm-button" class="button confirm">Confirm</button>
<button id="cancel-button" class="button cancel">Cancel</button> <button id="cancel-button" class="button cancel">Cancel</button>
<div class="text">I'm a div with green text!</div> <div class="text">I'm a div with green text!</div>
<div class="text">I'm a div with green text and a child div! <div class="text">I'm a div with green text and a child div!
<div class="text child">I'm a smaller child div with red text.</div> <div class="text child">I'm a smaller child div with red text.</div>
</div> </div>
</body> </body>
</html> </html>

35
foundations/06-cascade-fix/solution/solution.html
View File

@ -1,22 +1,23 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <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>Fix the Cascade</title>
<link rel="stylesheet" href="solution.css">
</head>
<body>
<p class="para">I'm just a paragraph with red text!</p>
<p class="para small-para">I'm a smaller paragraph, also with red text!</p>
<button id="confirm-button" class="button confirm">Confirm</button> <head>
<button id="cancel-button" class="button cancel">Cancel</button> <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>Fix the Cascade</title>
<link rel="stylesheet" href="solution.css">
</head>
<body>
<p class="para">I'm just a paragraph with red text!</p>
<p class="para small-para">I'm a smaller paragraph, also with red text!</p>
<div class="text">I'm a div with green text!</div> <button id="confirm-button" class="button confirm">Confirm</button>
<div class="text">I'm a div with green text and a child div! <button id="cancel-button" class="button cancel">Cancel</button>
<div class="text child">I'm a smaller child div with red text.</div>
</div> <div class="text">I'm a div with green text!</div>
</body> <div class="text">I'm a div with green text and a child div!
<div class="text child">I'm a smaller child div with red text.</div>
</div>
</body>
</html> </html>

38
grid/01-grid-layout-1/index.html
View File

@ -1,23 +1,23 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Holy Grail</title> <title>The Holy Grail</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class="header">Header</div> <div class="header">Header</div>
<div class="sidebar">Sidebar</div> <div class="sidebar">Sidebar</div>
<div class="nav">Nav</div> <div class="nav">Nav</div>
<div class="article">Article <div class="article">Article
<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 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</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 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur bibendum turpis quis interdum semper. Sed at pharetra neque, nec lacinia diam. Suspendisse quis faucibus mi, aliquam porttitor ipsum. Vivamus condimentum eros id mattis pharetra. Duis varius eros nibh. Donec a venenatis eros. Fusce in mauris massa. Donec est metus, rhoncus eu leo sed, aliquet posuere nisl.</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur bibendum turpis quis interdum semper. Sed at pharetra neque, nec lacinia diam. Suspendisse quis faucibus mi, aliquam porttitor ipsum. Vivamus condimentum eros id mattis pharetra. Duis varius eros nibh. Donec a venenatis eros. Fusce in mauris massa. Donec est metus, rhoncus eu leo sed, aliquet posuere nisl.</p>
<p>Cras ut ex in nibh accumsan ullamcorper. Fusce rutrum, metus id porta porttitor, leo ipsum congue velit, eu hendrerit lectus nisi a odio. Pellentesque tristique eros id nibh finibus euismod. Cras suscipit volutpat elit eget pulvinar. Vivamus at blandit leo. Aenean sodales ex non massa efficitur, et egestas neque dapibus. In consequat hendrerit ex, nec finibus magna faucibus eu. Aliquam a libero non erat sollicitudin condimentum. In ac fringilla nisi. Sed pharetra ut turpis id luctus. Proin posuere tortor ac tempus luctus. Donec vitae est et neque faucibus posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p> <p>Cras ut ex in nibh accumsan ullamcorper. Fusce rutrum, metus id porta porttitor, leo ipsum congue velit, eu hendrerit lectus nisi a odio. Pellentesque tristique eros id nibh finibus euismod. Cras suscipit volutpat elit eget pulvinar. Vivamus at blandit leo. Aenean sodales ex non massa efficitur, et egestas neque dapibus. In consequat hendrerit ex, nec finibus magna faucibus eu. Aliquam a libero non erat sollicitudin condimentum. In ac fringilla nisi. Sed pharetra ut turpis id luctus. Proin posuere tortor ac tempus luctus. Donec vitae est et neque faucibus posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div>
<div class="footer">Footer</div>
</div> </div>
<div class="footer">Footer</div> </body>
</div>
</body>
</html> </html>

38
grid/01-grid-layout-1/solution/solution.html
View File

@ -1,23 +1,23 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Holy Grail</title> <title>The Holy Grail</title>
<link rel="stylesheet" href="solution.css"> <link rel="stylesheet" href="solution.css">
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class="header">Header</div> <div class="header">Header</div>
<div class="sidebar">Sidebar</div> <div class="sidebar">Sidebar</div>
<div class="nav">Nav</div> <div class="nav">Nav</div>
<div class="article">Article <div class="article">Article
<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 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</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 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur bibendum turpis quis interdum semper. Sed at pharetra neque, nec lacinia diam. Suspendisse quis faucibus mi, aliquam porttitor ipsum. Vivamus condimentum eros id mattis pharetra. Duis varius eros nibh. Donec a venenatis eros. Fusce in mauris massa. Donec est metus, rhoncus eu leo sed, aliquet posuere nisl.</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur bibendum turpis quis interdum semper. Sed at pharetra neque, nec lacinia diam. Suspendisse quis faucibus mi, aliquam porttitor ipsum. Vivamus condimentum eros id mattis pharetra. Duis varius eros nibh. Donec a venenatis eros. Fusce in mauris massa. Donec est metus, rhoncus eu leo sed, aliquet posuere nisl.</p>
<p>Cras ut ex in nibh accumsan ullamcorper. Fusce rutrum, metus id porta porttitor, leo ipsum congue velit, eu hendrerit lectus nisi a odio. Pellentesque tristique eros id nibh finibus euismod. Cras suscipit volutpat elit eget pulvinar. Vivamus at blandit leo. Aenean sodales ex non massa efficitur, et egestas neque dapibus. In consequat hendrerit ex, nec finibus magna faucibus eu. Aliquam a libero non erat sollicitudin condimentum. In ac fringilla nisi. Sed pharetra ut turpis id luctus. Proin posuere tortor ac tempus luctus. Donec vitae est et neque faucibus posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p> <p>Cras ut ex in nibh accumsan ullamcorper. Fusce rutrum, metus id porta porttitor, leo ipsum congue velit, eu hendrerit lectus nisi a odio. Pellentesque tristique eros id nibh finibus euismod. Cras suscipit volutpat elit eget pulvinar. Vivamus at blandit leo. Aenean sodales ex non massa efficitur, et egestas neque dapibus. In consequat hendrerit ex, nec finibus magna faucibus eu. Aliquam a libero non erat sollicitudin condimentum. In ac fringilla nisi. Sed pharetra ut turpis id luctus. Proin posuere tortor ac tempus luctus. Donec vitae est et neque faucibus posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div>
<div class="footer">Footer</div>
</div> </div>
<div class="footer">Footer</div> </body>
</div>
</body>
</html> </html>

38
grid/02-grid-layout-2/index.html
View File

@ -1,23 +1,23 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Holy Grail</title> <title>Responsive Holy Grail</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class="header">Header</div> <div class="header">Header</div>
<div class="sidebar">Sidebar</div> <div class="sidebar">Sidebar</div>
<div class="nav">Nav</div> <div class="nav">Nav</div>
<div class="article">Article <div class="article">Article
<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 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</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 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur bibendum turpis quis interdum semper. Sed at pharetra neque, nec lacinia diam. Suspendisse quis faucibus mi, aliquam porttitor ipsum. Vivamus condimentum eros id mattis pharetra. Duis varius eros nibh. Donec a venenatis eros. Fusce in mauris massa. Donec est metus, rhoncus eu leo sed, aliquet posuere nisl.</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur bibendum turpis quis interdum semper. Sed at pharetra neque, nec lacinia diam. Suspendisse quis faucibus mi, aliquam porttitor ipsum. Vivamus condimentum eros id mattis pharetra. Duis varius eros nibh. Donec a venenatis eros. Fusce in mauris massa. Donec est metus, rhoncus eu leo sed, aliquet posuere nisl.</p>
<p>Cras ut ex in nibh accumsan ullamcorper. Fusce rutrum, metus id porta porttitor, leo ipsum congue velit, eu hendrerit lectus nisi a odio. Pellentesque tristique eros id nibh finibus euismod. Cras suscipit volutpat elit eget pulvinar. Vivamus at blandit leo. Aenean sodales ex non massa efficitur, et egestas neque dapibus. In consequat hendrerit ex, nec finibus magna faucibus eu. Aliquam a libero non erat sollicitudin condimentum. In ac fringilla nisi. Sed pharetra ut turpis id luctus. Proin posuere tortor ac tempus luctus. Donec vitae est et neque faucibus posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p> <p>Cras ut ex in nibh accumsan ullamcorper. Fusce rutrum, metus id porta porttitor, leo ipsum congue velit, eu hendrerit lectus nisi a odio. Pellentesque tristique eros id nibh finibus euismod. Cras suscipit volutpat elit eget pulvinar. Vivamus at blandit leo. Aenean sodales ex non massa efficitur, et egestas neque dapibus. In consequat hendrerit ex, nec finibus magna faucibus eu. Aliquam a libero non erat sollicitudin condimentum. In ac fringilla nisi. Sed pharetra ut turpis id luctus. Proin posuere tortor ac tempus luctus. Donec vitae est et neque faucibus posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div>
<div class="footer">Footer</div>
</div> </div>
<div class="footer">Footer</div> </body>
</div>
</body>
</html> </html>

38
grid/02-grid-layout-2/solution/solution.html
View File

@ -1,23 +1,23 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Holy Grail</title> <title>Responsive Holy Grail</title>
<link rel="stylesheet" href="solution.css"> <link rel="stylesheet" href="solution.css">
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class="header">Header</div> <div class="header">Header</div>
<div class="sidebar">Sidebar</div> <div class="sidebar">Sidebar</div>
<div class="nav">Nav</div> <div class="nav">Nav</div>
<div class="article">Article <div class="article">Article
<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 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</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 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur bibendum turpis quis interdum semper. Sed at pharetra neque, nec lacinia diam. Suspendisse quis faucibus mi, aliquam porttitor ipsum. Vivamus condimentum eros id mattis pharetra. Duis varius eros nibh. Donec a venenatis eros. Fusce in mauris massa. Donec est metus, rhoncus eu leo sed, aliquet posuere nisl.</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur bibendum turpis quis interdum semper. Sed at pharetra neque, nec lacinia diam. Suspendisse quis faucibus mi, aliquam porttitor ipsum. Vivamus condimentum eros id mattis pharetra. Duis varius eros nibh. Donec a venenatis eros. Fusce in mauris massa. Donec est metus, rhoncus eu leo sed, aliquet posuere nisl.</p>
<p>Cras ut ex in nibh accumsan ullamcorper. Fusce rutrum, metus id porta porttitor, leo ipsum congue velit, eu hendrerit lectus nisi a odio. Pellentesque tristique eros id nibh finibus euismod. Cras suscipit volutpat elit eget pulvinar. Vivamus at blandit leo. Aenean sodales ex non massa efficitur, et egestas neque dapibus. In consequat hendrerit ex, nec finibus magna faucibus eu. Aliquam a libero non erat sollicitudin condimentum. In ac fringilla nisi. Sed pharetra ut turpis id luctus. Proin posuere tortor ac tempus luctus. Donec vitae est et neque faucibus posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p> <p>Cras ut ex in nibh accumsan ullamcorper. Fusce rutrum, metus id porta porttitor, leo ipsum congue velit, eu hendrerit lectus nisi a odio. Pellentesque tristique eros id nibh finibus euismod. Cras suscipit volutpat elit eget pulvinar. Vivamus at blandit leo. Aenean sodales ex non massa efficitur, et egestas neque dapibus. In consequat hendrerit ex, nec finibus magna faucibus eu. Aliquam a libero non erat sollicitudin condimentum. In ac fringilla nisi. Sed pharetra ut turpis id luctus. Proin posuere tortor ac tempus luctus. Donec vitae est et neque faucibus posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div>
<div class="footer">Footer</div>
</div> </div>
<div class="footer">Footer</div> </body>
</div>
</body>
</html> </html>

182
grid/03-grid-layout-3/index.html
View File

@ -1,102 +1,102 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Holy Grail Mockup</title> <title>Holy Grail Mockup</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class="header"> <div class="header">
<div class="logo">Header Logo</div> <div class="logo">Header Logo</div>
<div class="menu"> <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> <ul>
<li>header link one</li> <li>Latest Articles</li>
<li>header link two</li> <li>Most Views</li>
<li>header link three</li> <li>Featured</li>
<li>header link four</li>
</ul> </ul>
</div> </div>
</div>
<div class="sidebar"> <div class="article">
<div class="photo"> <div class="card">
<p>placeholder for image</p> <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>
<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"> <div class="footer">
<ul> <p>Copyright © The Odin Project 2021
<li>Latest Articles</li> </div>
<li>Most Views</li>
<li>Featured</li>
</ul>
</div> </div>
</body>
<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> </html>

182
grid/03-grid-layout-3/solution/solution.html
View File

@ -1,102 +1,102 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Holy Grail Mockup</title> <title>Holy Grail Mockup</title>
<link rel="stylesheet" href="solution.css"> <link rel="stylesheet" href="solution.css">
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class="header"> <div class="header">
<div class="logo">Header Logo</div> <div class="logo">Header Logo</div>
<div class="menu"> <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> <ul>
<li>header link one</li> <li>Latest Articles</li>
<li>header link two</li> <li>Most Views</li>
<li>header link three</li> <li>Featured</li>
<li>header link four</li>
</ul> </ul>
</div> </div>
</div>
<div class="sidebar"> <div class="article">
<div class="photo"> <div class="card">
<p>placeholder for image</p> <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>
<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"> <div class="footer">
<ul> <p>Copyright © The Odin Project 2021
<li>Latest Articles</li> </div>
<li>Most Views</li>
<li>Featured</li>
</ul>
</div> </div>
</body>
<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> </html>

36
margin-and-padding/margin-and-padding-1/index.html
View File

@ -1,21 +1,21 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Margin and Padding exercise</title> <title>Margin and Padding exercise</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<div class="one"> <div class="one">
DIV ONE DIV ONE
</div> </div>
<div class="two"> <div class="two">
DIV TWO DIV TWO
</div> </div>
<div class="three"> <div class="three">
DIV THREE DIV THREE
</div> </div>
</body> </body>
</html> </html>

36
margin-and-padding/margin-and-padding-1/solution/solution.html
View File

@ -1,21 +1,21 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Margin and Padding exercise</title> <title>Margin and Padding exercise</title>
<link rel="stylesheet" href="solution.css"> <link rel="stylesheet" href="solution.css">
</head> </head>
<body> <body>
<div class="one"> <div class="one">
DIV ONE DIV ONE
</div> </div>
<div class="two"> <div class="two">
DIV TWO DIV TWO
</div> </div>
<div class="three"> <div class="three">
DIV THREE DIV THREE
</div> </div>
</body> </body>
</html> </html>

28
margin-and-padding/margin-and-padding-2/index.html
View File

@ -1,17 +1,17 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Margin and Padding exercise 2</title> <title>Margin and Padding exercise 2</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<div class="card"> <div class="card">
<h1 class="title">I'm a card</h1> <h1 class="title">I'm a card</h1>
<div class="content">I have content inside me..lorem ipsum blah blah blah. Here's some stuff you need to read.</div> <div class="content">I have content inside me..lorem ipsum blah blah blah. Here's some stuff you need to read.</div>
<div class="button-container">and a <button>BIG BUTTON</button></div> <div class="button-container">and a <button>BIG BUTTON</button></div>
</div> </div>
</body> </body>
</html> </html>

28
margin-and-padding/margin-and-padding-2/solution/solution.html
View File

@ -1,17 +1,17 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Margin and Padding exercise 2</title> <title>Margin and Padding exercise 2</title>
<link rel="stylesheet" href="solution.css"> <link rel="stylesheet" href="solution.css">
</head> </head>
<body> <body>
<div class="card"> <div class="card">
<h1 class="title">I'm a card</h1> <h1 class="title">I'm a card</h1>
<div class="content">I have content inside me..lorem ipsum blah blah blah. Here's some stuff you need to read.</div> <div class="content">I have content inside me..lorem ipsum blah blah blah. Here's some stuff you need to read.</div>
<div class="button-container">and a <button>BIG BUTTON</button></div> <div class="button-container">and a <button>BIG BUTTON</button></div>
</div> </div>
</body> </body>
</html> </html>