ASA/index.html at master · leulAbate/ASA · GitHub

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
<!DOCTYPE html>
<html>
<head>
	<title>African Students Association</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="styles.css">
	<link rel="icon" type="image/png" href="images/Untitled design.png">

</head>
<body>
	<header>
		<div class="mini-nav fancy">
			<div class="logo">
				<img src="images/sweetness.png" alt="School logo">
				<h1>African Students Association</h1>
			</div>
			<ul class="nav-links">
				<li class="tab"><a href="registration.html">Registration</a></li>
				<li class="tab"><a href="contact.html">Contact</a></li>
			</ul>
			<button class="menu-btn" onclick="toggleMenu()">
				<span class="line"></span>
				<span class="line"></span>
				<span class="line"></span>
			</button>
		</div>
		<nav class="scroll-show">
			<ul class="full-menu">
				<li><a href="index.html">Home</a></li>
				<li><a href="about.html">About Us</a></li>
				<li><a href="events.html">Events</a></li>
				<li><a href="gallery.html">Gallery</a></li>
				<li><a href="teams.html">Teams</a></li>
			</ul>
		</nav>
	</header>
	<main>

		<section id="index">
			<div class="hero-image">
			  <div class="hero-background">
				<img src="images/image12.jpg" alt="Image 1">
				<img src="images/image20.jpg" alt="Image 2">
				<img src="images/an.JPG" alt="Image 3">
				<img src="images/Image[1].jpeg" alt="Image 4">
				<img src="images/image19.jpg" alt="Image 5">
				<img src="images/fas.jpeg" alt="Image 5">
				<img src="images/image7.jpg" alt="Image 4">
				<img src="images/image26.jpg" alt="Image 7">
				<img src="images/image6.jpg" alt="Image 8">


			  </div>
			  <div class="hero-content">
				<a href="https://usdinvolved.usd.edu/organization/asa" class="cta-button">Be a member</a>
			  </div>
	</div>
	  	<div class="about-section">
		<h3>About Us</h3>
		<p>The African Students Association is a student-run organization that strives to foster a sense of community among African students and promote awareness of African cultures and traditions on campus. We organize various events throughout the year, including cultural festivals, social gatherings, and community service initiatives.</p>
		<a href="about.html" class="cta-link">Learn more about us</a>
	</div>
	<div class="separator"></div>
	<div class="events-section">
		<h3>Upcoming Events</h3>
		<ul>
			<li><a href="events.html">Afro Asian Fusion</a></li>
			<li><a href="events.html">Book Drive</a></li>
			<li><a href="africannight.html">African Night"</a></li>
		</ul>
		<a href="events.html" class="cta-link">View all events</a>
	</div>
	<div class="gallery-section">
		<h3>Photo Gallery</h3>
		<div class="image-grid">
			<img src="images/asa2.jpg" alt="African Students Association" onclick="openModal(this)">
			<img src="images/asa3.JPG" alt="African Students Association" onclick="openModal(this)">
			<img src="images/asa4.jpg" alt="African Students Association" onclick="openModal(this)">
			<img src="images/asa6.jpg" alt="African Students Association" onclick="openModal(this)">
			<img src="images/asa5.JPG" alt="African Students Association" onclick="openModal(this)">
			<img src="images/asa7.jpg" alt="African Students Association" onclick="openModal(this)">
			<img src="images/image5.jpg" alt="African Students Association" onclick="openModal(this)">
			<img src="images/image4.jpg" alt="African Students Association" onclick="openModal(this)">
			<img src="images/an.JPG" alt="African Students Association" onclick="openModal(this)">


		  </div>

		<a href="gallery.html" class="cta-link">View more photos</a>
	</div>

</section>

		</main>
	<footer class="fancy">
		<p>&copy; 2023 African Students Association</p>
	</footer>
	<script src="script.js"></script>
	<script src="slide.js"></script>
	<script src="mobile.js"></script>

</body>
</html>