-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
252 lines (251 loc) · 15.3 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
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Singolo</title>
</head>
<body>
<div id="home">
<div class="header">
<div class="wrapper header__wrapper">
<div class="hamburger">
<div class="hamburger__line"></div>
</div>
<h1 class="logo">Singolo<span class="text-colored">*</span></h1>
<div class="header__navigation">
<h1 class="logo navigation-mobile__logo">Singolo<span class="text-colored">*</span></h1>
<div class="navigation">
<a class="navigation__link navigation__link_selected" href="#home">Home</a>
<a class="navigation__link" href="#services">Services</a>
<a class="navigation__link" href="#portfolio">Portfolio</a>
<a class="navigation__link" href="#about">About</a>
<a class="navigation__link" href="#contact">Contact</a>
</div>
</div>
</div>
</div>
<div class="slider" style="background-color: #F06C64">
<div class="wrapper">
<div class="carousel">
<div class="slide__container">
<div class="slide active">
<div class="slide__content">
<div class="iPhone iPhone_vertical">
<img src="assets/img/iPhone Vertical.png" alt="iPhone Vertical">
<div class="iPhone__display"></div>
<div class="iPhone__button"></div>
</div>
<div class="iPhone iPhone_horizontal">
<img src="assets/img/iPhone Horizontal.png" alt="iPhone Horizontal">
<div class="iPhone__display"></div>
<div class="iPhone__button"></div>
</div>
</div>
</div>
<div class="slide">
<div class="slide__content">
<img id="img_slide2" src="assets/img/slide-2.png">
</div>
</div>
</div>
<div class="control left">
<img class="arrow left" src="assets/img/prev.png" alt="prev">
</div>
<div class="control right">
<img class="arrow right" src="assets/img/next.png" alt="next">
</div>
</div>
</div>
</div>
</div>
<div id="services" class="services">
<div class="wrapper services__wrapper">
<h2 class="services__title">Our Services</h2>
<p class="services__text">Fusce dapibus, tellus ac curcus commodo, tortor mauris condimentum.
Duis mollis, non commodo luctus nisi erat pottitor ligula, eget lacinia odio sem elit.
Fusce dapibus, tellus ac curcus commodo, tortor mauris condimentum nibh.
</p>
<div class="layout-3-column">
<div class="service-item">
<span class="ico service-item__ico ico-pen"></span>
<div class="service-item__content">
<h3 class="service-item__title">Custom Design</h3>
<p class="service-item__text sub-p">Curabitur vestibulum eget mauris quis laoreet. Phasellus in quam laoreet, viverra lacus ut, ultrices velit.</p>
</div>
</div>
<div class="service-item">
<span class="ico service-item__ico ico-lamp"></span>
<div class="service-item__content">
<h3 class="service-item__title">Inovative Ideas</h3>
<p class="service-item__text sub-p">Quisque luctus, quam eget molestie com- modo, lacus purus curcus purus, nec rutrum tellus dolor id lorem.</p>
</div>
</div>
<div class="service-item">
<span class="ico service-item__ico ico-heart"></span>
<div class="service-item__content">
<h3 class="service-item__title">Love Is The Answer</h3>
<p class="service-item__text sub-p">Nulla sed ninc et tortor luctus faucibus. Morbi at aliquet turpis, et consequat felis. Quisqie condimentum.</p>
</div>
</div>
<div class="service-item">
<span class="ico service-item__ico ico-mobile-phone"></span>
<div class="service-item__content">
<h3 class="service-item__title">Responsive Layout</h3>
<p class="service-item__text sub-p">Sed porttitor placerat rhoncus. In at nunc tellus. Maecenas blandit nunc ligula. Prae- sent elit leo.</p>
</div>
</div>
<div class="service-item">
<span class="ico service-item__ico ico-bubble"></span>
<div class="service-item__content">
<h3 class="service-item__title">24 / 7 Support</h3>
<p class="service-item__text sub-p">Vivamus vel quam lacinia, tincidunt dui non, vehicula nisi. Nulla a sem erat. Pelen- tesque egestas venenatis lorem.</p>
</div>
</div>
<div class="service-item">
<span class="ico service-item__ico ico-star"></span>
<div class="service-item__content">
<h3 class="service-item__title">Feel Like A Star</h3>
<p class="service-item__text sub-p">Quisque hendrerit parus dapibus, ornare nibh vitae, viverra nibh. Fusce vitae aliquam tellus.</p>
</div>
</div>
</div>
</div>
</div>
<div id="portfolio" class="portfolio">
<div class="wrapper portfolio__wrapper">
<h2 class="portfolio__title">Portfolio</h2>
<p class="portfolio__text">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
<div class="portfolio__tags">
<span id="all" class="tag tag_selected">All</span>
<span id="web-disign" class="tag">Web Design</span>
<span id="graphic-design" class="tag">Graphic Design</span>
<span id="artwork" class="tag">Artwork</span>
</div>
<div class="layout-4-column portfolio__images">
<img id="artwork" src="assets/img/portfolio/Project1.png" alt="project1">
<img id="web-disign" src="assets/img/portfolio/Project2.png" alt="project2">
<img id="web-disign" src="assets/img/portfolio/Project3.png" alt="project3">
<img id="artwork" src="assets/img/portfolio/Project4.png" alt="project4">
<img id="graphic-design" src="assets/img/portfolio/Project5.png" alt="project5">
<img id="web-disign" src="assets/img/portfolio/Project6.png" alt="project6">
<img id="graphic-design" src="assets/img/portfolio/Project7.png" alt="project7">
<img id="graphic-design" src="assets/img/portfolio/Project8.png" alt="project8">
<img id="artwork"src="assets/img/portfolio/Project9.png" alt="project9">
<img id="web-disign" src="assets/img/portfolio/Project10.png" alt="project10">
<img id="graphic-design" src="assets/img/portfolio/Project11.png" alt="project11">
<img id="artwork" src="assets/img/portfolio/Project12.png" alt="project12">
</div>
</div>
</div>
<div id="about" class="about-us">
<div class="wrapper about-us__wrapper">
<h2 class="about-us__title">About Us</h2>
<p class="about-us__text">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum. Duis mollis, non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac curcus commodo, tortor mauris condimenturn nibh.</p>
<div class="layout-3-column">
<div class="employee">
<img class="employee__photo" src="assets/img/employees/Adam.png" alt="Photo">
<div class="employee__content">
<h3 class="employee__name">Adam Jensen</h3>
<p class="employee__text sub-p">Quisque luctus, quam eget molestie commodo, lacus purus cursus purus, nec rutrum tellus dolor id lorem.</p>
</div>
<div class="employee__icons">
<span class="ico ico-facebook ico_round"></span>
<span class="ico ico-google ico_round"></span>
<span class="ico ico-twitter ico_round"></span>
<span class="ico ico-linkedin ico_round"></span>
</div>
</div>
<div class="employee">
<img class="employee__photo" src="assets/img/employees/Desmond.png" alt="Photo">
<div class="employee__content">
<h3 class="employee__name">Desmond Miles</h3>
<p class="employee__text sub-p">Curabitur vestibulum eget mauris quis laoreet. Phasellus in quam laoreet, viverra lacus ut, ultrices velit.</p>
</div>
<div class="employee__icons">
<span class="ico ico-facebook ico_round"></span>
<span class="ico ico-google ico_round"></span>
<span class="ico ico-twitter ico_round"></span>
<span class="ico ico-linkedin ico_round"></span>
</div>
</div>
<div class="employee">
<img class="employee__photo" src="assets/img/employees/Scolara.png" alt="Photo">
<div class="employee__content">
<h3 class="employee__name">Scolara Visari</h3>
<p class="employee__text sub-p">Nulla sed nunc et tortor luctus faucibus. Morbi at aliquet turpis, et consequat felis. Quisque condimentum.</p>
</div>
<div class="employee__icons">
<span class="ico ico-facebook ico_round"></span>
<span class="ico ico-google ico_round"></span>
<span class="ico ico-twitter ico_round"></span>
<span class="ico ico-linkedin ico_round"></span>
</div>
</div>
</div>
</div>
</div>
<div id="contact" class="get-quote">
<div class="wrapper get-quote__wrapper">
<h2 class="get-quote__title">Get a Quote</h2>
<p class="get-quote__text">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimen. Duis mollis,
non commodo luctus nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus tellus ac curcus
commodo, tortor mauris condimentum nibh.
</p>
<div class="layout-3-column">
<form id="quote-form" class="get-quote__form" action="#" method="get">
<input id="name" class="input" type="text" name="name" placeholder="Name (Required)" required>
<div id="name-hint" class="warning-bubble"></div>
<input id="email" class="input" type="email" name="email" placeholder="Email (Required)" required>
<div id="email-hint" class="warning-bubble"></div>
<input id="subject" class="input" type="text" name="subject" placeholder="Subject">
<textarea id="description" class="textarea" rows="8" name="details" placeholder="Describe your project in detail..."></textarea>
<div id="description-hint" class="warning-bubble">Много символов</div>
<button id="button_send" class="button">SEND</button>
</form>
<div class="get-quote__contact-info">
<h3 class="contact-info__title">Contact information</h3>
<p class="contact-info__description sub-p">Quisque hendrerit purus dapibus, ornare nibh vitae, viver- ra nibh. Fusce vitae aliquam telluc. Proin sit
amet volutpat libero. Nulla sed nunc et tortor luctuc faucibus. Morbi at aliquet turpis, et consequal felis.
</p>
<p class="contact sub-p">
<span class="ico contact__ico ico-location"></span>Elm. St. 14/05 Lost City
</p>
<p class="contact sub-p">
<span class="ico contact__ico ico-phone"></span><a href="tel:+375441111111">03528 331 86 35</a>
</p>
<p class="contact sub-p">
<span class="ico contact__ico ico-mail"></span><a href="mailto:info@singolo.com">info@singolo.com</a>
</p>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="wrapper footer__wrapper">
<p class="footer__text sub-p">© Copyright 2013</p>
<div class="footer__icons">
<span class="ico ico-facebook ico_round"></span>
<span class="ico ico-google ico_round"></span>
<span class="ico ico-twitter ico_round"></span>
<span class="ico ico-linkedin ico_round"></span>
</div>
</div>
</footer>
<div class="modal">
<div class="modal__content">
<h2 class="modal__header">The letter was sent</h2>
<h3 class="modal__title">Subject</h3>
<p id="resalt_subject" class="sub-p modal__text"></p>
<div>
<h3 class="modal__title">Description</h3>
<p id="resalt_description" class="sub-p modal__text"></p>
</div>
<button id="modal__button" class="button modal__button">OK</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>