Skip to content

Commit 5714c3f

Browse files
MuhammadMallqMuhammadMallq
authored
menambahkan
1 parent 676d232 commit 5714c3f

File tree

2 files changed

+69
-62
lines changed

2 files changed

+69
-62
lines changed

‎index.html‎

Lines changed: 24 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -3,46 +3,41 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Personal Branding</title>
6+
<title>Personal Branding - Teknik Informatika</title>
77
<link rel="stylesheet" href="styles.css">
8-
<script type="module" src="https://cdn.jsdelivr.net/gh/domyid/tracker@latest/index.js"></script>
9-
108
</head>
119
<body>
12-
<div class="business-card">
13-
<div class="card-header">
14-
<div class="profile-picture">
15-
<img src="Mall.png" alt="Your Photo">
1610
<header>
17-
<h1>Muhammad Malik Nur</h1>
18-
<p>Software Engineering</p>
11+
<h1 class="fade-in">Muhammad Malik Nur</h1>
12+
<p class="fade-in">Mahasiswa Teknik Informatika | Web Developer | Tech Enthusiast</p>
1913
</header>
20-
21-
<section id="about">
14+
<nav>
15+
<ul>
16+
<li><a href="#about">Tentang Saya</a></li>
17+
<li><a href="#projects">Proyek</a></li>
18+
<li><a href="#contact">Kontak</a></li>
19+
</ul>
20+
</nav>
21+
<section id="about" class="slide-up">
2222
<h2>Tentang Saya</h2>
23-
<p>Saya adalah seorang mahasiswa yang sedang belajar web development dan sedang mengembangkan skill UI UX, memasang provider internet, dan membuat webiste dan membuat website UMKM.</p>
23+
<p>Saya adalah seorang mahasiswa Teknik Informatika yang memiliki ketertarikan dalam pengembangan web, keamanan siber, dan kecerdasan buatan.</p>
2424
</section>
25-
26-
<section id="portfolio">
27-
<h2>Portofolio</h2>
28-
<div class="portfolio-items">
29-
<div class="item">Project 1</div>
30-
<div class="item">Project 2</div>
31-
<div class="item">Project 3</div>
25+
<section id="projects" class="slide-up">
26+
<h2>Proyek</h2>
27+
<div class="project">
28+
<h3>Website Portfolio</h3>
29+
<p>Membuat website portfolio pribadi dengan HTML, CSS, dan JavaScript.</p>
30+
</div>
31+
<div class="project">
32+
<h3>Aplikasi To-Do List</h3>
33+
<p>Mengembangkan aplikasi To-Do List berbasis web dengan React.js.</p>
3234
</div>
3335
</section>
34-
35-
<section id="contact">
36+
<section id="contact" class="slide-up">
3637
<h2>Kontak</h2>
37-
<p>Email: Kamalputra1177@gmail.com</p>
38-
<p>Telepon: 082122339125</p>
39-
<div class="social-links">
40-
<a href="#">LinkedIn</a>
41-
<a href="#">GitHub</a>
42-
<a href="#">Instagram</a>
43-
</div>
38+
<p>Email: namaanda@email.com</p>
39+
<p>LinkedIn: linkedin.com/in/namaanda</p>
4440
</section>
45-
4641
<script src="script.js"></script>
4742
</body>
4843
</html>

‎styles.css‎

Lines changed: 45 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,65 @@
11
body {
22
font-family: Arial, sans-serif;
3+
background-color: #1c1c1c;
4+
color: #f5f5f5;
35
margin: 0;
46
padding: 0;
5-
background-color: #f4f4f4;
6-
color: #333;
77
text-align: center;
88
}
99
header {
10-
background: linear-gradient(90deg, #ff7e5f, #feb47b);
1110
padding: 50px;
11+
background: #333;
1212
color: white;
1313
}
14-
h1 {
15-
margin: 0;
16-
font-size: 2.5em;
14+
nav ul {
15+
list-style-type: none;
16+
padding: 0;
17+
background: #444;
18+
overflow: hidden;
19+
display: flex;
20+
justify-content: center;
21+
}
22+
nav ul li {
23+
margin: 0 15px;
24+
}
25+
nav ul li a {
26+
color: white;
27+
text-decoration: none;
28+
padding: 10px;
29+
display: inline-block;
1730
}
1831
section {
1932
padding: 50px;
2033
margin: 20px;
21-
background: white;
34+
background: #2c2c2c;
2235
border-radius: 10px;
23-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
36+
box-shadow: 2px 2px 10px rgba(255, 255, 255, 0.1);
2437
}
25-
.portfolio-items {
26-
display: flex;
27-
justify-content: center;
28-
gap: 20px;
38+
.project {
39+
margin: 20px 0;
40+
padding: 15px;
41+
background: #3c3c3c;
42+
border-radius: 5px;
2943
}
30-
.item {
31-
background: #ff7e5f;
32-
padding: 20px;
33-
border-radius: 10px;
34-
color: white;
35-
font-weight: bold;
36-
transition: transform 0.3s;
44+
.fade-in {
45+
animation: fadeIn 2s ease-in-out;
3746
}
38-
.item:hover {
39-
transform: scale(1.1);
47+
.slide-up {
48+
opacity: 0;
49+
transform: translateY(50px);
50+
animation: slideUp 1s ease-out forwards;
4051
}
41-
.social-links a {
42-
display: inline-block;
43-
margin: 10px;
44-
text-decoration: none;
45-
background: #feb47b;
46-
padding: 10px 20px;
47-
border-radius: 5px;
48-
color: white;
49-
transition: background 0.3s;
52+
@keyframes fadeIn {
53+
from { opacity: 0; }
54+
to { opacity: 1; }
55+
}
56+
@keyframes slideUp {
57+
from {
58+
opacity: 0;
59+
transform: translateY(50px);
60+
}
61+
to {
62+
opacity: 1;
63+
transform: translateY(0);
64+
}
5065
}
51-
.social-links a:hover {
52-
background: #ff7e5f;
53-
}

0 commit comments

Comments
 (0)