Skip to content

Commit 0f7b97f

Browse files
author
dima_los
committed
Update
1 parent 1a9e863 commit 0f7b97f

File tree

4 files changed

+147
-33
lines changed

4 files changed

+147
-33
lines changed

‎job-links-2.html

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<p>
2+
<a href="" class="linkedin">LinkedIn Jobs</a>
3+
</p>
4+
<p>
5+
<a href="" class="glassdoor">Glassdoor</a>
6+
</p>
7+
<p>
8+
<a href="" class="indeed">Indeed</a>
9+
</p>
10+
11+
<style>
12+
a {
13+
padding: 5px;
14+
text-decoration: none;
15+
transition: background-color 0.5s,
16+
font-size 0.5s;
17+
font-size: 16px;
18+
}
19+
20+
a:hover {
21+
font-size: 15px;
22+
}
23+
24+
.linkedin {
25+
background-color: dodgerblue;
26+
color: white;
27+
}
28+
29+
.linkedin:hover {
30+
background-color: rgb(83, 170, 255);
31+
}
32+
33+
.linkedin:active {
34+
background-color: rgb(148, 201, 255);
35+
}
36+
37+
.glassdoor {
38+
background-color: forestgreen;
39+
color: white;
40+
}
41+
42+
.glassdoor:hover {
43+
background-color: rgb(63, 175, 63);
44+
}
45+
46+
.glassdoor:active {
47+
background-color: rgb(121, 224, 121);
48+
}
49+
50+
.indeed {
51+
background-color: sienna;
52+
color: white;
53+
}
54+
55+
.indeed:hover {
56+
background-color: rgb(174, 100, 65);
57+
}
58+
59+
.indeed:active {
60+
background-color: rgb(222, 146, 111);
61+
}
62+
</style>

‎tutorial-code/tutorial-06/sidebar.html

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<p class="title">
2+
Hades | Hades II
3+
</p>
4+
<p class="description">
5+
The subreddit for Hades and Hades II, the godlike rogue-likes from Supergiant Games.
6+
</p>
7+
<p class="text-bold">
8+
73
9+
</p>
10+
<p class="online-indicator">
11+
<img src="https://dimal-dev.github.io/html-css/assets/green-round-dot.png" class="online-image">
12+
Online
13+
</p>
14+
<p class="sidebar-poster-text">
15+
Sidebar Image
16+
</p>
17+
<img src="https://dimal-dev.github.io/html-css/reddit/assets/img/sidebar-image-1.jpg" class="sidebar-poster-image">
18+
19+
<style>
20+
.sidebar-poster-image {
21+
width: 270px;
22+
}
23+
24+
.online-image {
25+
width: 8px;
26+
}
27+
28+
.online-indicator {
29+
font-style: italic;
30+
font-size: 14px;
31+
}
32+
33+
.text-bold {
34+
font-weight: bold;
35+
font-size: 14px;
36+
}
37+
38+
.description {
39+
color: grey;
40+
width: 270px;
41+
line-height: 22px;
42+
}
43+
44+
.title {
45+
font-weight: bold;
46+
}
47+
48+
.sidebar-poster-text {
49+
text-transform: uppercase;
50+
color: grey;
51+
}
52+
</style>

‎tutorial-code/tutorial-07/job-links.html

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,29 +8,15 @@
88
<a href="" class="indeed">Indeed</a>
99
</p>
1010

11+
12+
1113
<style>
1214
a {
1315
text-decoration: none;
1416
}
1517

1618
a:hover {
1719
text-decoration: underline;
18-
font-weight: bold;
19-
font-style: italic;
20-
font-size: 20px;
21-
text-transform: uppercase;
22-
}
23-
24-
.linkedin {
25-
color: dodgerblue;
26-
}
27-
28-
.linkedin:hover {
29-
color: royalblue;
30-
}
31-
32-
.linkedin:active {
33-
color: blue;
3420
}
3521

3622
.glassdoor {
@@ -56,4 +42,20 @@
5642
.indeed:active {
5743
color: rosybrown;
5844
}
45+
46+
.linkedin {
47+
color: dodgerblue;
48+
}
49+
50+
.linkedin:hover {
51+
color: royalblue;
52+
font-weight: bold;
53+
font-style: italic;
54+
font-size: 20px;
55+
text-transform: uppercase;
56+
}
57+
58+
.linkedin:active {
59+
color: blue;
60+
}
5961
</style>

‎tutorial-code/tutorial-07/pseudo-class.html renamed to ‎tutorial-code/tutorial-07/other-elements.html

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,36 @@
11
<p>
22
Paragraph 1
33
</p>
4-
54
<p>
65
Paragraph 2
76
</p>
8-
97
<img src="../tutorial-03/images/icons/community-icon-1.png">
108

119
<style>
12-
p {
13-
color: royalblue;
14-
font-size: 25px;
10+
img {
11+
width: 50px;
1512
}
1613

17-
p:hover {
18-
text-decoration: underline;
19-
cursor: crosshair;
14+
img:hover {
15+
width: 55px;
16+
cursor: pointer;
2017
}
2118

22-
p:active {
23-
font-size: 23px;
19+
img:active {
20+
width: 52px;
2421
}
2522

26-
img {
27-
width: 100px;
23+
p {
24+
color: royalblue;
25+
font-size: 16px;
2826
}
2927

30-
img:hover {
31-
width: 110px;
32-
cursor: pointer;
28+
p:hover {
29+
text-decoration: underline;
30+
cursor: crosshair;
3331
}
3432

35-
img:active {
36-
width: 105px;
33+
p:active {
34+
font-size: 15px;
3735
}
3836
</style>

0 commit comments

Comments
 (0)