-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
172 lines (172 loc) · 10.7 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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Notitanic</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section id="home" class="main-section">
<div class="humburger">
<span></span>
<span></span>
<span></span>
</div>
<div class="container main-section__nav-container">
<img src="icons/logo.svg" alt="logo" class="main-section__logo">
<div class="main-section__nav-menu nav-menu">
<ul class="nav-menu__list">
<li class="nav-menu__list-item"><a href="#home">Home</a></li>
<li class="nav-menu__list-item"><a href="#about">About me</a></li>
<li class="nav-menu__list-item"><a href="#portfolio">Portfolio</a></li>
<li class="nav-menu__list-item"><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
<div class="container main-section__content-container">
<div class="main-section__offer">
<p class="main-section__hello">Hello</p>
<h1 class="main-section__title">I’m Name
Surname</h1>
<p class="main-section__subtitle">I've been doing web design, front-end and back-end development for a year now. Do you need a website design, site layout, or maybe a turnkey website? Then contact me</p>
<button class="main-section__btn">Contact me</button>
</div>
<div class="main-section__right-wrapper">
<img src="img/boy.png" alt="boy" class="main-section__img">
<img src="img/main-face.png" alt="main-face" class="main-section__face">
<div class="main-section__elipse"></div>
<div class="main-section__elipses">
<div class="main-section__mini-elipse mini-elipse mini-elipse_first">
<p class="mini-elipse__text">PS</p>
</div>
<div class="main-section__mini-elipse mini-elipse mini-elipse_second">
<p class="mini-elipse__text">UX</p>
</div>
<div class="main-section__mini-elipse mini-elipse mini-elipse_third">
<img src="icons/html.svg" alt="html" class="mini-elipse__icon-html">
</div>
<div class="main-section__mini-elipse mini-elipse mini-elipse_fourth">
<p class="mini-elipse__text">UI</p>
</div>
</div>
</div>
</div>
</section>
<section class="second-section">
<div class="container second-section__container">
<div class="second-section__cards-box">
<div class="second-section__cards-item cards-item">
<img src="icons/cards-item-1.svg" alt="cards-item-1" class="cards-item__icon cards-item__icon_first">
<p class="cards-item__title">Product Design</p>
</div>
<div class="second-section__cards-item cards-item">
<img src="icons/uxui.svg" alt="uxui" class="cards-item__icon cards-item__icon_second">
<p class="cards-item__title">UX/UI Design</p>
</div>
<div class="second-section__cards-item cards-item">
<img src="icons/cards-item-2.svg" alt="cards-item-2" class="cards-item__icon">
<p class="cards-item__title">Icon Design</p>
</div>
<div class="second-section__cards-item cards-item">
<img src="icons/cards-item-3.svg" alt="cards-item-3" class="cards-item__icon">
<p class="cards-item__title">Logo Design</p>
</div>
<div class="second-section__cards-item cards-item">
<img src="icons/cards-item-4.svg" alt="cards-item-4" class="cards-item__icon">
<p class="cards-item__title">Backend</p>
</div>
<div class="second-section__cards-item cards-item">
<img src="icons/cards-item-5.svg" alt="cards-item-5" class="cards-item__icon">
<p class="cards-item__title">Frontend</p>
</div>
<div class="second-section__cards-item cards-item">
<img src="icons/cards-item-6.svg" alt="cards-item-6" class="cards-item__icon">
<p class="cards-item__title">Motion</p>
</div>
</div>
<div class="second-section__about about">
<h2 id="about" class="about__title">ABOUT ME</h2>
<div class="about__rectangle">
<p class="about__text">Hello again everyone! So, you already know that my name is Gleb. A little about myself: student, 18 y.o., athlete-football player, I love creativity since childhood, I live in Donetsk, Ukraine. Why programming? Everything is elementary - I like it, the profession of the future, thanks to which I can provide myself and fulfill my dream - travel, at the moment I specialize in web design, front-end and back-end development, turnkey websites. Why should you choose me? I approach each order with great responsibility and love, as I want to make a name for myself, exclude plagiarism and negligence, fully study the project, the client and its target audience, work for quality, trying to make an order as quickly and uniquely as possible, taking into account all the edits and wishes.
By trusting me, you will get the maximum return for your project, save your nerves and time.
If you are interested in me , you want to know something more or use my services, then I will provide all my contacts below.</p>
</div>
<div class="about__photo-rectangles">
<div class="about__photo-rectangle photo-rectangle photo-rectangle_first">
<img src="img/about-photo-1.png" alt="about-photo-1" class="photo-rectangle__img">
<img src="img/face-2.png" alt="face-2" class="about__face">
</div>
<div class="about__photo-rectangle photo-rectangle photo-rectangle_second">
<img src="img/about-photo-2.png" alt="about-photo-2" class="photo-rectangle__img">
<img src="img/face-2.png" alt="face-2" class="about__face about__face_second">
</div>
<div class="about__photo-rectangle photo-rectangle photo-rectangle_third">
<img src="img/about-photo-3.png" alt="about-photo-3" class="photo-rectangle__img">
</div>
</div>
</div>
<div class="second-section__white-elipse"></div>
<div class="second-section__gold-elipse"></div>
<div class="second-section__blue-elipse"></div>
</div>
</section>
<section id="portfolio" class="third-section">
<div class="container third-section__container">
<h2 class="third-section__title">PORTFOLIO</h2>
<div class="third-section__slaider">
<div class="third-section__arrow-elipse arrow-elipse_left">
<img src="icons/arrow-left.svg" alt="arrow-left" class="third-section__arrow">
</div>
<div class="third-section__content">
<img src="img/content-site.png" alt="content-site" class="third-section__img">
<div class="third-section__content-text">
<h3 class="third-section__content-title">Landing Ice-cream</h3>
<p class="third-section__content-subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut orci eu elit consequat posuere ut sed elit. Nulla et tristique felis. Morbi quis orci non purus blandit fringilla. Etiam et mollis eros. Duis venenatis vulputate lacus, non tristique eros placerat vel. Nam nec magna lacus. Etiam euismod egestas mauris nec mollis. Phasellus efficitur et ex vel condimentum. Cras enim purus, tempor sed massa vel, accumsan bibendum magna. Nullam hendrerit cursus purus, sit amet viverra arcu gravida vel.</p>
<button class="third-section__content-btn">More
<img src="icons/more-btn-arrow.svg" alt="more-btn-arrow" class="third-section__arrow-btn">
</button>
</div>
</div>
<div class="third-section__arrow-elipse arrow-elipse_right">
<img src="icons/arrow-right.svg" alt="arrow-right" class="third-section__arrow">
</div>
</div>
</div>
</section>
<footer id="contact" class="footer">
<div class="container footer__container">
<div class="footer__menu">
<div class="footer__nav">
<ul class="footer__nav-list">
<li class="footer__nav-item">Home</li>
<li class="footer__nav-item">About me</li>
<li class="footer__nav-item">Portfolio</li>
<li class="footer__nav-item">Contact</li>
</ul>
</div>
<div class="footer__contact">
<ul class="footer__contact-list">
<li class="footer__contact-item">Contact:</li>
<li class="footer__contact-item">Email: notitanic33@gmail.com</li>
<li class="footer__contact-item">Inst: notitanic33</li>
<li class="footer__contact-item">Calls: +7 (900) - 121 - 54 -54</li>
</ul>
</div>
<div class="footer__copyright">
<div class="footer__logo">
<img src="icons/logo.svg" alt="logo" class="footer__logo-icon">
<div class="footer__arrow-elipse">
<img src="icons/arrow-up.svg" alt="arrow-up" class="footer__arrow">
</div>
</div>
<p class="footer__copyright-text">Copyright © 2021, Notitanic</p>
</div>
</div>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>