Skip to content

Commit 65728e4

Browse files
author
dima_los
committed
Update
1 parent de575a4 commit 65728e4

File tree

12 files changed

+327
-0
lines changed

12 files changed

+327
-0
lines changed

‎solutions/tutorial-08/8-1.html

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<p>
2+
<a href="" class="netflix-link">Log In</a>
3+
</p>
4+
5+
<style>
6+
.netflix-link {
7+
text-decoration: none;
8+
padding: 5px;
9+
transition: background-color 0.5s,
10+
color 0.5s;
11+
color: white;
12+
background-color: #e50813;
13+
}
14+
15+
.netflix-link:hover {
16+
background-color: #c1101a;
17+
}
18+
19+
.netflix-link:active {
20+
color: #e2c2c3;
21+
background-color: #99161d;
22+
}
23+
</style>

‎solutions/tutorial-08/8-10.html

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<img src="https://dimal-dev.github.io/html-css/assets/tutorial-6-images/img-3.webp" class="lego-preview">
2+
<p class="lego-stats">
3+
<img src="https://dimal-dev.github.io/html-css/assets/tutorial-6-images/cake.png" class="lego-stats-img">
4+
18+
5+
<img src="https://dimal-dev.github.io/html-css/assets/tutorial-6-images/parts-2.png" class="lego-stats-img">
6+
6187
7+
<img src="https://dimal-dev.github.io/html-css/assets/tutorial-6-images/star-3.png" class="lego-stats-img">
8+
4.4
9+
</p>
10+
<p class="lego-title">
11+
The Razor Crest™
12+
</p>
13+
<p class="lego-price">
14+
599,99 €
15+
</p>
16+
<p>
17+
<a href="" class="lego-add-to-bag-link">
18+
Add to Bag
19+
</a>
20+
</p>
21+
22+
<style>
23+
.lego-preview {
24+
width: 250px;
25+
}
26+
27+
.lego-stats {
28+
font-size: 14px;
29+
}
30+
31+
.lego-stats-img {
32+
height: 15px;
33+
}
34+
35+
.lego-price {
36+
font-weight: bold;
37+
}
38+
39+
.lego-add-to-bag-link {
40+
padding: 10px;
41+
color: rgb(0, 0, 0);
42+
background-color: rgb(244, 125, 32);
43+
44+
text-decoration: none;
45+
}
46+
47+
.lego-add-to-bag-link:hover {
48+
background-color: rgb(212, 108, 26);
49+
}
50+
51+
.lego-add-to-bag-link:active {
52+
background-color: rgb(176, 89, 20);
53+
}
54+
</style>

‎solutions/tutorial-08/8-11.html

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<p class="section-head-collapsible">
2+
Custom Feeds
3+
</p>
4+
<p class="section-head-collapsible">
5+
Recent
6+
</p>
7+
<p class="section-head-collapsible">
8+
Communities
9+
</p>
10+
11+
<style>
12+
.section-head-collapsible {
13+
text-transform: uppercase;
14+
width: 120px;
15+
padding: 10px;
16+
}
17+
18+
.section-head-collapsible:hover {
19+
background-color: rgb(246, 248, 249);
20+
cursor: pointer;
21+
}
22+
23+
.section-head-collapsible:active {
24+
background-color: rgb(228, 228, 228);
25+
}
26+
</style>

‎solutions/tutorial-08/8-12.html

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<p class="post">
2+
<a href="" class="user-profile-link">
3+
u/InfernalGamer92
4+
</a>
5+
• 5 days ago
6+
<br>
7+
<br>
8+
<a href="" class="post-title-link">
9+
Unleashing Hell Again: First Impressions of Hades 2!
10+
</a>
11+
<br>
12+
<br>
13+
Hey fellow gamers, I've just dived into the infernal depths of Hades 2, and I couldn't wait to share my first impressions with all of you!
14+
<br>
15+
<br>
16+
Gameplay: If you loved the fast-paced, rogue-like action of the original Hades, you're in for a treat. The combat feels even more refined, with new weapons and abilities that add fresh layers of strategy and excitement. The enemy variety is also impressive, keeping each run unpredictable and challenging.
17+
<br>
18+
<br>
19+
Story: Supergiant Games has done it again with a gripping narrative that draws you in from the get-go. The story picks up where the first game left off, introducing new characters and expanding the lore in fascinating ways. The dialogue is sharp, witty, and packed with emotion, making every interaction memorable.
20+
<br>
21+
<br>
22+
<a href="" class="share-link">
23+
Share
24+
</a>
25+
</p>
26+
27+
<style>
28+
.post {
29+
width: 700px;
30+
padding: 20px;
31+
background-color: rgb(239, 253, 250);
32+
}
33+
34+
.post:hover {
35+
background-color: rgb(192, 251, 238);
36+
cursor: pointer;
37+
}
38+
39+
.user-profile-link {
40+
color: rgb(6, 24, 20);
41+
font-weight: bold;
42+
text-decoration: none;
43+
}
44+
45+
.post-title-link {
46+
color: rgb(6, 24, 20);
47+
font-weight: bold;
48+
text-decoration: none;
49+
}
50+
51+
.share-link {
52+
padding: 10px;
53+
color: rgb(6, 24, 20);
54+
background-color: rgb(154, 249, 231);
55+
text-decoration: none;
56+
}
57+
58+
.share-link:hover {
59+
background-color: rgb(119, 246, 224);
60+
}
61+
62+
.share-link:active {
63+
background-color: rgb(228, 228, 228);
64+
}
65+
66+
67+
</style>

‎solutions/tutorial-08/8-2.html

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<p>
2+
<a href="" class="discord-link">Change Avatar</a>
3+
</p>
4+
<style>
5+
6+
.discord-link {
7+
text-decoration: none;
8+
padding: 5px;
9+
transition: background-color 0.5s,
10+
color 0.5s;
11+
color: white;
12+
background-color: #5865f2;
13+
}
14+
15+
.discord-link:hover {
16+
background-color: #4752c4;
17+
}
18+
19+
.discord-link:active {
20+
background-color: #3b44a5;
21+
}
22+
</style>

‎solutions/tutorial-08/8-3.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<p>
2+
<a href="" class="mcdonalds-link">Order Now</a>
3+
</p>
4+
5+
<style>
6+
.mcdonalds-link {
7+
text-decoration: none;
8+
padding: 5px;
9+
color: #2a2a2a;
10+
background-color: #ffbc0c;
11+
}
12+
</style>

‎solutions/tutorial-08/8-4.html

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<p>
2+
<a href="" class="duolingo-link">Get Started</a>
3+
</p>
4+
5+
<style>
6+
.duolingo-link {
7+
text-decoration: none;
8+
padding: 5px;
9+
transition: background-color 0.5s;
10+
color: white;
11+
background-color: rgb(87, 204, 4);
12+
text-transform: uppercase;
13+
}
14+
15+
.duolingo-link:hover {
16+
background-color: rgb(97, 222, 5);
17+
}
18+
19+
.duolingo-link:active {
20+
font-size: 15px;
21+
}
22+
</style>

‎solutions/tutorial-08/8-5.html

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<p>
2+
<a href="" class="paypal-link">Transfer Money</a>
3+
</p>
4+
5+
<style>
6+
.paypal-link {
7+
text-decoration: none;
8+
padding: 5px;
9+
transition: background-color 0.5s;
10+
color: white;
11+
background-color: #0645b5;
12+
}
13+
14+
.paypal-link:hover {
15+
background-color: #0070e0;
16+
}
17+
18+
.paypal-link:active {
19+
text-decoration: underline;
20+
background-color: #033087;
21+
}
22+
</style>

‎solutions/tutorial-08/8-6.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<p>
2+
<a href="" class="soundcloud-link">Create Account</a>
3+
</p>
4+
5+
<style>
6+
.soundcloud-link {
7+
text-decoration: none;
8+
padding: 5px;
9+
color: white;
10+
background-color: #ff5502;
11+
}
12+
</style>

‎solutions/tutorial-08/8-7.html

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<p>
2+
<a href="" class="google-link">For work</a>
3+
</p>
4+
5+
<style>
6+
.google-link {
7+
text-decoration: none;
8+
padding: 5px;
9+
transition: background-color 0.5s,
10+
color 0.5s;
11+
color: #1a73e8;
12+
}
13+
14+
.google-link:hover {
15+
color: #174ea6;
16+
background-color: #f4f8fe;
17+
}
18+
19+
.google-link:active {
20+
color: #174ea6;
21+
background-color: #e8f0fe;
22+
}
23+
</style>

‎solutions/tutorial-08/8-8.html

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<p>
2+
<a href="" class="twitch-link">Chat</a>
3+
</p>
4+
5+
<style>
6+
.twitch-link {
7+
text-decoration: none;
8+
padding: 5px;
9+
transition: background-color 0.5s,
10+
color 0.5s;
11+
color: white;
12+
background-color: #9147ff;
13+
}
14+
15+
.twitch-link:hover {
16+
background-color: #772ce8;
17+
}
18+
19+
.twitch-link:active {
20+
background-color: #5c16c5;
21+
}
22+
</style>

‎solutions/tutorial-08/8-9.html

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<p>
2+
<a href="" class="github-link">Create</a>
3+
</p>
4+
5+
<style>
6+
.github-link {
7+
text-decoration: none;
8+
padding: 5px;
9+
transition: background-color 0.5s,
10+
color 0.5s;
11+
color: white;
12+
background-color: #1f883d;
13+
}
14+
15+
.github-link:hover {
16+
background-color: #1d8139;
17+
}
18+
19+
.github-link:active {
20+
background-color: #197934;
21+
}
22+
</style>

0 commit comments

Comments
 (0)