-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
150 lines (129 loc) · 7.02 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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="short page about github user">
<meta name="keywords" content="github pineapple">
<meta name="author" content="AnanasClassic">
<meta name="viewport" content="width=device-width">
<meta property="og:image" content="images/pineapple_photo_3.png">
<title>About me</title>
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="pages/index.css">
<link rel="icon" href="images/logo.png">
</head>
<body>
<div class=body_like>
<div class=background></div>
<header class="rectangle rectangle__border_blue">
<div class="header__title">
<h1>Всем привет!</h1>
<h1>Я Влад Кузнецов</h1>
</div>
<img class="rectangle__image rectangle__border_blue" src="images/title_photo.png" alt="not found">
</header>
<section class="rectangle_height_20 rectangle rectangle__border_blue">
<div class="rectangle__text_type_main">
<p>Вам, наверное, интересно,
почему здесь столько ананасов...</p>
</div>
</section>
<section class="rectangle_height_10 rectangle rectangle__border_blue">
<div class="rectangle__text_type_main">
<p>(Если не интересно, нажмите
<a style="color: white;" href="#explain">cюда</a>)
</p>
</div>
</section>
<section class="rectangle_height_30 rectangle rectangle__border_blue">
<div class="rectangle__text_type_spam">
<p>Ананасы – это просто божественно! Не существует ничего более соблазнительного, чем эти
сочные и сладкие фрукты. Они обладают особой магией, которая притягивает и завораживает, словно
заклинание.</p>
</div>
<img class="rectangle__image rectangle__border_blue" src="images/pineapple_photo_1.png" alt="not found">
</section>
<section class="rectangle_height_40 rectangle rectangle__border_blue">
<div class="rectangle__text_type_spam">
<p>Ощущение на языке, когда ты берешь первый кусочек ананаса – это настоящая взрывная смесь
вкусов! Сначала ощущается легкая кислинка, а затем наступает сладость, которая распространяется по всему
рту. Чувствуешь, как сочный мякоть фрукта растворяется в твоих устах, создавая ощущение полного
блаженства.</p>
</div>
<img class="rectangle__image rectangle__border_blue" src="images/pineapple_photo_2.jpg" alt="not found">
</section>
<section class="rectangle_height_30 rectangle rectangle__border_blue">
<div class="rectangle__text_type_spam">
<p>Ананасы – это просто божественно! Не существует ничего более соблазнительного, чем эти
сочные и сладкие фрукты. Они обладают особой магией, которая притягивает и завораживает, словно
заклинание...</p>
</div>
<img class="rectangle__image rectangle__border_blue" src="images/pineapple_photo_3.png" alt="not found">
</section>
<section class="rectangle_height_50 rectangle rectangle__border_github" id="explain">
<div class="rectangle__text_type_spam">
<div class="about-me__text" style="font-size: 2.4vw; line-height: 4.5vw">
<h3>На самом деле, AnanasClassic — мой ник на GitHub :)</h3>
<ul>
<li>Я начинающий backand-разработчик</li>
<li>Сейчас обучаюсь в МФТИ</li>
<li>Летом планирую попасть на стажировку в Яндекс</li>
<li>Кстати, вот мои контакты:</li>
</ul>
</div>
<div style="display: flex">
<a href="https://t.me/hsse_top" target="_blank"><img class="contact_button" src="images/telegram.png"
alt="telegram"></a>
<a href="https://github.com/AnanasClassic" target="_blank"><img class="contact_button"
src="images/github.png"
alt="github"></a>
<a href="https://vk.com/hsse_mipt" target="_blank"><img class="contact_button"
src="images/vk.png" alt="vk"></a>
</div>
</div>
<img class="rectangle__image rectangle__border_github" src="images/about_me_photo.jpg" alt="not found">
</section>
<footer class="rectangle footer">
<button id="openRegFormButton" class="footer__button">Отдать мне свои данные</button>
<button id="startRainButton" class="footer__button">начать дождь</button>
<button id="makeBWButton" class="footer__button">убрать цвета</button>
</footer>
<!-- Task 1 -->
<div id="gallery" class="gallery">
<img class="gallery__exit-button" src="images/exit_button.png" , alt="close">
<img id="gallery__image" src="">
<img class="gallery__arrow gallery__arrow_left" src="images/left_arrow.png" , alt="close">
<img class="gallery__arrow gallery__arrow_right" src="images/right_arrow.png" , alt="close">
</div>
<!-- Tasks 2, 3, 4 -->
<div id="regForm" class="registration-form">
<form>
<div class="registration-form__field" id="regNameField">
<label for="regName" id="regNameLabel">Имя</label>
<input type="text" id="regName" name="regName" required>
</div>
<div class="registration-form__field" id="regEmailField">
<label for="regEmail" id="regEmailLabel">Email</label>
<input type="text" id="regEmail" name="regEmail" required>
</div>
<div class="registration-form__field">
<button id="regButton" class="registration-form__button">Отправить</button>
</div>
</form>
</div>
<!-- Task 5 -->
<div id="rickroll-popup" class="rickroll-popup">
<img id="rickrollImage" class="rickroll-popup__image" src="images/rick-roll.gif"
alt="You have not been rickrolled :(">
<img id="rickrollExitButton" class="rickroll-popup__exit-button" src=images/exit_button.png alt="X">
</div>
<!-- Task 7 -->
<div id="rain" class="rain"></div>
<script src="scripts/gallery_script.js"></script>
<script src="scripts/rickroll_script.js"></script>
<script src="scripts/rain_script.js"></script>
<script src="scripts/bw_script.js"></script>
<script src="scripts/registration_script.js"></script>
</div>
</body>
</html>