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

Add indents to <body> and <head> tags in all exercises

This commit is contained in:
ZebraMilk 2022-01-30 12:16:13 -06:00
parent ab92ffab14
commit 04bf4da6d1
24 changed files with 667 additions and 667 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
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>