Initial commit
This commit is contained in:
commit
5205c38ee2
|
|
@ -0,0 +1,12 @@
|
|||
# CENTER THIS DIV
|
||||
This one is simple, but it's something that you'll want to do ALL THE TIME. Might as well get it out of the way now.
|
||||
|
||||
All you need to do is center the red div inside the blue container.
|
||||
|
||||
## Desired Outcome
|
||||
|
||||
|
||||
### Self Check
|
||||
- Is the red div centered?
|
||||
- Did you _only_ use flexbox to center it?
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
|
|
@ -0,0 +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>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
.container {
|
||||
background: dodgerblue;
|
||||
border: 4px solid midnightblue;
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.box {
|
||||
background: palevioletred;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
border: 6px solid maroon;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
/* SOLUTION */
|
||||
|
||||
/* disclaimer: duplicating the `.container` selector here isn't best practice.
|
||||
In your solution you probably put it right inside the existing `.container`,
|
||||
which _is_ the best practice.
|
||||
|
||||
We separated it out here to make it extra clear what has changed. */
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
@ -0,0 +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>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
.container {
|
||||
background: dodgerblue;
|
||||
border: 4px solid midnightblue;
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.box {
|
||||
background: palevioletred;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
border: 6px solid maroon;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
# A Basic Header
|
||||
|
||||
Use flexbox rules to create this very common webpage header style. The benefit to using flex here is that everything should be _flexible_. Check out the two screenshots below to get an idea of how it should scale with your screen. Besides flex rules, you'll also want to add some rules for margin and padding. (Hint: `ul`s have some default margin/padding that you will need to deal with.)
|
||||
|
||||
## Desired Outcome
|
||||
|
||||
narrow:
|
||||
|
||||
|
||||
wide:
|
||||
|
||||
|
||||
### Self Check
|
||||
- There is space between all items and the edge of the header (specific px amount doesn't matter here).
|
||||
- Logo is centered vertically and horizontally.
|
||||
- list-items are horizontal, and are centered vertically inside the header.
|
||||
- left-links and right-links are pushed all the way to the left and right, and stay at the edge of the header when the page is resized.
|
||||
- Your solution does not use floats, inline-block, or absolute positioning.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
|
|
@ -0,0 +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>
|
||||
</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>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
.header {
|
||||
font-family: monospace;
|
||||
background: papayawhip;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 48px;
|
||||
font-weight: 900;
|
||||
color: tomato;
|
||||
background: white;
|
||||
padding: 4px 32px;
|
||||
}
|
||||
|
||||
ul {
|
||||
/* this removes the dots on the list items*/
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 22px;
|
||||
background: white;
|
||||
padding: 8px;
|
||||
/* this removes the line under the links */
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* SOLUTION */
|
||||
|
||||
.header {
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
gap: 8px;
|
||||
}
|
||||
|
|
@ -0,0 +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>
|
||||
</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>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
.header {
|
||||
font-family: monospace;
|
||||
background: papayawhip;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 48px;
|
||||
font-weight: 900;
|
||||
color: tomato;
|
||||
background: white;
|
||||
padding: 4px 32px;
|
||||
}
|
||||
|
||||
ul {
|
||||
/* this removes the dots on the list items*/
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 22px;
|
||||
background: white;
|
||||
padding: 8px;
|
||||
/* this removes the line under the links */
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
# Another common header style
|
||||
|
||||
We're starting to sneak in a little more CSS that you haven't seen yet. Don't worry about this for now; we just want things to look a little bit prettier, and this CSS will not interfere with your task.
|
||||
|
||||
For this one you will probably need to edit the HTML a little bit. Often with flexbox you need to add containers around things to make them go where you need them to go. In this case, you probably want to separate the items that go on the left and right of the header.
|
||||
|
||||
Just like you did in the `02-flex-header` exercise, you'll be nesting flex containers inside each other.
|
||||
|
||||
## Desired outcome
|
||||
As with the last example, this one needs to be flexible in the middle, with items pushed to the left and right.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### Self Check
|
||||
- Everything is centered vertically inside the header.
|
||||
- There is 8px space between everything and the edge of the header.
|
||||
- Items are arranged horizontally as seen in the outcome image.
|
||||
- There is 16px between each item on both sides of the header.
|
||||
- flex is used to arrange everything.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 538 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
|
|
@ -0,0 +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
|
||||
</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>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
/* this is some magical font-importing.
|
||||
you'll learn about it later. */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Besley:ital,wght@0,400;1,900&display=swap');
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: #eee;
|
||||
font-family: Besley, serif;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: white;
|
||||
border-bottom: 1px solid #ddd;
|
||||
box-shadow: 0 0 8px rgba(0,0,0,.1);
|
||||
}
|
||||
|
||||
.profile-image {
|
||||
background: rebeccapurple;
|
||||
box-shadow: inset 2px 2px 4px rgba(0,0,0,.5);
|
||||
border-radius: 50%;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
color: rebeccapurple;
|
||||
font-size: 32px;
|
||||
font-weight: 900;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: rebeccapurple;
|
||||
color: white;
|
||||
padding: 8px 24px;
|
||||
}
|
||||
|
||||
a {
|
||||
/* this removes the line under our links */
|
||||
text-decoration: none;
|
||||
color: rebeccapurple;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
/* SOLUTION */
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.left, .right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
|
@ -0,0 +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
|
||||
</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>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
/* this is some magical font-importing.
|
||||
you'll learn about it later. */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Besley:ital,wght@0,400;1,900&display=swap');
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: #eee;
|
||||
font-family: Besley, serif;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: white;
|
||||
border-bottom: 1px solid #ddd;
|
||||
box-shadow: 0 0 8px rgba(0,0,0,.1);
|
||||
}
|
||||
|
||||
.profile-image {
|
||||
background: rebeccapurple;
|
||||
box-shadow: inset 2px 2px 4px rgba(0,0,0,.5);
|
||||
border-radius: 50%;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
color: rebeccapurple;
|
||||
font-size: 32px;
|
||||
font-weight: 900;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: rebeccapurple;
|
||||
color: white;
|
||||
padding: 8px 24px;
|
||||
}
|
||||
|
||||
a {
|
||||
/* this removes the line under our links */
|
||||
text-decoration: none;
|
||||
color: rebeccapurple;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
# A very common website feature
|
||||
|
||||
The goal of this exercise is to recreate a section that is found on many informational websites.
|
||||
|
||||
For this one you will need to edit the HTML a little bit too. We can't be making things _too_ easy for you. You'll want to add containers around the various elements so that you can flex them. Good luck!
|
||||
|
||||
## Desired outcome
|
||||
|
||||
|
||||
|
||||
### Self Check
|
||||
|
||||
- All items are centered on the page (horizontally, not vertically).
|
||||
- The title is centered on the page.
|
||||
- There is 32px between the title and the 'items.'
|
||||
- There is 52px between each item.
|
||||
- The items are arranged horizontally on the page.
|
||||
- The items are only 200px wide and the text wraps.
|
||||
- The item text is centered.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
|
|
@ -0,0 +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>
|
||||
|
||||
<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/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>
|
||||
|
||||
<!-- 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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
|
|
@ -0,0 +1,46 @@
|
|||
body {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
/* do not edit this footer */
|
||||
.footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 52px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
/* SOLUTION */
|
||||
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 52px;
|
||||
}
|
||||
|
||||
.info {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
|
@ -0,0 +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>
|
||||
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
body {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
/* do not edit this footer */
|
||||
.footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 52px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #eee;
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
# A common 'modal' style
|
||||
This one is another very common pattern on the web. The solution to this one is _simple_... but it might not be immediately obvious to you. You'll need to edit the HTML a bit to get everything where it needs to be.
|
||||
|
||||
### A hint
|
||||
Depending on how you approach this one, you might need to revisit the `flex-shrink` property to keep a flex item from getting smashed. In addition, pay attention to the structure of the html, specifically look into adding an additional container surrounding the header, button, main text, cancel, and continue divs; and look into moving the header div to encompass the button as well.
|
||||
|
||||
## Desired outcome
|
||||
|
||||
|
||||
|
||||
### Self Check
|
||||
|
||||
- The blue icon is aligned to the left.
|
||||
- There is equal space on either side of the icon (the gaps between the icon and the edge of the card, and the icon and the text, are the same).
|
||||
- There is padding around the edge of the modal.
|
||||
- The header, text, and buttons are aligned with each other.
|
||||
- The header is bold and a slightly larger text-size than the text.
|
||||
- The close button is vertically aligned with the header, and aligned in the top-right of the card.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
|
|
@ -0,0 +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>
|
||||
<button class="close-button">✖</button>
|
||||
<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>
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Roboto, sans-serif;
|
||||
margin: 0;
|
||||
background: #aaa;
|
||||
color: #333;
|
||||
/* I'll give you this one for free */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: white;
|
||||
width: 480px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 2px 4px 16px rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: royalblue;
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
background: lavender;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
background: #eee;
|
||||
border-radius: 50%;
|
||||
color: #888;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #eee;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
button.continue {
|
||||
background: royalblue;
|
||||
border: 1px solid royalblue;
|
||||
color: white;
|
||||
}
|
||||
|
||||
button.cancel {
|
||||
background: white;
|
||||
border: 1px solid #ddd;
|
||||
color: royalblue;
|
||||
}
|
||||
|
||||
/* SOLUTION: */
|
||||
|
||||
.modal {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
/* this keeps the icon from getting smashed by the text */
|
||||
flex-shrink: 0;
|
||||
}
|
||||
/* header container should be wrapped around the button element as well in order for flex style to work */
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!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>
|
||||
<!-- additional container used here -->
|
||||
<div class="container">
|
||||
<!-- header div was moved to encompass the close button as well -->
|
||||
<div class="header">Are you sure you want to do that?
|
||||
<button class="close-button">✖</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>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Roboto, sans-serif;
|
||||
margin: 0;
|
||||
background: #aaa;
|
||||
color: #333;
|
||||
/* I'll give you this one for free lol */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: white;
|
||||
width: 480px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 2px 4px 16px rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: royalblue;
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
background: lavender;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
background: #eee;
|
||||
border-radius: 50%;
|
||||
color: #888;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #eee;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
button.continue {
|
||||
background: royalblue;
|
||||
border: 1px solid royalblue;
|
||||
color: white;
|
||||
}
|
||||
|
||||
button.cancel {
|
||||
background: white;
|
||||
border: 1px solid #ddd;
|
||||
color: royalblue;
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
# An entire page!
|
||||
|
||||
Flexbox is useful for laying out entire pages as well as the smaller components we've already been working with. For this exercise, we're leaving you with a little more work to do, with some things you may not have encountered yet. It's perfectly acceptable to google things you're unsure of!
|
||||
|
||||
### Hints
|
||||
- You may want to search something like `CSS remove list bullets`. We've done this for you in previous examples, but not here. Yay learning.
|
||||
- Finding out how to style links in CSS might help you get rid of that pesky underline decoration...
|
||||
- We've added `height: 100vh` to the `body`... this makes the body exactly the same height as the viewport. To stick the footer to the bottom you will need to use flex and change the direction to column.
|
||||
|
||||
## Desired Outcome
|
||||
|
||||
|
||||
### Self Check
|
||||
|
||||
- The header is at the top of the page, the footer is at the bottom, and they stay in place if you resize your screen.
|
||||
- The header and footer have padding.
|
||||
- The links in the header and footer are pushed to either side.
|
||||
- There is space between the links in the header and footer.
|
||||
- The footer has a light gray background (`#eeeeee`).
|
||||
- The logo, input and buttons are centered in the screen.
|
||||
- The buttons have an appropriate amount of padding.
|
||||
- There is space between the logo, input and buttons.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
|
|
@ -0,0 +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="#">About</a></li>
|
||||
<li><a href="#">Store</a></li>
|
||||
</ul>
|
||||
<ul class="right-links">
|
||||
<li><a href="#">Profile</a></li>
|
||||
<li><a href="#">Settings</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="content">
|
||||
<img src="./logo.png" alt="Project logo. Represents odin with the project name.">
|
||||
<div class="input">
|
||||
<input type="text">
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button>Do the thing!</button>
|
||||
<button>Do the other thing!</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<ul class="left-links">
|
||||
<li><a href="#">Advertising</a></li>
|
||||
<li><a href="#">Business</a></li>
|
||||
</ul>
|
||||
<ul class="right-links">
|
||||
<li><a href="#">Privacy</a></li>
|
||||
<li><a href="#">Terms</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
|
|
@ -0,0 +1,70 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-family: Roboto, sans-serif;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: Roboto, sans-serif;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
input {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 16px;
|
||||
padding: 8px 24px;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
/* SOLUTION */
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.header,
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
gap: 16px
|
||||
}
|
||||
|
|
@ -0,0 +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="#">About</a></li>
|
||||
<li><a href="#">Store</a></li>
|
||||
</ul>
|
||||
<ul class="right-links">
|
||||
<li><a href="#">Profile</a></li>
|
||||
<li><a href="#">Settings</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="content">
|
||||
<img src="./logo.png" alt="Project logo. Represents odin with the project name.">
|
||||
<div class="input">
|
||||
<input type="text">
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button>Do the thing!</button>
|
||||
<button>Do the other thing!</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<ul class="left-links">
|
||||
<li><a href="#">Advertising</a></li>
|
||||
<li><a href="#">Business</a></li>
|
||||
</ul>
|
||||
<ul class="right-links">
|
||||
<li><a href="#">Privacy</a></li>
|
||||
<li><a href="#">Terms</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-family: Roboto, sans-serif;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: Roboto, sans-serif;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
input {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 16px;
|
||||
padding: 8px 24px;
|
||||
width: 400px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
# The Holy Grail of Layout
|
||||
|
||||
In this last flexbox exercise you're going to recreate an incredibly common website layout. It is so common that it is often called the [Holy Grail](https://www.google.com/search?q=holy+grail+layout&tbm=isch&sclient=img) layout... and with flexbox it is actually pretty easy to pull off.
|
||||
|
||||
As with the previous exercise, we've left a little more for you to do.
|
||||
|
||||
### Hints
|
||||
- You will need to change the flex-direction to push the footer down.
|
||||
- You will need to add some divs as containers to get things to line up correctly.
|
||||
- `flex-wrap` will help get the cards aligned correctly.
|
||||
- Make sure you define how much space the cards should take up, in order for `flex-wrap` to work as intended.
|
||||
|
||||
## Desired outcome
|
||||
|
||||
|
||||
|
||||
The number of cards lined up in that section will change based on the width of your screen, so don't stress about getting _exactly_ a 2x3 or 3x2 grid.
|
||||
|
||||
On a smaller screen it will look like this:
|
||||
|
||||
|
||||
|
||||
### Self Check
|
||||
- The header text is size 32px and weight 900.
|
||||
- The header text is vertically centered and 16px from the edge of the screen.
|
||||
- The footer is pushed to the bottom of the screen (the footer may go _below_ the bottom of the screen if the content of the 'cards' section overflows and/or if your screen is shorter).
|
||||
- The footer text is centered horizontally and vertically.
|
||||
- The sidebar and cards take up all available space above the footer.
|
||||
- The sidebar is 300px wide (and it doesn't shrink).
|
||||
- The sidebar links are size 24px, are white, and do not have the underline text decoration.
|
||||
- The sidebar has 16px padding.
|
||||
- There is 32px padding around the 'cards' section.
|
||||
- The cards are arranged horizontally, but wrap to multiple lines when they run out of room on the page.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 155 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 148 KiB |
|
|
@ -0,0 +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="#">⭐ - link one</a></li>
|
||||
<li><a href="#">🦸🏽♂️ - link two</a></li>
|
||||
<li><a href="#">🖌️ - link three</a></li>
|
||||
<li><a href="#">👌🏽 - 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>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.header {
|
||||
height: 72px;
|
||||
background: darkmagenta;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.footer {
|
||||
height: 72px;
|
||||
background: #eee;
|
||||
color: darkmagenta;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 300px;
|
||||
background: royalblue;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.card {
|
||||
border: 1px solid #eee;
|
||||
box-shadow: 2px 4px 16px rgba(0,0,0,.06);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* SOLUTION */
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
font-size: 32px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
flex-shrink: 0;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 32px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 16px;
|
||||
margin: 16px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
@ -0,0 +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="#">⭐ - link one</a></li>
|
||||
<li><a href="#">🦸🏽♂️ - link two</a></li>
|
||||
<li><a href="#">🖌️ - link three</a></li>
|
||||
<li><a href="#">👌🏽 - 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 class="footer">
|
||||
The Odin Project ❤️
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.header {
|
||||
height: 72px;
|
||||
background: darkmagenta;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.footer {
|
||||
height: 72px;
|
||||
background: #eee;
|
||||
color: darkmagenta;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 300px;
|
||||
background: royalblue;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.card {
|
||||
border: 1px solid #eee;
|
||||
box-shadow: 2px 4px 16px rgba(0,0,0,.06);
|
||||
border-radius: 4px;
|
||||
}
|
||||
Loading…
Reference in New Issue