-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
160 lines (158 loc) · 8.13 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
<!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>Responsive Website</title>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./fontawesome-free/css/all.min.css" type="text/css">
</head>
<body>
<section class="header">
<nav>
<a href="index.html"><img src="./images/oau.jpeg" alt="OAU"></a>
<h1>OBAFEMI AWOLOWO UNIVERSITY</h1>
<div class="nav-links" id="navLinks">
<i class="fa fa-times" onclick="hideMenu()"></i>
<ul>
<li><a href="">HOME</a></li>
<li><a href="">ABOUT</a></li>
<li><a href="">COURSE</a></li>
<li><a href="">BLOG</a></li>
<li><a href="">CONTACT</a></li>
</ul>
</div>
<i class="fa fa-bars" onclick="showMenu()"></i>
</nav>
<div class="text-box">
<h1>World's Biggest University</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde quasi facere necessitatibus repudiandae illo ad officiis minima eaque ullam sunt ipsum nihil aliquid nisi quibusdam laborum suscipit doloribus, architecto soluta?</p>
<a href="" class="hero-btn">Visit Us To Know More</a>
</div>
</section>
<!--Course-->
<section class="course">
<h1>Courses We Offer</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit eligendi exercitationem illo voluptate at vitae reiciendis pariatur aliquid cum iure esse, velit veritatis autem ducimus aspernatur delectus eius rerum saepe!</p>
<div class="row">
<div class="course-col">
<h3>Intermediate</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minus nobis, corporis tempore totam fugiat quam soluta? Doloremque nihil consequatur ab odio tempora expedita iste commodi eaque numquam rem, harum est.</p>
</div>
<div class="course-col">
<h3>Degree</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minus nobis, corporis tempore totam fugiat quam soluta? Doloremque nihil consequatur ab odio tempora expedita iste commodi eaque numquam rem, harum est.</p>
</div>
<div class="course-col">
<h3>Post Graduate</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minus nobis, corporis tempore totam fugiat quam soluta? Doloremque nihil consequatur ab odio tempora expedita iste commodi eaque numquam rem, harum est.</p>
</div>
</div>
</section>
<!--campus-->
<section class="campus">
<h1>Our Global Campus</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic tenetur in aliquam amet fuga, accusantium cum reprehenderit, libero eum possimus sequi exercitationem mollitia facere dolores non quidem nulla alias ratione.</p>
<div class="row">
<div class="campus-col">
<img height="600px" src="images/senate building.jpg" alt="senate building">
<div class="layer">
<h3>SENATE BUILDING</h3>
</div>
</div>
<div class="campus-col">
<img height="600px" src="images/Oba-awon-university-670x420.jpg" alt="OAU">
<div class="layer">
<h3>YORUBA ARCHITECTURE</h3>
</div>
</div>
<div class="campus-col">
<img height="600px" src="images/building.jpeg" alt="building">
<div class="layer">
<h3>LECTURE BUILDING</h3>
</div>
</div>
</div>
</section>
<!--facilities-->
<section class="facilities">
<h1>Our Facilities</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea repudiandae excepturi commodi officiis necessitatibus provident incidunt, eaque dolor vero ipsum odit molestiae beatae aliquid repellat pariatur cum animi velit qui!</p>
<div class="row">
<div class="facilities-col">
<img height="300px" src="images/conference hall.jpg" alt="conference-hall">
<h3>Largest Conference Hall</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic explicabo laboriosam eius nemo vitae ratione laudantium dolorum quod dolore tempora? Eos nesciunt sunt consequatur praesentium at omnis nulla nisi voluptatum?</p>
</div>
<div class="facilities-col">
<img height="300px" src="images/oau sport complex.jpg" alt="sport-complex">
<h3>Biggest Sport Complex</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic explicabo laboriosam eius nemo vitae ratione laudantium dolorum quod dolore tempora? Eos nesciunt sunt consequatur praesentium at omnis nulla nisi voluptatum?</p>
</div>
<div class="facilities-col">
<img height="300px" src="images/building oau.jpeg" alt="building-oau">
<h3>OAU Building</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic explicabo laboriosam eius nemo vitae ratione laudantium dolorum quod dolore tempora? Eos nesciunt sunt consequatur praesentium at omnis nulla nisi voluptatum?</p>
</div>
</div>
</section>
<!-- testimonials -->
<section class="testimonials">
<h1>What Our Student Says</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum incidunt similique sequi ut quae quisquam quis. Soluta optio vel eius unde, quos corrupti reprehenderit. Recusandae incidunt minus commodi earum molestiae?</p>
<div class="row">
<div class="testimonials-col">
<img src="images/WhatsApp Image 2022-10-30 at 18.36.04.jpeg" alt="building-oau">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis maiores fugiat doloremque corrupti quas dolorum, laboriosam, nobis distinctio tenetur, voluptatem ea incidunt cupiditate. Sit voluptates provident totam, veritatis cumque expedita?</p>
<h3>Adebimpe Oyewole</h3>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
<div class="testimonials-col">
<img src="images/chibuzor.jpeg" alt="Chibuzor">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic explicabo laboriosam eius nemo vitae ratione laudantium dolorum quod dolore tempora? Eos nesciunt sunt consequatur praesentium at omnis nulla nisi voluptatum?</p>
<h3>Chibuzor Ikechukwu</h3>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half"></i>
</div>
</div>
</section>
<!---Call To Action-->
<section class="cta">
<h1>Enroll For Our Various Online Courses<br>Anywhere From The World</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. Et laudantium voluptatibus, cumque saepe quasi neque. Aut earum cum perspiciatis <br>nulla ducimus illo asperiores officia possimus. Architecto corrupti magni minus at!</p>
<div class="icons">
<i class="fab fa-facebook"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-linkedin"></i>
</div>
<p>Made with <i class="far fa-heart"></i> by Estie Hub</p>
</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>