Skip to content

Commit 3c22ac0

Browse files
HarshvdevHarshvdev
committed
Flexbox Practice
1 parent cc1bb63 commit 3c22ac0

7 files changed

Lines changed: 254 additions & 0 deletions

File tree

‎Day-32/README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
Today I watched a youtube tutorial on Youtube. What it told me, I already knew.
2+
But I still can't solve the exercises from The Odin Project.

‎Day-33/Exercises/06-flex-layout/index.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
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="container">
12+
<div class="header">
13+
<ul class="left-links">
14+
<li><a href="#">About</a></li>
15+
<li><a href="#">Store</a></li>
16+
</ul>
17+
<ul class="right-links">
18+
<li><a href="#">Profile</a></li>
19+
<li><a href="#">Settings</a></li>
20+
</ul>
21+
</div>
22+
23+
<div class="content">
24+
<img src="./logo.png" alt="Project logo. Represents odin with the project name.">
25+
<div class="input">
26+
<input type="text">
27+
</div>
28+
<div class="buttons">
29+
<button>Do the thing!</button>
30+
<button>Do the other thing!</button>
31+
</div>
32+
</div>
33+
34+
<div class="footer">
35+
<ul class="left-links">
36+
<li><a href="#">Advertising</a></li>
37+
<li><a href="#">Business</a></li>
38+
</ul>
39+
<ul class="right-links">
40+
<li><a href="#">Privacy</a></li>
41+
<li><a href="#">Terms</a></li>
42+
</ul>
43+
</div>
44+
</div>
45+
</body>
46+
</html>

‎Day-33/Exercises/06-flex-layout/logo.png‎

44 KB
Loading

‎Day-33/Exercises/06-flex-layout/style.css‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
2+
3+
.container {
4+
min-height: 100vh;
5+
display: flex;
6+
flex-direction: column;
7+
}
8+
9+
body {
10+
height: 100vh;
11+
margin: 0px;
12+
padding: 0px;
13+
overflow: hidden;
14+
font-family: Roboto, sans-serif;
15+
}
16+
17+
.header {
18+
display: flex;
19+
justify-content: space-between;
20+
align-items: center;
21+
padding: 0 16px;
22+
}
23+
24+
.header ul {
25+
display: flex;
26+
margin: 0;
27+
padding: 0;
28+
}
29+
30+
.content {
31+
flex: 1;
32+
display: flex;
33+
flex-direction: column;
34+
justify-content: center;
35+
align-items: center;
36+
37+
}
38+
39+
.footer ul {
40+
display: flex;
41+
margin: 0;
42+
padding: 0;
43+
}
44+
45+
li {
46+
margin: 8px;
47+
}
48+
49+
img {
50+
width: 90%;
51+
max-width: 600px;
52+
height: auto;
53+
}
54+
55+
button {
56+
margin-top: 16px;
57+
}
58+
59+
input {
60+
border: 1px solid #ddd;
61+
border-radius: 16px;
62+
padding: 8px 24px;
63+
width: 90%;
64+
max-width: 400px;
65+
display: flex;
66+
}
67+
68+
.input {
69+
max-width: 600px;
70+
width: 90%;
71+
display: flex;
72+
justify-content: center;
73+
74+
}
75+
76+
.footer {
77+
display: flex;
78+
justify-content: space-between;
79+
padding: 0 16px;
80+
background-color: #eeeeee;
81+
}
82+
83+
ul {
84+
list-style-type: none;
85+
margin: 0;
86+
padding: 0;
87+
}
88+
89+
a {
90+
color: gray;
91+
text-decoration: none;
92+
}

‎Day-33/Exercises/07-flex-layout-2/index.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
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>The Holy Grail</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<div class="header">
12+
MY AWESOME WEBSITE
13+
</div>
14+
15+
<div class="main">
16+
<div class="sidebar">
17+
<ul>
18+
<li><a href="#">⭐ - link one</a></li>
19+
<li><a href="#">🦸🏽‍♂️ - link two</a></li>
20+
<li><a href="#">🖌️ - link three</a></li>
21+
<li><a href="#">👌🏽 - link four</a></li>
22+
</ul>
23+
</div>
24+
25+
<div class="content">
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 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>
32+
</div>
33+
</div>
34+
35+
<div class="footer">
36+
The Odin Project ❤️
37+
</div>
38+
</body>
39+
</html>

‎Day-33/Exercises/07-flex-layout-2/style.css‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
body {
2+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
3+
margin: 0;
4+
padding: 0;
5+
min-height: 100vh;
6+
display: flex;
7+
flex-direction: column;
8+
}
9+
10+
.main {
11+
display: flex;
12+
flex: 1;
13+
}
14+
15+
.header {
16+
height: 72px;
17+
background: darkmagenta;
18+
color: white;
19+
font-size: 32px;
20+
font-weight: 900;
21+
display: flex;
22+
align-items: center;
23+
padding-left: 16px;
24+
}
25+
26+
.footer {
27+
height: 72px;
28+
background: #eee;
29+
color: darkmagenta;
30+
display: flex;
31+
justify-content: center;
32+
align-items: center;
33+
}
34+
35+
.sidebar {
36+
width: 300px;
37+
background: royalblue;
38+
box-sizing: border-box;
39+
padding: 16px;
40+
}
41+
42+
.sidebar ul {
43+
list-style-type: none;
44+
padding: 0;
45+
margin: 0;
46+
}
47+
48+
.card {
49+
border: 1px solid #eee;
50+
box-shadow: 2px 4px 16px rgba(0,0,0,.06);
51+
border-radius: 4px;
52+
padding: 48px;
53+
max-width: 300px;
54+
55+
}
56+
57+
.content {
58+
display: flex;
59+
flex: 1;
60+
align-content: start;
61+
justify-content: center;
62+
flex-wrap: wrap;
63+
gap: 16px;
64+
padding: 16px;
65+
}
66+
67+
a {
68+
text-decoration: none;
69+
color: white;
70+
font-size: 24px;
71+
}

‎Day-33/README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
I have solved the remaining exercises from Day-31.
2+
3+
#100DaysOfCode – Day 32 & 33
4+
Watched a Flexbox lecture and completed the last two Flexbox exercises from The Odin Project. I understand the concepts more clearly now, especially how to align and position elements.

0 commit comments

Comments
 (0)