-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
204 lines (187 loc) · 11.6 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ALX Resource Hub</title>
<link rel="stylesheet" href="./styles.css" type="text/css">
<link rel="icon" type="image/x-icon" href="./Images/alx logo.png">
<script src="https://kit.fontawesome.com/76c056470e.js" crossorigin="anonymous"></script>
<script src="animate_on_scroll.js"></script>
<script src="./APIs/mockData.js"></script>
<script src="./APIs/api3.js"></script> <!-- New script -->
</head>
<body>
<section>
<div class="nav-container">
<div>
<a href="index.html"><img src="./Images/alx logo.png" class="logo"></a>
</div>
<div>
<nav>
<ul>
<li><a href="index.html" class="link"><i class="fa-solid fa-house"></i> Home</a></li>
<li><a href="#about" class="link"><i class="fa-solid fa-user"></i> About</a></li>
<li><a href="./Documents/ALX SE Guide_May_2022.pdf" class="link" target="_blank"><i class="fa-solid fa-code"></i> Guide</a></li>
<li><a href="./Courses/courses.html" class="link"><i class="fa-solid fa-book-open"></i> Courses</a></li>
<li><a href="#faqs" class="link"><i class="fa-solid fa-question"></i> FAQs</a></li>
<li><a href="#" class="nav-btn">Search....   <i class="fa-solid fa-magnifying-glass"></i></a></li>
<li><a href="./User_Auth/index.html" class="nav-btn1">Sign In</a></li>
</ul>
</nav>
</div>
</div>
</section>
<section>
<div class="welcome-container" id="welcome-container">
<div class="content-container">
<h1 class="welcome-header animate-on-load1">Welcome to the ALX Resource Hub!</h1>
<p class="content-details1 animate-on-load3">Explore a diverse array of resources, carefully curated to empower and inspire,</p>
<p class="content-details2 animate-on-load2">Dive in and discover a world of information at your fingertips!</p>
<p class="animate-on-load1"><a href="./Courses/courses.html" class="content-link">Explore Our Courses <!--<i class="fa-solid fa-angles-right"></i> --></a></p>
<img src="./Images/a5e3da99a7cb844a2c01af20ba34d69a-removebg-preview.png" class="astronaut">
<p class="p-i"><i class="fa-solid fa-angles-down"></i></p>
</div>
</div>
<svg style="background-color: #96b9c1;" width="100%" height="85" viewBox="0 0 100 100" preserveAspectRatio="none">
<path id="wavepath" d="M0,0 L110,0C35,150 35,0 0,100z" fill="#282A35"></path>
</svg>
</section>
<section>
<div class="about-container" id="about">
<div class="about-intro">
<p class="about-header animate-on-scroll1"> Unveiling Our Story :) </p>
<p class="about-sub animate-on-scroll2">Discover the Heartbeat Behind The ALX Resource Hub!</p>
</div>
<div class="box-container">
<div class="content-box1 animate-on-scroll1">
<i class="fa-solid fa-eye-low-vision"></i>
<p class="box-p">Vision :)</p>
<p class="box-subp">We envision a world where knowledge is not just acquired but also applied, where every individual has the tools and resources to forge their path to success. Embark on a journey to transform learning into action.</p>
</div>
<div class="content-box2 animate-on-scroll1">
<i class="fa-solid fa-bullseye"></i>
<p class="box-p">Mission :)</p>
<p class="box-subp">Our mission at ALX Resource Hub is clear: to democratize learning. Through a diverse array of carefully curated resources, we aim to break down barriers and empower learners of all backgrounds to reach their full potential.</p>
</div>
<div class="content-box3 animate-on-scroll1">
<i class="fa-solid fa-layer-group"></i>
<p class="box-p">Values :)</p>
<p class="box-subp">At the core of everything we do are our values - Integrity, Innovation, and Inclusivity. We uphold the highest of standards in all our interactions, constantly striving for excellence and innovation in an ever changing world.</p>
</div>
</div>
</div>
</section>
<section id="courses">
<div class="courses1">
<p class="course-p1 animate-on-scroll1">HTML <i class="fa-solid fa-code"></i></p>
<p class="course-p2 animate-on-scroll2">The Language For Building Web Pages</p>
<p style="margin-bottom: 43px; opacity: 0;" class="animate-on-scroll1"><a href="./Courses/HTML/index.html" class="course-link1">  Learn HTML  </a></p>
<p style="margin-bottom: 43px; opacity: 0;" class="animate-on-scroll1"><a href="https://youtu.be/kUMe1FH4CHE?si=HUxajOrdMQOF7on4" target="_blank" class="course-link2"> Video Tutorial </a></p>
<p style="opacity: 0;" class="animate-on-scroll1"><a href="https://www.w3schools.com/tags/default.asp" target="_blank" class="course-link3"> HTML Reference </a></p>
</div>
</section>
<section>
<div class="courses2">
<p class="course-p1 animate-on-scroll1">CSS <i class="fa-regular fa-file-code"></i></p>
<p class="course-p2 animate-on-scroll2">The Language For Styling Web Pages</p>
<p style="margin-bottom: 43px; opacity: 0;" class="animate-on-scroll1"><a href="./Courses/CSS/index.html" class="course-link4">   Learn CSS   </a></p>
<p style="margin-bottom: 43px; opacity: 0;" class="animate-on-scroll1"><a href="https://youtu.be/OXGznpKZ_sA?si=4wh6LsxQbUYU3-IM" target="_blank" class="course-link5"> Video Tutorial </a></p>
<p style="opacity: 0;" class="animate-on-scroll1"><a href="https://www.w3schools.com/cssref/index.php" target="_blank" class="course-link6">  CSS Reference  </a></p>
</div>
</section>
<section>
<div class="courses3">
<p class="course-p1 animate-on-scroll1">JavaScript <i class="fa-brands fa-joomla"></i></p>
<p class="course-p2 animate-on-scroll2">The Language For Programming Web Pages</p>
<p style="margin-bottom: 43px; opacity: 0;" class="animate-on-scroll1"><a href="./Courses/JS/js.html" class="course-link7">  Learn JavaScript  </a></p>
<p style="margin-bottom: 43px; opacity: 0;" class="animate-on-scroll1"><a href="https://youtu.be/EerdGm-ehJQ?si=vSBe-0BDo1T7NN48" target="_blank" class="course-link8">  Video Tutorial  </a></p>
<p style="opacity: 0;" class="animate-on-scroll1"><a href="https://www.w3schools.com/jsref/default.asp" target="_blank" class="course-link9">JavaScript Reference</a></p>
</div>
</section>
<section>
<div class="courses1">
<p class="course-p1 animate-on-scroll1">Python <i class="fa-brands fa-python"></i></p>
<p class="course-p2 animate-on-scroll2">A General Purpose Programming Language</p>
<p style="margin-bottom: 43px; opacity: 0;" class="animate-on-scroll1"><a href="./Courses/PYTHON/python.html" class="course-link1"> Learn Python </a></p>
<p style="margin-bottom: 43px; opacity: 0;" class="animate-on-scroll1"><a href="https://youtu.be/_uQrJ0TkZlc?si=XtSy4sd09mfctetr" target="_blank" class="course-link2"> Video Tutorial </a></p>
<p style="opacity: 0;" class="animate-on-scroll1"><a href="https://www.w3schools.com/python/python_reference.asp" target="_blank" class="course-link3"> Python Reference </a></p>
</div>
</section>
<section>
<div class="courses2">
<p class="course-p1 animate-on-scroll1">SQL <i class="fa-solid fa-database"></i></p>
<p class="course-p2 animate-on-scroll2">A Language For Accessing Databases</p>
<p style="margin-bottom: 43px; opacity: 0;" class="animate-on-scroll1"><a href="./Courses/SQL/sql.html" class="course-link4">   Learn SQL   </a></p>
<p style="margin-bottom: 43px; opacity: 0;" class="animate-on-scroll1"><a href="https://youtube.com/playlist?list=PLsjUcU8CQXGFFAhJI6qTA8owv3z9jBbpd&si=m-Lws0tMQamf50e7" target="_blank" class="course-link5"> Video Tutorial </a></p>
<p style="opacity: 0;" class="animate-on-scroll1"><a href="https://www.w3schools.com/sql/sql_ref_keywords.asp" target="_blank" class="course-link6">  SQL Reference  </a></p>
</div>
</section>
<section>
<div class="courses3">
<p class="course-p1 animate-on-scroll1">Git <i class="fa-solid fa-code-branch"></i></p>
<p class="course-p2 animate-on-scroll2">A Version Control System</p>
<p style="margin-bottom: 43px; opacity: 0;" class="animate-on-scroll1"><a href="./Courses/GIT/git.html" class="course-link7">  Learn Git  </a></p>
<p style="margin-bottom: 43px; opacity: 0;" class="animate-on-scroll1"><a href="https://youtu.be/zTjRZNkhiEU?si=wLBeCIzHiwkLOEwH" target="_blank" class="course-link8"> Video Tutorial </a></p>
<p style="opacity: 0;" class="animate-on-scroll1"><a href="https://www.w3schools.com/git/default.asp" target="_blank" class="course-link9">  Git Reference  </a></p>
<!-- Icon with link -->
<a href="./Courses/courses.html" class="icon-link animate-on-scroll1">
<i class="fa-solid fa-book-open"></i>
<!-- "See more" button -->
<p class="see-more-btn">More Courses</p>
</a>
</div>
</section>
<section class="faqs" id="faqs">
<p class="faq-header animate-on-scroll1">Any<br>Questions <i class="fa-solid fa-question"></i></p>
<div class="wrapper">
<!-- Insert Dynamically-->
</div>
<a href="#welcome-container" class="icon-link1 animate-on-scroll2">
<i class="fa-solid fa-arrow-up-from-bracket"></i>
<!-- "See more" button -->
<p class="see-more-btn1">Back To Top</p>
</a>
</section>
<!--<script src="faqs_animation.js"></script>
<svg style="background-color: #282A35;" width="100%" height="80" viewBox="0 0 100 100" preserveAspectRatio="none">
<path id="wavepath" d="M0,0 L110,0C35,150 35,0 0,100z" fill="#67939b"></path>-->
</svg>
<footer class="footer">
<div class="img-container">
<img src="./Images/alx-removebg-preview.png">
<p>© Copyright 2024 ALX Resource Hub, Inc.</p>
<ul>
<li>License</li>
<li>Terms of Service</li>
<li>Policies</li>
</ul>
</div class="footer-rights">
<div class="footer-links">
<div class="col-2">
<ul class="links">
<li><a href="#" style="color: #365e67;" ><b>Menu</b></a></li>
<li><a href="#about">About</a></li>
<li><a href="./Documents/ALX SE Guide_May_2022.pdf" target="_blank">Guide</a></li>
<li><a href="./Courses/courses.html">Courses</a></li>
<li><a href="#faqs">FAQs</a></li>
</ul>
<ul class="socials">
<li><a href="#" style="color: #365e67;"><b>Socials</b></a></li>
<li><a href="https://github.com/Muhdal-Amin" target="_blank" rel="noreferrer">Github</a></li>
<li><a href="https://twitter.com/Muhdal_Amin" target="_blank" rel="noreferrer">Twitter</a></li>
<li><a href="https://www.linkedin.com/in/al-amin-2b116623a/" target="_blank" rel="noreferrer">Linkedin</a></li>
<li><a href="mailto:[email protected]">Gmail</a></li>
</ul>
<ul class="socials">
<li><a href="#" style="color: #365e67;"><b>Docs</b></a></li>
<li><a href="" target="_blank" rel="noreferrer">Terms</a></li>
<li><a href="" target="_blank" rel="noreferrer">Privacy</a></li>
<li><a href="" target="_blank" rel="noreferrer">Security</a></li>
<li><a href="">Status</a></li>
</ul>
</div>
</div>
</footer>
</body>
</html>