Skip to content

Commit 6fc2656

Browse files
solygambassolygambas
committed
fix headers and add SVGs
1 parent e2dc8d6 commit 6fc2656

File tree

5 files changed

+86
-18
lines changed

5 files changed

+86
-18
lines changed

‎66-meal finder/index.html

+24-14
Original file line numberDiff line numberDiff line change
@@ -13,24 +13,34 @@
1313
<title>Meal Finder</title>
1414
</head>
1515
<body>
16-
<div class="container">
17-
<h1>Meal Finder</h1>
18-
<div class="flex">
19-
<form class="flex" id="submit">
20-
<input
21-
type="text"
22-
id="search"
23-
placeholder="Search for meals or keywords"
16+
<header>
17+
<div class="header">
18+
<div class="flex">
19+
<img
20+
src="https://image.flaticon.com/icons/svg/1397/1397179.svg"
21+
alt="Meal Finder"
2422
/>
25-
<button class="search-btn" type="submit">
26-
<i class="fas fa-search"></i>
23+
<h1>Meal Finder</h1>
24+
</div>
25+
<div class="flex">
26+
<form class="flex" id="submit">
27+
<input
28+
type="text"
29+
id="search"
30+
placeholder="Search for meals or keywords"
31+
/>
32+
<button class="search-btn" type="submit">
33+
<i class="fas fa-search"></i>
34+
</button>
35+
</form>
36+
<button class="random-btn" id="random">
37+
<i class="fas fa-random"></i>
2738
</button>
28-
</form>
29-
<button class="random-btn" id="random">
30-
<i class="fas fa-random"></i>
31-
</button>
39+
</div>
3240
</div>
41+
</header>
3342

43+
<div class="container">
3444
<div id="result-heading"></div>
3545
<div id="meals" class="meals"></div>
3646
<div id="single-meal"></div>

‎66-meal finder/style.css

+26
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,24 @@ body {
1919
margin: 0;
2020
}
2121

22+
.header {
23+
display: flex;
24+
flex-direction: column;
25+
align-items: center;
26+
justify-content: center;
27+
height: 4rem;
28+
margin: 1rem;
29+
}
30+
31+
.header img {
32+
width: 24px;
33+
width: 24px;
34+
}
35+
36+
.header h1 {
37+
padding-left: 0.5rem;
38+
}
39+
2240
.container {
2341
margin: auto;
2442
max-width: 800px;
@@ -160,6 +178,14 @@ button:active {
160178
}
161179

162180
@media (min-width: 740px) {
181+
.header {
182+
flex-direction: row;
183+
}
184+
185+
.header h1 {
186+
padding-right: 2rem;
187+
}
188+
163189
input[type="text"] {
164190
width: 300px;
165191
}

‎67-expense tracker/index.html

+12-3
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,25 @@
1414
</head>
1515
<body>
1616
<h1>Expense Tracker</h1>
17+
1718
<div class="container">
18-
<h2>Your Balance</h2>
19-
<h2 id="balance" class="balance">$0.00</h2>
19+
<div class="header">
20+
<img
21+
src="https://image.flaticon.com/icons/svg/3176/3176361.svg"
22+
alt="Expense Tracker"
23+
/>
24+
<div class="balance-container">
25+
<h2>Your Balance</h2>
26+
<h2 id="balance" class="balance">$0.00</h2>
27+
</div>
28+
</div>
2029
<div class="inc-exp-container">
2130
<div>
2231
<h4>Income</h4>
2332
<p id="money-plus" class="money plus">+$0.00</p>
2433
</div>
2534
<div>
26-
<h4>Expense</h4>
35+
<h4>Expenses</h4>
2736
<p id="money-minus" class="money minus">-$0.00</p>
2837
</div>
2938
</div>

‎67-expense tracker/style.css

+23
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,23 @@ body {
2929
margin: 0;
3030
}
3131

32+
.header {
33+
display: flex;
34+
align-items: center;
35+
justify-content: space-around;
36+
}
37+
38+
.header img {
39+
width: 4.5rem;
40+
width: 4.5rem;
41+
opacity: 0.5;
42+
}
43+
44+
.balance-container {
45+
display: flex;
46+
flex-direction: column;
47+
}
48+
3249
.container {
3350
margin: 30px auto;
3451
width: 350px;
@@ -38,6 +55,12 @@ h1 {
3855
font-size: 1.5rem;
3956
}
4057

58+
/* h1 {
59+
font-size: 1.17rem;
60+
font-weight: lighter;
61+
margin: 1rem;
62+
} */
63+
4164
h2 {
4265
font-size: 1.17rem;
4366
}

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@
7575
| 67 | [Expense Tracker](https://github.com/solygambas/html-css-fifty-projects/tree/master/67-expense%20tracker) | [Live Demo](https://codepen.io/solygambas/full/OJbqyro) |
7676
| 68 | [Music Player](https://github.com/solygambas/html-css-fifty-projects/tree/master/68-music%20player) | [Live Demo](https://codepen.io/solygambas/full/LYbaZNG) |
7777

78-
Mainly based on 2 courses by Brad Traversy (2020):
78+
These projects are mostly based on 2 courses by Brad Traversy (2020):
7979

8080
- [50 Projects In 50 Days - HTML, CSS & JavaScript](https://www.udemy.com/course/50-projects-50-days/)
8181
- [20 Web Projects With Vanilla JavaScript](https://www.udemy.com/course/web-projects-with-vanilla-javascript/)

0 commit comments

Comments
 (0)