Skip to content

Commit c08eb37

Browse files
author
dima_los
committed
Update
1 parent c5e383e commit c08eb37

File tree

2 files changed

+206
-0
lines changed

2 files changed

+206
-0
lines changed

‎sidebar-improved.html

+103
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<div class="sidebar-title">
2+
Hades | Hades II
3+
</div>
4+
<div class="sidebar-description">
5+
The subreddit for Hades and Hades II, the godlike rogue-likes from <span class="text-bold">Supergiant Games</span>.
6+
</div>
7+
<div class="stats-container">
8+
<div class="stats-section">
9+
<div class="stats-section-title">
10+
603K
11+
</div>
12+
<div class="stats-section-description">
13+
Members
14+
</div>
15+
</div>
16+
<div class="stats-section">
17+
<div class="stats-section-title">
18+
73
19+
</div>
20+
<div class="stats-section-description">
21+
<img src="https://dimal-dev.github.io/html-css/assets/green-round-dot.png" class="online-image">
22+
Online
23+
</div>
24+
</div>
25+
<div class="stats-section">
26+
<div class="stats-section-title">
27+
Top 1%
28+
</div>
29+
<div class="stats-section-description">
30+
Rank by size
31+
</div>
32+
</div>
33+
</div>
34+
35+
<div class="sidebar-image-container">
36+
<div class="sidebar-image-title">
37+
Sidebar image
38+
</div>
39+
<img src="https://dimal-dev.github.io/html-css/reddit/assets/img/sidebar-image-1.jpg" class="sidebar-image">
40+
</div>
41+
42+
<style>
43+
.stats-section {
44+
display: inline-block;
45+
margin-right: 25px;
46+
}
47+
48+
.online-image {
49+
width: 8px;
50+
}
51+
52+
.stats-section-title {
53+
font-weight: bold;
54+
font-size: 14px;
55+
}
56+
57+
.stats-section-description {
58+
font-size: 12px;
59+
color: rgb(87, 111, 118);
60+
margin-top: 3px;
61+
}
62+
63+
.stats-container {
64+
margin-top: 10px;
65+
}
66+
67+
.sidebar-title {
68+
font-weight: bold;
69+
color: rgb(42, 60, 66);
70+
font-size: 14px;
71+
margin-top: 15px;
72+
margin-bottom: 5px;
73+
}
74+
75+
.sidebar-description {
76+
color: rgb(87, 111, 118);
77+
font-size: 14px;
78+
line-height: 18px;
79+
width: 250px;
80+
}
81+
82+
.text-bold {
83+
font-weight: bold;
84+
}
85+
86+
.sidebar-image-container {
87+
border-top: 1px solid #ededed;
88+
margin-top: 4px;
89+
padding-top: 20px;
90+
width: 230px;
91+
}
92+
93+
.sidebar-image-title {
94+
text-transform: uppercase;
95+
color: rgb(87, 111, 118);
96+
font-size: 15px;
97+
margin-bottom: 12px;
98+
}
99+
100+
.sidebar-image {
101+
width: 230px;
102+
}
103+
</style>

‎tutorial-code/tutorial-11/sidebar-improved.html

+103
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<div class="sidebar-title">
2+
Hades | Hades II
3+
</div>
4+
<div class="sidebar-description">
5+
The subreddit for Hades and Hades II, the godlike rogue-likes from <span class="text-bold">Supergiant Games</span>.
6+
</div>
7+
<div class="stats-container">
8+
<div class="stats-section">
9+
<div class="stats-section-title">
10+
603K
11+
</div>
12+
<div class="stats-section-description">
13+
Members
14+
</div>
15+
</div>
16+
<div class="stats-section">
17+
<div class="stats-section-title">
18+
73
19+
</div>
20+
<div class="stats-section-description">
21+
<img src="https://dimal-dev.github.io/html-css/assets/green-round-dot.png" class="online-image">
22+
Online
23+
</div>
24+
</div>
25+
<div class="stats-section">
26+
<div class="stats-section-title">
27+
Top 1%
28+
</div>
29+
<div class="stats-section-description">
30+
Rank by size
31+
</div>
32+
</div>
33+
</div>
34+
35+
<div class="sidebar-image-container">
36+
<div class="sidebar-image-title">
37+
Sidebar image
38+
</div>
39+
<img src="https://dimal-dev.github.io/html-css/reddit/assets/img/sidebar-image-1.jpg" class="sidebar-image">
40+
</div>
41+
42+
<style>
43+
.stats-section {
44+
display: inline-block;
45+
margin-right: 25px;
46+
}
47+
48+
.online-image {
49+
width: 8px;
50+
}
51+
52+
.stats-section-title {
53+
font-weight: bold;
54+
font-size: 14px;
55+
}
56+
57+
.stats-section-description {
58+
font-size: 12px;
59+
color: rgb(87, 111, 118);
60+
margin-top: 3px;
61+
}
62+
63+
.stats-container {
64+
margin-top: 10px;
65+
}
66+
67+
.sidebar-title {
68+
font-weight: bold;
69+
color: rgb(42, 60, 66);
70+
font-size: 14px;
71+
margin-top: 15px;
72+
margin-bottom: 5px;
73+
}
74+
75+
.sidebar-description {
76+
color: rgb(87, 111, 118);
77+
font-size: 14px;
78+
line-height: 18px;
79+
width: 250px;
80+
}
81+
82+
.text-bold {
83+
font-weight: bold;
84+
}
85+
86+
.sidebar-image-container {
87+
border-top: 1px solid #ededed;
88+
margin-top: 4px;
89+
padding-top: 20px;
90+
width: 230px;
91+
}
92+
93+
.sidebar-image-title {
94+
text-transform: uppercase;
95+
color: rgb(87, 111, 118);
96+
font-size: 15px;
97+
margin-bottom: 12px;
98+
}
99+
100+
.sidebar-image {
101+
width: 230px;
102+
}
103+
</style>

0 commit comments

Comments
 (0)