-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
218 lines (201 loc) · 6.83 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Scaler school of technology</title>
<link rel="stylesheet" href="style.css" />
<link
href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css"
/>
</head>
<body>
<section class="header">
<nav>
<a href="index.html"><img src="SSTLOGO.png" style="height: 100px" /></a>
<div class="nav-links" id="navLinks">
<i class="fa fa-times-circle" onclick="hideMenu()"></i>
<ul class="glass">
<li><a href="">HOME</a></li>
<li><a href="">ABOUT</a></li>
<li><a href="">COURSES</a></li>
<li><a href="">BLOG</a></li>
<li><a href="">CONTACT US</a></li>
</ul>
</div>
<i class="fa fa-bars" onclick="showMenu()"></i>
</nav>
<div class="text-box">
<h1>India's First Practical Knowledge providing college</h1>
<p style="line-height: 50px">
Making website is one of the simplest task in the world by only using
HTML/CSS
</p>
<a href="" class="hero-btn">Visit us to know more</a>
</div>
</section>
<!---course-->
<section class="courses">
<h1>Courses We Offer</h1>
<p>We offer Undergrad degree in CS.</p>
<div class="row">
<div class="course-col">
<h3>Intermediate-UG</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur
illo praesentium quam vitae repellendus sunt ipsum cupiditate
impedit architecto distinctio libero, voluptate unde.
</p>
</div>
<div class="course-col">
<h3>Advanced-UG</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur
illo praesentium quam vitae repellendus sunt ipsum cupiditate
impedit architecto distinctio libero, voluptate unde.
</p>
</div>
<div class="course-col">
<h3>Post Graduates</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur
illo praesentium quam vitae repellendus sunt ipsum cupiditate
impedit architecto distinctio libero, voluptate unde.
</p>
</div>
</div>
</section>
<section>
<section class="campus"></section>
<h1>Our Campus</h1>
<p>We are having a small campus of 5 acres</p>
<div class="row">
<div class="campus-col">
<img src="campusimg4.gz" />
<div class="layer">
<h3>Bengaluru</h3>
</div>
</div>
<div class="campus-col">
<img src="campusimg2.jpg" />
<div class="layer">
<h3>Reception</h3>
</div>
</div>
<div class="campus-col">
<img src="campusimg3.gz" />
<div class="layer">
<h3>Bengaluru</h3>
</div>
</div>
</div>
</section>
<section class="facilities">
<h1>Our Facilities</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum
voluptatibus dolores sint recusandae modi! Dolorem, quis iusto
</p>
<div class="row">
<div class="facilities-col">
<img src="facilities1.gz" />
<h3>Classroom</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident
quia quos perspiciatis quibusdam voluptatibus soluta placeat
consequuntur! Cupiditate minus porro asperiores aut ipsa?
</p>
</div>
<div class="facilities-col">
<img src="facilities2.gz" />
<h3>Personal Space</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident
quia quos perspiciatis quibusdam voluptatibus soluta placeat
consequuntur! Cupiditate minus porro asperiores aut ipsa?
</p>
</div>
<div class="facilities-col">
<img src="facilities3.jpeg" class="facilities3" />
<h3>Get together area</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident
quia quos perspiciatis quibusdam voluptatibus soluta placeat
consequuntur! Cupiditate minus porro asperiores aut ipsa?
</p>
</div>
</div>
</section>
<section class="testimonials">
<h1>What Our Student Says</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste veritatis
consequuntur, voluptatum cumque cum explicabo illum ullam corporis culpa
nihil ut facere modi?
</p>
<div class="row">
<div class="testimonials-col">
<img src="profile.jpg" />
<div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit Cupiditate
deserunt praesentium id molestias laudantium excepturi temporibus.
</p>
<h3>Mayank Gupta</h3>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
</div>
<div class="testimonials-col">
<img src="" />
<div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Cupiditate deserunt praesentium id molestias laudantium excepturi
temporibus.
</p>
<h3>Jils Patel</h3>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
</div>
</div>
</div>
</section>
<!--Call to action -->
<section class="cta">
<h1>Enroll now in UG-courses</h1>
<a href="" class="hero-btn">CONTACT US</a>
</section>
<!--footer-->
<section class="footer">
<h4>About Us</h4>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem
quisquam at obcaecati enim tempore? Adipisci modi quisquam labore
provident officia?
</p>
<div class="icons">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-linkedin"></i>
</div>
</section>
<!---Javascript for Toggle menu---->
<script>
var navLinks = document.getElementById("navLinks");
function showMenu() {
navLinks, (style.right = "0");
}
function hideMenu() {
navLinks, (style.right = "-200px");
}
</script>
</body>
</html>