Add indents to <body> and <head> tags in all exercises
This commit is contained in:
ZebraMilk
parent
ab92ffab14
commit
04bf4da6d1
|
|
@ -1,15 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<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>CENTER THIS DIV</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="box">center this div</div>
|
||||
</div>
|
||||
</body>
|
||||
<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>CENTER THIS DIV</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="box">center this div</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,15 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<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>CENTER THIS DIV</title>
|
||||
<link rel="stylesheet" href="solution.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="box">center this div</div>
|
||||
</div>
|
||||
</body>
|
||||
<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>CENTER THIS DIV</title>
|
||||
<link rel="stylesheet" href="solution.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="box">center this div</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,29 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<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>Flex Header</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<div class="left-links">
|
||||
<ul>
|
||||
<li><a href="#">ONE</a></li>
|
||||
<li><a href="#">TWO</a></li>
|
||||
<li><a href="#">THREE</a></li>
|
||||
</ul>
|
||||
<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>Flex Header</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<div class="left-links">
|
||||
<ul>
|
||||
<li><a href="#">ONE</a></li>
|
||||
<li><a href="#">TWO</a></li>
|
||||
<li><a href="#">THREE</a></li>
|
||||
</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 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>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,29 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<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>Flex Header</title>
|
||||
<link rel="stylesheet" href="solution.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<div class="left-links">
|
||||
<ul>
|
||||
<li><a href="#">ONE</a></li>
|
||||
<li><a href="#">TWO</a></li>
|
||||
<li><a href="#">THREE</a></li>
|
||||
</ul>
|
||||
<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>Flex Header</title>
|
||||
<link rel="stylesheet" href="solution.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<div class="left-links">
|
||||
<ul>
|
||||
<li><a href="#">ONE</a></li>
|
||||
<li><a href="#">TWO</a></li>
|
||||
<li><a href="#">THREE</a></li>
|
||||
</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 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>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,26 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<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>Flex Header 2</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<div class="logo">
|
||||
LOGO
|
||||
<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>Flex Header 2</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<div class="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>
|
||||
<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>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,30 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<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>Flex Header 2</title>
|
||||
<link rel="stylesheet" href="solution.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<div class="left">
|
||||
<div class="logo">
|
||||
LOGO
|
||||
<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>Flex Header 2</title>
|
||||
<link rel="stylesheet" href="solution.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<div class="left">
|
||||
<div class="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>
|
||||
<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>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,30 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<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>Information</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="title">Information!</div>
|
||||
<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>Information</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="title">Information!</div>
|
||||
|
||||
<img src="./images/barberry.png" alt="barberry">
|
||||
<div class="text">This is a type of plant. We love this one.</div>
|
||||
<img src="./images/barberry.png" alt="barberry">
|
||||
<div class="text">This is a type of plant. We love this one.</div>
|
||||
|
||||
<img src="./images/chilli.png" alt="chili">
|
||||
<div class="text">This is another type of plant. Isn't it nice</div>
|
||||
<img src="./images/chilli.png" alt="chili">
|
||||
<div class="text">This is another type of plant. Isn't it nice</div>
|
||||
|
||||
<img src="./images/pepper.png" alt="pepper">
|
||||
<div class="text">We have so many plants. Yay plants.</div>
|
||||
<img src="./images/pepper.png" alt="pepper">
|
||||
<div class="text">We have so many plants. Yay plants.</div>
|
||||
|
||||
<img src="./images/saffron.png" alt="saffron">
|
||||
<div class="text">I'm running out of things to say about plants.</div>
|
||||
<img src="./images/saffron.png" alt="saffron">
|
||||
<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 -->
|
||||
<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>
|
||||
</body>
|
||||
<!-- disregard this section, it's here to give attribution to the creator of these icons -->
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,37 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<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>Information</title>
|
||||
<link rel="stylesheet" href="solution.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="title">Information!</div>
|
||||
<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>Information</title>
|
||||
<link rel="stylesheet" href="solution.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="title">Information!</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="info">
|
||||
<img src="./images/barberry.png" alt="barberry">
|
||||
<div class="text">This is a type of plant. We love this one.</div>
|
||||
<div class="container">
|
||||
<div class="info">
|
||||
<img src="./images/barberry.png" alt="barberry">
|
||||
<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 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 -->
|
||||
<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>
|
||||
</body>
|
||||
<!-- disregard this section, it's here to give attribution to the creator of these icons -->
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,20 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<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">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<title>Modal</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="modal">
|
||||
<div class="icon">!</div>
|
||||
<div class="header">Are you sure you want to do that?</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>
|
||||
<button class="continue">Continue</button>
|
||||
<button class="cancel">Cancel</button>
|
||||
</div>
|
||||
</body>
|
||||
<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">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<title>Modal</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="modal">
|
||||
<div class="icon">!</div>
|
||||
<div class="header">Are you sure you want to do that?</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>
|
||||
<button class="continue">Continue</button>
|
||||
<button class="cancel">Cancel</button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,23 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<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">
|
||||
<link rel="stylesheet" href="solution.css">
|
||||
<title>Modal</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="modal">
|
||||
<div class="icon">!</div>
|
||||
<div class="container">
|
||||
<div class="header">Are you sure you want to do that?
|
||||
<div class="close-button">✖</div>
|
||||
<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">
|
||||
<link rel="stylesheet" href="solution.css">
|
||||
<title>Modal</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="modal">
|
||||
<div class="icon">!</div>
|
||||
<div class="container">
|
||||
<div class="header">Are you sure you want to do that?
|
||||
<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 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>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,42 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<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>LAYOUT</title>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<ul class="left-links">
|
||||
<li><a href="google.com">About</a></li>
|
||||
<li><a href="google.com">Store</a></li>
|
||||
</ul>
|
||||
<ul class="right-links">
|
||||
<li><a href="google.com">Profile</a></li>
|
||||
<li><a href="google.com">Settings</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="content">
|
||||
<img src="./logo.png" alt="">
|
||||
<div class="input">
|
||||
<input type="text">
|
||||
<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>LAYOUT</title>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<ul class="left-links">
|
||||
<li><a href="google.com">About</a></li>
|
||||
<li><a href="google.com">Store</a></li>
|
||||
</ul>
|
||||
<ul class="right-links">
|
||||
<li><a href="google.com">Profile</a></li>
|
||||
<li><a href="google.com">Settings</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button>Do the thing!</button>
|
||||
<button>Do the other thing!</button>
|
||||
<div class="content">
|
||||
<img src="./logo.png" alt="">
|
||||
<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 class="footer">
|
||||
<ul class="left-links">
|
||||
<li><a href="google.com">Advertising</a></li>
|
||||
<li><a href="google.com">Business</a></li>
|
||||
</ul>
|
||||
<ul class="right-links">
|
||||
<li><a href="google.com">Privacy</a></li>
|
||||
<li><a href="google.com">Terms</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
<div class="footer">
|
||||
<ul class="left-links">
|
||||
<li><a href="google.com">Advertising</a></li>
|
||||
<li><a href="google.com">Business</a></li>
|
||||
</ul>
|
||||
<ul class="right-links">
|
||||
<li><a href="google.com">Privacy</a></li>
|
||||
<li><a href="google.com">Terms</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,42 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<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>LAYOUT</title>
|
||||
<link rel="stylesheet" href="./solution.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<ul class="left-links">
|
||||
<li><a href="google.com">About</a></li>
|
||||
<li><a href="google.com">Store</a></li>
|
||||
</ul>
|
||||
<ul class="right-links">
|
||||
<li><a href="google.com">Profile</a></li>
|
||||
<li><a href="google.com">Settings</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="content">
|
||||
<img src="./logo.png" alt="">
|
||||
<div class="input">
|
||||
<input type="text">
|
||||
<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>LAYOUT</title>
|
||||
<link rel="stylesheet" href="./solution.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<ul class="left-links">
|
||||
<li><a href="google.com">About</a></li>
|
||||
<li><a href="google.com">Store</a></li>
|
||||
</ul>
|
||||
<ul class="right-links">
|
||||
<li><a href="google.com">Profile</a></li>
|
||||
<li><a href="google.com">Settings</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button>Do the thing!</button>
|
||||
<button>Do the other thing!</button>
|
||||
<div class="content">
|
||||
<img src="./logo.png" alt="">
|
||||
<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 class="footer">
|
||||
<ul class="left-links">
|
||||
<li><a href="google.com">Advertising</a></li>
|
||||
<li><a href="google.com">Business</a></li>
|
||||
</ul>
|
||||
<ul class="right-links">
|
||||
<li><a href="google.com">Privacy</a></li>
|
||||
<li><a href="google.com">Terms</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
<div class="footer">
|
||||
<ul class="left-links">
|
||||
<li><a href="google.com">Advertising</a></li>
|
||||
<li><a href="google.com">Business</a></li>
|
||||
</ul>
|
||||
<ul class="right-links">
|
||||
<li><a href="google.com">Privacy</a></li>
|
||||
<li><a href="google.com">Terms</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,35 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<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>The Holy Grail</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
MY AWESOME WEBSITE
|
||||
</div>
|
||||
<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>The Holy Grail</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
MY AWESOME WEBSITE
|
||||
</div>
|
||||
|
||||
<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 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 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 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 class="footer">
|
||||
The Odin Project ❤️
|
||||
</div>
|
||||
</body>
|
||||
<div class="footer">
|
||||
The Odin Project ❤️
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,36 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<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>The Holy Grail</title>
|
||||
<link rel="stylesheet" href="solution.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
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>
|
||||
<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>The Holy Grail</title>
|
||||
<link rel="stylesheet" href="solution.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
MY AWESOME WEBSITE
|
||||
</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 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 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 class="footer">
|
||||
The Odin Project ❤️
|
||||
</div>
|
||||
</body>
|
||||
<div class="footer">
|
||||
The Odin Project ❤️
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,23 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<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>The Holy Grail</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">Header</div>
|
||||
<div class="sidebar">Sidebar</div>
|
||||
<div class="nav">Nav</div>
|
||||
<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>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>
|
||||
<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>The Holy Grail</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">Header</div>
|
||||
<div class="sidebar">Sidebar</div>
|
||||
<div class="nav">Nav</div>
|
||||
<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>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>
|
||||
</div>
|
||||
<div class="footer">Footer</div>
|
||||
</div>
|
||||
<div class="footer">Footer</div>
|
||||
</div>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<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>The Holy Grail</title>
|
||||
<link rel="stylesheet" href="solution.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">Header</div>
|
||||
<div class="sidebar">Sidebar</div>
|
||||
<div class="nav">Nav</div>
|
||||
<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>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>
|
||||
<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>The Holy Grail</title>
|
||||
<link rel="stylesheet" href="solution.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">Header</div>
|
||||
<div class="sidebar">Sidebar</div>
|
||||
<div class="nav">Nav</div>
|
||||
<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>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>
|
||||
</div>
|
||||
<div class="footer">Footer</div>
|
||||
</div>
|
||||
<div class="footer">Footer</div>
|
||||
</div>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<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>Responsive Holy Grail</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">Header</div>
|
||||
<div class="sidebar">Sidebar</div>
|
||||
<div class="nav">Nav</div>
|
||||
<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>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>
|
||||
<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>Responsive Holy Grail</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">Header</div>
|
||||
<div class="sidebar">Sidebar</div>
|
||||
<div class="nav">Nav</div>
|
||||
<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>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>
|
||||
</div>
|
||||
<div class="footer">Footer</div>
|
||||
</div>
|
||||
<div class="footer">Footer</div>
|
||||
</div>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<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>Responsive Holy Grail</title>
|
||||
<link rel="stylesheet" href="solution.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">Header</div>
|
||||
<div class="sidebar">Sidebar</div>
|
||||
<div class="nav">Nav</div>
|
||||
<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>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>
|
||||
<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>Responsive Holy Grail</title>
|
||||
<link rel="stylesheet" href="solution.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">Header</div>
|
||||
<div class="sidebar">Sidebar</div>
|
||||
<div class="nav">Nav</div>
|
||||
<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>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>
|
||||
</div>
|
||||
<div class="footer">Footer</div>
|
||||
</div>
|
||||
<div class="footer">Footer</div>
|
||||
</div>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,102 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<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>Holy Grail Mockup</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<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>Holy Grail Mockup</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
|
||||
<div class="header">
|
||||
<div class="logo">Header Logo</div>
|
||||
<div class="menu">
|
||||
<div class="header">
|
||||
<div class="logo">Header Logo</div>
|
||||
<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>
|
||||
<li>header link one</li>
|
||||
<li>header link two</li>
|
||||
<li>header link three</li>
|
||||
<li>header link four</li>
|
||||
<li>Latest Articles</li>
|
||||
<li>Most Views</li>
|
||||
<li>Featured</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar">
|
||||
<div class="photo">
|
||||
<p>placeholder for image</p>
|
||||
<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="side-content">Box 1
|
||||
</div>
|
||||
<div class="side-content">Box 2
|
||||
</div>
|
||||
<div class="side-content">Box 3
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav">
|
||||
<ul>
|
||||
<li>Latest Articles</li>
|
||||
<li>Most Views</li>
|
||||
<li>Featured</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<p>Copyright © The Odin Project 2021
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,102 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<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>Holy Grail Mockup</title>
|
||||
<link rel="stylesheet" href="solution.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<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>Holy Grail Mockup</title>
|
||||
<link rel="stylesheet" href="solution.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
|
||||
<div class="header">
|
||||
<div class="logo">Header Logo</div>
|
||||
<div class="menu">
|
||||
<div class="header">
|
||||
<div class="logo">Header Logo</div>
|
||||
<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>
|
||||
<li>header link one</li>
|
||||
<li>header link two</li>
|
||||
<li>header link three</li>
|
||||
<li>header link four</li>
|
||||
<li>Latest Articles</li>
|
||||
<li>Most Views</li>
|
||||
<li>Featured</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar">
|
||||
<div class="photo">
|
||||
<p>placeholder for image</p>
|
||||
<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="side-content">Box 1
|
||||
</div>
|
||||
<div class="side-content">Box 2
|
||||
</div>
|
||||
<div class="side-content">Box 3
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav">
|
||||
<ul>
|
||||
<li>Latest Articles</li>
|
||||
<li>Most Views</li>
|
||||
<li>Featured</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<p>Copyright © The Odin Project 2021
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,21 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<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>Margin and Padding exercise</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="one">
|
||||
DIV ONE
|
||||
</div>
|
||||
<div class="two">
|
||||
DIV TWO
|
||||
</div>
|
||||
<div class="three">
|
||||
DIV THREE
|
||||
</div>
|
||||
</body>
|
||||
<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>Margin and Padding exercise</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="one">
|
||||
DIV ONE
|
||||
</div>
|
||||
<div class="two">
|
||||
DIV TWO
|
||||
</div>
|
||||
<div class="three">
|
||||
DIV THREE
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<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>Margin and Padding exercise</title>
|
||||
<link rel="stylesheet" href="solution.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="one">
|
||||
DIV ONE
|
||||
</div>
|
||||
<div class="two">
|
||||
DIV TWO
|
||||
</div>
|
||||
<div class="three">
|
||||
DIV THREE
|
||||
</div>
|
||||
</body>
|
||||
<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>Margin and Padding exercise</title>
|
||||
<link rel="stylesheet" href="solution.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="one">
|
||||
DIV ONE
|
||||
</div>
|
||||
<div class="two">
|
||||
DIV TWO
|
||||
</div>
|
||||
<div class="three">
|
||||
DIV THREE
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<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>Margin and Padding exercise 2</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="card">
|
||||
<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="button-container">and a <button>BIG BUTTON</button></div>
|
||||
</div>
|
||||
</body>
|
||||
<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>Margin and Padding exercise 2</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="card">
|
||||
<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="button-container">and a <button>BIG BUTTON</button></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<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>Margin and Padding exercise 2</title>
|
||||
<link rel="stylesheet" href="solution.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="card">
|
||||
<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="button-container">and a <button>BIG BUTTON</button></div>
|
||||
</div>
|
||||
</body>
|
||||
<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>Margin and Padding exercise 2</title>
|
||||
<link rel="stylesheet" href="solution.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="card">
|
||||
<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="button-container">and a <button>BIG BUTTON</button></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue