Skip to content

Commit baa0e26

Browse files
VandreicVandreic
committed
Add lesson 9
Added lesson 9.
1 parent 495f609 commit baa0e26

8 files changed

Lines changed: 358 additions & 2 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ The website is hosted on GitHub Pages. Click [here](https://vandreic.github.io/H
1313
- [x] 6. The HTML Structure
1414
- [x] 7. Images and Text Boxes
1515
- [x] 8. CSS Display Property
16-
- [ ] 9. The div Element
16+
- [x] 9. The div Element
1717
- [ ] 10. Nested Layouts Technique
1818
- [ ] 11. CSS Grid
1919
- [ ] 12. Flexbox

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ <h2>Lessons</h2>
1818
<li><a href="lessons/lesson-06/lesson-06.html">Lesson 6: The HTML Structure</a></li>
1919
<li><a href="lessons/lesson-07/lesson-07.html">Lesson 7: Images and Text Boxes</a></li>
2020
<li><a href="lessons/lesson-08/lesson-08.html">Lesson 8: CSS Display Property</a></li>
21-
<li>Lesson 9: The div Element</li>
21+
<li><a href="lessons/lesson-09/lesson-09.html">Lesson 9: The div Element</a></li>
2222
<li>Lesson 10: Nested Layouts Technique</li>
2323
<li>Lesson 11: CSS Grid</li>
2424
<li>Lesson 12: Flexbox</li>

‎lessons/lesson-09/cat-01.jpg‎

26.5 KB
Loading

‎lessons/lesson-09/cat-02.jpg‎

34.3 KB
Loading

‎lessons/lesson-09/dog.jpg‎

22.7 KB
Loading

‎lessons/lesson-09/google-logo.png‎

13.2 KB
Loading

‎lessons/lesson-09/lesson-09.css‎

Lines changed: 248 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,248 @@
1+
/* #region: Global Styles */
2+
p,
3+
button,
4+
input {
5+
font-family: Arial;
6+
font-size: 14px;
7+
margin: 0;
8+
padding: 0;
9+
}
10+
/* #endregion: Global Styles */
11+
12+
/* #region: Exercise 9a */
13+
.ex9a-div {
14+
width: 50px;
15+
height: 50px;
16+
background-color: red;
17+
}
18+
/* #endregion: Exercise 9a */
19+
20+
/* #region: Exercise 9b */
21+
.ex9b-div {
22+
width: 50px;
23+
height: 50px;
24+
border-radius: 40px;
25+
background-color: green;
26+
}
27+
/* #endregion: Exercise 9b */
28+
29+
/* #region: Exercise 9c */
30+
.ex9c-div {
31+
border-style: solid;
32+
border-width: 1px;
33+
border-color: gray;
34+
width: 250px;
35+
padding: 10px 20px;
36+
}
37+
38+
.ex9c-text {
39+
font-size: 16px;
40+
color: black;
41+
font-weight: bold;
42+
padding: 10px 0px;
43+
}
44+
45+
.ex9c-button-01,
46+
.ex9c-button-02 {
47+
font-size: 14px;
48+
width: 50px;
49+
height: 30px;
50+
cursor: pointer;
51+
margin: 10px 0px;
52+
}
53+
/* #endregion: Exercise 9c */
54+
55+
/* #region: Exercise 9d */
56+
.ex9d-div {
57+
width: 330px;
58+
background-color: rgb(33, 33, 33);
59+
padding: 16px;
60+
}
61+
62+
.ex9d-text-01 {
63+
font-size: 20px;
64+
font-weight: bold;
65+
color: white;
66+
padding-bottom: 12px;
67+
}
68+
69+
.ex9d-text-02 {
70+
color: gray;
71+
}
72+
/* #endregion: Exercise 9d */
73+
74+
/* #region: Exercise 9e */
75+
.ex9e-div {
76+
display: inline-block;
77+
border-radius: 6px;
78+
padding: 10px;
79+
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.25);
80+
}
81+
82+
.ex9e-img {
83+
width: 40px;
84+
height: 40px;
85+
object-fit: cover;
86+
object-position: center;
87+
border-radius: 500px;
88+
vertical-align: middle;
89+
}
90+
91+
.ex9e-input {
92+
width: 250px;
93+
height: 20px;
94+
border: none;
95+
vertical-align: middle;
96+
}
97+
98+
.ex9e-button {
99+
background-color: rgb(29, 161, 242);
100+
color: white;
101+
border: none;
102+
cursor: pointer;
103+
font-weight: bold;
104+
transition: background-color 0.15s, box-shadow 0.15s;
105+
border-radius: 30px;
106+
width: 60px;
107+
height: 30px;
108+
}
109+
.ex9e-button:hover {
110+
background-color: rgb(26, 145, 218);
111+
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.25);
112+
}
113+
/* #endregion: Exercise 9e */
114+
115+
/* #region: Exercise 9f */
116+
.ex9f-div {
117+
width: 120px;
118+
height: auto;
119+
display: inline-block;
120+
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.25);
121+
}
122+
123+
.ex9f-img {
124+
width: 120px;
125+
height: 120px;
126+
object-fit: cover;
127+
object-position: center;
128+
}
129+
130+
.ex9f-text-01 {
131+
font-size: 16px;
132+
font-weight: bold;
133+
color: black;
134+
margin: 0;
135+
padding-top: 4px;
136+
padding-left: 4px;
137+
}
138+
139+
.ex9f-text-02 {
140+
color: gray;
141+
padding-top: 4px;
142+
padding-left: 4px;
143+
}
144+
145+
.ex9f-button {
146+
padding: 6px 14px;
147+
margin: 4px 4px 10px 4px; /* top right bottom left */
148+
background-color: rgb(10, 102, 194);
149+
color: white;
150+
border-radius: 4px;
151+
border: none;
152+
cursor: pointer;
153+
}
154+
.ex9f-button:hover {
155+
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
156+
}
157+
/* #endregion: Exercise 9f */
158+
159+
/* #region: Exercise 9g */
160+
.ex9g-div-01,
161+
.ex9g-div-02,
162+
.ex9g-div-03 {
163+
width: 120px;
164+
height: auto;
165+
display: inline-block;
166+
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.25);
167+
margin: 0px 8px;
168+
}
169+
170+
.ex9g-img-01,
171+
.ex9g-img-02,
172+
.ex9g-img-03 {
173+
width: 120px;
174+
height: 120px;
175+
object-fit: cover;
176+
object-position: center;
177+
}
178+
179+
.ex9g-text-01-01,
180+
.ex9g-text-02-01,
181+
.ex9g-text-03-01 {
182+
font-size: 16px;
183+
font-weight: bold;
184+
color: black;
185+
margin: 0;
186+
padding-top: 4px;
187+
padding-left: 4px;
188+
}
189+
190+
.ex9g-text-01-02,
191+
.ex9g-text-02-02,
192+
.ex9g-text-03-02 {
193+
color: gray;
194+
padding-top: 4px;
195+
padding-left: 4px;
196+
}
197+
198+
.ex9g-button-01,
199+
.ex9g-button-02,
200+
.ex9g-button-03 {
201+
padding: 6px 14px;
202+
margin: 4px 4px 10px 4px; /* top right bottom left */
203+
background-color: rgb(10, 102, 194);
204+
color: white;
205+
border-radius: 4px;
206+
border: none;
207+
cursor: pointer;
208+
}
209+
.ex9g-button-01:hover,
210+
.ex9g-button-02:hover,
211+
.ex9g-button-03:hover {
212+
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
213+
}
214+
/* #endregion: Exercise 9g */
215+
216+
/* #region: Exercise 9h */
217+
.ex9h-div-01,
218+
.ex9h-div-02,
219+
.ex9h-div-03 {
220+
text-align: center;
221+
}
222+
223+
.ex9h-img {
224+
width: 200px;
225+
}
226+
227+
.ex9h-input {
228+
width: 400px;
229+
border-radius: 30px;
230+
border: none;
231+
padding: 10px 20px;
232+
margin: 10px 0px;
233+
box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.5);
234+
}
235+
236+
.ex9h-buton-01,
237+
.ex9h-buton-02 {
238+
margin: 10px 10px;
239+
padding: 10px 20px;
240+
border: none;
241+
cursor: pointer;
242+
}
243+
244+
.ex9h-buton-01:hover,
245+
.ex9h-buton-02:hover {
246+
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
247+
}
248+
/* #endregion: Exercise 9h */

‎lessons/lesson-09/lesson-09.html‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>HTML & CSS Course - Lesson 9</title>
6+
<link rel="stylesheet" href="lesson-09.css" />
7+
</head>
8+
<body>
9+
<h1>Lesson 9 - The div Element</h1>
10+
<a href="../../index.html"><button>Go back to Home</button></a>
11+
12+
<br />
13+
<br />
14+
15+
<h2>Exercise 9a</h2>
16+
<div class="ex9a-div"></div>
17+
18+
<hr />
19+
<br />
20+
21+
<h2>Exercise 9b</h2>
22+
<div class="ex9b-div"></div>
23+
24+
<hr />
25+
<br />
26+
27+
<h2>Exercise 9c</h2>
28+
<div class="ex9c-div">
29+
<p class="ex9c-text">Satisfied with our service?</p>
30+
<button class="ex9c-button-01">Yes</button>
31+
<button class="ex9c-button-02">No</button>
32+
</div>
33+
34+
<hr />
35+
<br />
36+
37+
<h2>Exercise 9d</h2>
38+
<div class="ex9d-div">
39+
<p class="ex9d-text-01">Install YouTube Music</p>
40+
<p class="ex9d-text-02">
41+
Add YouTube Music to your desktop for quick and easy acess
42+
</p>
43+
</div>
44+
45+
<hr />
46+
<br />
47+
48+
<h2>Exercise 9e</h2>
49+
<div class="ex9e-div">
50+
<img class="ex9e-img" src="cat-01.jpg" alt="A cat" />
51+
<input class="ex9e-input" type="text" placeholder="What's happening?" />
52+
<button class="ex9e-button">Tweet</button>
53+
</div>
54+
55+
<hr />
56+
<br />
57+
58+
<h2>Exercise 9f</h2>
59+
<div class="ex9f-div">
60+
<img class="ex9f-img" src="cat-01.jpg" alt="A cat" />
61+
<p class="ex9f-text-01">Oliver</p>
62+
<p class="ex9f-text-02">2 mutal friends</p>
63+
<button class="ex9f-button">Add Friend</button>
64+
</div>
65+
66+
<hr />
67+
<br />
68+
69+
<h2>Exercise 9g</h2>
70+
<div class="ex9g-div-01">
71+
<img class="ex9g-img-01" src="cat-01.jpg" alt="A cat" />
72+
<p class="ex9g-text-01-01">Oliver</p>
73+
<p class="ex9g-text-01-02">2 mutal friends</p>
74+
<button class="ex9g-button-01">Add Friend</button>
75+
</div>
76+
<div class="ex9g-div-02">
77+
<img class="ex9g-img-02" src="cat-02.jpg" alt="A cat" />
78+
<p class="ex9g-text-02-01">Mimi</p>
79+
<p class="ex9g-text-02-02">3 mutal friends</p>
80+
<button class="ex9g-button-02">Add Friend</button>
81+
</div>
82+
<div class="ex9g-div-03">
83+
<img class="ex9g-img-03" src="dog.jpg" alt="A dog" />
84+
<p class="ex9g-text-03-01">Rex</p>
85+
<p class="ex9g-text-03-02">4 mutal friends</p>
86+
<button class="ex9g-button-03">Add Friend</button>
87+
</div>
88+
89+
<hr />
90+
<br />
91+
92+
<h2>Exercise 9h</h2>
93+
<div class="ex9h-div-01">
94+
<img class="ex9h-img" src="google-logo.png" alt="Google Logo" />
95+
</div>
96+
<div class="ex9h-div-02">
97+
<input
98+
class="ex9h-input"
99+
type="text"
100+
placeholder="Search Google or type a URL"
101+
/>
102+
</div>
103+
<div class="ex9h-div-03">
104+
<button class="ex9h-buton-01">Google Search</button>
105+
<button class="ex9h-buton-02">I'm Feeling Lucky</button>
106+
</div>
107+
</body>
108+
</html>

0 commit comments

Comments
 (0)