-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
133 lines (128 loc) · 15.1 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
<!DOCTYPE html>
<html lang="en" class="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="dist/css/akhir.css">
<title>Fidel Silak</title>
<link rel="shortcut icon" href="dist/icon/rocket.png" type="image/x-icon">
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=finlandica:400,500,600,700" rel="stylesheet" />
<script src="https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js"></script>
</head>
<body>
<!-- Header Start -->
<header class=" bg-transparent absolute top-0 left-0 w-full flex items-center z-10">
<div class="container">
<div class="flex items-center justify-between relative">
<div class="px-4">
<a href="#Home" class="font-bold text-lg block text-dark dark:text-white py-6 nr ">NR~</a>
</div>
<div class="flex items-center px-4">
<button id="hamb" type="button" class="block absolute right-4 lg:hidden">
<span class="hamb origin-top-left transition duration-300 ease-in-out"></span>
<span class="hamb transition duration-300 ease-in-out"></span>
<span class="hamb origin-bottom-left transition duration-300 ease-in-out"></span>
</button>
<nav id="nav-menu" class=" lg:dark:bg-transparent hidden absolute py-5 bg-white shadow-lg rounded-lg max-w-[250px] right-4 top-full lg:block lg:static lg:bg-transparent lg:max-w-full lg:shadow-none lg:rounded-none dark:bg-dark dark:shadow-slate-500">
<ul class="block lg:flex ">
<li class="group">
<a href="#Home" class=" text-base text-dark py-2 mx-8 flex group-hover:text-primary dark:text-white">Home</a>
</li>
<li class="group">
<a href="#Tentang" class=" text-base text-dark py-2 mx-8 flex group-hover:text-primary dark:text-white">Tentang</a>
</li>
<li class="group">
<a href="#Home" class=" text-base text-dark py-2 mx-8 flex group-hover:text-primary dark:text-white">Contact</a>
</li>
<li class="flex items-center pl-8">
<div class="cursor-pointer">
<img src="dist/dark theme/moon.png" id="darkToggle" type="chekbox" alt="dark mode" class="w-6">
</div>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<!-- Header End -->
<!-- Hero Start -->
<section id="Home" class="pt-48 pb-32 dark:bg-slate-700 shadow-md">
<div class="container">
<div class="flex flex-wrap">
<div class="w-full self-center px-4 lg:w-1/2">
<h1 class="text-base font-semibold text-primary md:text-xl lg:text-lg">Hallo👋, saya <span id="fi" class="block font-bold text-primary text-4xl mt-1 lg:text-5xl"></span></h1>
<h4 class="font-medium text-slate-500 text-lg mb-4 lg:text-2xl dark:text-slate-100">~Network~</h4>
<p class="font-medium text-slate-600 mb-10 leading-relaxed dark:text-white">Jangan lupa ngoding sambil ngopi. <span class="text-black">sipp!😁</span></p>
<a href="#Tentang" class="font-semibold text-white bg-primary py-3 px-8 rounded-full hover:shadow-lg hover:opacity-80 transition duration-300 ease-in-out">Tentang saya..</a>
</div>
<div class="w-full self-end px-4 lg:w-1/2 ">
<div class="relative mt-10 lg:mt-9 lg:right-0 max-lg:pt-4">
<img src="dist/img/avatar.png" title="avatar" alt="Fidel Silak" class="max-w-full mx-auto relative z-10 max-lg:pb-8">
<span class="absolute -bottom-0 left-1/2 -translate-x-1/2 md:scale-100 max-lg:pt-5">
<svg width="400" height="350" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path fill="#14b8a6" d="M60.5,-36.3C70,-18.5,63.5,7.2,50.8,28.9C38,50.5,19,68.1,1.4,67.3C-16.3,66.5,-32.6,47.4,-46.8,24.9C-61.1,2.4,-73.3,-23.5,-65.1,-40.6C-57,-57.6,-28.5,-65.9,-1.5,-65C25.5,-64.1,51,-54.2,60.5,-36.3Z" transform="translate(100 100) scale(1.0)" />
</svg>
</span>
</div>
</div>
</div>
</div>
</section>
<!-- Hero End -->
<!-- Tentang Start -->
<section id="Tentang" class="pt-36 pb-32 dark:bg-gray-700 px-4">
<div class="container">
<div class="flex flex-wrap">
<div class="w-full px-4 mb-10 lg:w-1/2">
<img id="ava" src="dist/img/avatarr.png" title="avatarr" alt="avatarr" >
</div>
<div class="w-full px-4 lg:w-1/2">
<h4 class="text-lg text-slate-900 mb-3 dark:text-black hover:underline hover:decoration-primary font-semibold">Tentang saya</h4>
<p class=" text-slate-700 text-base mb-5 max-w-xl lg:text-lg dark:text-white">Hallo🖐 I am <span class="text-primary">Fidel Silak</span>, from Yahukimo Papua, I am a student at Universitas STIMIK 10 Nopember Jayapura.</p>
<h3 class="text-lg text-slate-900 mb-3 dark:text-black hover:underline hover:decoration-primary font-semibold">Mari berteman</h3>
<p class="text-base text-slate-700 mb-6 lg:text-lg dark:text-white">kalau mau ngobrol dengan saya bisa klik dibawa ini😁:</p>
<div class="flex items-center text-slate-450 dark:text-slate-400">
<!-- FB-->
<a href="https://www.facebook.com/profile.php?id=100020080134839" target="_blank" class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border border-slate-300 hover:border-blue-500 hover:bg-blue-700 hover:text-white" >
<svg class="fill-current" role="img" width="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Facebook</title><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
</a>
<!-- IG-->
<a href="https://www.instagram.com/fffsilakk/" target="_blank" class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border border-slate-300 hover:border-orange-400 hover:bg-orange-500 hover:text-white" >
<svg class="fill-current" role="img" width="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Instagram</title><path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/></svg>
</a>
<!-- WA-->
<a href="#" target="_blank" class="w-9 h-9 mr-3 rounded-full flex justify-center items-center border border-slate-300 hover:border-green-500 hover:bg-green-700 hover:text-white" >
<svg class="fill-current" role="img" width="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>WhatsApp</title><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Tentang End -->
<!-- Footer start -->
<footer class="justify-between flex px-4 pb-12 dark:bg-gray-700">
<div class="foot py-6 container inline-flex">
<h2 class="dark:text-white">©2023 · Fidel Silak |</h2>
<div class="dark:text-slate-500 text-slate-600 flex items-center relative px-2 -mt-2">
<!-- FB-->
<a href="https://www.facebook.com/profile.php?id=100020080134839" target="_blank" class="w-9 h-9 mr-3 rounded-full flex justify-center items-center hover:bg-blue-700 hover:text-white" >
<svg class="fill-current" role="img" width="17" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Facebook</title><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
</a>
<!-- IG-->
<a href="https://www.instagram.com/fffsilakk/" target="_blank" class="w-9 h-9 mr-3 rounded-full flex justify-center items-center hover:bg-orange-500 hover:text-white" >
<svg class="fill-current" role="img" width="17" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Instagram</title><path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/></svg>
</a>
<!-- WA-->
<a href="#" target="_self" class="w-9 h-9 mr-3 rounded-full flex justify-center items-center hover:bg-green-700 hover:text-white" >
<svg class="fill-current" role="img" width="17" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>WhatsApp</title><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg>
</a>
</div>
</div>
</footer>
<!-- Footer End -->
<script src="public/js/nr.js"></script>
</body>
</html>