-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
205 lines (203 loc) · 11.1 KB
/
index.html
File metadata and controls
205 lines (203 loc) · 11.1 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Automotive</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Fonts -->
<link rel="stylesheet" href="fonts/fonts.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700|PT+Serif" rel="stylesheet">
<link rel="stylesheet" href="libs/normalize.css">
<!-- Main style -->
<link rel="stylesheet" href="css/style.css">
<!-- Media -->
<link rel="stylesheet" href="css/media.css">
<!-- Font Awesome -->
<script src="https://use.fontawesome.com/afd08a041d.js"></script>
<!-- Creator - fregire -->
</head>
<body class="page">
<div class="page__main">
<div class="page__wrapper page__wrapper_padding main">
<header class="header"> <!-- semantic - header -->
<h1 class="headline header__logo">Automotive</h1>
<nav class="header__nav"> <!-- semantic - nav -->
<div class="header__mobile"><a href="#"><i class="fa fa-bars header__icon"></i></a></div>
<ul class="nav">
<li class="nav__item"><a href="#" class="link">Home</a></li>
<li class="nav__item"><a href="#" class="link">About</a></li>
<li class="nav__item"><a href="#" class="link">Services</a></li>
<li class="nav__item"><a href="#" class="link">Gallery</a></li>
<li class="nav__item"><a href="#" class="link">Contact</a></li>
</ul>
</nav>
</header>
<div class="main__content">
<article class="main__article">
<h2 class="main__head headline">Sell your <br><span class="main__head_white">car now</span></h2>
<p class="main__text white-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</article>
<div class="main__form">
<form action="#" class="form form_shadow">
<p class="form__head headline">Request a quote</p>
<input class="form__input input" placeholder="Full Name" type="text">
<input class="form__input input" placeholder="Email Adress" type="text">
<input class="form__input input" placeholder="Phone Number" type="text">
<input class="form__input input" placeholder="Country" type="text">
<div class="form__accept accept">
<input type="checkbox" class="accept__check checkbox">
<span class="accept__text">I accept the terms & conditions</span>
</div>
<input type="submit" class="form__send btn" value="send">
</form>
</div>
</div>
</div>
</div>
<div class="page__services">
<div class="page__wrapper">
<div class="services">
<h2 class="services__header headline"><span class="headline_red">Our</span> services</h2>
<ul class="services__list">
<li class="services__item">
<svg xmlns="http://www.w3.org/2000/svg" class="services__icon" viewBox="0 0 150 155">
<defs>
</defs>
<path class="cls-1" d="M1017,866a75,75,0,1,0,75,75A75,75,0,0,0,1017,866Zm6.25,137.19v-5.94a6.25,6.25,0,0,0-12.5,0v5.94a62.524,62.524,0,0,1-55.933-55.94h5.933a6.25,6.25,0,0,0,0-12.5h-5.933a62.511,62.511,0,0,1,55.933-55.935v5.935a6.25,6.25,0,0,0,12.5,0v-5.935a62.51,62.51,0,0,1,55.93,55.935h-5.93a6.25,6.25,0,0,0,0,12.5h5.93A62.522,62.522,0,0,1,1023.25,1003.19Zm-19.51-48.932,8.84,26.513,35.36-70.716-70.71,35.358Zm10,10.222-4.07-12.2-0.98-2.966-2.97-.99-12.206-4.064,40.446-20.228Z" transform="translate(-942 -863.5)"/>
</svg>
<p class="services__descript">Making your trip <br>beautiful and easier</p>
</li>
<li class="services__item">
<svg xmlns="http://www.w3.org/2000/svg" class="services__icon" viewBox="0 0 150 155">
<defs>
</defs>
<path class="cls-1" d="M746,860a58.008,58.008,0,0,0-54.627,77.5l15.961,32.292c1.718,2.838,3.75,5.411,6.507,6.143-0.006.108-.063,0.2-0.063,0.315v6.458a6.448,6.448,0,0,0,6.444,6.459v6.458a6.445,6.445,0,0,0,6.445,6.455v6.46a6.449,6.449,0,0,0,6.444,6.46h25.778a6.449,6.449,0,0,0,6.444-6.46v-6.46a6.445,6.445,0,0,0,6.445-6.455v-6.458a6.448,6.448,0,0,0,6.444-6.459V976.25a3.4,3.4,0,0,0-.075-0.353c2.82-.808,5.173-3.4,6.52-6.105l15.96-32.292A58.008,58.008,0,0,0,746,860Zm12.889,148.54H733.111v-6.46h25.778v6.46Zm6.444-12.915H726.667v-6.458h38.666v6.458Zm6.445-12.917H720.222V976.25h51.556v6.458ZM786.712,937.5l-12.92,25.833H718.347L705.288,937.5A45.111,45.111,0,1,1,786.712,937.5ZM746,879.375v6.458a32.255,32.255,0,0,1,32.222,32.292h6.445A38.711,38.711,0,0,0,746,879.375Z" transform="translate(-671 -860)"/>
</svg>
<p class="services__descript">Tools to help you succeed tommorow</p>
</li>
<li class="services__item">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="services__icon" viewBox="0 0 163 155">
<defs>
<clipPath id="clip-path">
<rect x="-0.453" y="6.5" width="163" height="142"/>
</clipPath>
</defs>
<g clip-path="url(#clip-path)">
<path class="cls-1" d="M149.85,12.889a45.344,45.344,0,0,0-63.372,0,44.875,44.875,0,0,0-4.531,5.289,44.854,44.854,0,0,0-4.525-5.289,45.344,45.344,0,0,0-63.371,0,43.569,43.569,0,0,0,0,62.339l67.9,66.8,67.9-66.8A43.581,43.581,0,0,0,149.85,12.889Zm-9.055,53.439L81.948,124.216S26.329,69.5,23.1,66.328a31.135,31.135,0,0,1,0-44.532,32.393,32.393,0,0,1,45.268,0c2.992,2.937,13.58,13.358,13.58,13.358L95.527,21.8a32.393,32.393,0,0,1,45.268,0A31.135,31.135,0,0,1,140.795,66.328ZM115.723,26.592v6.653A13.418,13.418,0,0,1,129.25,46.551a13.138,13.138,0,0,1-3.962,9.408l4.781,4.7a19.734,19.734,0,0,0,5.944-14.111A20.131,20.131,0,0,0,115.723,26.592Z" transform="translate(-0.453 6.5)"/>
</g>
</svg>
<p class="services__descript">Ideas that will blow you out the blue.</p>
</li>
<li class="services__item">
<svg xmlns="http://www.w3.org/2000/svg" class="services__icon" viewBox="0 0 150 155">
<defs>
</defs>
<path class="cls-1" d="M483.63,939.489l11.042-11.042a28.508,28.508,0,0,0,30.582-6.364l4.035-4.036a22.828,22.828,0,0,0,0-32.288l-4.035,4.035-16.141,16.142a5.707,5.707,0,0,1-8.071-8.071l16.141-16.141,4.036-4.036a22.829,22.829,0,0,0-32.288,0l-4.036,4.036a28.508,28.508,0,0,0-6.364,30.582l-15.077,15.077L409.891,873.82,399,871l2.82,10.891,53.563,53.562-51.2,51.2a11.412,11.412,0,0,0,16.142,16.137l47.164-47.16,49,49a11.413,11.413,0,0,0,16.142-16.138Zm5.3-53.73,4.04-4.035a17.059,17.059,0,0,1,19.436-3.294l-15.4,15.4a11.414,11.414,0,1,0,16.141,16.142l15.4-15.4a17.071,17.071,0,0,1-3.294,19.442l-4.035,4.035A22.831,22.831,0,0,1,488.931,885.759Zm-7.664,31.881a28.547,28.547,0,0,0,8.071,8.071L475.56,939.489l-8.071-8.071Zm-64.978,81.118a5.706,5.706,0,1,1-8.07-8.069l8.07-8.071,8.071,8.071Zm4.036-20.175,39.093-39.094,8.071,8.071L428.4,986.653ZM472.1,952.169l8.071-8.07,36.323,36.322-8.07,8.071Zm56.5,48.431a5.7,5.7,0,0,1-8.07,0l-8.071-8.073,8.071-8.07,8.07,8.07A5.707,5.707,0,0,1,528.6,1000.6Z" transform="translate(-392.5 -862)"/>
</svg>
<p class="services__descript">Navigate your path to beautiful world.</p>
</li>
</ul>
</div>
</div>
</div>
<div class="page__story">
<div class="page__wrapper">
<div class="story">
<p class="story__text">We are in business for over 6 years providing amazing services to client
<br />and people love them to the core. View our story to know more.</p>
<button class="story__btn btn">Our Story</button>
</div>
</div>
</div>
<div class="page__pricing">
<div class="page__wrapper">
<div class="pricing">
<h2 class="pricing__header headline">Pricing</h2>
<ul class="pricing__list">
<li class="pricing__item">
<p class="pricing__name">Starter</p>
<p class="pricing__price">Free</p>
<ul class="pricing__advantages">
<li class="pricing__advantage">Free Service</li>
<li class="pricing__advantage">Multiple Accounts</li>
<li class="pricing__advantage">Managment No</li>
<li class="pricing__advantage">--</li>
<li class="pricing__advantage">--</li>
<li><button class="pricing__button btn">Try</button></li>
</ul>
</li>
<li class="pricing__item">
<div class="pricing__popular">Popular</div>
<p class="pricing__name">Business</p>
<p class="pricing__price">$97</p>
<ul class="pricing__advantages">
<li class="pricing__advantage">Free Service</li>
<li class="pricing__advantage">Multiple Accounts</li>
<li class="pricing__advantage">Managment No</li>
<li class="pricing__advantage">Unlimited Data</li>
<li class="pricing__advantage">--</li>
<li><button class="pricing__button btn">Sign up</button></li>
</ul>
</li>
<li class="pricing__item">
<p class="pricing__name">Professional</p>
<p class="pricing__price">$297</p>
<ul class="pricing__advantages">
<li class="pricing__advantage">Free Service</li>
<li class="pricing__advantage">Multiple Accounts</li>
<li class="pricing__advantage">Managment No</li>
<li class="pricing__advantage">Unlimited Data</li>
<li class="pricing__advantage">Whatever You Need</li>
<li><button class="pricing__button btn">Sign up</button></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="page__media">
<div class="page__wrapper media">
<div class="comments">
<h2 class="comments__header headline">Testimonial</h2>
<div class="comment">
<div class="comment__block">
<p class="comment__text">I have been involved with this comapny for ages and just want to say this is a great work by designcoon.</p>
<p class="comment__author">DJ Bravo - Frequent Travelera</p>
</div>
<div class="comment__pict comment__pict_man">
</div>
</div>
<div class="comment">
<div class="comment__block comment__block_different">
<p class="comment__text">I have been involved with this comapny for ages and just .</p>
<p class="comment__author">DJ Bravo - Frequent Travelera</p>
</div>
<div class="comment__pict comment__pict_woman">
</div>
</div>
</div>
<div class="gallery">
<h2 class="gallery__header headline">Gallery</h2>
<div class="gallery__pictures">
<div class="gallery__image-block"><img src="img/1.png" alt="Our photos" class="gallery__img"></div>
<div class="gallery__image-block"><img src="img/2.png" alt="Our photos" class="gallery__img"></div>
<div class="gallery__image-block"><img src="img/3.png" alt="Our photos" class="gallery__img"></div>
<div class="gallery__image-block"><img src="img/4.png" alt="Our photos" class="gallery__img"></div>
<div class="gallery__image-block"><img src="img/5.png" alt="Our photos" class="gallery__img"></div>
<div class="gallery__image-block"><img src="img/6.png" alt="Our photos" class="gallery__img"></div>
</div>
<a href="#" class="gallery__more">View more pictures</a>
</div>
</div>
</div>
<div class="page__footer">
<div class="page__wrapper">
<footer class="footer">
<p class="footer__rights">All Rights Reserved | 2016 | Designed with love by <span class="footer__rights_company">DesignCoon</span></p>
<p class="footer__logo">automotive</p>
</footer>
</div>
</div>
<script src="scripts/main.js"></script> <!-- Script for mobile menu -->
</body>
</html>