-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
214 lines (211 loc) · 10.8 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
<!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">
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
<title>Company</title>
</head>
<body>
<header>
<div class="header__logo">mycompany</div>
<nav>
<div class="topnav" id="myTopnav">
<a href="#home">HOME</a>
<a href="#about">ABOUT</a>
<a href="#services">SERVICES</a>
<a href="#portfolio">PORTFOLIO</a>
<a href="#testimonials">TESTIMONIALS</a>
<a href="#contact">CONTACT</a>
<a href="#" id="menu" class="icon">☰</a>
</div>
</nav>
</header>
<main>
<section class="main__welcome" id="home">
<h1>WELCOME ON <span class="mycompany">MYCOMPANY</span></h1>
<p>We are a digital agency with years of <strong>experience</strong> and with <strong>extraordinary
people</strong></p>
</section>
<section class="wrapper" id="about">
<div class="main__about">
<div class="about__left">
<img class="computer__img" src="img/mac.png" alt="computer">
</div>
<div class="about__right">
<h1>SOME WORDS ABOUT US</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum, facilis accusantium
doloribus
praesentium, ab natus commodi consequuntur nobis voluptatum dicta quod autem.
</p>
<ul>
<li><b>Mission</b> - <em>We deliver uniqueness and quality</em></li>
<li><b>Skills</b> - <em>Delivering fast and excellent results</em></li>
<li><b>Clients</b> - <em>Satisfied clients thanks to our experience</em></li>
</ul>
</div>
</div>
</section>
<section class="main__team">
<div class="wrapper">
<h1>OUR TEAM</h1>
<div class="teem__cards">
<div class="card">
<div class="photo"></div>
<h4 class="name">Alex Perlov</h4>
<p class="position">Manager</p>
<p class="about__position">The manager is responsible for the entire project. His task is to
complete the project on time, without going beyond the specified budget.</p>
</div>
<div class="card">
<div class="photo"></div>
<h4 class="name">Peter Ivanov</h4>
<p class="position">Designer</p>
<p class="about__position">Draws, visualizes, understands building materials and plumbing.</p>
</div>
<div class="card">
<div class="photo"></div>
<h4 class="name">Artemy Boikov</h4>
<p class="position">Developer</p>
<p class="about__position">The developer is the one who writes the code. Depending on the field
of
work, he is responsible for the server or user part of the product.</p>
</div>
<div class="card">
<div class="photo"></div>
<h4 class="name">Ann Konova</h4>
<p class="position">Tester</p>
<p class="about__position">A specialist who takes part in testing a component or system.</p>
</div>
</div>
</div>
</section>
<section class="main__services" id="services">
<div class="wrapper">
<h1>OUR SERVICES</h1>
<p><i>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla modi iusto beatae rerum ratione
eaque temporibus, veritatis quo, repellat labore reiciendis impedit sequi vel qui tempora enim
dicta sunt nam ipsam doloremque. Obcaecati officiis eum reprehenderit ullam totam adipisci
laborum eos tempora consequatur, expedita, quisquam enim blanditiis amet, ipsam nulla tempore
quis ipsa voluptas necessitatibus sapiente exercitationem repudiandae repellat ea laboriosam.
</i></p>
<div class="services__cards">
<div class="services__card">
<img src="img/web design.png" alt="service">
<h4>WEB DESIGN</h4>
<p>Web design encompasses many different skills and disciplines in the production and
maintenance of websites.
</p>
</div>
<div class="services__card">
<img src="img/mobile apps.png" alt="service">
<h4>MOBILE APPS</h4>
<p>A mobile application or app is a computer program or software application designed to run on
a mobile device such as a phone, tablet, or watch.
</p>
</div>
<div class="services__card">
<img src="img/photography.png" alt="service">
<h4>PHOTOGRAPHY</h4>
<p>Photography is the art of capturing and processing light using a sensor or film.</p>
</div>
<div class="services__card">
<img src="img/marketing.png" alt="service">
<h4>MARKETING</h4>
<p>Though traditional marketing is still prevalent, digital marketing now allows companies to
engage in e-mail, social media, affiliate, and content marketing strategies.
</p>
</div>
</div>
</div>
</section>
<section class="main__clients">
<div class="wrapper">
<h1><span>SOME OF</span> OUR CLIENTS</h1>
<div class="clients">
<img src="img/Layer 69.png" alt="clients">
<img src="img/Layer 65.png" alt="clients">
<img src="img/Layer 68.png" alt="clients">
<img src="img/Layer 67.png" alt="clients">
<img src="img/Layer 64.png" alt="clients">
</div>
</div>
</section>
<section class="wrapper" id="portfolio">
<div class="main__work">
<h1><span>TAKE LOOK AT</span> OUR WORK</h1>
<p><i>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, reiciendis soluta! Unde maiores
adipisci placeat error aperiam veniam odit neque dolorum voluptatibus optio fuga similique
molestiae voluptas laboriosam, ipsa nisi ea rem nam laudantium tempora! Ipsa labore facere
numquam est ducimus itaque iusto placeat quo natus doloribus veritatis, corporis aliquid!
</i></p>
<div class="gallery">
<div class="line1">
<img src="img/Слой 1.png" alt="work">
<img src="img/Слой 1.png" alt="work">
<img src="img/Слой 1.png" alt="work">
<img src="img/Слой 1.png" alt="work">
</div>
<div class="line2">
<img src="img/Слой 2.png" alt="work">
<img src="img/Слой 2.png" alt="work">
<img src="img/Слой 2.png" alt="work">
<img src="img/Слой 2.png" alt="work">
</div>
<div class="line3">
<img src="img/Слой 3.png" alt="work">
<img src="img/Слой 3.png" alt="work">
<img src="img/Слой 3.png" alt="work">
<img src="img/Слой 3.png" alt="work">
</div>
</div>
</div>
</section>
<section class="main__testimonials" id="testimonials">
<div class="wrapper">
<h1>OUR CLIENTS' <span>TESTIMONIALS</span></h1>
<p class="testimonail">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deleniti, voluptate
obcaecati est dicta
repellat nulla repellendus cupiditate doloribus. Eaque nostrum doloremque iste ullam eligendi
obcaecati repellat tempore illum unde vero.
</p>
<p>Dear Martin, CEO Acne Inc.</p>
</div>
</section>
<section class="contact__form" id="contact">
<div class="contact__wrapper">
<h1>CONTACS US</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci libero suscipit, provident qui
cumque iusto enim ipsa consequatur esse debitis ut, dolores quibusdam amet quis numquam repellat!
Quia nam minima hic aut totam accusamus inventore rem reprehenderit maxime! Animi, esse.</p>
<form name="newform" id="formContact">
<div class="form__inputs">
<p for="name">Name <span class="red">*</span><input type="text" id="nameContact"></p>
<p for="email">Email address <span class="red">*</span><input type="text" id="emailContact">
</p>
</div>
<p for="name">Message <span class="red">*</span></p>
<textarea name="text" id="messageContact"></textarea>
<div class="button__block">
<input type="submit" value="SEND">
</div>
</form>
</div>
</section>
</main>
<footer>
<div class="wrapper">
<div class="social">
<a href=""><img src="img/twitter.png" alt="twit"></a>
<a href=""><img src="img/linkedin.png" alt="link"></a>
<a href=""><img src="img/google.png" alt="google"></a>
<a href=""><img src="img/facebook.png" alt="facebook"></a>
<a href=""><img src="img/dribbble.png" alt="drib"></a>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>