Skip to content

Commit 64bb893

Browse files
author
dima_los
committed
Update
1 parent 65728e4 commit 64bb893

File tree

2 files changed

+365
-0
lines changed

2 files changed

+365
-0
lines changed

‎buttons-9.html

+286
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,286 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
7+
<title>Html+CSS: Images. Dima L</title>
8+
9+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
10+
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
11+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/fontawesome.min.css"
12+
integrity="sha512-SgaqKKxJDQ/tAUAAXzvxZz33rmn7leYDYfBP+YoMRSENhf3zJyx3SBASt/OfeQwBHA1nxMis7mM3EV/oYT6Fdw=="
13+
crossorigin="anonymous" referrerpolicy="no-referrer"/>
14+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/brands.min.css"
15+
integrity="sha512-9YHSK59/rjvhtDcY/b+4rdnl0V4LPDWdkKceBl8ZLF5TB6745ml1AfluEU6dFWqwDw9lPvnauxFgpKvJqp7jiQ=="
16+
crossorigin="anonymous" referrerpolicy="no-referrer"/>
17+
18+
19+
<link rel="stylesheet"
20+
href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/default.min.css">
21+
<link rel="stylesheet"
22+
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/base16/google-light.min.css"
23+
integrity="sha512-nzMhN+KUSkxA5L9h2BKKpaFw19+a1JufkYL6GEwKPxrsf5YFO8TBbI1Qppd72zZbHAA6RG2htrd2q7sHvcb4Ew=="
24+
crossorigin="anonymous" referrerpolicy="no-referrer"/>
25+
26+
27+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
28+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/highlightjs-line-numbers.min.js"></script>
29+
30+
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
31+
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
32+
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
33+
<link rel="manifest" href="/site.webmanifest">
34+
35+
36+
<script>
37+
hljs.highlightAll();
38+
hljs.initLineNumbersOnLoad({
39+
singleLine: true
40+
});
41+
</script>
42+
43+
<link rel="stylesheet" href="../exercise/assets/css/main.css">
44+
<link rel="stylesheet" href="../exercise/assets/css/code.css">
45+
</head>
46+
<body>
47+
<!-- Google tag (gtag.js) -->
48+
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2BRPRR9Q9Y"></script>
49+
<script>
50+
window.dataLayer = window.dataLayer || [];
51+
52+
function gtag() {
53+
dataLayer.push(arguments);
54+
}
55+
56+
gtag('js', new Date());
57+
58+
gtag('config', 'G-2BRPRR9Q9Y');
59+
</script>
60+
61+
<div class="blog-main-container mx-auto py-3">
62+
<div class="content">
63+
<header class="d-flex justify-content-center pb-3">
64+
<a href="https://dimal.dev/" target="_blank"
65+
class="d-flex align-items-center text-dark text-decoration-none fs-3">
66+
<span>DimaL</span>
67+
&nbsp;
68+
<span class="">🧑‍💻</span>
69+
</a>
70+
</header>
71+
<main>
72+
<h1 class="text-center pb-5">
73+
Tutorial 9. Resources for Practice
74+
</h1>
75+
<div class="links-wrapper" id="links-wrapper">
76+
<p>
77+
<a href="" class="netflix-link">Log&nbsp;In</a>
78+
</p>
79+
<p>
80+
<a href="" class="discord-link">Change&nbsp;Avatar</a>
81+
</p>
82+
<p>
83+
<a href="" class="duolingo-link">Get&nbsp;Started</a>
84+
</p>
85+
<p>
86+
<a href="" class="paypal-link">Transfer&nbsp;Money</a>
87+
</p>
88+
<p>
89+
<a href="" class="google-link">For&nbsp;work</a>
90+
</p>
91+
<p>
92+
<a href="" class="twitch-link">Chat</a>
93+
</p>
94+
<p>
95+
<a href="" class="github-link">Create</a>
96+
</p>
97+
<p class="section-head-collapsible">
98+
Custom&nbsp;Feeds
99+
</p>
100+
</div>
101+
</main>
102+
</div>
103+
<footer class="pt-5 text-muted footer text-center">
104+
Dima L © 2024
105+
</footer>
106+
</div>
107+
108+
109+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
110+
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
111+
crossorigin="anonymous"></script>
112+
113+
<link rel="preconnect" href="https://fonts.googleapis.com">
114+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
115+
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Vollkorn:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap"
116+
rel="stylesheet">
117+
118+
119+
<style>
120+
.images {
121+
padding: 0 30px;
122+
display: flex;
123+
flex-direction: column;
124+
align-items: center;
125+
}
126+
127+
.images img {
128+
display: inline-block;
129+
max-width: 350px;
130+
max-height: 350px;
131+
padding: 30px;
132+
}
133+
134+
.links-wrapper {
135+
display: flex;
136+
justify-content: center;
137+
align-items: center;
138+
gap: 30px;
139+
max-width: 600px;
140+
margin: 0 auto;
141+
flex-wrap: wrap;
142+
}
143+
144+
#links-wrapper a, #links-wrapper p {
145+
white-space: nowrap;
146+
}
147+
148+
#links-wrapper .netflix-link {
149+
text-decoration: none;
150+
padding: 5px;
151+
transition: background-color 0.5s,
152+
color 0.5s;
153+
color: white;
154+
background-color: #e50813;
155+
}
156+
157+
#links-wrapper .netflix-link:hover {
158+
background-color: #c1101a;
159+
}
160+
161+
#links-wrapper .netflix-link:active {
162+
color: #e2c2c3;
163+
background-color: #99161d;
164+
}
165+
166+
#links-wrapper .discord-link {
167+
text-decoration: none;
168+
padding: 5px;
169+
transition: background-color 0.5s,
170+
color 0.5s;
171+
color: white;
172+
background-color: #5865f2;
173+
}
174+
175+
#links-wrapper .discord-link:hover {
176+
background-color: #4752c4;
177+
}
178+
179+
#links-wrapper .discord-link:active {
180+
background-color: #3b44a5;
181+
}
182+
183+
#links-wrapper .duolingo-link {
184+
text-decoration: none;
185+
padding: 5px;
186+
transition: background-color 0.5s;
187+
color: white;
188+
background-color: rgb(87, 204, 4);
189+
text-transform: uppercase;
190+
}
191+
192+
#links-wrapper .duolingo-link:hover {
193+
background-color: rgb(97, 222, 5);
194+
}
195+
196+
#links-wrapper .duolingo-link:active {
197+
font-size: 15px;
198+
}
199+
200+
#links-wrapper .paypal-link {
201+
text-decoration: none;
202+
padding: 5px;
203+
transition: background-color 0.5s;
204+
color: white;
205+
background-color: #0645b5;
206+
}
207+
208+
#links-wrapper .paypal-link:hover {
209+
background-color: #0070e0;
210+
}
211+
212+
#links-wrapper .paypal-link:active {
213+
text-decoration: underline;
214+
background-color: #033087;
215+
}
216+
217+
#links-wrapper .google-link {
218+
text-decoration: none;
219+
padding: 5px;
220+
transition: background-color 0.5s,
221+
color 0.5s;
222+
color: #1a73e8;
223+
}
224+
225+
#links-wrapper .google-link:hover {
226+
color: #174ea6;
227+
background-color: #f4f8fe;
228+
}
229+
230+
#links-wrapper .google-link:active {
231+
color: #174ea6;
232+
background-color: #e8f0fe;
233+
}
234+
235+
#links-wrapper .twitch-link {
236+
text-decoration: none;
237+
padding: 5px;
238+
transition: background-color 0.5s,
239+
color 0.5s;
240+
color: white;
241+
background-color: #9147ff;
242+
}
243+
244+
#links-wrapper .twitch-link:hover {
245+
background-color: #772ce8;
246+
}
247+
248+
#links-wrapper .twitch-link:active {
249+
background-color: #5c16c5;
250+
}
251+
252+
#links-wrapper .github-link {
253+
text-decoration: none;
254+
padding: 5px;
255+
transition: background-color 0.5s,
256+
color 0.5s;
257+
color: white;
258+
background-color: #1f883d;
259+
}
260+
261+
#links-wrapper .github-link:hover {
262+
background-color: #1d8139;
263+
}
264+
265+
#links-wrapper .github-link:active {
266+
background-color: #197934;
267+
}
268+
269+
#links-wrapper .section-head-collapsible {
270+
text-transform: uppercase;
271+
padding: 10px;
272+
}
273+
274+
#links-wrapper .section-head-collapsible:hover {
275+
background-color: rgb(246, 248, 249);
276+
cursor: pointer;
277+
}
278+
279+
#links-wrapper .section-head-collapsible:active {
280+
background-color: rgb(228, 228, 228);
281+
}
282+
</style>
283+
284+
285+
</body>
286+
</html>

‎sidebar-2.html

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
7+
<title>Sidebar. Dima L</title>
8+
9+
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
10+
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
11+
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
12+
<link rel="manifest" href="/site.webmanifest">
13+
14+
15+
<script>
16+
hljs.highlightAll();
17+
hljs.initLineNumbersOnLoad({
18+
singleLine: true
19+
});
20+
</script>
21+
22+
<link rel="stylesheet" href="../exercise/assets/css/main.css">
23+
<link rel="stylesheet" href="../exercise/assets/css/code.css">
24+
</head>
25+
<body>
26+
<!-- Google tag (gtag.js) -->
27+
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2BRPRR9Q9Y"></script>
28+
<script>
29+
window.dataLayer = window.dataLayer || [];
30+
31+
function gtag() {
32+
dataLayer.push(arguments);
33+
}
34+
35+
gtag('js', new Date());
36+
37+
gtag('config', 'G-2BRPRR9Q9Y');
38+
</script>
39+
40+
<style>
41+
p {
42+
width: 270px;
43+
}
44+
45+
.sidebar-header {
46+
font-weight: bold;
47+
font-size: 10px;
48+
color: #19456E;
49+
}
50+
51+
.sidebar-text {
52+
color: #6E4219;
53+
line-height: 1.4;
54+
}
55+
56+
.members-count {
57+
font-weight: bold;
58+
font-size: 20px;
59+
}
60+
61+
.green-dot {
62+
width: 8px;
63+
}
64+
</style>
65+
66+
<p class="sidebar-header">
67+
Hades | Hades II
68+
</p>
69+
<p class="sidebar-text">
70+
The subreddit for Hades and Hades II, the godlike rogue-likes from Supergiant Games.
71+
</p>
72+
<p class="members-count">
73+
<img src="https://dimal-dev.github.io/html-css/assets/green-round-dot.png" class="green-dot">
74+
73 Online
75+
</p>
76+
77+
78+
</body>
79+
</html>

0 commit comments

Comments
 (0)