-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
153 lines (143 loc) · 7.6 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
147
148
149
150
151
152
153
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!--BOOTSTRAP ICONS-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<!--MY CSS-->
<link rel="stylesheet" href="style.css"/>
<title>My Portofolio | Dimas Daffa</title>
</head>
<body id="home">
<!--NAVBAR START-->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary shadow-sm fixed-top">
<div class="container">
<a class="navbar-brand" href="#"> <img src="img/Sagon Studio Logo Template(1).png" alt="loading"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects">Favourites</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!--NAVBAR END-->
<!--JUMBOTRON START-->
<section class="jumbotron text-center ">
<img src="img/1643603107459.JPG" alt="Dimas Daffa" width="200"
class="rounded-circle img-thumbnail"/>
<h1 class="display-4">Dimas Daffa</h1>
<p class="lead">Student | Valorant Enthusiast</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#ffffff" fill-opacity="10" d="M0,160L60,176C120,192,240,224,360,197.3C480,171,600,85,720,74.7C840,64,960,128,1080,160C1200,192,1320,192,1380,192L1440,192L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path></svg>
</section>
<!--JUMBOTRON END-->
<!--ABOUT START-->
<section id="about">
<div class="container">
<div class="row text-center mt-3 mb-3">
<div class="col">
<h2>About Me</h2>
</div>
</div>
<div class="row justify-content-center fs-5 text-center">
<div class="col-md-4">
<p>Pelajar yang antusias dan bermotivasi tinggi dengan yang mempunyai inisiatif dan mencari tantangan baru.</p>
</div>
<div class="col-md-4">
<p>Memiliki kepribadian ISTJ, Saya adalah seorang yang selalu termotivasi untuk mencoba hal baru, berpikir kritis dan logis. Saya memiliki ketertarikan besar dalam dunia digital. </p>
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#e2edff" fill-opacity="1" d="M0,64L30,101.3C60,139,120,213,180,224C240,235,300,181,360,181.3C420,181,480,235,540,250.7C600,267,660,245,720,229.3C780,213,840,203,900,192C960,181,1020,171,1080,186.7C1140,203,1200,245,1260,234.7C1320,224,1380,160,1410,128L1440,96L1440,320L1410,320C1380,320,1320,320,1260,320C1200,320,1140,320,1080,320C1020,320,960,320,900,320C840,320,780,320,720,320C660,320,600,320,540,320C480,320,420,320,360,320C300,320,240,320,180,320C120,320,60,320,30,320L0,320Z"></path></svg>
</section>
<!--ABOUT END-->
<!--CARD PROJECTS START-->
<section id="projects">
<div class="container">
<div class="row text-center mt-3 mb-4">
<div class="col">
<h2>My Favourites</h2>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-4 mb-3">
<div class="card">
<img src="img/projects/1.jpg" class="card-img-top" alt="Projects 1">
<div class="card-body">
<p class="card-text">Orang-orang boleh menyebut Darth Vader, Luke Skywalker, atau Jedi Yoda si bijak yang paling keren. Tapi, The Most Motherfucker Badass di semesta Star Wars bagi saya cuma satu. "The Mandalorian"</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img src="img/projects/2.jpg" class="card-img-top" alt="Projects 2">
<div class="card-body">
<p class="card-text">Saya suka bermain game, saya menggemari hal ini dari masih duduk di waktu SD, dan sampai saat ini saya masih menggemari hal ini, genre game yang saya gemari adalah FPS dan SPORT.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img src="img/projects/3.jpg" class="card-img-top" alt="Projects 3">
<div class="card-body">
<p class="card-text">Dengan mendaki gunung, saya menantang diri saya untuk mengalahkan kemalasan, ketakutan, dan banyak hal lainnya. Ayo kamu bisa! Itu yang sering saya katakan pada diri sendiri untuk menyemangati diri agar tidak mau menyerah dengan aktivitas fisik yang cukup berat.</p>
</div>
</div>
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#ffffff" fill-opacity="1" d="M0,64L21.8,69.3C43.6,75,87,85,131,128C174.5,171,218,245,262,250.7C305.5,256,349,192,393,176C436.4,160,480,192,524,213.3C567.3,235,611,245,655,218.7C698.2,192,742,128,785,106.7C829.1,85,873,107,916,138.7C960,171,1004,213,1047,224C1090.9,235,1135,213,1178,224C1221.8,235,1265,277,1309,272C1352.7,267,1396,213,1418,186.7L1440,160L1440,320L1418.2,320C1396.4,320,1353,320,1309,320C1265.5,320,1222,320,1178,320C1134.5,320,1091,320,1047,320C1003.6,320,960,320,916,320C872.7,320,829,320,785,320C741.8,320,698,320,655,320C610.9,320,567,320,524,320C480,320,436,320,393,320C349.1,320,305,320,262,320C218.2,320,175,320,131,320C87.3,320,44,320,22,320L0,320Z"></path></svg>
</section>
<!--CARD PROJECTS END-->
<!--CONTACT START-->
<section id="contact">
<div class="container">
<div class="row text-center">
<div class="col">
<h2>Contact Me</h2>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6">
<div class="mb-3">
<label for="name" class="form-label">Nama Lengkap</label>
<input type="text" class="form-control" id="name" aria-describedby="name">
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" aria-describedby="email">
<div class="mb-3">
<label for="pesan" class="form-label">Pesan</label>
<textarea class="form-control" id="pesan" rows="3"></textarea>
</div>
<form>
<button type="submit" class="btn btn-success">Kirim</button>
</form>
</div>
</div>
</section>
<!--CONTACT END-->
<!--FOOTER START-->
<footer class="bg-primary text-white text-center p-5">
<p>Created by <i class="bi bi-instagram"></i><a href="https://www.instagram.com/_dimas_daffa/" class="text-white fw-bold"> _dimas_daffa</a></p>
</footer>
<!--FOOTER END-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>