-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
171 lines (168 loc) · 8.11 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles/common/base.css">
<link rel="stylesheet" href="styles/common/buttons.css">
<link rel="stylesheet" href="styles/common/form.css">
<link rel="stylesheet" href="styles/header/header.css">
<link rel="stylesheet" href="styles/main/requirements.css">
<link rel="stylesheet" href="styles/main/requirements-list.css">
<link rel="stylesheet" href="styles/main/help.css">
<link rel="stylesheet" href="styles/main/help-list.css">
<link rel="stylesheet" href="styles/main/offer.css">
<link rel="stylesheet" href="styles/main/offer-list.css">
<link rel="stylesheet" href="styles/footer/contact.css">
<link rel="stylesheet" href="styles/footer/footer.css">
<link rel="stylesheet" href="styles/footer/map.css">
<title>Pecode Test</title>
</head>
<body>
<header class="page-header">
<h1 class="visualy_hidden">Test Task</h1>
<div class="container">
<nav class="header-navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#requirements">Our requirement</a></li>
<li><a href="#help">Help</a></li>
<li><a href="#offers">We offer</a></li>
<li><a href="#contact">Contacts</a></li>
</ul>
</nav>
<form class="request-form" action="#">
<fieldset>
<legend>Sent request</legend>
<p>
<input type="text" name="login_field" id="login_field-header" placeholder="Input your name">
<label class="" for="login_field-header">
Input your name</label>
</p>
<p>
<input type="email" name="email_field" id="email_field-header" placeholder="Input email">
<label class="" for="email_field-header">
Input email</label>
</p>
<button type="submit" class="button_primary">Sent</button>
</fieldset>
</form>
</div>>
</header>
<main>
<section class="requirements" id="requirements">
<div class="container">
<h2>Our requirement</h2>
<ul class="requirements-list">
<li>Front end - HTML5 and CSS3 are main technology of the UI
code (CSS3 can replace JS in many cases).</li>
<li>Pixel-Perfect level of UI - must be accurate on pixel level
to PSD design.</li>
<li>Cannot be any copyright mark, link, name, signature, email,
images in any of the code files, files names, project images
and any other project asset.</li>
<li>The developer cannot use any modules and plugins which are
not free to use & with free license of use.</li>
<li>Resolutions ready - link - need to include all desktops,
including large screens and resolutions.</li>
<li>Code - classes, IDís and scripts names - required to be named
properly - for future editing.</li>
<li>Sliders with layers & float text required to fit for any
responsive layout.</li>
<li>1 element for all layouts - Header, Footer, Body, Menu,
fields & forms - cannot have duplicate elements for desktop
and mobile (you required to do 1 elements which will fit to
all layouts properly).</li>
</ul>
</div>
</section>
<section class="help" id="help">
<div class="container">
<h2>Help</h2>
<ol class="help-list">
<li><span class="help-font_heading">NAME FONTS:</span><br>
<span class="help-font_name">Cosmic Sans MS</span><br>
TEXT COLOR #272f2f<br> COLOR BUTTONS
(GRADIENT) from #fb6a4e to #ff606a</li>
<li>Clean, robust, dynamic & organized code are essentials!</li>
<li>File names need to be clear and logic.<br> Back-end files and
folders organization - Images, CSS, JS, Fonts, and any other
project asset - required to be in dedicated folders.</li>
<li>Use hover effects, animations and fields validations
(e.g. emails, ID, names, phones, etc..) where possible, keep
in mind that sometimes the designers forget to create them.</li>
</ol>
</div>
</section>
<section class="offers" id="offers">
<div class="container">
<h2>We offer:</h2>
<ul class="offers-list">
<li><span></span>Career growth</li>
<li><span></span>Flexible working schedule</li>
<li><span></span>Comfortable workplace</li>
<li><span></span>Competitive salary according
to the qualifications</li>
<li><span></span>Corporate leisure activities</li>
<li><span></span>English lessons</li>
</ul>
</div>
</section>
</main>
<footer>
<section class="contact" id="contact">
<div class="container">
<h2>Contacts</h2>
<div class="flex-container">
<form class="request-form" action="#">
<fieldset>
<legend>Sent request</legend>
<p>
<input type="text" name="login_field" id="login_field-header"
placeholder="Input your name">
<label class="" for="login_field-header">
Input your name</label>
</p>
<p>
<input type="email" name="email_field" id="email_field-header"
placeholder="Input email">
<label class="" for="email_field-header">
Input email</label>
</p>
<button type="submit" class="button_primary">Sent</button>
</fieldset>
</form>
<section class="contact-info">
<h3>Get in touch</h3>
<p>
Ukraine, Lviv<br>
Telephone: +380509214381<br>
<span class="contact-info-email">E-mail: pecodesoftware@gmail.com<span>
</p>
<ul class="buttons_social">
<a href="">
<li>LinkedIn</li>
</a>
<a href="">
<li>Twitter</li>
</a>
<a href="">
<li>Facebook</li>
</a>
</ul>
</section>
</div>
</section>
<h2 class="visualy_hidden">Find us</h2>
<div id="map"></div>
<script src="scripts/map.js"></script>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCS6qYWc61BwC0DVgFywmqDzO2fHUmZn7E&callback=initMap"
async defer></script>
<span class="signature">
Created by Alexander Fedoniuk
</span>
</footer>
</body>
</html>