-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
111 lines (109 loc) · 7.51 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/custom.css">
<link rel="shortcut icon" href="assets/favicon.png" type="image/x-icon">
<title>Home - Alif Akbar</title>
</head>
<body>
<nav class="navbar navbar-light navbar-expand-lg bg-light py-4" style="background-color: white !important; ">
<div class="container">
<a class="navbar-brand" href="index.html">
<img src="assets/Logoalif.png" alt="Logo" width="200px">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-center text-lg-end" id="navbarSupportedContent">
<ul class="navbar-nav mx-auto">
<li class="nav-item align-self-center me-lg-5">
<a class="nav-link active" aria-current="page" href="mailto:mralifakbar@gmail.com">Kontak</a>
</li>
<li class="nav-item align-self-center">
<a class="nav-link" href="sosialmedia.html">Social Media</a>
</li>
</ul>
<a class="btn btn-primary px-3 py-3 mt-3 mt-lg-0" href="jadwal.html" role="button">Jadwal Saya</a>
</div>
</div>
</nav>
<section class="hero mt-5 mb-5">
<div class="container">
<div class="row justify-content-between">
<div class="col-lg align-self-center text-center text-lg-start">
<!-- <h1 class="mb-4">Halo, Saya <span>Alif Akbar</span></h1> -->
<h1>
<a href="" class="typewrite" style="text-decoration: none;" data-period="2000" data-type='[ "Halo, saya Alif Akbar.", "Biasa dipanggil Alif.", "Asik juga belajar Bootstrap, hehe.", "Gas belajar lagi!." ]'>
<span class="wrap"></span>
</a>
</h1>
<p class="mb-4 phero">Saya merupakan mahasiswa semester 4 di jurusan Ilmu Komputer Universitas Lampung. NPM saya adalah 2017051049.
</p>
<a class="btn btn-primary" href="jadwal.html" role="button">Lihat Jadwal Saya</a>
</div>
<div class="col-lg d-flex justify-content-center justify-content-lg-end mt-5 mt-lg-0">
<img id="fotoalif" src="assets/alif.png" alt="Foto Alif" width="400px">
</div>
</div>
</div>
</section>
<section class="hobi mt-5 pb-5 mb-5">
<div class="container">
<div class="hobi-text text-center pt-5 pb-3">
<h2>Hobi Saya</h2>
</div>
<div class="row hobi-list">
<div class="col-lg d-flex justify-content-center">
<div class="card" style="width: 25rem;">
<img src="assets/sleep.jpg" class="card-img-top" alt="Tidur">
<div class="card-body">
<h3>Tidur <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#032cd1" class="bi bi-patch-check-fill" viewBox="0 0 16 16">
<path d="M10.067.87a2.89 2.89 0 0 0-4.134 0l-.622.638-.89-.011a2.89 2.89 0 0 0-2.924 2.924l.01.89-.636.622a2.89 2.89 0 0 0 0 4.134l.637.622-.011.89a2.89 2.89 0 0 0 2.924 2.924l.89-.01.622.636a2.89 2.89 0 0 0 4.134 0l.622-.637.89.011a2.89 2.89 0 0 0 2.924-2.924l-.01-.89.636-.622a2.89 2.89 0 0 0 0-4.134l-.637-.622.011-.89a2.89 2.89 0 0 0-2.924-2.924l-.89.01-.622-.636zm.287 5.984-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7 8.793l2.646-2.647a.5.5 0 0 1 .708.708z"/>
</svg></h3>
<p class="mb-0 intensitas mt-4">Intensitas</p>
<p class="intensitas-level mb-0" style="color: #e84118;">Sering</p>
</div>
</div>
</div>
<div class="col-lg d-flex justify-content-center mt-4 mt-lg-0">
<div class="card" style="width: 25rem;">
<img src="assets/main-laptop.jpg" class="card-img-top" alt="Tidur">
<div class="card-body">
<h3>Main Laptop <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#032cd1" class="bi bi-patch-check-fill" viewBox="0 0 16 16">
<path d="M10.067.87a2.89 2.89 0 0 0-4.134 0l-.622.638-.89-.011a2.89 2.89 0 0 0-2.924 2.924l.01.89-.636.622a2.89 2.89 0 0 0 0 4.134l.637.622-.011.89a2.89 2.89 0 0 0 2.924 2.924l.89-.01.622.636a2.89 2.89 0 0 0 4.134 0l.622-.637.89.011a2.89 2.89 0 0 0 2.924-2.924l-.01-.89.636-.622a2.89 2.89 0 0 0 0-4.134l-.637-.622.011-.89a2.89 2.89 0 0 0-2.924-2.924l-.89.01-.622-.636zm.287 5.984-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7 8.793l2.646-2.647a.5.5 0 0 1 .708.708z"/>
</svg></h3>
<p class="mb-0 intensitas mt-4">Intensitas</p>
<p class="intensitas-level mb-0" style="color: #e84118;">Sering</p>
</div>
</div>
</div>
<div class="col-lg d-flex justify-content-center mt-4 mt-xxl-0">
<div class="card" style="width: 25rem;">
<img src="assets/sleep.jpg" class="card-img-top" alt="Tidur">
<div class="card-body">
<h3>Tidur Lagi <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#032cd1" class="bi bi-patch-check-fill" viewBox="0 0 16 16">
<path d="M10.067.87a2.89 2.89 0 0 0-4.134 0l-.622.638-.89-.011a2.89 2.89 0 0 0-2.924 2.924l.01.89-.636.622a2.89 2.89 0 0 0 0 4.134l.637.622-.011.89a2.89 2.89 0 0 0 2.924 2.924l.89-.01.622.636a2.89 2.89 0 0 0 4.134 0l.622-.637.89.011a2.89 2.89 0 0 0 2.924-2.924l-.01-.89.636-.622a2.89 2.89 0 0 0 0-4.134l-.637-.622.011-.89a2.89 2.89 0 0 0-2.924-2.924l-.89.01-.622-.636zm.287 5.984-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7 8.793l2.646-2.647a.5.5 0 0 1 .708.708z"/>
</svg></h3>
<p class="mb-0 intensitas mt-4">Intensitas</p>
<p class="intensitas-level mb-0" style="color: #e84118;">Sering Juga</p>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="mb-4">
<div class="container footer-text">
Made with <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#e25555" class="bi bi-heart-fill" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
</svg> in Kos-Kosan
</div>
</footer>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/typewriter.js"></script>
</body>
</html>