Skip to content

Commit 3e0f5e8

Browse files
FatmaAbdElhaleemFatmaAbdElhaleem
committed
myTemplate
0 parents  commit 3e0f5e8

File tree

10 files changed

+1121
-0
lines changed

10 files changed

+1121
-0
lines changed

‎images/about.jpg‎

84.2 KB
Loading

‎images/landing.jpg‎

192 KB
Loading

‎images/logo.png‎

2.24 KB
Loading

‎images/portfolio-1.jpg‎

28.2 KB
Loading

‎images/portfolio-2.jpg‎

160 KB
Loading

‎images/portfolio-3.jpg‎

45.9 KB
Loading

‎images/services.jpg‎

42.1 KB
Loading

‎index.html‎

Lines changed: 237 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,237 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="style.css">
7+
<!-- normalize file -->
8+
<link rel="stylesheet" href="normalize.css">
9+
<!-- google fonts -->
10+
<link rel="preconnect" href="https://fonts.googleapis.com">
11+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12+
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
13+
<!--font awesome-->
14+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
15+
<title>Leon Template one</title>
16+
</head>
17+
<body>
18+
<header>
19+
<section>
20+
<div>
21+
<img src="/images/logo.png" alt="logo">
22+
</div>
23+
<div class="list_icon">
24+
<div>
25+
<span></span>
26+
<span></span>
27+
<span></span>
28+
29+
</div>
30+
<ul class="list">
31+
<li><a href="">Services</a></li>
32+
<li><a href="">Portfolio</a></li>
33+
<li><a href="">About</a></li>
34+
<li><a href="">Contact</a></li>
35+
</ul>
36+
</div>
37+
</section>
38+
</header>
39+
<section class="head">
40+
<section>
41+
<h1>Hello There</h1>
42+
<p>We are Leon - Super Creative & Minimal Agency Web Template</p>
43+
</section>
44+
</section>
45+
<section class="headAfter">
46+
<section>
47+
<div>
48+
<i class="fas fa-magic fa-3x"></i>
49+
<h3>Tell Us Your Idea</h3>
50+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab</p>
51+
</div>
52+
<div>
53+
<i class="far fa-gem fa-3x"></i>
54+
<h3>We Will Do All The Work</h3>
55+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab</p>
56+
</div>
57+
<div>
58+
<i class="fas fa-globe-asia fa-3x"></i>
59+
<h3>Your Product is Worldwide</h3>
60+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab</p>
61+
</div>
62+
</section>
63+
</section>
64+
<!-- services section -->
65+
<section class="Services">
66+
<div>
67+
<h1 class="Special_heading">
68+
Services
69+
</h1>
70+
<p class="Special_paragraph">
71+
Don't be busy, be productive
72+
</p>
73+
</div>
74+
<section>
75+
76+
<!-- 1 -->
77+
<div>
78+
<!-- service -->
79+
<div>
80+
<i class="fas fa-palette fa-2x"></i>
81+
<h3>Graphic Design</h3>
82+
<p>Graphic design is the process of visual
83+
communication and problem-solving using one or
84+
more of typography, photography and illustration.
85+
</p>
86+
</div>
87+
<!-- end service -->
88+
<div>
89+
<i class="fab fa-sketch fa-2x"></i>
90+
<h3>UI & UX</h3>
91+
<p>Process of enhancing user satisfaction with a product
92+
by improving the usability, accessibility,
93+
and pleasure provided in the interaction.
94+
</p>
95+
</div>
96+
<!-- end service -->
97+
</div>
98+
<!--2 -->
99+
<div>
100+
<!-- service -->
101+
<div>
102+
<i class="fas fa-vector-square fa-2x"></i>
103+
<h3>Web Design</h3>
104+
<p>Web design encompasses many different
105+
skills and disciplines in the production
106+
and maintenance of websites.
107+
</p>
108+
</div>
109+
<div>
110+
<i class="fas fa-pencil-ruler fa-2x"></i>
111+
<h3>Web Development</h3>
112+
<p>Web development is a broad term
113+
for the work involved in developing
114+
a web site for the Internet or an intranet.
115+
</p>
116+
</div>
117+
</div>
118+
119+
<!-- 3 -->
120+
121+
<div class="img">
122+
<img src="./images/services.jpg" alt="">
123+
</div>
124+
</section>
125+
<!--Portfolio -->
126+
</section>
127+
<section class="Portfolio" >
128+
<div>
129+
<h1 class="Special_heading">Portfolio</h1>
130+
<p class="Special_paragraph">
131+
If you do it right, it will last forever.
132+
</p>
133+
</div>
134+
<section class="cards">
135+
<div class="card">
136+
<div>
137+
<img src="./images/portfolio-1.jpg" alt="">
138+
</div>
139+
<div>
140+
<h3>Project Here</h3>
141+
<p>
142+
My creative ability is very difficult to measure
143+
because it can manifest in
144+
so many surprising and.
145+
</p>
146+
</div>
147+
</div>
148+
<div class="card">
149+
<div>
150+
<img src="./images/portfolio-2.jpg" alt="">
151+
</div>
152+
<div>
153+
<h3>Project Here</h3>
154+
<p>
155+
My creative ability is very difficult to measure
156+
because it can manifest in so
157+
many surprising and.
158+
</p>
159+
</div>
160+
</div>
161+
<div class="card">
162+
<div>
163+
<img src="./images/portfolio-3.jpg" alt="">
164+
</div>
165+
<div>
166+
<h3>Project Here</h3>
167+
<p>
168+
My creative ability is very difficult to measure
169+
because it can manifest in
170+
so many surprising and.
171+
</p>
172+
</div>
173+
</div>
174+
</section>
175+
</section>
176+
<!-- about -->
177+
<section class="about">
178+
179+
<!-- heading -->
180+
<div>
181+
<h1 class="Special_heading">
182+
About
183+
</h1>
184+
<p class="Special_paragraph">
185+
Less is more work
186+
</p>
187+
</div>
188+
<!-- content -->
189+
<section>
190+
<!-- img -->
191+
<div class="img">
192+
<img src="./images/about.jpg" alt="">
193+
</div>
194+
<!-- paragraph -->
195+
<div>
196+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
197+
Nihil nemo neque voluptate tempora velit cum non, fuga vitae architecto
198+
delectus sed maxime rerum impedit aliquam obcaecati,
199+
aut excepturi iusto laudantium!
200+
</p>
201+
<hr>
202+
<p>
203+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
204+
Minus, sapiente. Velit iure exercitationem dolores nesciunt dolore.
205+
Eum officiis dolorum hic voluptate quaerat minima,
206+
similique inventore esse, alias, sed quo officia?
207+
</p>
208+
</div>
209+
210+
</section>
211+
</section>
212+
<section class="contact">
213+
<!-- heading -->
214+
<div>
215+
<h1 class="Special_heading">Contact</h1>
216+
<p class="Special_paragraph">
217+
We are born to create
218+
</p>
219+
</div>
220+
<!-- content -->
221+
<div>
222+
<p>Feel free to drop us a line at:</p>
223+
<a href="mailto:[email protected]">[email protected]</a>
224+
<p>
225+
Find Us On Social Networks
226+
<i class="fab fa-youtube"></i>
227+
<i class="fab fa-facebook-f"></i>
228+
<i class="fab fa-twitter"></i>
229+
</p>
230+
</div>
231+
</section>
232+
<!-- footer -->
233+
<footer>
234+
<p> &copy; 2025 <span>Leon </span>All Right Reserved</p>
235+
</footer>
236+
</body>
237+
</html>

0 commit comments

Comments
 (0)