Skip to content

Commit 495f609

Browse files
VandreicVandreic
committed
Add lessons 7 & 8
Added lessons 7 and 8.
1 parent e73afcd commit 495f609

File tree

8 files changed

+412
-4
lines changed

8 files changed

+412
-4
lines changed

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ The website is hosted on GitHub Pages. Click [here](https://vandreic.github.io/H
1111
- [x] 4. Chrome DevTools & CSS Box Model
1212
- [x] 5. Text Styles
1313
- [x] 6. The HTML Structure
14-
- [ ] 7. Images and Text Boxes
15-
- [ ] 8. CSS Display Property
14+
- [x] 7. Images and Text Boxes
15+
- [x] 8. CSS Display Property
1616
- [ ] 9. The div Element
1717
- [ ] 10. Nested Layouts Technique
1818
- [ ] 11. CSS Grid

‎index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ <h2>Lessons</h2>
1616
<li><a href="lessons/lesson-04/lesson-04.html">Lesson 4: Chrome DevTools & CSS Box Model</a></li>
1717
<li><a href="lessons/lesson-05/lesson-05.html">Lesson 5: Text Styles</a></li>
1818
<li><a href="lessons/lesson-06/lesson-06.html">Lesson 6: The HTML Structure</a></li>
19-
<li>Lesson 7: Images and Text Boxes</li>
20-
<li>Lesson 8: CSS Display Property</li>
19+
<li><a href="lessons/lesson-07/lesson-07.html">Lesson 7: Images and Text Boxes</a></li>
20+
<li><a href="lessons/lesson-08/lesson-08.html">Lesson 8: CSS Display Property</a></li>
2121
<li>Lesson 9: The div Element</li>
2222
<li>Lesson 10: Nested Layouts Technique</li>
2323
<li>Lesson 11: CSS Grid</li>

‎lessons/lesson-07/cat.jpg‎

26.5 KB
Loading

‎lessons/lesson-07/lesson-07.css‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
/* #region: Global Styles */
2+
.p,
3+
.input,
4+
.button {
5+
font-family: Arial;
6+
font-size: 14px;
7+
}
8+
/* #endregion: Global Styles */
9+
10+
/* #region: Exercise 7a */
11+
.ex7a-img {
12+
width: 200px;
13+
height: 150px;
14+
object-fit: cover;
15+
object-position: center;
16+
border-radius: 15px;
17+
}
18+
/* #endregion: Exercise 7a */
19+
20+
/* #region: Exercise 7b */
21+
.ex7b-img {
22+
width: 150px;
23+
height: 150px;
24+
object-fit: cover;
25+
object-position: center;
26+
}
27+
/* #endregion: Exercise 7b */
28+
29+
/* #region: Exercise 7c */
30+
.ex7c-img {
31+
width: 150px;
32+
height: 150px;
33+
object-fit: cover;
34+
object-position: center;
35+
border-radius: 500px;
36+
}
37+
/* #endregion: Exercise 7c */
38+
39+
/* #region: Exercise 7d */
40+
.ex7d-input {
41+
width: 200px;
42+
height: 14px;
43+
border-radius: 5px;
44+
border-width: 1px;
45+
border-style: solid;
46+
border-color: gray;
47+
padding: 5px 10px;
48+
}
49+
/* #endregion: Exercise 7d */
50+
51+
/* #region: Exercise 7e */
52+
.ex7e-input {
53+
width: 350px;
54+
height: 14px;
55+
border-radius: 20px;
56+
border-width: 1px;
57+
border-style: solid;
58+
border-color: gray;
59+
padding: 5px 10px;
60+
}
61+
/* #endregion: Exercise 7e */
62+
63+
/* #region: Exercise 7f */
64+
.ex7f-text-01 {
65+
font-size: 14px;
66+
color: gray;
67+
margin-bottom: 4px;
68+
width: 330px;
69+
}
70+
71+
.ex7f-input {
72+
width: 330px;
73+
height: 20px;
74+
border-radius: 4px;
75+
border-width: 1px;
76+
border-style: solid;
77+
border-color: black;
78+
}
79+
80+
.ex7f-text-02 {
81+
font-size: 14px;
82+
color: gray;
83+
width: 330px;
84+
}
85+
86+
.ex7f-button {
87+
width: 330px;
88+
height: 40px;
89+
background-color: rgb(10, 102, 194);
90+
color: white;
91+
border-radius: 40px;
92+
border: none;
93+
cursor: pointer;
94+
}
95+
96+
.ex7f-button:hover {
97+
background-color: rgb(6, 64, 122);
98+
}
99+
/* #endregion: Exercise 7f */
100+
101+
/* #region: Exercise 7g */
102+
.ex7g-img {
103+
width: 40px;
104+
height: 40px;
105+
object-fit: cover;
106+
object-position: center;
107+
border-radius: 500px;
108+
vertical-align: middle;
109+
}
110+
111+
.ex7g-input {
112+
width: 250px;
113+
height: 20px;
114+
border: none;
115+
vertical-align: middle;
116+
}
117+
118+
.ex7g-button {
119+
background-color: rgb(29, 161, 242);
120+
color: white;
121+
border: none;
122+
cursor: pointer;
123+
font-weight: bold;
124+
transition: background-color 0.15s, box-shadow 0.15s;
125+
border-radius: 30px;
126+
width: 60px;
127+
height: 30px;
128+
}
129+
.ex7g-button:hover {
130+
background-color: rgb(26, 145, 218);
131+
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.25);
132+
}
133+
/* #endregion: Exercise 7g */

‎lessons/lesson-07/lesson-07.html‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>HTML & CSS Course - Lesson 7</title>
6+
<link rel="stylesheet" href="lesson-07.css" />
7+
</head>
8+
<body>
9+
<h1>Lesson 7 - Images and Text Boxes</h1>
10+
<a href="../../index.html"><button>Go back to Home</button></a>
11+
12+
<br />
13+
<br />
14+
15+
<h2>Exercise 7a</h2>
16+
<img class="ex7a-img" src="cat.jpg" alt="A cat" />
17+
18+
<hr />
19+
<br />
20+
21+
<h2>Exercise 7b</h2>
22+
<img class="ex7b-img" src="cat.jpg" alt="A cat" />
23+
24+
<hr />
25+
<br />
26+
27+
<h2>Exercise 7c</h2>
28+
<img class="ex7c-img" src="cat.jpg" alt="A cat" />
29+
30+
<hr />
31+
<br />
32+
33+
<h2>Exercise 7d</h2>
34+
<input class="ex7d-input" type="text" placeholder="Search" />
35+
36+
<hr />
37+
<br />
38+
39+
<h2>Exercise 7e</h2>
40+
<input
41+
class="ex7e-input"
42+
type="text"
43+
placeholder="Search Google or type a URL"
44+
/>
45+
46+
<hr />
47+
<br />
48+
49+
<h2>Exercise 7f</h2>
50+
<p class="ex7f-text-01">Email</p>
51+
<input class="ex7f-input" type="text" />
52+
<p class="ex7f-text-02">
53+
By clicking Agree &amp; Join, you agree to the Privacy Policy
54+
</p>
55+
<button class="ex7f-button">Agree &amp; Join</button>
56+
<p class="ex7f-text-03"></p>
57+
58+
<hr />
59+
<br />
60+
61+
<h2>Exercise 7g</h2>
62+
<img class="ex7g-img" src="cat.jpg" alt="A cat" />
63+
<input class="ex7g-input" type="text" placeholder="What's happening?" />
64+
<button class="ex7g-button">Tweet</button>
65+
</body>
66+
</html>

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

13.2 KB
Loading

‎lessons/lesson-08/lesson-08.css‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
/* #region: Global Styles */
2+
.p,
3+
.input,
4+
.button {
5+
font-family: Arial;
6+
font-size: 14px;
7+
}
8+
/* #endregion: Global Styles */
9+
10+
/* #region: Exercise 8a */
11+
.ex8a-input-01,
12+
.ex8a-input-02 {
13+
display: block;
14+
margin: 6px 0px;
15+
}
16+
/* #endregion: Exercise 8a */
17+
18+
/* #region: Exercise 8b */
19+
.ex8b-text {
20+
display: inline-block;
21+
vertical-align: middle;
22+
width: 200px;
23+
margin-right: 10px;
24+
}
25+
26+
.ex8b-button-01,
27+
.ex8b-button-02 {
28+
display: inline-block;
29+
vertical-align: middle;
30+
margin: 0px 2px;
31+
width: 40px;
32+
border-style: solid;
33+
border-width: 1px;
34+
border-color: gray;
35+
background-color: rgb(240, 240, 240);
36+
color: black;
37+
cursor: pointer;
38+
}
39+
.ex8b-button-01:hover,
40+
.ex8b-button-02:hover {
41+
background-color: rgb(185, 185, 185);
42+
}
43+
/* #endregion: Exercise 8b */
44+
45+
/* #region: Exercise 8c */
46+
.ex8c-img {
47+
display: block;
48+
width: 200px;
49+
margin-left: 150px;
50+
margin-bottom: 10px;
51+
}
52+
53+
.ex8c-input {
54+
width: 500px;
55+
border-radius: 30px;
56+
border-width: 1px;
57+
border-style: solid;
58+
border-color: gray;
59+
padding: 5px 10px;
60+
display: block;
61+
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
62+
}
63+
/* #endregion: Exercise 8c */
64+
65+
/* #region: Exercise 8d */
66+
.ex8d-input-01,
67+
.ex8d-input-02,
68+
.ex8d-input-03 {
69+
border-style: solid;
70+
border-width: 1px;
71+
border-color: gray;
72+
border-radius: 6px;
73+
color: black;
74+
margin: 4px 0px;
75+
padding: 5px 10px;
76+
}
77+
78+
.ex8d-input-01,
79+
.ex8d-input-02 {
80+
display: inline-block;
81+
width: 100px;
82+
}
83+
84+
.ex8d-input-03 {
85+
display: block;
86+
width: 226px;
87+
}
88+
89+
.ex8d-button {
90+
display: block;
91+
width: 248px;
92+
height: 30px;
93+
background-color: rgb(10, 102, 194);
94+
color: white;
95+
border-radius: 10px;
96+
margin-top: 10px;
97+
border: none;
98+
cursor: pointer;
99+
}
100+
.ex8d-button:hover {
101+
background-color: rgb(8, 82, 156);
102+
}
103+
/* #endregion: Exercise 8d */
104+
105+
/* #region: Exercise 8e */
106+
.ex8e-text {
107+
font-size: 32px;
108+
font-weight: bold;
109+
}
110+
111+
.ex8e-input-01,
112+
.ex8e-input-02 {
113+
display: block;
114+
width: 300px;
115+
margin: 10px 0px;
116+
padding: 5px 10px;
117+
border-style: none;
118+
background-color: lightgray;
119+
color: black;
120+
}
121+
122+
.ex8e-button-01 {
123+
background-color: black;
124+
color: white;
125+
}
126+
127+
.ex8e-button-02 {
128+
background-color: lightgray;
129+
color: black;
130+
}
131+
132+
.ex8e-button-01,
133+
.ex8e-button-02 {
134+
border: none;
135+
cursor: pointer;
136+
padding: 10px 20px;
137+
margin-top: 20px;
138+
margin-right: 10px;
139+
transition: transform 0.1s;
140+
}
141+
.ex8e-button-01:hover,
142+
.ex8e-button-02:hover {
143+
transform: scale(1.05);
144+
}
145+
/* #endregion: Exercise 8e */

0 commit comments

Comments
 (0)