-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
146 lines (135 loc) · 8.21 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AMU</title>
<link rel="icon" type="image/x-icon" href="favicon-100x100.png">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<script src="https://kit.fontawesome.com/be293d5fa5.js" crossorigin="anonymous"></script>
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/image-overlay.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--Navbar-->
<nav class="navbar fixed-top navbar-expand-lg py-1 glass-effect overflow-auto" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="assets/img/AMU_LOGO01.png" width="90" height="*">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar"
aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar"
aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">Antonian Media Unit</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end align-items-center flex-grow-1 pe-3">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#"><i
class="fa-solid fa-house"></i> Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa-solid fa-images"></i> Albums</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa-solid fa-calendar-days"></i> Upcoming
Events</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa-brands fa-facebook"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa-brands fa-instagram"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa-brands fa-twitter"></i>
</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link" href="#">Calendar</a>
</li> -->
<!-- <li class="nav-item">
<a class="nav-link" href="#"><i class="fa-solid fa-thumbs-up"></i> Follow Us</a>
</li> -->
</ul>
</div>
</div>
</div>
</nav>
<!--Navbar-->
<div class='parent'>
<div class='slider'>
<button type="button" id='right' class='right' name="button">
<svg version="1.1" id="Capa_1" width='40px' height='40px ' xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 477.175 477.175"
style="enable-background:new 0 0 477.175 477.175;" xml:space="preserve">
<g>
<path style='fill: #9d9d9d;' d="M360.731,229.075l-225.1-225.1c-5.3-5.3-13.8-5.3-19.1,0s-5.3,13.8,0,19.1l215.5,215.5l-215.5,215.5
c-5.3,5.3-5.3,13.8,0,19.1c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-4l225.1-225.1C365.931,242.875,365.931,234.275,360.731,229.075z
" />
</g>
</svg>
</button>
<button type="button" id='left' class='left' name="button">
<svg version="1.1" id="Capa_2" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 477.175 477.175"
style="enable-background:new 0 0 477.175 477.175;" xml:space="preserve">
<g>
<path style='fill: #9d9d9d;' d="M145.188,238.575l215.5-215.5c5.3-5.3,5.3-13.8,0-19.1s-13.8-5.3-19.1,0l-225.1,225.1c-5.3,5.3-5.3,13.8,0,19.1l225.1,225
c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4c5.3-5.3,5.3-13.8,0-19.1L145.188,238.575z" />
</g>
</svg>
</button>
<svg id='svg2' class='up2' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle id='circle1' class='circle1 steap' cx="34px" cy="49%" r="20" />
<circle id='circle2' class='circle2 steap' cx="34px" cy="49%" r="100" />
<circle id='circle3' class='circle3 steap' cx="34px" cy="49%" r="180" />
<circle id='circle4' class='circle4 steap' cx="34px" cy="49%" r="260" />
<circle id='circle5' class='circle5 steap' cx="34px" cy="49%" r="340" />
<circle id='circle6' class='circle6 steap' cx="34px" cy="49%" r="420" />
<circle id='circle7' class='circle7 steap' cx="34px" cy="49%" r="500" />
<circle id='circle8' class='circle8 steap' cx="34px" cy="49%" r="580" />
<circle id='circle9' class='circle9 steap' cx="34px" cy="49%" r="660" />
</svg>
<svg id='svg1' class='up2' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle id='circle10' class='circle10 steap' cx="648px" cy="49%" r="20" />
<circle id='circle11' class='circle11 steap' cx="648px" cy="49%" r="100" />
<circle id='circle12' class='circle12 steap' cx="648px" cy="49%" r="180" />
<circle id='circle13' class='circle13 steap' cx="648px" cy="49%" r="260" />
<circle id='circle14' class='circle14 steap' cx="648px" cy="49%" r="340" />
<circle id='circle15' class='circle15 steap' cx="648px" cy="49%" r="420" />
<circle id='circle16' class='circle16 steap' cx="648px" cy="49%" r="500" />
<circle id='circle17' class='circle17 steap' cx="648px" cy="49%" r="580" />
<circle id='circle18' class='circle18 steap' cx="648px" cy="49%" r="660" />
</svg>
<div id='slide1' class='slide1 up1'>MOUNTAIN</div>
<div id='slide2' class='slide2'>BEACH</div>
<div id='slide3' class='slide3'>FOREST</div>
<div id='slide4' class='slide4'>DESERT</div>
</div>
</div>
<script src="assets/js/main.js" crossorigin="anonymous"></script>
<script src="assets/js/images-overlay.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ"
crossorigin="anonymous"></script>
</body>
</html>