Skip to content

Commit 8169739

Browse files
youssef-alayoussef-ala
authored
uploading the project Elzero
1 parent 8e45ec5 commit 8169739

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+4179
-2
lines changed

‎README.md

+7-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,7 @@
1-
# HTML_And_CSS_Template_Four
2-
Template 4 created by elzero
1+
# HTML And CSS Template Four
2+
3+
Course Playlist https://www.youtube.com/watch?v=4OGWPn-Q__I&list=PLDoPjvoNmBAyGaRGzPVZCkYx5L7Mo9Tbh
4+
5+
### Demo
6+
7+
https://elzerowebschool.github.io/HTML_And_CSS_Template_Four/

‎courses.html

+246
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,246 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Courses</title>
8+
<link rel="stylesheet" href="css/all.min.css" />
9+
<link rel="stylesheet" href="css/framework.css" />
10+
<link rel="stylesheet" href="css/master.css" />
11+
<link rel="preconnect" href="https://fonts.googleapis.com" />
12+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
13+
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;500&display=swap" rel="stylesheet" />
14+
</head>
15+
<body>
16+
<div class="page d-flex">
17+
<div class="sidebar bg-white p-20 p-relative">
18+
<h3 class="p-relative txt-c mt-0">Elzero</h3>
19+
<ul>
20+
<li>
21+
<a class="d-flex align-center fs-14 c-black rad-6 p-10" href="index.html">
22+
<i class="fa-regular fa-chart-bar fa-fw"></i>
23+
<span>Dashboard</span>
24+
</a>
25+
</li>
26+
<li>
27+
<a class="d-flex align-center fs-14 c-black rad-6 p-10" href="settings.html">
28+
<i class="fa-solid fa-gear fa-fw"></i>
29+
<span>Settings</span>
30+
</a>
31+
</li>
32+
<li>
33+
<a class="d-flex align-center fs-14 c-black rad-6 p-10" href="profile.html">
34+
<i class="fa-regular fa-user fa-fw"></i>
35+
<span>Profile</span>
36+
</a>
37+
</li>
38+
<li>
39+
<a class="d-flex align-center fs-14 c-black rad-6 p-10" href="projects.html">
40+
<i class="fa-solid fa-diagram-project fa-fw"></i>
41+
<span>Projects</span>
42+
</a>
43+
</li>
44+
<li>
45+
<a class="active d-flex align-center fs-14 c-black rad-6 p-10" href="courses.html">
46+
<i class="fa-solid fa-graduation-cap fa-fw"></i>
47+
<span>Courses</span>
48+
</a>
49+
</li>
50+
<li>
51+
<a class="d-flex align-center fs-14 c-black rad-6 p-10" href="friends.html">
52+
<i class="fa-regular fa-circle-user fa-fw"></i>
53+
<span>Friends</span>
54+
</a>
55+
</li>
56+
<li>
57+
<a class="d-flex align-center fs-14 c-black rad-6 p-10" href="files.html">
58+
<i class="fa-regular fa-file fa-fw"></i>
59+
<span>Files</span>
60+
</a>
61+
</li>
62+
<li>
63+
<a class="d-flex align-center fs-14 c-black rad-6 p-10" href="plans.html">
64+
<i class="fa-regular fa-credit-card fa-fw"></i>
65+
<span>Plans</span>
66+
</a>
67+
</li>
68+
</ul>
69+
</div>
70+
<div class="content w-full">
71+
<!-- Start Head -->
72+
<div class="head bg-white p-15 between-flex">
73+
<div class="search p-relative">
74+
<input class="p-10" type="search" placeholder="Type A Keyword" />
75+
</div>
76+
<div class="icons d-flex align-center">
77+
<span class="notification p-relative">
78+
<i class="fa-regular fa-bell fa-lg"></i>
79+
</span>
80+
<img src="imgs/avatar.png" alt="" />
81+
</div>
82+
</div>
83+
<!-- End Head -->
84+
<h1 class="p-relative">Courses</h1>
85+
<div class="courses-page d-grid m-20 gap-20">
86+
<div class="course bg-white rad-6 p-relative">
87+
<img class="cover" src="imgs/course-01.jpg" alt="" />
88+
<img class="instructor" src="imgs/team-01.png" alt="" />
89+
<div class="p-20">
90+
<h4 class="m-0">Mastering Web Design</h4>
91+
<p class="description c-grey mt-15 fs-14">
92+
Master The Art Of Web Designing And Mocking, Prototyping And Creating Web Design Architecture
93+
</p>
94+
</div>
95+
<div class="info p-15 p-relative between-flex">
96+
<span class="title bg-blue c-white btn-shape">Course Info</span>
97+
<span class="c-grey">
98+
<i class="fa-regular fa-user"></i>
99+
950
100+
</span>
101+
<span class="c-grey">
102+
<i class="fa-solid fa-dollar-sign"></i>
103+
165
104+
</span>
105+
</div>
106+
</div>
107+
<div class="course bg-white rad-6 p-relative">
108+
<img class="cover" src="imgs/course-02.jpg" alt="" />
109+
<img class="instructor" src="imgs/team-02.png" alt="" />
110+
<div class="p-20">
111+
<h4 class="m-0">Data Structure And Algorithms</h4>
112+
<p class="description c-grey mt-15 fs-14">
113+
Master The Art Of Data Strcuture And Famous Algorithms Like Sorting, Dividing And Conquering
114+
</p>
115+
</div>
116+
<div class="info p-15 p-relative between-flex">
117+
<span class="title bg-blue c-white btn-shape">Course Info</span>
118+
<span class="c-grey"> <i class="fa-regular fa-user"></i> 1150</span>
119+
<span class="c-grey"><i class="fa-solid fa-dollar-sign"></i> 210</span>
120+
</div>
121+
</div>
122+
<div class="course bg-white rad-6 p-relative">
123+
<img class="cover" src="imgs/course-03.jpg" alt="" />
124+
<img class="instructor" src="imgs/team-01.png" alt="" />
125+
<div class="p-20">
126+
<h4 class="m-0">Responsive Web Design</h4>
127+
<p class="description c-grey mt-15 fs-14">
128+
Mastering Responsive Web Design And Media Queries And Know Everything About Breakpoints
129+
</p>
130+
</div>
131+
<div class="info p-15 p-relative between-flex">
132+
<span class="title bg-blue c-white btn-shape">Course Info</span>
133+
<span class="c-grey"> <i class="fa-regular fa-user"></i> 650</span>
134+
<span class="c-grey"><i class="fa-solid fa-dollar-sign"></i> 90</span>
135+
</div>
136+
</div>
137+
<div class="course bg-white rad-6 p-relative">
138+
<img class="cover" src="imgs/course-04.jpg" alt="" />
139+
<img class="instructor" src="imgs/team-03.png" alt="" />
140+
<div class="p-20">
141+
<h4 class="m-0">Mastering Python</h4>
142+
<p class="description c-grey mt-15 fs-14">
143+
Mastering Python To Prepare For Data Science And AI And Automating Things in Your Life
144+
</p>
145+
</div>
146+
<div class="info p-15 p-relative between-flex">
147+
<span class="title bg-blue c-white btn-shape">Course Info</span>
148+
<span class="c-grey"> <i class="fa-regular fa-user"></i> 950</span>
149+
<span class="c-grey"><i class="fa-solid fa-dollar-sign"></i> 250</span>
150+
</div>
151+
</div>
152+
<div class="course bg-white rad-6 p-relative">
153+
<img class="cover" src="imgs/course-05.jpg" alt="" />
154+
<img class="instructor" src="imgs/team-03.png" alt="" />
155+
<div class="p-20">
156+
<h4 class="m-0">PHP Examples</h4>
157+
<p class="description c-grey mt-15 fs-14">
158+
PHP Tutorials And Examples And Practice On Web Application And Connecting With Databases
159+
</p>
160+
</div>
161+
<div class="info p-15 p-relative between-flex">
162+
<span class="title bg-blue c-white btn-shape">Course Info</span>
163+
<span class="c-grey"> <i class="fa-regular fa-user"></i> 850</span>
164+
<span class="c-grey"><i class="fa-solid fa-dollar-sign"></i> 150</span>
165+
</div>
166+
</div>
167+
<div class="course bg-white rad-6 p-relative">
168+
<img class="cover" src="imgs/course-02.jpg" alt="" />
169+
<img class="instructor" src="imgs/team-02.png" alt="" />
170+
<div class="p-20">
171+
<h4 class="m-0">Data Structure And Algorithms</h4>
172+
<p class="description c-grey mt-15 fs-14">
173+
Master The Art Of Data Strcuture And Famous Algorithms Like Sorting, Dividing And Conquering
174+
</p>
175+
</div>
176+
<div class="info p-15 p-relative between-flex">
177+
<span class="title bg-blue c-white btn-shape">Course Info</span>
178+
<span class="c-grey"> <i class="fa-regular fa-user"></i> 1150</span>
179+
<span class="c-grey"><i class="fa-solid fa-dollar-sign"></i> 210</span>
180+
</div>
181+
</div>
182+
<div class="course bg-white rad-6 p-relative">
183+
<img class="cover" src="imgs/course-03.jpg" alt="" />
184+
<img class="instructor" src="imgs/team-01.png" alt="" />
185+
<div class="p-20">
186+
<h4 class="m-0">Responsive Web Design</h4>
187+
<p class="description c-grey mt-15 fs-14">
188+
Mastering Responsive Web Design And Media Queries And Know Everything About Breakpoints
189+
</p>
190+
</div>
191+
<div class="info p-15 p-relative between-flex">
192+
<span class="title bg-blue c-white btn-shape">Course Info</span>
193+
<span class="c-grey"> <i class="fa-regular fa-user"></i> 650</span>
194+
<span class="c-grey"><i class="fa-solid fa-dollar-sign"></i> 90</span>
195+
</div>
196+
</div>
197+
<div class="course bg-white rad-6 p-relative">
198+
<img class="cover" src="imgs/course-01.jpg" alt="" />
199+
<img class="instructor" src="imgs/team-01.png" alt="" />
200+
<div class="p-20">
201+
<h4 class="m-0">Mastering Web Design</h4>
202+
<p class="description c-grey mt-15 fs-14">
203+
Master The Art Of Web Designing And Mocking, Prototyping And Creating Web Design Archticture
204+
</p>
205+
</div>
206+
<div class="info p-15 p-relative between-flex">
207+
<span class="title bg-blue c-white btn-shape">Course Info</span>
208+
<span class="c-grey"> <i class="fa-regular fa-user"></i> 850</span>
209+
<span class="c-grey"><i class="fa-solid fa-dollar-sign"></i> 145</span>
210+
</div>
211+
</div>
212+
<div class="course bg-white rad-6 p-relative">
213+
<img class="cover" src="imgs/course-05.jpg" alt="" />
214+
<img class="instructor" src="imgs/team-03.png" alt="" />
215+
<div class="p-20">
216+
<h4 class="m-0">PHP Examples</h4>
217+
<p class="description c-grey mt-15 fs-14">
218+
PHP Tutorials And Examples And Practice On Web Application And Connecting With Databases
219+
</p>
220+
</div>
221+
<div class="info p-15 p-relative between-flex">
222+
<span class="title bg-blue c-white btn-shape">Course Info</span>
223+
<span class="c-grey"> <i class="fa-regular fa-user"></i> 850</span>
224+
<span class="c-grey"><i class="fa-solid fa-dollar-sign"></i> 150</span>
225+
</div>
226+
</div>
227+
<div class="course bg-white rad-6 p-relative">
228+
<img class="cover" src="imgs/course-04.jpg" alt="" />
229+
<img class="instructor" src="imgs/team-03.png" alt="" />
230+
<div class="p-20">
231+
<h4 class="m-0">Mastering Python</h4>
232+
<p class="description c-grey mt-15 fs-14">
233+
Mastering Python To Prepare For Data Science And AI And Automating Things in Your Life
234+
</p>
235+
</div>
236+
<div class="info p-15 p-relative between-flex">
237+
<span class="title bg-blue c-white btn-shape">Course Info</span>
238+
<span class="c-grey"> <i class="fa-regular fa-user"></i> 950</span>
239+
<span class="c-grey"><i class="fa-solid fa-dollar-sign"></i> 250</span>
240+
</div>
241+
</div>
242+
</div>
243+
</div>
244+
</div>
245+
</body>
246+
</html>

‎css/all.min.css

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)