-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
86 lines (80 loc) · 3.97 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!--
Следующий мета тег "viewport" очень важен для правильного отображения "отзывчивых сайтов" на разных устройствах.
Браузеры хотят быть очень услужливыми и пытатться помочь нам, отображая сайты совсем не так, как нужно.
Совсем как "Двое из ларца"
Например - попытаться отобразить всю страницу разом, хотя она должна прокручиваться на 10 экранов,
или увеличить шрифт непонятным образом, когда мы переворачиваем телефон горизонтально
1. width=device-with - говорит браузеру "дружище, ширина моей страницы ровно такая, какой ширины твой экран.
Не надо ничего подгонять, я сам этим займусь"
2. initial-scale=1 - говорит браузеру "не вздумай ничего приближать/отдалять по своему усмотрению, я сам
озабочусь тем, чтобы при разной ширине всё отображалось хорошо"
https://www.w3schools.com/css/css_rwd_viewport.asp
-->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--
Тайтл отобржается как название закладки в браузере
-->
<title>Тарас Цюрка</title>
<link rel="icon" href="./favicon.ico" type="image/x-icon" sizes="any" />
<link rel="stylesheet" href="./normalize.css" />
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="wrapper">
<div class="block">
<div class="block-title">
<img class="image_rounded" src="./avatar.jpg" alt="fake image"><br>
Тарас Цюрка
</div>
</div>
<div class="block">
<div class="block-title">контакты</div>
<div class="block-entries">
<div class="entry">
<a href="mailto:[email protected]">[email protected]</a>
</div>
<div class="entry">
<a href="https://t.me/SiberianOne" target="_blank">telegram: SiberianOne</a>
</div>
<div class="entry">
<a href="https://www.linkedin.com/in/taras-tsyurka" target="_blank">
linkedin: Taras Tsyurka
</a>
<div class="entry">
<a href="https://www.facebook.com/ttsyurka/" target="_blank">facebook</a>
</div>
</div>
<div class="entry">
<a href="https://github.com/TTsyurka" target="_blank">git</a>
</div>
<div class="entry">
<img src="telegram.png" align="right">
</div>
</div>
</div>
<div class="full-width">
<div class="block-title">чем занимаюсь</div>
<div class="entry">
<a href="https://ekaterinburg.hh.ru/resume/442b5b55ff0b98231e0039ed1f35437368326e" target="_blank">работаю инженером тестировщиком мобильного приложения,<br>
но открыт для новых предложений</a>
</div>
<div class="entry">
<a
href="https://www.youtube.com/channel/UCKvm0TxaoEgp_g2fztKf25g"
target="_blank">
веду канал про виски (youtube)
</a>
</div>
<div class="entry">
<a href="https://www.flickr.com/photos/taras_tsyurka/collections/72157635706034264/" target="_blank">
путешествую (фотографии)
</a>
</div>
</div>
</div>
</body>
</html>