Skip to content

Commit 43ab6fe

Browse files
MuhammadMallqMuhammadMallq
committed
menambahkan animasi slider
1 parent dc0e9b7 commit 43ab6fe

File tree

3 files changed

+70
-25
lines changed

3 files changed

+70
-25
lines changed

‎img/Canva.png‎

95.2 KB
Loading

‎index.html‎

Lines changed: 43 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -40,31 +40,49 @@ <h3>Riwayat Pendidikan</h3>
4040
</section>
4141

4242
<section id="skills" class="slide-up">
43-
<h2>Keahlian Pemograman</h2>
44-
<div class="skill-container">
45-
<div class="skill-item">
46-
<img src="img/html.png" alt="HTML">
47-
<p>HTML (membuat struktur halaman web).</p>
48-
</div>
49-
<div class="skill-item">
50-
<img src="img/css.png" alt="CSS">
51-
<p>CSS (mengatur tampilan dan desain sebuah halaman web). </p>
52-
</div>
53-
<div class="skill-item">
54-
<img src="img/javascript.png" alt="JavaScript">
55-
<p>JavaScript (interaktivitas dan fungsi dinamis ke halaman web).</p>
56-
</div>
57-
<div class="skill-item">
58-
<img src="img/Alice3.png" alt="Alice3">
59-
<p>Alice3 (membuat struktur halaman web).</p>
60-
</div>
61-
<div class="skill-item">
62-
<img src="img/Greenfoot.png" alt="Greenfoot">
63-
<p>Greenfoot (mengatur tampilan dan desain sebuah halaman web). </p>
64-
</div>
65-
<div class="skill-item">
66-
<img src="img/Figma.png" alt="Figma">
67-
<p>Figma (interaktivitas dan fungsi dinamis ke halaman web).</p>
43+
<h2>Keahlian Pemrograman</h2>
44+
<div class="skill-carousel">
45+
<div class="carousel-track">
46+
<div class="skill-item">
47+
<img src="img/html.png" alt="HTML">
48+
<p>HTML (membuat struktur halaman web).</p>
49+
</div>
50+
<div class="skill-item">
51+
<img src="img/css.png" alt="CSS">
52+
<p>CSS (mengatur tampilan dan desain sebuah halaman web). </p>
53+
</div>
54+
<div class="skill-item">
55+
<img src="img/javascript.png" alt="JavaScript">
56+
<p>JavaScript (interaktivitas dan fungsi dinamis ke halaman web).</p>
57+
</div>
58+
<div class="skill-item">
59+
<img src="img/Alice3.png" alt="Alice3">
60+
<p>Alice3 (perangkat lunak pemrograman objek 3D yang dapat digunakan untuk membuat animasi).</p>
61+
</div>
62+
<div class="skill-item">
63+
<img src="img/Greenfoot.png" alt="Greenfoot">
64+
<p>Greenfoot (untuk mengembangkan aplikasi grafis dua dimensi, seperti permainan). </p>
65+
</div>
66+
<div class="skill-item">
67+
<img src="img/Figma.png" alt="Figma">
68+
<p>Figma (mendesain antarmuka pengguna (UI) dan pengalaman pengguna (UX)).</p>
69+
</div>
70+
<div class="skill-item">
71+
<img src="img/Canva.png" alt="Canva">
72+
<p>Canva (desain grafis daring yang memungkinkan penggunanya untuk membuat berbagai macam desain).</p>
73+
</div>
74+
<!-- Duplikat untuk looping mulus -->
75+
<div class="skill-item">
76+
<img src="img/html.png" alt="HTML">
77+
<p>HTML (membuat struktur halaman web).</p>
78+
</div>
79+
<div class="skill-item">
80+
<img src="img/css.png" alt="CSS">
81+
<p>CSS (mengatur tampilan dan desain sebuah halaman web). </p>
82+
</div>
83+
<div class="skill-item">
84+
<img src="img/javascript.png" alt="JavaScript">
85+
<p>JavaScript (interaktivitas dan fungsi dinamis ke halaman web).</p>
6886
</div>
6987
</div>
7088
</section>

‎styles.css‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,33 @@ nav ul li a:hover {
157157
transform: translateY(0);
158158
}
159159

160+
.skill-carousel {
161+
overflow: hidden;
162+
width: 100%;
163+
position: relative;
164+
}
165+
166+
.carousel-track {
167+
display: flex;
168+
gap: 20px;
169+
animation: scroll-left 10s linear infinite;
170+
}
171+
172+
.skill-item {
173+
flex: 0 0 auto;
174+
width: 200px;
175+
text-align: center;
176+
}
177+
178+
@keyframes scroll-left {
179+
from {
180+
transform: translateX(0);
181+
}
182+
to {
183+
transform: translateX(-55%);
184+
}
185+
}
186+
160187
/* Bagian Tentang Saya */
161188
#about {
162189
text-align: center;

0 commit comments

Comments
 (0)