Skip to content

Commit f8343b3

Browse files
drwsssdrwsss
committed
Semi-finished exercise, will continue tomorrow
1 parent 7cc8336 commit f8343b3

File tree

2 files changed

+65
-14
lines changed

2 files changed

+65
-14
lines changed

‎flex/07-flex-layout-2/index.html‎

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -12,22 +12,26 @@
1212
MY AWESOME WEBSITE
1313
</div>
1414

15-
<div class="sidebar">
16-
<ul>
17-
<li><a href="google.com">⭐ - link one</a></li>
18-
<li><a href="google.com">🦸🏽‍♂️ - link two</a></li>
19-
<li><a href="google.com">🖌️ - link three</a></li>
20-
<li><a href="google.com">👌🏽 - link four</a></li>
21-
</ul>
15+
<div class="content">
16+
<div class="sidebar">
17+
<ul>
18+
<li><a href="google.com">⭐ - link one</a></li>
19+
<li><a href="google.com">🦸🏽‍♂️ - link two</a></li>
20+
<li><a href="google.com">🖌️ - link three</a></li>
21+
<li><a href="google.com">👌🏽 - link four</a></li>
22+
</ul>
23+
</div>
24+
25+
<div class="cards">
26+
<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>
27+
<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>
28+
<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>
29+
<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>
30+
<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>
31+
<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>
32+
</div>
2233
</div>
2334

24-
<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>
25-
<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>
26-
<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>
27-
<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>
28-
<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>
29-
<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>
30-
3135
<div class="footer">
3236
The Odin Project ❤️
3337
</div>

‎flex/07-flex-layout-2/style.css‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,4 +25,51 @@ body {
2525
border: 1px solid #eee;
2626
box-shadow: 2px 4px 16px rgba(0,0,0,.06);
2727
border-radius: 4px;
28+
}
29+
30+
/* solution */
31+
32+
body {
33+
display: flex;
34+
flex-direction: column;
35+
}
36+
37+
ul,
38+
ol {
39+
list-style: none;
40+
margin: 0;
41+
padding: 0;
42+
}
43+
44+
a {
45+
text-decoration: none;
46+
font-size: 24px;
47+
color: white;
48+
}
49+
50+
.header {
51+
display: flex;
52+
font-size: 32px;
53+
font-weight: 900;
54+
padding-left: 16px;
55+
align-items: center;
56+
}
57+
58+
.content {
59+
display: flex;
60+
}
61+
62+
.sidebar {
63+
min-width: 300px;
64+
padding: 16px;
65+
}
66+
.cards {
67+
display: flex;
68+
flex-direction: row;
69+
flex: 0 1 auto;
70+
gap: 20px;
71+
}
72+
73+
.card {
74+
min-width: 200px;
2875
}

0 commit comments

Comments
 (0)