-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
232 lines (229 loc) · 11.7 KB
/
index.html
File metadata and controls
232 lines (229 loc) · 11.7 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Template one</title>
<link rel="icon" href="https://ahmedsaidi99.github.io/Html_CSS_template_1/images/logo.png">
<!-- Render elements normally -->
<link rel="stylesheet" href="css/normalize.css">
<!-- main css file -->
<link rel="stylesheet" href="css/style.css">
<!-- font awesome libarary -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
<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:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<a href="https://elzero.org" target="_blank"><img class="logo" src="https://ahmedsaidi99.github.io/Html_CSS_template_1/images/logo.png" alt="Logo png"></a>
<div class="links">
<span class="icon">
<span></span>
<span></span>
<span></span>
</span>
<ul>
<li><a href="#home">home</a></li>
<li><a href="#features">features</a></li>
<li><a href="#services">services</a></li>
<li><a href="#portofolio">portofolio</a></li>
<li><a href="#about">about</a></li>
<li><a href="#contact">contact</a></li>
</ul>
</div>
</div>
</header>
<!-- about Us section -->
<section id="home" class="landing">
<div class="landing-text">
<h1>hello there</h1>
<p>we are leon - super createive & minimal agency web template</p>
</div>
</section>
<!-- features section -->
<section id="features" class="features">
<div class="container">
<div class="card">
<i class="fa-solid fa-wand-magic-sparkles fa-3x"></i> <h3>tell us your idea</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa deleniti libero aliquam aspernatur harum ex alias fuga voluptatum earum! Deserunt consequatur aperiam veniam. Id, veritatis molestias? Distinctio asperiores provident nisi?</p>
</div>
<div class="card">
<i class="far fa-gem fa-3x"></i>
<h3>we will do all the work</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam voluptates tempora cum velit ipsam perspiciatis ab odio ea ex autem quidem in commodi illo quas corporis, recusandae dignissimos quos voluptate.</p>
</div>
<div class="card">
<i class="fas fa-globe-asia fa-3x"></i>
<h3>your product is worldwide</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate sunt ratione consequatur cumque eius aspernatur impedit. Id inventore libero quae minus eveniet autem voluptatum dignissimos, quibusdam ullam deleniti illo unde.</p>
</div>
</div>
</section>
<!-- services section -->
<section id="services" class="services">
<div class="container">
<h2 class="special-heading">services</h2>
<p>don't be busy, be productive</p>
<div class="content">
<div class="col">
<!-- start srv -->
<div class="card">
<i class="fa-solid fa-vector-square fa-2x"></i> <div class="text">
<h3>Graphic Design</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cupiditate unde sint modi omnis non quod temporibus nam. Nobis enim quaerat beatae fuga maxime facilis, cum quod voluptas quia asperiores ratione?</p>
</div>
</div>
<!-- end srv -->
<!-- start srv -->
<div class="card">
<i class="fab fa-sketch fa-2x"></i>
<div class="text">
<h3>Graphic Design</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cupiditate unde sint modi omnis non quod temporibus nam. Nobis enim quaerat beatae fuga maxime facilis, cum quod voluptas quia asperiores ratione?</p>
</div>
</div>
<!-- end srv -->
</div>
<div class="col">
<!-- start srv -->
<div class="card">
<i class="fas fa-palette fa-2x"></i>
<div class="text">
<h3>Graphic Design</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cupiditate unde sint modi omnis non quod temporibus nam. Nobis enim quaerat beatae fuga maxime facilis, cum quod voluptas quia asperiores ratione?</p>
</div>
</div>
<!-- end srv -->
<!-- start srv -->
<div class="card">
<i class="fa-solid fa-circle-nodes fa-2x"></i> <div class="text">
<h3>Graphic Design</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cupiditate unde sint modi omnis non quod temporibus nam. Nobis enim quaerat beatae fuga maxime facilis, cum quod voluptas quia asperiores ratione?</p>
</div>
</div>
<!-- end srv -->
</div>
<div class="col">
<div class="image">
<img width="260px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSDWZH9vViPFvgnzszzXgz2M8qYIQa-Y3gy7U4Va0maloN4-lezB25fjeA&s" alt="">
</div>
</div>
</div>
</div>
</section>
<!-- portofolio section -->
<section id="portofolio" class="portofolio">
<div class="container">
<h2 class="special-heading">portofolio</h2>
<p>if you do it right, it will last forever</p>
<div class="content">
<div class="card">
<div class="image">
<img src="https://hello-sunil.in/wp-content/uploads/2021/07/Free-Stock-Photos-Online-1536x864.jpg" alt="">
</div>
<div class="info">
<h3>Project Here</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aut, suscipit!</p>
</div>
</div>
<div class="card">
<div class="image">
<img src="https://hello-sunil.in/wp-content/uploads/2021/07/Free-Stock-Photos-Online-1536x864.jpg" alt="">
</div>
<div class="info">
<h3>Project Here</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aut, suscipit!</p>
</div>
</div>
<div class="card">
<div class="image">
<img src="https://hello-sunil.in/wp-content/uploads/2021/07/Free-Stock-Photos-Online-1536x864.jpg" alt="">
</div>
<div class="info">
<h3>Project Here</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aut, suscipit!</p>
</div>
</div>
<div class="card">
<div class="image">
<img src="https://hello-sunil.in/wp-content/uploads/2021/07/Free-Stock-Photos-Online-1536x864.jpg" alt="">
</div>
<div class="info">
<h3>Project Here</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aut, suscipit!</p>
</div>
</div>
<div class="card">
<div class="image">
<img src="https://hello-sunil.in/wp-content/uploads/2021/07/Free-Stock-Photos-Online-1536x864.jpg" alt="">
</div>
<div class="info">
<h3>Project Here</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aut, suscipit!</p>
</div>
</div>
<div class="card">
<div class="image">
<img src="https://hello-sunil.in/wp-content/uploads/2021/07/Free-Stock-Photos-Online-1536x864.jpg" alt="">
</div>
<div class="info">
<h3>Project Here</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aut, suscipit!</p>
</div>
</div>
</div>
</div>
</section>
<!-- about section -->
<section id="about" class="about">
<div class="container">
<h2 class="special-heading">about</h2>
<p>don't be busy, be productive</p>
<div class="content">
<div class="image">
<img src="https://ahmedsaidi99.github.io/Html_CSS_template_1/images/about.jpg" alt="">
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet consectetur
adipisicing elit. Odio mollitia eius quidem inventore, repellendus, dolores rerum et a ea dolorum maxime beatae maiores saepe sequi? Adipisci explicabo eos repudiandae ad?
</p>
<hr>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum necessitatibus ad maxime assumenda odit nulla a fuga consequuntur, soluta, aperiam dolores dolorem tempore minus
ea. Repellat aliquid totam atque doloribus.
</p>
</div>
</div>
</div>
</section>
<!-- contact section -->
<section id="contact" class="contact">
<div class="container">
<h2 class="special-heading">contact</h2>
<p>we are born to create</p>
<div class="content">
<p>For complaints and support: </p>
<a href="mailto:example@support.com">example@support.com</a>
<div class="social">
<h2>follow Us at:</h2>
<div class="links">
<a data-social="youtube" target="_blank" href="https://youtube.com"><i class="fa-brands fa-youtube fa-2x"></i></a>
<a data-social="x" target="_blank" href="https://x.com"><i class="fa-brands fa-x-twitter fa-2x"></i></a>
<a data-social="instagram" target="_blank" href="https://instagram.com"><i class="fa-brands fa-instagram fa-2x"></i></a>
<a data-social="facebook" target="_blank" href="https://facebook.com"><i class="fa-brands fa-facebook fa-2x"></i></a>
<a data-social="linkedIn" target="_blank" href="https://linkedin.com"><i class="fa-brands fa-linkedin fa-2x"></i></a>
</div>
</div>
</div>
</div>
</section>
<!-- footer -->
<footer>
© <span>leon</span> all rights reserved
</footer>
</body>
</html>