Skip to content

Commit 7ef612b

Browse files
VandreicVandreic
committed
Add lessons 4 & 5
Added lesson 4 and 5.
1 parent f0b105a commit 7ef612b

6 files changed

Lines changed: 669 additions & 4 deletions

File tree

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ The website is hosted on GitHub Pages. Click [here](https://vandreic.github.io/H
88
- [x] 1. HTML Basics
99
- [x] 2. CSS Basics
1010
- [x] 3. Hovers, Transitions, Shadows
11-
- [ ] 4. Chrome DevTools & CSS Box Model
12-
- [ ] 5. Text Styles
11+
- [x] 4. Chrome DevTools & CSS Box Model
12+
- [x] 5. Text Styles
1313
- [ ] 6. The HTML Structure
1414
- [ ] 7. Images and Text Boxes
1515
- [ ] 8. CSS Display Property

‎index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ <h2>Lessons</h2>
1313
<li><a href="lessons/lesson-01/lesson-01.html">Lesson 1: HTML Basics</a></li>
1414
<li><a href="lessons/lesson-02/lesson-02.html">Lesson 2: CSS Basics</a></li>
1515
<li><a href="lessons/lesson-03/lesson-03.html">Lesson 3: Hovers, Transitions, Shadows</a></li>
16-
<li>Lesson 4: Chrome DevTools & CSS Box Model</li>
17-
<li>Lesson 5: Text Styles</li>
16+
<li><a href="lessons/lesson-04/lesson-04.html">Lesson 4: Chrome DevTools & CSS Box Model</a></li>
17+
<li><a href="lessons/lesson-05/lesson-05.html">Lesson 5: Text Styles</a></li>
1818
<li>Lesson 6: The HTML Structure</li>
1919
<li>Lesson 7: Images and Text Boxes</li>
2020
<li>Lesson 8: CSS Display Property</li>

‎lessons/lesson-04/lesson-04.css‎

Lines changed: 244 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,244 @@
1+
/* #region Exercise 4a */
2+
.ex4a-button {
3+
background-color: black;
4+
color: white;
5+
border: none;
6+
cursor: pointer;
7+
transition: opacity 0.15s;
8+
padding: 10px 20px;
9+
}
10+
.ex4a-button:hover {
11+
opacity: 0.8;
12+
}
13+
/* #endregion Exercise 4a */
14+
15+
/* #region Exercise 4b */
16+
.ex4b-button {
17+
background-color: rgb(255, 216, 20);
18+
color: black;
19+
border: none;
20+
cursor: pointer;
21+
transition: background-color 0.15s;
22+
padding: 10px 50px;
23+
border-radius: 40px;
24+
}
25+
.ex4b-button:hover {
26+
background-color: rgba(255, 216, 20, 0.8);
27+
}
28+
/* #endregion Exercise 4b */
29+
30+
/* #region Exercise 4c */
31+
.ex4c-button {
32+
background-color: rgb(46, 164, 79);
33+
color: white;
34+
border: none;
35+
cursor: pointer;
36+
font-weight: bold;
37+
transition: box-shadow 0.15s;
38+
padding: 10px 20px;
39+
border-radius: 5px;
40+
}
41+
.ex4c-button:hover {
42+
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.25);
43+
}
44+
/* #endregion Exercise 4c */
45+
46+
/* #region Exercise 4d */
47+
.ex4d-button-get-started {
48+
background-color: rgb(121, 82, 179);
49+
color: white;
50+
border: none;
51+
cursor: pointer;
52+
font-weight: bold;
53+
transition: background-color 0.15s, color 0.15s;
54+
padding: 10px 20px;
55+
border-radius: 5px;
56+
}
57+
.ex4d-button-get-started:hover {
58+
background-color: rgb(100, 61, 158);
59+
color: white;
60+
}
61+
62+
.ex4d-button-download {
63+
background-color: white;
64+
color: rgb(109, 117, 125);
65+
border-width: 1px;
66+
border-style: solid;
67+
border-color: rgb(109, 117, 125);
68+
cursor: pointer;
69+
font-weight: bold;
70+
transition: background-color 0.15s, color 0.15s;
71+
padding: 10px 20px;
72+
border-radius: 5px;
73+
}
74+
.ex4d-button-download:hover {
75+
background-color: rgb(109, 117, 125);
76+
color: white;
77+
}
78+
/* #endregion Exercise 4d */
79+
80+
/* #region Exercise 4e */
81+
.ex4e-button-apply {
82+
background-color: rgb(10, 102, 194);
83+
color: white;
84+
border: none;
85+
cursor: pointer;
86+
font-weight: bold;
87+
transition: background-color 0.15s, border-width 0.15s;
88+
padding: 10px 14px;
89+
border-radius: 40px;
90+
}
91+
.ex4e-button-apply:hover {
92+
background-color: rgb(8, 82, 156);
93+
border-width: 2px;
94+
}
95+
96+
.ex4e-button-save {
97+
background-color: white;
98+
color: rgb(10, 102, 194);
99+
border-width: 1px;
100+
border-style: solid;
101+
border-color: rgb(10, 102, 194);
102+
cursor: pointer;
103+
font-weight: bold;
104+
transition: background-color 0.15s, border-width 0.15s;
105+
padding: 10px 14px;
106+
border-radius: 40px;
107+
}
108+
.ex4e-button-save:hover {
109+
background-color: rgb(235, 245, 255);
110+
border-width: 2px;
111+
}
112+
/* #endregion Exercise 4e */
113+
114+
/* #region Exercise 4f */
115+
.ex4f-button {
116+
background-color: rgb(29, 161, 242);
117+
color: white;
118+
border: none;
119+
cursor: pointer;
120+
font-weight: bold;
121+
transition: background-color 0.15s, box-shadow 0.15s;
122+
padding: 10px 20px;
123+
border-radius: 30px;
124+
}
125+
.ex4f-button:hover {
126+
background-color: rgb(26, 145, 218);
127+
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.25);
128+
}
129+
/* #endregion Exercise 4f */
130+
131+
/* #region Exercise 4g */
132+
.ex4g-button {
133+
background-color: rgb(255, 0, 0);
134+
color: white;
135+
border: none;
136+
cursor: pointer;
137+
font-weight: bold;
138+
transition: background-color 0.15s, box-shadow 0.15s;
139+
padding: 10px 20px;
140+
border-radius: 5px;
141+
}
142+
.ex4g-button:hover {
143+
background-color: rgb(204, 0, 0);
144+
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.25);
145+
}
146+
/* #endregion Exercise 4g */
147+
148+
/* #region Exercise 4h */
149+
/* 'Back' & 'Next' button */
150+
.ex4h-back-button,
151+
.ex4h-next-button {
152+
background-color: white;
153+
color: black;
154+
border: 1px solid grey;
155+
cursor: pointer;
156+
font-weight: bold;
157+
transition: background-color 0.15s, box-shadow 0.15s;
158+
padding: 10px 10px;
159+
border-radius: 5px;
160+
margin: 10px;
161+
}
162+
.ex4h-back-button:hover,
163+
.ex4h-next-button:hover {
164+
background-color: lightslategray;
165+
}
166+
167+
/* 'Number' buttons */
168+
.ex4h-button-1,
169+
.ex4h-button-2,
170+
.ex4h-button-3,
171+
.ex4h-button-4,
172+
.ex4h-button-5 {
173+
background-color: transparent;
174+
border: none;
175+
cursor: pointer;
176+
text-decoration: underline;
177+
color: rgb(78, 40, 136);
178+
font-size: 16px;
179+
}
180+
.ex4h-button-1:hover,
181+
.ex4h-button-2:hover,
182+
.ex4h-button-3:hover,
183+
.ex4h-button-4:hover,
184+
.ex4h-button-5:hover {
185+
color: rgb(37, 19, 65);
186+
font-size: 18px;
187+
}
188+
/* #endregion Exercise 4h */
189+
190+
/* #region Exercise 4i */
191+
.ex4i-button {
192+
color: white;
193+
background-color: rgb(46, 164, 79);
194+
border: none;
195+
padding: 10px 30px;
196+
transition: padding 0.35s;
197+
cursor: pointer;
198+
}
199+
.ex4i-button:hover {
200+
background-color: rgb(44, 126, 67);
201+
padding: 20px 45px;
202+
transition: padding 0.35s;
203+
}
204+
/* #endregion Exercise 4i */
205+
206+
/* #region Exercise 4j */
207+
.ex4j-button {
208+
color: white;
209+
background-color: rgb(46, 164, 79);
210+
border: none;
211+
cursor: pointer;
212+
padding: 10px 30px;
213+
transition: margin 0.1s;
214+
}
215+
.ex4j-button:active {
216+
background-color: rgb(46, 164, 79);
217+
margin-top: 3px;
218+
margin-left: 3px;
219+
}
220+
/* #endregion Exercise 4j */
221+
222+
/* #region Exercise 4k */
223+
.ex4k-button-1,
224+
.ex4k-button-2,
225+
.ex4k-button-3 {
226+
font-size: 16px;
227+
color: white;
228+
background-color: rgb(46, 164, 79);
229+
border: none;
230+
cursor: pointer;
231+
padding: 10px 20px;
232+
margin-left: 20px;
233+
margin-right: 20px;
234+
transition: padding 0.25s, margin 0.25s;
235+
}
236+
.ex4k-button-1:hover,
237+
.ex4k-button-2:hover,
238+
.ex4k-button-3:hover {
239+
background-color: rgb(44, 126, 67);
240+
padding: 10px 40px;
241+
margin-left: 0;
242+
margin-right: 0;
243+
}
244+
/* #endregion Exercise 4k */

‎lessons/lesson-04/lesson-04.html‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>HTML & CSS Course - Lesson 4</title>
6+
<link rel="stylesheet" href="lesson-04.css" />
7+
</head>
8+
<body>
9+
<h1>Lesson 4 - Chrome DevTools & CSS Box Model</h1>
10+
<a href="../../index.html"><button>Go back to Home</button></a>
11+
12+
<br />
13+
<br />
14+
15+
<h2>Exercise 4a</h2>
16+
<button class="ex4a-button">Request now</button>
17+
18+
<hr />
19+
<br />
20+
21+
<h2>Exercise 4b</h2>
22+
<button class="ex4b-button">Add to Cart</button>
23+
24+
<hr />
25+
<br />
26+
27+
<h2>Exercise 4c</h2>
28+
<button class="ex4c-button">Sign up</button>
29+
30+
<hr />
31+
<br />
32+
33+
<h2>Exercise 4d</h2>
34+
<button class="ex4d-button-get-started">Get started</button>
35+
<button class="ex4d-button-download">Download</button>
36+
37+
<hr />
38+
<br />
39+
40+
<h2>Exercise 4e</h2>
41+
<button class="ex4e-button-apply">Apply on company website</button>
42+
<button class="ex4e-button-save">Save</button>
43+
44+
<hr />
45+
<br />
46+
47+
<h2>Exercise 4f</h2>
48+
<button class="ex4f-button">Tweet</button>
49+
50+
<hr />
51+
<br />
52+
53+
<h2>Exercise 4g</h2>
54+
<button class="ex4g-button">SUBSCRIBE</button>
55+
56+
<hr />
57+
<br />
58+
59+
<h2>Exercise 4h - Pagination</h2>
60+
61+
<button class="ex4h-back-button">Back</button>
62+
<button class="ex4h-button-1">1</button>
63+
<button class="ex4h-button-2">2</button>
64+
<button class="ex4h-button-3">3</button>
65+
<button class="ex4h-button-4">4</button>
66+
<button class="ex4h-button-5">5</button>
67+
<button class="ex4h-next-button">Next</button>
68+
69+
<hr />
70+
<br />
71+
72+
<h2>Exercise 4i - Stretch</h2>
73+
<button class="ex4i-button">Stretch</button>
74+
75+
<hr />
76+
<br />
77+
78+
<h2>Exercise 4j</h2>
79+
<button class="ex4j-button">Shadow</button>
80+
81+
<hr />
82+
<br />
83+
84+
<h2>Exercise 4k</h2>
85+
<button class="ex4k-button-1">1</button>
86+
<button class="ex4k-button-2">2</button>
87+
<button class="ex4k-button-3">3</button>
88+
</body>
89+
</html>

0 commit comments

Comments
 (0)