Skip to content

Commit 9f4df0c

Browse files
codyloydcodyloyd
committed
add layout
1 parent 35872f7 commit 9f4df0c

10 files changed

+258
-0
lines changed

‎flex/flex-layout/README.md

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# An entire page!
2+
3+
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!
4+
5+
### Hints
6+
- 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.
7+
- 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.
8+
9+
## Desired Outcome
10+
![desired outcome](./desired-outcome.png)
11+
12+
### Self Check
13+
14+
- Header is at the top of the page, footer is at the bottom and they stay in place if you resize your screen.
15+
- Header and footer have padding.
16+
- Links in header and footer are pushed to either side.
17+
- There is space between the links in the header and footer.
18+
- Footer has a light gray background (#eeeeee).
19+
- Logo, input and buttons are centered in the screen.
20+
- Buttons have an appropriate amount of padding.
21+
- There is space between the logo, input and buttons.

‎flex/flex-layout/desired-outcome.png

64 KB
Loading

‎flex/flex-layout/index.html

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>LAYOUT</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<div class="header">
12+
<ul class="left-links">
13+
<li><a href="google.com">About</a></li>
14+
<li><a href="google.com">Store</a></li>
15+
</ul>
16+
<ul class="right-links">
17+
<li><a href="google.com">Profile</a></li>
18+
<li><a href="google.com">Settings</a></li>
19+
</ul>
20+
</div>
21+
<div class="content">
22+
<img src="./logo.png" alt="">
23+
<div class="input">
24+
<input type="text">
25+
</div>
26+
<div class="buttons">
27+
<button>Do the thing!</button>
28+
<button>Do the other thing!</button>
29+
</div>
30+
</div>
31+
<div class="footer">
32+
<ul class="left-links">
33+
<li><a href="google.com">Advertising</a></li>
34+
<li><a href="google.com">Business</a></li>
35+
</ul>
36+
<ul class="right-links">
37+
<li><a href="google.com">Privacy</a></li>
38+
<li><a href="google.com">Terms</a></li>
39+
</ul>
40+
</div>
41+
</body>
42+
</html>

‎flex/flex-layout/logo.png

44 KB
Loading

‎flex/flex-layout/solution.css

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
2+
3+
body {
4+
height: 100vh;
5+
margin: 0;
6+
overflow: hidden;
7+
font-family: Roboto, sans-serif;
8+
9+
display: flex;
10+
flex-direction: column;
11+
}
12+
13+
img {
14+
width: 600px;
15+
}
16+
17+
button {
18+
font-family: Roboto, sans-serif;
19+
border: none;
20+
border-radius: 8px;
21+
background: #eee;
22+
23+
padding: 8px 16px;
24+
}
25+
26+
input {
27+
border: 1px solid #ddd;
28+
border-radius: 16px;
29+
padding: 8px 24px;
30+
width: 400px;
31+
margin-bottom: 16px;
32+
}
33+
34+
.content {
35+
flex: 1;
36+
display: flex;
37+
align-items: center;
38+
justify-content: center;
39+
flex-direction: column;
40+
}
41+
42+
a {
43+
color: #666;
44+
text-decoration: none;
45+
}
46+
47+
.header,
48+
.footer {
49+
display: flex;
50+
justify-content: space-between;
51+
padding: 16px;
52+
}
53+
54+
.footer {
55+
background: #eee;
56+
}
57+
58+
ul {
59+
display: flex;
60+
list-style: none;
61+
margin: 0;
62+
padding: 0;
63+
gap: 16px
64+
}

‎flex/flex-layout/style.css

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
2+
3+
body {
4+
height: 100vh;
5+
margin: 0;
6+
overflow: hidden;
7+
font-family: Roboto, sans-serif;
8+
}
9+
10+
img {
11+
width: 600px;
12+
}
13+
14+
button {
15+
font-family: Roboto, sans-serif;
16+
border: none;
17+
border-radius: 8px;
18+
background: #eee;
19+
}
20+
21+
input {
22+
border: 1px solid #ddd;
23+
border-radius: 16px;
24+
padding: 8px 24px;
25+
width: 400px;
26+
margin-bottom: 16px;
27+
}

‎flex/flex-modal/README.md

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# A common 'modal' style
2+
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.
3+
4+
### a hint
5+
Depending on how to approach this one, you might need to revisit the `flex-shrink` property to keep a flex item from getting smashed.
6+
7+
## Desired outcome
8+
9+
![desired outcome](./desired-outcome.png)
10+
11+
### Self Check
12+
13+
- The blue icon is aligned to the left.
14+
- 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).
15+
- There is padding around the edge of the modal.
16+
- The header, text, and buttons are aligned with each other.
17+
- The header is bold and a slightly larger text-size than the text.
18+
- The close button is vertically aligned with the header, and aligned in the top-right of the card.

‎flex/flex-modal/desired-outcome.png

41.2 KB
Loading

‎flex/flex-modal/index.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="style.css">
8+
<title>Modal</title>
9+
</head>
10+
<body>
11+
<div class="modal">
12+
<div class="icon">!</div>
13+
<div class="header">Are you sure you want to do that?</div>
14+
<div class="close-button">✖</div>
15+
<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>
16+
<button class="continue">Continue</button>
17+
<button class="cancel">Cancel</button>
18+
</div>
19+
</body>
20+
</html>

‎flex/flex-modal/style.css

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
2+
3+
html, body {
4+
height: 100%;
5+
}
6+
7+
body {
8+
font-family: Roboto, sans-serif;
9+
margin: 0;
10+
background: #aaa;
11+
color: #333;
12+
/* I'll give you this one for free lol */
13+
display: flex;
14+
align-items: center;
15+
justify-content: center;
16+
}
17+
18+
.modal {
19+
background: white;
20+
width: 480px;
21+
border-radius: 10px;
22+
box-shadow: 2px 4px 16px rgba(0,0,0,.2);
23+
}
24+
25+
.icon {
26+
color: royalblue;
27+
font-size: 26px;
28+
font-weight: 700;
29+
background: lavender;
30+
width: 42px;
31+
height: 42px;
32+
border-radius: 50%;
33+
display: flex;
34+
align-items: center;
35+
justify-content: center;
36+
}
37+
38+
.close-button {
39+
background: #eee;
40+
border-radius: 50%;
41+
color: #888;
42+
font-weight: 400;
43+
font-size: 16px;
44+
height: 24px;
45+
width: 24px;
46+
display: flex;
47+
align-items: center;
48+
justify-content: center;
49+
}
50+
51+
button {
52+
padding: 8px 16px;
53+
border-radius: 8px;
54+
}
55+
56+
button.continue {
57+
background: royalblue;
58+
border: 1px solid royalblue;
59+
color: white;
60+
}
61+
62+
button.cancel {
63+
background: white;
64+
border: 1px solid #ddd;
65+
color: royalblue;
66+
}

0 commit comments

Comments
 (0)