-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout-us.html
172 lines (153 loc) · 7.91 KB
/
about-us.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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags for character set and responsive design -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="=device-width, initial-scale=1.0">
<!-- Add favicons. Based on favicon website. Put icon at the browser tab -->
<link rel="apple-touch-icon" sizes="180x180" href="img/favicon_io/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon_io/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon_io/favicon-16x16.png">
<link rel="manifest" href="img/favicon_io/site.webmanifest">
<!-- Page title -->
<title>About Us | IIUM Aikido Club</title>
<!-- Add Link of CSS files -->
<link rel="stylesheet" href="css/nav.css">
<link rel="stylesheet" href="css/footer.css">
<link rel="stylesheet" href="css/about-us-style.css">
<link rel="stylesheet" href="css/btn-scroll-top.css">
<link rel="stylesheet" href="css/head-page.css">
<link rel="stylesheet" href="css/image-deco.css">
<link rel="stylesheet" href="css/parallex-section.css">
<link rel="stylesheet" href="css/join-us.css">
<!-- Add jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<!-- Structure for About Us page -->
<body>
<div class="page-wrapper">
<!-- Page Navigation -->
<div class="nav-wrapper">
<div class="grad-bar"></div>
<nav class="navbar">
<img src="img/aikido-logo.png" alt="Aikido-Logo">
<div class="menu-toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="nav">
<li class="nav-item">
<a href="index.html">Home</a>
</li><li class="mob-line"></li>
<li class="nav-item">
<a href="activities.html">Activities </a>
</li><li class="mob-line"></li>
<li class="nav-item">
<a href="about-us.html">About Us</a>
</li>
</ul>
</nav>
</div>
<!-- Headline of the page -->
<div class="head-page">
<div id="head-pic">
<img src="img/image1.png" alt="Header pic"> <!-- Add image to header -->
<div id="pic-overlay"></div> <!-- Overlay for the header image -->
<div id="on-image-text">
About Us
<div id="downarrow"></div>
</div>
</div>
<div class="end-head"></div>
</div>
<!-- Aikido Club members information -->
<div class="info-club">
<div class="image-deco about-us">
<div id="head-scroll"></div>
<div class="square bottom about-us"></div>
<div class="square middle about-us"></div>
<div class="square top about-us">
<div class="image-container about-us"> <!-- Image container structure -->
<img class="fade-in" src="img/about-us/img01.jpg" alt="about-us01" >
<img class="fade-in" src="img/about-us/img02.jpg" alt="about-us02" style="display:none;">
<img class="fade-in" src="img/about-us/img03.jpg" alt="about-us03" style="display:none;">
<img class="fade-in" src="img/about-us/img04.jpg" alt="about-us04" style="display:none;">
</div>
</div>
</div>
<div class="about-txt">
<p><strong>More than just a martial arts club,</strong> we are a tight-knit community of students brought together by a shared passion for Aikido. Our nature is defined by the principles of respect, discipline, and continuous learning.
</p>
<p> <strong>Whether you're a beginner or an advanced practitioner honing your skills,</strong> the IIUM Aikido Club provides a welcoming space for growth and camaraderie.</p>
</div>
</div>
<!-- Section for club objective -->
<section class="parallax-section">
<div class="content-wrapper">
<h1>Our Objectives</h1>
<div class="list-obj">
<p>To create networking among students and staff of all
universities In Malaysia and international that possess similar interest in Aikido
</p>
<p>To bring along people of different culture and nationalities to do activities and bind them in Islamic brotherhood.</p>
</div>
</div>
</section>
<!-- Section for club testimonials -->
<div id="testimonials">
<div id="testi-title">
<h1>⚞ Testimonials ⚟</h1>
</div>
<div class="testi-cards"> <!-- Container for individual testimonials -->
<!-- Testimonial text -->
<div class="testi-txt"><p>"Joining IIUM Aikido Club was one of the best decisions I've made. The instructors are not only skilled but incredibly patient and supportive. The sense of community within the club is empowering, and I've gained not only Aikido skills but also lifelong friendships. It's a journey of self-discovery and personal growth. Highly recommended!" </p>
<p class="person-info">Syed Putra, President IIUM Aikido Club 23/24</p>
</div>
<!-- Testimonial image -->
<div class="image-deco testi">
<div class="square top testi">
<div class="image-container testi"> <!-- Image container structure -->
<img class="img-testi" src="img/testimonials/syed-pres2324-testi.png" alt="syed-testi">
</div>
</div>
</div>
</div>
</div>
<!-- Section for club member registration -->
<div class="join-us">
<div class="join-txt1"><h1>Interested in Aikido? ...</h1></div>
<div class="join-txt2">
<h1>Join Us Now!</h1>
<a href="https://forms.gle/hRwYhA1K96wzq28f6" target="_blank"><button>Fill in Registration Form</button></a>
</div>
<img src="img/join-us.jpg" alt="">
</div>
<!-- Footer section with social media links and contact info -->
<footer id="sub-info">
<div id="follow-link"> <!-- Container for social media links -->
<p>Follow us:</p>
<a href="https://instagram.com/iiumaikidoclub" target="_blank"><!-- Add club instagram link and icon (display in new tab)-->
<img class="socmed-logo" src="img/instagram.png" alt="instagram icon">
</a>
<a href="https://www.facebook.com/iiumaikidoclub/" target="_blank"><!-- Add club facebook link and icon (display in new tab)-->
<img class="socmed-logo" src="img/facebook.png" alt="fb icon">
</a>
<a href="https://www.youtube.com/@aikidoiium9560" target="_blank"><!-- Add club youtube link and icon (display in new tab)-->
<img class="socmed-logo" src="img/youtube.png" alt="youtube icon">
</a>
</div>
<div id="contact"><!-- Add club contact email-->
<p>Contact Us: <a href="mailto:[email protected]">[email protected]</a></p>
</div>
</footer>
<!-- Scroll-to-top button -->
<button id="scrollToTop"><img src="img/uparrow.png" alt=""></button>
</div>
<script src="js/nav-action.js"></script>
<script src="js/btn-scroll-to-top.js"></script>
<script src="js/fade-images.js"></script>
<script src="js/down-scroll.js"></script>
</body>
</html>