-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
117 lines (117 loc) · 6.35 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
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="minimum-scale=1,initial-scale=1,width=device-width,shrink-to-fit=no"/>
<title>Oleg</title>
<link href="https://fonts.googleapis.com/css?family=El+Messiri:400,700&display=swap&subset=cyrillic" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="sidebar">
<div class="logo">
<img src="img/logo_200px.png" alt="logo">
</div>
<h2>
<b class="Name">Олег</b>
<br>
<b class="Surname">Жерновой</b>
</h2>
<a href="#" class=menuButton>ПОЕЗДКИ</a>
<a href="#about" class=menuButton>ОБО МНЕ</a>
<a href="#contact" class=menuButton>ОБРАТНАЯ СВЯЗЬ</a>
</div>
<div class="main">
<div class="gallery">
<div class="galleryColumn">
<img class="photo" src="img/photo1.jpg" style="width: 100%;" alt="photo1" />
<img class="photo" src="img/photo2.jpg" style="width: 100%;" alt="photo2" />
<img class="photo" src="img/photo3.jpg" style="width: 100%;" alt="photo3" />
<img class="photo" src="img/photo10.jpg" style="width: 100%;" alt="photo10" />
<img class="photo" src="img/photo13.jpg" style="width: 100%;" alt="photo10" />
</div>
<div class="galleryColumn">
<img class="photo" src="img/photo4.jpg" style="width: 100%;" alt="photo4" />
<img class="photo" src="img/photo5.jpg" style="width: 100%;" alt="photo5" />
<img class="photo" src="img/photo9.jpg" style="width: 100%;" alt="photo9" />
<img class="photo" src="img/photo11.jpg" style="width: 100%;" alt="photo11" />
<img class="photo" src="img/photo14.jpg" style="width: 100%;" alt="photo10" />
</div>
<div class="galleryColumn">
<img class="photo" src="img/photo7.jpg" style="width: 100%;" alt="photo7" />
<img class="photo" src="img/photo8.jpg" style="width: 100%;" alt="photo8" />
<img class="photo" src="img/photo6.jpg" style="width: 100%;" alt="photo6" />
<img class="photo" src="img/photo12.jpg" style="width: 100%;" alt="photo12" />
<img class="photo" src="img/photo15.jpg" style="width: 100%;" alt="photo10" />
</div>
</div>
<div class="about" id="about">
<h3>Обо мне</h3>
<img class="ava" src="img/ava_200px.png" alt="Me" />
<div class="text-about">
<p>
Меня зовут Олег и по образованию я географ.
Думаю, именно это определило мою страсть к путешествиям: по миру, России и даже внутри города. Не меньше самой поездки, меня увлекает сама подготовка маршрута, его детальное продумывание и поиск особенных точек назначения.
Как итог, в голове создаётся своя собственная карта мира, помноженная на впечатления, виды и эмоции.
</p>
<br>
<p>
А сейчас я начал своё обучение в школе Elbrus Coding Bootcamp. И это моё задание третьего дня учёбы. Пожелайте мне удачи!
</p>
</div>
</div>
<div class="contact-me" id="contact">
<div class="contact-me-text">
<h3>
<b>Обратная связь</b>
</h3>
<br>
<p>
Если вам интересно узнать побольше обо мне или остались какие-нибудь вопросы - всегда рад буду вам ответить. Для этого оставьте свои данные в форме ниже и я обязательно свяжусь с вами.
</p>
<br>
<form action="" target="blank">
<div class="question">
<label>Имя</label>
<input class="input" type="text" name="Name" required>
</div>
<div class="question">
<label>Телефон</label>
<input class="input" type="tel" name="Tel" required>
</div>
<div class="question">
<label>E-mail</label>
<input class="input" type="email" name="Email" required>
</div>
<div class="question">
<label>Сообщение</label>
<input class="input" type="text" name="Message" required>
</div>
<button class="button-contact" type="submit">Отправить</button>
</form>
</div>
</div>
<div class="footer">
<div class="socmedia">
<h4>
Где ещё меня можно найти?
</h4>
<div class="socmedia-icons">
<a href="https://tlgg.click/olehna">
<img src="img/telegram.png" width="50" height="50" alt="Telegram">
</a>
<a href="https://vk.com/big_z">
<img src="img/vk.png" width="50" height="50" alt="VK">
</a>
<a href="https://www.instagram.com/zoocapisce/">
<img src="img/instagram.png" width="50" height="50" alt="Instagram">
</a>
</div>
</div>
<div class="snippet">
<iframe style="border: none; margin:0px; padding:0px; width:150; height:150" src="https://nomadmania.com/api/snippet/14738/s"></iframe>
</div>
</div>
</div>
</body>
</html>