-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
271 lines (271 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
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/81541dc3f8.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./assets/stylesheets/style.css">
<title>Logitics Company</title>
</head>
<body>
<section class="hero">
<div class="container">
<h1 class="hero__title">Logitics Company</h1>
<div class="hero__cards">
<div class="hero__card hero__card--accent">
<h2 class="hero__card__title">Benefits</h2>
<ul class="list-nostyle">
<li class="hero__card__item">Streamline analytics processes</li>
<li class="hero__card__item">Embed BI and predictive planning</li>
<li class="hero__card__item">Turn insights into action</li>
<li class="hero__card__item">Visualize your decisions</li>
</ul>
</div>
<div class="hero__card">
<h2 class="hero__card__title">Our Company</h2>
<ul class="list-nostyle">
<li class="hero__card__item">Access AI, data-driven cloud apps</li>
<li class="hero__card__item">Embed intelligence into processes</li>
<li class="hero__card__item">Drive end-to-end innovation</li>
<li class="hero__card__item">Scale your platform</li>
</ul>
</div>
</div>
</div>
</section>
<section class="about">
<div class="container">
<h2 class="about__title">
We Are Increasing Business Success With IT Solution
</h2>
<p class="about__info">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="about__extender"></div>
<div class="about__cards">
<div class="about__card">
<div class="about__card__icon">
<i class="fa-solid fa-mountain-sun"></i>
</div>
<h3 class="about__card__title">Visualize it</h3>
<p class="about__card__info">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Delectus quisquam non laborum ullam dolor cumque, doloremque sequi. Aliquam, pariatur at?</p>
</div>
<div class="about__card">
<div class="about__card__icon">
<i class="fa-solid fa-pen-ruler"></i>
</div>
<h3 class="about__card__title">Create it</h3>
<p class="about__card__info">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corporis saepe sequi aspernatur optio magnam. Velit non commodi hic? Est, vero!</p>
</div>
<div class="about__card">
<div class="about__card__icon">
<i class="fa-solid fa-seedling"></i>
</div>
<h3 class="about__card__title">Grow It</h3>
<p class="about__card__info">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi saepe, laboriosam eaque a repellendus quidem nemo nulla ullam quos sequi.</p>
</div>
</div>
</div>
</section>
<section class="services">
<div class="container">
<h2 class="services__title">What We Do</h2>
<div class="services__content">
<div class="services__list">
<ul class="list-nostyle">
<li class="services__item">Premium Design</li>
<li class="services__item">Amazing Photo</li>
<li class="services__item">Creative Ideas</li>
<li class="services__item">Unique Strategy</li>
<li class="services__item">Creative Branding</li>
</ul>
<a href="#" class="services__button">learn more</a>
</div>
<div class="services__intro">
<img src="./assets/images/office.jpg" alt="off" class="services__intro__image">
<p class="services__intro__info">
Dignissim suspendisse in est ante in nibh mauris. Varius quam quisque id diam vel quam elementum pulvinar etiam. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Nunc mattis enim ut tellus elementum sagittis vitae et leo.</p>
</div>
</div>
</div>
</section>
<section class="info">
<div class="container">
<ul class="info__nav list-nostyle">
<li class="info__nav-btn sescription.btn">Description</li>
<li class="info__nav-btn specifications-btn">Specifications</li>
<li class="info__nav-btn reviews-btn info__nav-btn--active">Reviews</li>
</ul>
<div class="info__pages">
<div class="info__page description">
<img src="./assets/images/girl-with-laptop.jpg" alt="Logitics" class="description__image">
<p class="info__page__text"><strong>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem quisquam eum ullam, consequuntur officiis hic temporibus esse tempora odit vitae possimus enim iure saepe. Quidem quasi aut provident consequuntur illum.</strong></p>
<p class="info__page__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione nobis excepturi quis dolorem. Recusandae incidunt ullam consequatur molestias, temporibus dicta ipsum non itaque quisquam fugit atque obcaecati vero voluptate officiis consectetur porro laudantium nam sint.</p>
</div>
<div class="info__page specifications">
<p class="info__page__text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reprehenderit repudiandae, iusto ad laboriosam rem dolorum dolorem mollitia facilis quis minus, voluptate veniam adipisci accusantium velit neque a ex eaque est ipsa, illo non? Quaerat.</p>
<p class="info__page__text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius minus laudantium quidem sed aliquid illum provident quibusdam repudiandae, impedit facilis expedita vitae alias, optio perferendis neque dignissimos quas rerum? Voluptatibus nihil a ipsa modi!</p>
</div>
<div class="info__page reviews info__page--active">
<h4 class="reviews__title">Be The First To Review This Product!</h4>
<p class="info__page__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet vero, fugiat enim laborum sunt reiciendis repellendus excepturi cumque id quae.</p>
<a href="" class="info__page__button">Write product review</a>
</div>
</div>
</div>
</section>
<section class="strategies">
<div class="container">
<h2 class="strategies__title">IT Solution Strategy Development For Your Business</h2>
<ul class="strategies__list list-nostyle">
<div class="strategies__item">Comfort produce husband boy her had hearing. Law others theirs passed but wishes. You day real less till dear read. Considered use dispatched melancholy sympathize discretion led. </div>
<div class="strategies__item">Comfort produce husband boy her had hearing. Law others theirs passed but wishes. You day real less till dear read. Considered use dispatched melancholy sympathize discretion led. </div>
<div class="strategies__item">Comfort produce husband boy her had hearing. Law others theirs passed but wishes. You day real less till dear read. Considered use dispatched melancholy sympathize discretion led. </div>
<div class="strategies__item">Comfort produce husband boy her had hearing. Law others theirs passed but wishes. You day real less till dear read. Considered use dispatched melancholy sympathize discretion led. </div>
<div class="strategies__item">Comfort produce husband boy her had hearing. Law others theirs passed but wishes. You day real less till dear read. Considered use dispatched melancholy sympathize discretion led. </div>
<div class="strategies__item">Comfort produce husband boy her had hearing. Law others theirs passed but wishes. You day real less till dear read. Considered use dispatched melancholy sympathize discretion led. </div>
</ul>
</div>
</section>
<section class="clients">
<div class="container">
<h2 class="clients__title">Featured clients</h2>
<p class="clients__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus, mollitia fugiat. Numquam nam atque quos neque itaque.</p>
<ul class="clients__list list-nostyle">
<li class="clients__client">
<img class="clients__client__icon" src="./assets/images/logos/Toyota_logo.svg.png" alt="Toyota">
<p class="clients__client__info">Always fast like Toyota. what?</p>
<a href="#" class="clients__client__button">more</a>
</li>
<li class="clients__client">
<img class="clients__client__icon" src="./assets/images/logos/Friends_logo.svg.png" alt="Friends">
<p class="clients__client__info">Friends are like family. or are they?</p>
<a href="#" class="clients__client__button">more</a>
</li>
<li class="clients__client">
<img class="clients__client__icon" src="./assets/images/logos/Subway_2016_logo.svg.png" alt="Subway">
<p class="clients__client__info">Where is my beef burger?</p>
<a href="#" class="clients__client__button">more</a>
</li>
<li class="clients__client">
<img class="clients__client__icon" src="./assets/images/logos/lenovo.png" alt="Lenovo">
<p class="clients__client__info">Everything is Lenovo</p>
<a href="#" class="clients__client__button">more</a>
</li>
</ul>
</div>
</section>
<section class="marketing">
<div class="container">
<h2 class="marketing__title">Marketing</h2>
<p class="marketing__text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<div class="marketing__content">
<div class="marketing__cards">
<p class="marketing__card marketing__card--accent">
<span class="marketing__card__number">1</span>
Quick can manor smart money hopes worth too. Comfort produce husband boy her had hearing. Law others theirs passed but wishes. You day real less till dear read.
</p>
<p class="marketing__card">
<span class="marketing__card__number">2</span>
Quick can manor smart money hopes worth too. Comfort produce husband boy her had hearing. Law others theirs passed but wishes. You day real less till dear read.
</p>
</div>
<img src="./assets/images/fashion-man.jpg" alt="" class="marketing__image">
</div>
</div>
</section>
<section class="progress">
<div class="container">
<h2 class="progress__title">
Digital innovation company that creates progress
</h2>
<div class="progress__cards">
<div class="progress__card">
<i class="fa-regular fa-chart-bar progress__card__icon"></i>
<p class="progress__card__text">Article evident arrived express highest men did boy. Mistress sensible entirely am so. Quick can manor smart money hopes worth too. Comfort produce husband boy her had hearing. Law others theirs passed but wishes.</p>
</div>
<div class="progress__card">
<i class="fa-regular fa-lightbulb progress__card__icon"></i>
<p class="progress__card__text">Article evident arrived express highest men did boy. Mistress sensible entirely am so. Quick can manor smart money hopes worth too. Comfort produce husband boy her had hearing. Law others theirs passed but wishes.</p>
</div>
</div>
</div>
</section>
<section class="people">
<div class="container">
<div class="people__back-cover"></div>
<div class="people__cards">
<div class="people__card">
<img src="./assets/images/person-1.jpg" alt="" class="people__card__image">
<div class="people__card__info">
<h5 class="people__card__title">Joe Far</h5>
<p class="people__card__desc">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat</p>
<ul class="people__card__socials list-nostyle">
<li class="people__card__social">
<i class="fa-brands fa-facebook"></i>
</li>
<li class="people__card__social">
<i class="fa-brands fa-x-twitter"></i>
</li>
<li class="people__card__social">
<i class="fa-brands fab fa-instagram"></i>
</li>
</ul>
</div>
</div>
<div class="people__card">
<img src="./assets/images/person-2.jpg" alt="" class="people__card__image">
<div class="people__card__info">
<h5 class="people__card__title">Bob Boss</h5>
<p class="people__card__desc">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat</p>
<ul class="people__card__socials list-nostyle">
<li class="people__card__social">
<i class="fa-brands fa-facebook"></i>
</li>
<li class="people__card__social">
<i class="fa-brands fa-x-twitter"></i>
</li>
<li class="people__card__social">
<i class="fa-brands fab fa-instagram"></i>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section class="cta">
<div class="container">
<div class="cta__info">
<h2 class="cta__info__title">
Small Pricing Plan For Your Creative Business
</h2>
<p class="cta__info__text">Article evident arrived express highest men did boy. Mistress sensible entirely am so. Quick can manor smart money hopes worth too. Comfort produce husband boy her had hearing. Law others theirs passed but wishes. You day real less till dear read. Considered use dispatched melancholy sympathize discretion led. </p>
<p class="cta__info__text">Oh feel if up to till like. He an thing rapid these after going drawn or. Timed she his law the spoil round defer. In surprise concerns informed betrayed he learning is ye.</p>
<a href="#" class="cta__info__button">read more</a>
</div>
<form action="#" class="cta__form">
<label class="cta__form__label">
Name
<input class="cta__form__input" type="text">
</label>
<label class="cta__form__label">
Email
<input class="cta__form__input" type="text">
</label>
<label class="cta__form__label">
Message
<textarea class="cta__form__input cta__form__input--textarea"></textarea>
</label>
<label class="cta__form__label">
<input type="checkbox" class="cta__form__input cta__form__input--checkbox">
I accept the <a href="#">Terms of Service</a>
</label>
<button class="cta__form__button" type="submit">Submit your request</button>
</form>
</div>
</section>
<footer class="footer">
<!-- todo add github link -->
<p class="footer__text">A Practice project from <a href="">iliAsghar</a>. design specs from <a href="">nicepage</a></p>
</footer>
</body>
</html>