-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
136 lines (120 loc) · 6.87 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/dist/output.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<title>cv test</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
.swiper-slide font {
font-family: 'Raleway';
}
.swiper-slide img {
width: 75%;
height: 75%;
}
</style>
</head>
<body>
<div class="bg-gradient-to-b from-cyan-950 to-slate-600 w-full h-full" id="header">
<div class="bg-cover bg-scroll bg-no-repeat" style="background-image:url('/bgheader.jpg'); background-size:cover; background-position:center;">
<img src="/profile.jpg" alt="Profile Picture" class="w-40 h-40 rounded-full mx-auto mb-4">
<h1 class="text-white text-2xl font-semibold text-center">Nur Azizah</h1>
<p class="text-white text-lg text-center mb-4">Junior Computer Science Student</p>
</div>
<div class="section p-4" id="about">
<div class="container mx-auto bg-white p-6 bg-opacity-40 rounded-lg shadow-lg">
<div class="flex flex-wrap">
<div class="w-full md:w-1/2 hover:-translate-y-1 transition ease-in-out delay-150 hover:scale-110 hover:bg-cyan-800 duration-300">
<div class="bg-cyan-950 bg-opacity-50 rounded-lg p-4 ">
<h1 class="text-white h-4 mt-0 font-extrabold text-2xl">About</h1>
<p class="text-white mt-4 font-lato">Hello! I am Nur Azizah. Web Developer and Graphic Designer Enthusiast. <br/>
This CV made for the sake of 1st task at Pemrograman web Class 2023, hope it fulfill my lecturer expectation! <br/> </p>
</div>
</div>
<div class="w-full md:w-1/2 hover:-translate-y-1 transition ease-in-out delay-150 hover:scale-110 hover:bg-cyan-800 duration-300">
<div class="bg-cyan-950 bg-opacity-50 rounded-lg p-2">
<h1 class="text-white h-4 mt-0 text-2xl font-extrabold">Basic Information</h1>
<table class="text-white table-auto mt-2">
<tbody>
<tr>
<td class="py-2 font-bold">Age</td>
<td class="px-4 py-2 font-medium">20</td>
</tr>
<tr>
<td class="py-2 font-bold">Email</td>
<td class="px-4 py-2 font-medium">[email protected]</td>
</tr>
<!-- Add more rows as needed -->
<tr>
<td class="py-2 font-bold">Address</td>
<td class="px-4 py-1 font-medium">Keputih, Surabaya, Jawa Timur, Indonesia</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="container mx-auto mt-6 p-4">
<div class="swiper-container">
<h2 class="text-white h-4 mt-0 mb-4 text-2xl text-center font-black">Past Experience</h2>
<div class="swiper-wrapper">
<div class="swiper-slide flex items-center justify-items-center">
<img src="/aiesec.jpg" alt="AIESEC" class="w-half h-auto mx-auto">
<p class="text-white text-center font-medium text-2xl mt-4">Platform Coordinator in AIESEC Indonesia</p>
</div>
<!-- Slide 2 -->
<div class="swiper-slide flex items-center justify-items-center">
<img src="/ITSMUN.jpg" alt="ITSMUNCLUB" class="max-w-full h-auto mx-auto">
<p class="text-white text-center font-medium text-2xl mt-4">IT Project Manager in ITS MUN Club</p>
</div>
</div>
</div>
</div>
<h2 class="text-white h-4 mt-4 mb-2 text-2xl text-center font-black font-raleway">Education</h2>
<div class="section mt-8">
<div class="transition ease-in-out delay-150 container mx-auto bg-gray-200 hover:bg-slate-400 hover:text-white p-6 rounded-lg shadow-lg">
<div class="bg-primary" data-aos="fade-right" data-aos-offset="50" data-aos-duration="500">
<p class="text-lg font-semibold">2021 - present</p>
<h2 class="text-xl">Bachelor's Degree</h2>
</div>
<div class="col-md-9" data-aos="fade-left" data-aos-offset="50" data-aos-duration="500">
<div class="major">Bachelor of Computer Science</div>
<p class="campus">Sepuluh Nopember Institute of Technology</p>
</div>
</div>
</div>
<div class="section mt-8">
<div class="container mx-auto bg-gray-200 hover:bg-slate-400 hover:text-white p-6 rounded-lg shadow-lg">
<div class="col-md-3 bg-primary" data-aos="fade-right" data-aos-offset="50" data-aos-duration="500">
<p>2018 - 2021</p>
<div class="h5">High School</div>
</div>
<div class="col-md-9" data-aos="fade-left" data-aos-offset="50" data-aos-duration="500">
<div class="h5">Science and Mathematics</div>
<p class="category">Ummul Mukminin Private Boarding School</p>
</div>
</div>
</div>
<p><br/><br/></p>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 'auto',
spaceBetween: 2,
loop: true,
autoplay: {
delay: 2000,
},
});
</script>
</div>
</body>
</html>