Skip to content

Commit f523604

Browse files
SilunaPSilunaP
authored
Changed the UI (#2)
1 parent 0a44e73 commit f523604

25 files changed

+480
-0
lines changed

‎.DS_Store

6 KB
Binary file not shown.

‎android-chrome-192x192.png

41.6 KB
Loading

‎android-chrome-512x512.png

156 KB
Loading

‎apple-touch-icon.png

37.2 KB
Loading

‎assets/.DS_Store

6 KB
Binary file not shown.

‎assets/css/style.css

+331
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,331 @@
1+
/* Google Fonts - Poppins */
2+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
3+
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
4+
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap');
5+
6+
body {
7+
overflow: auto;
8+
}
9+
10+
* {
11+
margin: 0;
12+
padding: 0;
13+
box-sizing: border-box;
14+
font-family: 'Poppins', sans-serif;
15+
}
16+
17+
.navbar {
18+
box-shadow: 0 -10px 50px rgba(0, 0, 0, 0.533) !important;
19+
}
20+
21+
.fa-brands {
22+
font-size: 23px;
23+
}
24+
25+
.fa-facebook:hover {
26+
color: rgb(61, 123, 255);
27+
transition: 500ms;
28+
}
29+
30+
.fa-instagram:hover {
31+
color: rgb(255, 33, 33);
32+
transition: 500ms;
33+
}
34+
35+
.fa-twitter:hover {
36+
color: rgb(0, 172, 238);
37+
transition: 500ms;
38+
}
39+
40+
.input-box {
41+
position: relative;
42+
height: 40px;
43+
max-width: 60px;
44+
width: 80vw;
45+
margin-right: 40px;
46+
border-radius: 6px;
47+
background-color: rgba(255, 255, 255, 0.369);
48+
transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
49+
}
50+
51+
.input-box.open {
52+
max-width: 350px;
53+
}
54+
55+
input {
56+
position: relative;
57+
outline: none;
58+
border: none;
59+
height: 100%;
60+
width: 100%;
61+
border-radius: 6px;
62+
font-size: 16px;
63+
font-weight: 400;
64+
color: rgb(255, 255, 255);
65+
background-color: transparent;
66+
}
67+
68+
.input-box.open {
69+
padding: 0 15px 0 65px;
70+
}
71+
72+
.icon {
73+
position: absolute;
74+
height: 100%;
75+
top: 0;
76+
left: 0;
77+
width: 60px;
78+
border-radius: 6px;
79+
display: flex;
80+
justify-content: center;
81+
background-color: rgba(204, 204, 204, 0.216);
82+
}
83+
84+
.search-icon,
85+
.close-icon {
86+
position: absolute;
87+
top: 50%;
88+
font-size: 30px;
89+
transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
90+
}
91+
92+
.search-icon {
93+
color: #ffffff;
94+
transform: translateY(-50%) rotate(90deg);
95+
}
96+
97+
.input-box.open .search-icon {
98+
transform: translateY(-50%) rotate(0);
99+
}
100+
101+
.close-icon {
102+
right: -45px;
103+
color: #ffffff;
104+
padding: 5px;
105+
opacity: 0;
106+
pointer-events: none;
107+
transform: translateY(-50%);
108+
}
109+
110+
.input-box.open .close-icon {
111+
opacity: 1;
112+
pointer-events: auto;
113+
transform: translateY(-50%) rotate(180deg);
114+
}
115+
116+
@media only screen and (max-width: 991px) {
117+
.close-icon {
118+
display: none;
119+
}
120+
121+
.input-box {
122+
margin-left: 15px;
123+
max-width: 350px;
124+
padding: 0 15px 0 65px;
125+
}
126+
}
127+
128+
#background-image {
129+
background:linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("../img/DSC_2078.JPG");
130+
width: 100vw;
131+
height: 100vh;
132+
background-size: cover;
133+
background-repeat: no-repeat;
134+
background-position: center;
135+
position: relative;
136+
z-index: auto;
137+
}
138+
139+
@media (max-width: 991px) {
140+
#background-image {
141+
background-size: cover;
142+
}
143+
}
144+
145+
div.content {
146+
position: absolute;
147+
top: 50%;
148+
left: 20%;
149+
transform: translate(-50%, -50%);
150+
z-index: 1;
151+
background-color: transparent;
152+
}
153+
154+
.col-custom-css {
155+
max-width: 30vw;
156+
padding: 30px;
157+
background: rgba(255, 255, 255, 0);
158+
border-radius: 16px;
159+
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
160+
backdrop-filter: blur(3.8px);
161+
-webkit-backdrop-filter: blur(3.8px);
162+
border: 1px solid rgba(255, 255, 255, 0.16);
163+
}
164+
165+
@media screen and (max-width: 991px) {
166+
div.content {
167+
position: absolute;
168+
top: 35%;
169+
left: 50%;
170+
transform: translate(-50%, -50%);
171+
}
172+
173+
.col-custom-css {
174+
min-width: 95vw;
175+
}
176+
}
177+
178+
@media screen and (max-width: 375px) {
179+
div.content {
180+
position: absolute;
181+
top: 45%;
182+
left: 50%;
183+
transform: translate(-50%, -50%);
184+
}
185+
}
186+
187+
@media screen and (max-width: 320px) {
188+
div.content {
189+
position: absolute;
190+
top: 55%;
191+
left: 50%;
192+
transform: translate(-50%, -50%);
193+
}
194+
}
195+
196+
div.line {
197+
width: 80px;
198+
height: 3px;
199+
border-radius: 5px;
200+
background-color: white;
201+
margin-bottom: 5px;
202+
}
203+
204+
.heading-4 {
205+
color: #ffffff;
206+
font-weight: 300;
207+
text-align: left;
208+
}
209+
210+
.heading-1 {
211+
color: #ffffff;
212+
font-family: 'Oswald', sans-serif;
213+
font-size: 50px;
214+
font-weight: 700;
215+
text-align: left;
216+
text-transform: uppercase;
217+
}
218+
219+
.details {
220+
color: #ffffff;
221+
text-align: justify;
222+
}
223+
224+
.album-button {
225+
background-color: #fff;
226+
border: 0 solid #e2e8f0;
227+
border-radius: 1.5rem;
228+
box-sizing: border-box;
229+
color: #0d172a;
230+
cursor: pointer;
231+
/* display: inline-block; */
232+
font-size: 1.1rem;
233+
font-weight: 400;
234+
line-height: 1;
235+
padding: 10px;
236+
text-align: center;
237+
box-shadow: 0px 1px 2px rgba(166, 175, 195, 0.25);
238+
user-select: none;
239+
-webkit-user-select: none;
240+
touch-action: manipulation;
241+
float: right;
242+
}
243+
244+
.album-button:hover {
245+
background-color: #1e293b;
246+
color: #fff;
247+
transition: 800ms;
248+
}
249+
250+
@media (min-width: 768px) {
251+
.album-button {
252+
font-size: 1.125rem;
253+
padding: 1rem 2rem;
254+
}
255+
}
256+
257+
.carousel-container {
258+
position: relative;
259+
}
260+
261+
.carousel-content {
262+
position: absolute;
263+
bottom: 200px;
264+
right: 0;
265+
transform: translate(5%, 8%);
266+
}
267+
268+
.outer-box-carousel {
269+
position: relative;
270+
display: flex;
271+
align-items: center;
272+
width: 60vw;
273+
height: 40vh; /* Adjust the height as needed */
274+
overflow: hidden;
275+
background-color: transparent;
276+
}
277+
.swiper {
278+
display: flex;
279+
justify-content: space-between;
280+
}
281+
282+
.box-1, .box-2, .box-3, .box-4 {
283+
display: flex;
284+
justify-content: center;
285+
align-items: center;
286+
width: 15vw;
287+
height: 33vh;
288+
background-color: #ccc;
289+
margin: 10px;
290+
border-radius: 20px;
291+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.473);
292+
}
293+
294+
.box-1:hover, .box-2:hover, .box-3:hover, .box-4:hover {
295+
transform: scale(1.05);
296+
transition-duration: 450ms;
297+
cursor: pointer;
298+
}
299+
300+
.box-1 {
301+
background-image: url("../img/IMG_2898.JPG");
302+
background-size: cover;
303+
background-repeat: no-repeat;
304+
background-position: center;
305+
}
306+
307+
.box-2 {
308+
background-image: url("../img/DSC_0024.jpg");
309+
background-size: cover;
310+
background-repeat: no-repeat;
311+
background-position: center;
312+
}
313+
314+
.box-3 {
315+
background-image: url("../img/DSC04711.jpg");
316+
background-size: cover;
317+
background-repeat: no-repeat;
318+
background-position: center;
319+
}
320+
321+
.box-4 {
322+
background-image: url("../img/DSC_0008.jpg");
323+
background-size: cover;
324+
background-repeat: no-repeat;
325+
background-position: center;
326+
}
327+
328+
329+
330+
331+

‎assets/img/AMU with SACK alerts.png

204 KB
Loading

‎assets/img/AMU_LOGO01.png

116 KB
Loading

‎assets/img/AMU_Logo.png

319 KB
Loading

‎assets/img/DSC04711.jpg

193 KB
Loading

‎assets/img/DSC_0008.jpg

140 KB
Loading

‎assets/img/DSC_0017.jpg

674 KB
Loading

‎assets/img/DSC_0024.jpg

508 KB
Loading

‎assets/img/DSC_0153.jpg

161 KB
Loading

‎assets/img/DSC_2078.JPG

7.82 MB
Loading

‎assets/img/DSC_8185.jpg

248 KB
Loading

‎assets/img/IMG_2898.JPG

1.11 MB
Loading

‎assets/img/facebook.png

15.7 KB
Loading

‎assets/img/instagram.png

35.1 KB
Loading

‎assets/img/youtube.png

13.3 KB
Loading

‎assets/js/main.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
let inputBox = document.querySelector(".input-box"),
2+
searchIcon = document.querySelector(".icon"),
3+
closeIcon = document.querySelector(".close-icon");
4+
5+
searchIcon.addEventListener("click", () => {
6+
inputBox.classList.add("open")
7+
});
8+
closeIcon.addEventListener("click", () => {
9+
inputBox.classList.remove("open")
10+
});

‎favicon-16x16.png

916 Bytes
Loading

‎favicon-32x32.png

2.72 KB
Loading

‎favicon.ico

15 KB
Binary file not shown.

0 commit comments

Comments
 (0)