-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
266 lines (257 loc) · 9.43 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
<!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" />
<meta
name="description"
content="We are Leon - Super Creative & Minimal Agency Web Template"
/>
<link rel="shortcut icon" href="/images/project.png" type="image/x-icon" >
<meta name="keywords" content="Leon Agency Web Template" />
<!-- normalize file-->
<link rel="stylesheet" href="css/normalize.css" />
<!-- icons from font awesome -->
<link rel="stylesheet" href="css/all.min.css" />
<!-- google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@200;300;400;500;600;700;800&display=swap"
rel="stylesheet"
/>
<!-- main css file -->
<link rel="stylesheet" href="css/main.css" />
<title>Leon</title>
</head>
<body>
<!--************** start nav-bar ***************-->
<nav>
<div class="container">
<!-- putting the logo-->
<img class="logo" src="images/logo.png" alt="this is a logo " />
<!-- putting the links-->
<div class="links">
<!-- making the burger icon -->
<span class="icon">
<span></span>
<span></span>
<span></span>
</span>
<ul>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!--****************** end nav-bar ************************-->
<!--********************* landing **************************-->
<section class="landing" id="landing">
<div class="intro-text">
<h1>Hello There</h1>
<p>We are Leon - Super Creative & Minimal Agency Web Template</p>
</div>
</section>
<!--****************** end landing **************-->
<!--***************** start features *************************-->
<section class="features" id="features">
<div class="container">
<div class="feature">
<i class="fas fa-magic fa-3x"></i>
<h3>Tell Us Your Idea</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt quasi
repudiandae vel enim ex ad soluta fuga
</p>
</div>
<div class="feature">
<i class="fas fa-gem fa-3x"></i>
<h3>We Will Do All Work</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt quasi
repudiandae vel enim ex ad soluta fuga
</p>
</div>
<div class="feature">
<i class="fas fa-globe fa-3x"></i>
<h3>Your product is worldwide</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt quasi
repudiandae vel enim ex ad soluta fuga
</p>
</div>
</div>
</section>
<!--********************* end features ***********************-->
<!--********************* start-services ************************-->
<section class="services" id="services">
<div class="container">
<h2 class="special-heading">Services</h2>
<p>Don't be busy, Be productive</p>
<div class="services-content">
<!-- first column with two services-->
<div class="column">
<!-- start service-->
<div class="srv">
<i class="fas fa-palette fa-2x"></i>
<div class="text">
<h3>Graphic Design</h3>
<p>
Graphic design is the process of visual communication and
problem-solving using one or more of typography, photography
and illustration.
</p>
</div>
</div>
<!--end service-->
<!-- start service-->
<div class="srv">
<i class="fab fa-sketch fa-2x"></i>
<div class="text">
<h3>UI & UX</h3>
<p>
Process of enhancing user satisfaction with a product by
improving the usability, accessibility, and pleasure provided
in the interaction
</p>
</div>
</div>
<!-- end service -->
</div>
<!--second column-->
<div class="column">
<!--start service -->
<div class="srv">
<i class="fas fa-vector-square fa-2x"></i>
<div class="text">
<h3>Web Design</h3>
<p>
Web design encompasses many different skills and disciplines
in the production and maintenance of websites. <br /><br />
</p>
</div>
</div>
<!-- end service -->
<!-- start service-->
<div class="srv">
<i class="fas fa-pencil-ruler fa-2x"></i>
<div class="text">
<h3>Web Development</h3>
<p>
Web development is a broad term for the work involved in
developing a web site for the Internet or an intranet.
</p>
</div>
</div>
<!-- end service -->
</div>
<!-- third column-->
<div class="column">
<div class="image">
<img src="images/services.jpg" alt="" />
</div>
</div>
</div>
</div>
</section>
<!--************** end services section ****************-->
<!--***************** start portfolio ***********************-->
<section class="portfolio" id="portfolio">
<div class="container">
<h2 class="special-heading">Portfolio</h2>
<p>If you do it right, it will last forever.</p>
<div class="portfolio-content">
<div class="card">
<div class="image-container">
<img src="images/portfolio-1.jpg" alt="" />
</div>
<div class="info">
<h3>Project here</h3>
<p>
My creative ability is very difficult to measure because it can
manifest in so many surprising and.
</p>
</div>
</div>
<div class="card">
<div class="image-container">
<img src="images/portfolio-2.jpg" alt="" />
</div>
<div class="info">
<h3>Project Here</h3>
<p>
My creative ability is very difficult to measure because it can
manifest in so many surprising and.
</p>
</div>
</div>
<div class="card">
<div class="image-container">
<img src="images/portfolio-3.jpg" alt="" />
</div>
<div class="info">
<h3>Project Here</h3>
<p>
My creative ability is very difficult to measure because it can
manifest in so many surprising and.
</p>
</div>
</div>
</div>
<div class="button"><button>Show Me More</button></div>
</div>
</section>
<!--****************** end portfolio section *************-->
<!--****************** start about section *************-->
<section class="about" id="about">
<div class="container">
<h2 class="special-heading">About</h2>
<p>Less is more work</p>
<div class="about-content">
<div class="image">
<img src="images/about.jpg" alt="" />
</div>
<div class="text">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Autem
dolorem error enim. Quas delectus atque voluptatum consequuntur
accusantium. Commodi totam beatae nihil at doloribus fugiat sequi
vero ipsum. Praesentium, est.
</p>
<hr />
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Architecto ea labore ullam nihil ex nisi velit quod? Vero,
maiores, cumque saepe nihil, consequuntur recusandae reiciendis
amet rem neque illum esse.
</p>
</div>
</div>
</div>
</section>
<!-- ************* Contact ****************** -->
<section class="contact" id="contact">
<div class="container">
<h2 class="special-heading">Contact</h2>
<p>Let's Keep in touch</p>
<div class="info">
<p class="label">Feel free to drop us a line at:</p>
<a href="mailto:leonagency@mail.com?subject=Contact" class="link"
>leonagency@mail.com
</a>
<div class="social">
find us in social network:
<a target="_blank" href="#"><i class="fab fa-twitter"></i></a>
<a target="_blank" href="#"><i class="fab fa-facebook"></i></a>
<a target="_blank" href="#"><i class="fa-brands fa-youtube"></i></a>
</div>
</div>
</div>
</section>
<footer>© 2022 - <span>Leon</span> All rights reserved</footer>
</body>
</html>