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

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

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

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

@ -1,13 +1,13 @@
<!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>
@ -25,5 +25,5 @@
</ul> </ul>
</div> </div>
</div> </div>
</body> </body>
</html> </html>

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

@ -1,13 +1,13 @@
<!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>
@ -25,5 +25,5 @@
</ul> </ul>
</div> </div>
</div> </div>
</body> </body>
</html> </html>

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

@ -1,13 +1,13 @@
<!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
@ -22,5 +22,5 @@
</button> </button>
<div class="profile-image"></div> <div class="profile-image"></div>
</div> </div>
</body> </body>
</html> </html>

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

@ -1,13 +1,13 @@
<!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">
@ -26,5 +26,5 @@
<div class="profile-image"></div> <div class="profile-image"></div>
</div> </div>
</div> </div>
</body> </body>
</html> </html>

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

@ -1,13 +1,13 @@
<!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">
@ -26,5 +26,5 @@
<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>

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

@ -1,13 +1,13 @@
<!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">
@ -33,5 +33,5 @@
<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>

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

@ -1,13 +1,13 @@
<!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>
@ -16,5 +16,5 @@
<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>

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

@ -1,13 +1,13 @@
<!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">
@ -19,5 +19,5 @@
<button class="cancel">Cancel</button> <button class="cancel">Cancel</button>
</div> </div>
</div> </div>
</body> </body>
</html> </html>

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

@ -1,13 +1,13 @@
<!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>
@ -38,5 +38,5 @@
<li><a href="google.com">Terms</a></li> <li><a href="google.com">Terms</a></li>
</ul> </ul>
</div> </div>
</body> </body>
</html> </html>

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

@ -1,13 +1,13 @@
<!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>
@ -38,5 +38,5 @@
<li><a href="google.com">Terms</a></li> <li><a href="google.com">Terms</a></li>
</ul> </ul>
</div> </div>
</body> </body>
</html> </html>

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

@ -1,13 +1,13 @@
<!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>
@ -31,5 +31,5 @@
<div class="footer"> <div class="footer">
The Odin Project ❤️ The Odin Project ❤️
</div> </div>
</body> </body>
</html> </html>

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

@ -1,13 +1,13 @@
<!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>
@ -32,5 +32,5 @@
<div class="footer"> <div class="footer">
The Odin Project ❤️ The Odin Project ❤️
</div> </div>
</body> </body>
</html> </html>

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

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

@ -1,6 +1,6 @@
<!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">
@ -14,10 +14,10 @@
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>

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

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

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

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

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

@ -1,13 +1,13 @@
<!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="">
@ -18,5 +18,5 @@
<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>

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

@ -1,13 +1,13 @@
<!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="">
@ -16,5 +16,5 @@
<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>

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

@ -1,13 +1,13 @@
<!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>
@ -17,5 +17,5 @@
<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>

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

@ -1,13 +1,13 @@
<!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>
@ -17,5 +17,5 @@
<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>

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

@ -1,13 +1,13 @@
<!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>
@ -18,5 +18,5 @@
<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>

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

@ -1,13 +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>Fix the Cascade</title> <title>Fix the Cascade</title>
<link rel="stylesheet" href="solution.css"> <link rel="stylesheet" href="solution.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>
@ -18,5 +19,5 @@
<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>

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

@ -1,13 +1,13 @@
<!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>
@ -19,5 +19,5 @@
</div> </div>
<div class="footer">Footer</div> <div class="footer">Footer</div>
</div> </div>
</body> </body>
</html> </html>

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

@ -1,13 +1,13 @@
<!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>
@ -19,5 +19,5 @@
</div> </div>
<div class="footer">Footer</div> <div class="footer">Footer</div>
</div> </div>
</body> </body>
</html> </html>

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

@ -1,13 +1,13 @@
<!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>
@ -19,5 +19,5 @@
</div> </div>
<div class="footer">Footer</div> <div class="footer">Footer</div>
</div> </div>
</body> </body>
</html> </html>

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

@ -1,13 +1,13 @@
<!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>
@ -19,5 +19,5 @@
</div> </div>
<div class="footer">Footer</div> <div class="footer">Footer</div>
</div> </div>
</body> </body>
</html> </html>

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

@ -1,13 +1,13 @@
<!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">
@ -98,5 +98,5 @@
</div> </div>
</div> </div>
</body> </body>
</html> </html>

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

@ -1,13 +1,13 @@
<!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">
@ -98,5 +98,5 @@
</div> </div>
</div> </div>
</body> </body>
</html> </html>

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

@ -1,13 +1,13 @@
<!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>
@ -17,5 +17,5 @@
<div class="three"> <div class="three">
DIV THREE DIV THREE
</div> </div>
</body> </body>
</html> </html>

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

@ -1,13 +1,13 @@
<!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>
@ -17,5 +17,5 @@
<div class="three"> <div class="three">
DIV THREE DIV THREE
</div> </div>
</body> </body>
</html> </html>

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

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