Merge pull request #125 from ZebraMilk/main
TheOdinProject/css-exercises/foundations: add indent to the <body> and <head> tags within <html> for readability
This commit is contained in:
Eric Olkowski
GitHub
commit
cce37cdd35
|
|
@ -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>
|
||||
|
||||
<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>
|
||||
<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="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="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>
|
||||
</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,14 +1,14 @@
|
|||
<!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>Methods for Adding CSS</title>
|
||||
</head>
|
||||
<body>
|
||||
<div>Style me via the external method!</div>
|
||||
<p>I would like to be styled with the internal method, please.</p>
|
||||
<button>Inline Method</button>
|
||||
</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>Methods for Adding CSS</title>
|
||||
</head>
|
||||
<body>
|
||||
<div>Style me via the external method!</div>
|
||||
<p>I would like to be styled with the internal method, please.</p>
|
||||
<button>Inline Method</button>
|
||||
</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>Methods for Adding CSS</title>
|
||||
<link rel="stylesheet" href="solution.css">
|
||||
<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>Methods for Adding CSS</title>
|
||||
<link rel="stylesheet" href="solution.css">
|
||||
|
||||
<style>
|
||||
p {
|
||||
background-color: green;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>Style me via the external method!</div>
|
||||
<p>I would like to be styled with the internal method, please.</p>
|
||||
<button style="background-color: orange; font-size: 18px;">Inline Method</button>
|
||||
</body>
|
||||
<style>
|
||||
p {
|
||||
background-color: green;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>Style me via the external method!</div>
|
||||
<p>I would like to be styled with the internal method, please.</p>
|
||||
<button style="background-color: orange; font-size: 18px;">Inline Method</button>
|
||||
</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>Class and ID Selectors</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<p>Number 1 - I'm a class!</p>
|
||||
<div>Number 2 - I'm one ID.</div>
|
||||
<p>Number 3 - I'm a class, but cooler!</p>
|
||||
<div>Number 4 - I'm another ID.</div>
|
||||
<p>Number 5 - I'm a class!</p>
|
||||
</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>Class and ID Selectors</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<p>Number 1 - I'm a class!</p>
|
||||
<div>Number 2 - I'm one ID.</div>
|
||||
<p>Number 3 - I'm a class, but cooler!</p>
|
||||
<div>Number 4 - I'm another ID.</div>
|
||||
<p>Number 5 - I'm a class!</p>
|
||||
</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>Class and ID Selectors</title>
|
||||
<link rel="stylesheet" href="solution.css">
|
||||
</head>
|
||||
<body>
|
||||
<p class="odd">Number 1 - I'm a class!</p>
|
||||
<div id="two">Number 2 - I'm one ID.</div>
|
||||
<p class="odd oddly-cool">Number 3 - I'm a class, but cooler!</p>
|
||||
<div id="four">Number 4 - I'm another ID.</div>
|
||||
<p class="odd">Number 5 - I'm a class!</p>
|
||||
</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>Class and ID Selectors</title>
|
||||
<link rel="stylesheet" href="solution.css">
|
||||
</head>
|
||||
<body>
|
||||
<p class="odd">Number 1 - I'm a class!</p>
|
||||
<div id="two">Number 2 - I'm one ID.</div>
|
||||
<p class="odd oddly-cool">Number 3 - I'm a class, but cooler!</p>
|
||||
<div id="four">Number 4 - I'm another ID.</div>
|
||||
<p class="odd">Number 5 - I'm a class!</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,14 +1,14 @@
|
|||
<!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>Grouping Selectors</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<button>Click Me!</button>
|
||||
<button>No, Click Me!</button>
|
||||
</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>Grouping Selectors</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<button>Click Me!</button>
|
||||
<button>No, Click Me!</button>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,14 +1,14 @@
|
|||
<!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>Grouping Selectors</title>
|
||||
<link rel="stylesheet" href="solution.css">
|
||||
</head>
|
||||
<body>
|
||||
<button class="inverted">Click Me!</button>
|
||||
<button class="fancy">No, Click Me!</button>
|
||||
</body>
|
||||
<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>Grouping Selectors</title>
|
||||
<link rel="stylesheet" href="solution.css">
|
||||
</head>
|
||||
<body>
|
||||
<button class="inverted">Click Me!</button>
|
||||
<button class="fancy">No, Click Me!</button>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,22 +1,22 @@
|
|||
<!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>Chaining Selectors</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Use the classes BELOW this line -->
|
||||
<div>
|
||||
<img class="avatar proportioned" src="./pexels-katho-mutodo-8434791.jpg" alt="">
|
||||
<img class="avatar distorted" src="./pexels-andrea-piacquadio-3777931.jpg" alt="">
|
||||
</div>
|
||||
<!-- Use the classes ABOVE this line -->
|
||||
<div>
|
||||
<img class="original proportioned" src="./pexels-katho-mutodo-8434791.jpg" alt="">
|
||||
<img class="original distorted" src="./pexels-andrea-piacquadio-3777931.jpg" alt="">
|
||||
</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>Chaining Selectors</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Use the classes BELOW this line -->
|
||||
<div>
|
||||
<img class="avatar proportioned" src="./pexels-katho-mutodo-8434791.jpg" alt="">
|
||||
<img class="avatar distorted" src="./pexels-andrea-piacquadio-3777931.jpg" alt="">
|
||||
</div>
|
||||
<!-- Use the classes ABOVE this line -->
|
||||
<div>
|
||||
<img class="original proportioned" src="./pexels-katho-mutodo-8434791.jpg" alt="">
|
||||
<img class="original distorted" src="./pexels-andrea-piacquadio-3777931.jpg" alt="">
|
||||
</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">
|
||||
<title>Chaining Selectors</title>
|
||||
<link rel="stylesheet" href="solution.css">
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<img class="avatar proportioned" src="../pexels-katho-mutodo-8434791.jpg" alt="">
|
||||
<img class="avatar distorted" src="../pexels-andrea-piacquadio-3777931.jpg" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<img class="original proportioned" src="../pexels-katho-mutodo-8434791.jpg" alt="">
|
||||
<img class="original distorted" src="../pexels-andrea-piacquadio-3777931.jpg" alt="">
|
||||
</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>Chaining Selectors</title>
|
||||
<link rel="stylesheet" href="solution.css">
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<img class="avatar proportioned" src="../pexels-katho-mutodo-8434791.jpg" alt="">
|
||||
<img class="avatar distorted" src="../pexels-andrea-piacquadio-3777931.jpg" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<img class="original proportioned" src="../pexels-katho-mutodo-8434791.jpg" alt="">
|
||||
<img class="original distorted" src="../pexels-andrea-piacquadio-3777931.jpg" alt="">
|
||||
</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>Descendant Combinator</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<p class="text">This should be styled.</p>
|
||||
</div>
|
||||
<p class="text">This should be unstyled.</p>
|
||||
<p class="text">This should be unstyled.</p>
|
||||
<div class="container">
|
||||
<p class="text">This should be styled.</p>
|
||||
<p class="text">This should be styled.</p>
|
||||
</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>Descendant Combinator</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<p class="text">This should be styled.</p>
|
||||
</div>
|
||||
<p class="text">This should be unstyled.</p>
|
||||
<p class="text">This should be unstyled.</p>
|
||||
<div class="container">
|
||||
<p class="text">This should be styled.</p>
|
||||
<p class="text">This should be styled.</p>
|
||||
</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>Descendant Combinator</title>
|
||||
<link rel="stylesheet" href="solution.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<p class="text">This should be styled.</p>
|
||||
</div>
|
||||
<p class="text">This should be unstyled.</p>
|
||||
<p class="text">This should be unstyled.</p>
|
||||
<div class="container">
|
||||
<p class="text">This should be styled.</p>
|
||||
<p class="text">This should be styled.</p>
|
||||
</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>Descendant Combinator</title>
|
||||
<link rel="stylesheet" href="solution.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<p class="text">This should be styled.</p>
|
||||
</div>
|
||||
<p class="text">This should be unstyled.</p>
|
||||
<p class="text">This should be unstyled.</p>
|
||||
<div class="container">
|
||||
<p class="text">This should be styled.</p>
|
||||
<p class="text">This should be styled.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,22 +1,22 @@
|
|||
<!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>Fix the Cascade</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<p class="para">I'm just a paragraph with red text!</p>
|
||||
<p class="para small-para">I'm a smaller paragraph, also with red text!</p>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Fix the Cascade</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<p class="para">I'm just a paragraph with red text!</p>
|
||||
<p class="para small-para">I'm a smaller paragraph, also with red text!</p>
|
||||
|
||||
<button id="confirm-button" class="button confirm">Confirm</button>
|
||||
<button id="cancel-button" class="button cancel">Cancel</button>
|
||||
<button id="confirm-button" class="button confirm">Confirm</button>
|
||||
<button id="cancel-button" class="button cancel">Cancel</button>
|
||||
|
||||
<div class="text">I'm a div with green text!</div>
|
||||
<div class="text">I'm a div with green text and a child div!
|
||||
<div class="text child">I'm a smaller child div with red text.</div>
|
||||
</div>
|
||||
</body>
|
||||
<div class="text">I'm a div with green text!</div>
|
||||
<div class="text">I'm a div with green text and a child div!
|
||||
<div class="text child">I'm a smaller child div with red text.</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,22 +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>Fix the Cascade</title>
|
||||
<link rel="stylesheet" href="solution.css">
|
||||
</head>
|
||||
<body>
|
||||
<p class="para">I'm just a paragraph with red text!</p>
|
||||
<p class="para small-para">I'm a smaller paragraph, also with red text!</p>
|
||||
|
||||
<button id="confirm-button" class="button confirm">Confirm</button>
|
||||
<button id="cancel-button" class="button cancel">Cancel</button>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Fix the Cascade</title>
|
||||
<link rel="stylesheet" href="solution.css">
|
||||
</head>
|
||||
<body>
|
||||
<p class="para">I'm just a paragraph with red text!</p>
|
||||
<p class="para small-para">I'm a smaller paragraph, also with red text!</p>
|
||||
|
||||
<div class="text">I'm a div with green text!</div>
|
||||
<div class="text">I'm a div with green text and a child div!
|
||||
<div class="text child">I'm a smaller child div with red text.</div>
|
||||
</div>
|
||||
</body>
|
||||
<button id="confirm-button" class="button confirm">Confirm</button>
|
||||
<button id="cancel-button" class="button cancel">Cancel</button>
|
||||
|
||||
<div class="text">I'm a div with green text!</div>
|
||||
<div class="text">I'm a div with green text and a child div!
|
||||
<div class="text child">I'm a smaller child div with red text.</div>
|
||||
</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 class="footer">
|
||||
<p>Copyright © The Odin Project 2021
|
||||
</div>
|
||||
|
||||
</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 class="footer">
|
||||
<p>Copyright © The Odin Project 2021
|
||||
</div>
|
||||
|
||||
</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