-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
201 lines (194 loc) · 7.79 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
<!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">
<title>WebDev-Course</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="about.html">
<link rel="stylesheet" href="about.css">
<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=Lato:wght@300;400;700;900&display=swap" rel="stylesheet">
</head>
<body>
<!-- Navigation section -->
<header>
<div id="cross">
<img id="cross1" src="./images/crossIcon.png" alt="cross-Icon">
<ul id="menu">
<li><a href="index.html">Home</a></li>
<li><a href="#mainProgram" class="click">Courses</a></li>
<li><a href="#staff" class="click">Staff</a></li>
<li><a href="about.html">About Us</a></li>
<li class="cont" ><a href="#partners" class="click">Our Partners</a></li>
</ul>
</div>
<nav>
<div class="page">
<ul>
<li><img src="./images/twitter-48.png" alt="twitter-icon"></li>
<li><img src="./images/facebook-48.png" alt="linkedIn-icon"></li>
<li><a href="#">English</a></li>
<li><a href="#">My page</a></li>
<li><a href="#">Log out</a></li>
</ul>
</div>
<div class="nav">
<div class="logo">
<img src="./images/logo.jpg" alt="logo">
</div>
<div class="navList">
<ul>
<li><a href="#mainProgram">Courses</a></li>
<li><a href="#staff">Staff</a></li>
<li><a href="about.html">About Us</a></li>
<li class="cont" ><a href="#partners">Our Partners</a></li>
</ul>
</div>
</div>
<div>
<img id="burgerIcon" src="./images/burgerIcon.svg" alt="burgerIcon">
</div>
</nav>
<div id="headline">
<div id="vision">
<p>"Hello! Teaching Code"</p>
<h1>THE GLOBAL SCHOOL<br>FOR CODING<br>2022</h1>
</div>
<div id="headlinePara">
<p>We believe in the value of programming. Therefore, we've decided to create world-class programmers for a better future and bring a new revolution in the world of tech through our unique curriculum and methodology.</p>
</div>
<div id="time">
<p>Our next Bootcamp starts from</p>
<h2>May.01.2022</h2>
</div>
</div>
</header>
<!-- courses section -->
<section id="mainProgram">
<div>
<h2 class="title">Courses Offered</h2>
<hr>
</div>
<div class="grid-container">
<div class="grid-item">
<img src="./images/html-icon.svg" alt="icons">
<h2>HTML</h2>
<p>Learn HTML from Basic to advance in just 1 month from industry's experts</p>
</div>
<div class="grid-item">
<img src="./images/css-icon.svg" alt="icons">
<h2>CSS</h2>
<p>Learn to use CSS to amazingly style the HTLM Doc from our industry's experts</p>
</div>
<div class="grid-item">
<img src="./images/JS-icon.svg" alt="icons">
<h2>Java- script</h2>
<p>Make the website dynamic with the help of Javascript.</p>
</div>
<div class="grid-item">
<img src="./images/rubyOnRails-icon.svg" alt="icons">
<h2>Ruby</h2>
<p>Learn on of the most use language for databases from our industry's experts</p>
</div>
<div class="grid-item">
<img src="./images/ruby-icon.svg" alt="icons">
<h2>Ruby on Rails</h2>
<p>Our complete course of ROR will help learn BackEnd from industry's experts</p>
</div>
</div>
<div class="buttons">
<button>Join us to learn Coding</button>
</div>
<div class="programDetails">
<p>SEE THE WHOLE PROGRAM</p>
</div>
</section>
<!-- staff section -->
<section id="staff">
<div>
<h2 class="title">Our Staff</h2>
<hr>
</div>
<div class="grid-container1">
<!-- <div class="grid-item1">
<div class="staffImage">
<img src="./images/staff1.jpg" alt="staffMember">
</div>
<div class="details">
<h2>Zahra</h2>
<p class="expertise">CEO of the company</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad.</p>
</div>
</div>
<div class="grid-item1">
<div class="staffImage">
<img src="./images/staff2.jpg" alt="staffMember">
</div>
<div class="details">
<h2>Sakina</h2>
<p class="expertise">HTML Expert</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem?</p>
</div>
</div>
<div class="grid-item1">
<div class="staffImage">
<img src="./images/staff3.jpg" alt="staffMember">
</div>
<div class="details">
<h2>Safar Ali</h2>
<p class="expertise">CSS Expert</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem!</p>
</div>
</div>
<div class="grid-item1">
<div class="staffImage">
<img src="./images/staff4.jpg" alt="staffMember">
</div>
<div class="details">
<h2>Jenny</h2>
<p class="expertise">Javascript teacher</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis!</p>
</div>
</div>
<div class="grid-item1">
<div class="staffImage">
<img src="./images/staff5.jpg" alt="staffMember">
</div>
<div class="details">
<h2>John</h2>
<p class="expertise">Ruby and Phython expert</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. In!</p>
</div>
</div>
<div class="grid-item1">
<div class="staffImage">
<img src="./images/staff6.jpg" alt="staffMember">
</div>
<div class="details">
<h2>Mechelle</h2>
<p class="expertise">Ruby on Rails expert</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum.</p>
</div>
</div> -->
</div>
</section>
<div class="foot" id="partners">
<div class="aboutUsPartners">
<div>
<div>
<h2>Our Partners</h2>
<hr>
</div>
</div>
</div>
<div class="copyright">
<img src="./images/logo.jpg" alt="icon">
<p>Safar coding school, Rights Reserved</p>
</div>
</div>
<script src="index.js"></script>
</body>
</html>