add layout
This commit is contained in:
Cody Loyd
parent
35872f7288
commit
9f4df0c0b2
10 changed files with 258 additions and 0 deletions
21
flex/flex-layout/README.md
Normal file
21
flex/flex-layout/README.md
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
# 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.
|
||||
- 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
|
||||
|
||||
- Header is at the top of the page, footer is at the bottom and they stay in place if you resize your screen.
|
||||
- Header and footer have padding.
|
||||
- Links in header and footer are pushed to either side.
|
||||
- There is space between the links in the header and footer.
|
||||
- Footer has a light gray background (#eeeeee).
|
||||
- Logo, input and buttons are centered in the screen.
|
||||
- Buttons have an appropriate amount of padding.
|
||||
- There is space between the logo, input and buttons.
|
||||
BIN
flex/flex-layout/desired-outcome.png
Normal file
BIN
flex/flex-layout/desired-outcome.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
42
flex/flex-layout/index.html
Normal file
42
flex/flex-layout/index.html
Normal file
|
|
@ -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="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">
|
||||
</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="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>
|
||||
BIN
flex/flex-layout/logo.png
Normal file
BIN
flex/flex-layout/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
64
flex/flex-layout/solution.css
Normal file
64
flex/flex-layout/solution.css
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
@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;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: Roboto, sans-serif;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: #eee;
|
||||
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
input {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 16px;
|
||||
padding: 8px 24px;
|
||||
width: 400px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
27
flex/flex-layout/style.css
Normal file
27
flex/flex-layout/style.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
18
flex/flex-modal/README.md
Normal file
18
flex/flex-modal/README.md
Normal file
|
|
@ -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 to approach this one, you might need to revisit the `flex-shrink` property to keep a flex item from getting smashed.
|
||||
|
||||
## Desired outcome
|
||||
|
||||
|
||||
|
||||
### Self Check
|
||||
|
||||
- The blue icon is aligned to the left.
|
||||
- There is equal space on either side of the icon (the gap between the icon and the edge of the card, and the icon and the text is 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.
|
||||
BIN
flex/flex-modal/desired-outcome.png
Normal file
BIN
flex/flex-modal/desired-outcome.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
20
flex/flex-modal/index.html
Normal file
20
flex/flex-modal/index.html
Normal file
|
|
@ -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>
|
||||
<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>
|
||||
66
flex/flex-modal/style.css
Normal file
66
flex/flex-modal/style.css
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
@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;
|
||||
}
|
||||
|
||||
button {
|
||||
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;
|
||||
}
|
||||
Loading…
Reference in a new issue