AYUDIA/artikel1.html at master · shendytria/AYUDIA · GitHub

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
<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Artikel - Ayudia Kebaya</title>
    <meta name="description"
        content="Baca artikel menarik tentang kebaya, tips styling, dan inspirasi fashion dari Ayudia.">
    <meta name="robots" content="all,follow">
    <!-- Font Awesome untuk Ikon -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link
        href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Open+Sans:wght@400&display=swap"
        rel="stylesheet">
    <!-- Google Fonts -->
    <link
        href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@400;500;600;700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="css/artikel1.css">
</head>

<body>
    <!-- Header & Navigasi -->
    <header>
        <div class="logo-container">
            <a href="artikel.html" id="artikel" class="back-button" title="Kembali ke halaman utama">
                <i class="fas fa-arrow-left"></i>
            </a>
        </div>
    </header>

    <!-- Reading Progress Bar -->
    <div class="progress-container">
        <div class="progress-bar" id="progressBar"></div>
    </div>

    <!-- Detail Artikel -->
    <div class="article-container">
        <article class="article-detail">
            <div class="article-header fade-in">
                <h1 class="article-title">Perjalanan Kebaya yang Ikonik</h1>
                <div class="article-meta">
                    <span><i class="fas fa-calendar-alt"></i> 3 Mei 2025</span>
                    <span><i class="fas fa-user"></i> Tim Ayudia</span>
                </div>
                <img src="https://i.pinimg.com/736x/b4/ab/89/b4ab894c129860d3d94cea2ee3d307b9.jpg" alt="Evolusi Kebaya"
                    class="article-feature-img">
            </div>

            <div class="article-content fade-in delay-1">
                <p>Kebaya, sebagai salah satu warisan budaya Indonesia, telah melalui perjalanan panjang yang
                    menakjubkan. Dari pakaian tradisional yang sederhana hingga menjadi simbol gaya yang mendunia,
                    kebaya terus berevolusi tanpa kehilangan esensi budayanya.</p>

                <h3>Awal Mula Kebaya</h3>
                <p>Kebaya pertama kali muncul sekitar abad ke-15, dipengaruhi oleh budaya Jawa, Tionghoa, dan Melayu.
                    Awalnya, kebaya adalah pakaian sederhana yang dikenakan oleh wanita di keraton dengan kain batik
                    atau songket sebagai bawahan. Desainnya longgar, menutup tubuh dengan anggun, mencerminkan nilai
                    kesopanan pada masa itu.</p>
                <img src="https://i.pinimg.com/736x/4a/df/c9/4adfc9414baeedce9950b2cdb3446591.jpg"
                    alt="Kebaya Tradisional">

                <h3>Transformasi di Era Kolonial</h3>
                <p>Pada masa kolonial Belanda dan Portugis, kebaya mulai dipengaruhi oleh budaya Eropa. Lahirlah kebaya
                    encim, yang merupakan perpaduan antara kebaya tradisional dengan bordir khas Tionghoa dan potongan
                    yang lebih ramping. Kebaya ini populer di kalangan wanita Peranakan dan menjadi simbol status
                    sosial.</p>
                <img src="https://i.pinimg.com/736x/e2/c9/fb/e2c9fbfa850e71d1e032be29fd4f4bc6.jpg" alt="Kebaya Encim">

                <h3>Kebaya di Era Modern</h3>
                <p>Di abad ke-21, kebaya mengalami transformasi besar. Desainer seperti Anne Avantie dan Didiet Maulana
                    membawa kebaya ke panggung dunia dengan sentuhan modern. Kebaya kini hadir dalam berbagai gaya, dari
                    potongan asimetris hingga kombinasi dengan bahan seperti organza dan satin. Kebaya juga menjadi
                    pilihan populer untuk acara formal, seperti pernikahan dan gala, sekaligus tetap relevan untuk gaya
                    kasual.</p>
                <img src="https://i.pinimg.com/736x/13/1d/6c/131d6c44164762ba0f70f98b037a9337.jpg" alt="Kebaya Modern">

                <h3>Mengapa Kebaya Tetap Relevan?</h3>
                <p>Kebaya bukan sekadar pakaian; ia adalah cerminan identitas budaya Indonesia. Fleksibilitasnya dalam
                    beradaptasi dengan tren modern sambil mempertahankan akar tradisional membuatnya abadi. Di Ayudia,
                    kami berkomitmen untuk menghadirkan kebaya yang tidak hanya cantik, tetapi juga menceritakan kisah
                    budaya yang kaya.</p>

                <p>Jelajahi koleksi kebaya kami dan temukan cara untuk tampil anggun dengan sentuhan tradisi!</p>
            </div>

            <!-- Share Buttons -->
            <div class="social-share fade-in delay-2">
                <p>Bagikan artikel:</p>
                <div class="social-share-links">
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-pinterest"></i></a>
                    <a href="#"><i class="fab fa-whatsapp"></i></a>
                </div>
            </div>

            <!-- Recommended Articles -->
            <section class="recommended-articles fade-in delay-3">
                <h2 class="section-title">Artikel Lainnya</h2>
                <div class="articles-grid">
                    <div class="article-card">
                        <img src="https://i.pinimg.com/736x/1b/0d/bc/1b0dbca037fe21811d192fc24941b2ab.jpg"
                                alt="Kebaya Encim">
                        <h3>Pesona Kebaya Encim yang Unik</h3>
                        <a href="artikel4.html" class="read-more">Baca Selengkapnya <i
                                    class="fas fa-arrow-right"></i></a>
                    </div>
                    <div class="article-card">
                        <img src="https://i.pinimg.com/736x/fa/e1/3d/fae13db78f6c2c8348bd98f935628121.jpg"
                                alt="Kebaya Kutu Baru">
                        <h3>Kebaya Kutu Baru: Elegansi Timeless</h3>
                        <a href="artikel6.html" class="read-more">Baca Selengkapnya <i
                                    class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
            </section>

            <!-- Komentar -->
            <section class="comments-section fade-in delay-3">
                <h2 class="comments-title">Komentar</h2>
                <!-- Formulir Komentar -->
                <form id="comment-form" class="comment-form">
                    <div class="form-group">
                        <label for="comment-name">Nama</label>
                        <input type="text" id="comment-name" name="name" placeholder="Masukkan nama Anda" required>
                    </div>
                    <div class="form-group">
                        <label for="comment-email">Email</label>
                        <input type="email" id="comment-email" name="email" placeholder="Masukkan email Anda" required>
                    </div>
                    <div class="form-group">
                        <label for="comment-text">Komentar</label>
                        <textarea id="comment-text" name="comment" placeholder="Tulis komentar Anda"
                            required></textarea>
                    </div>
                    <button type="submit" class="comment-submit-btn">Kirim Komentar</button>
                </form>
                <!-- Daftar Komentar -->
                <div class="comments-list" id="comments-list">
                    <!-- Komentar akan ditambahkan secara dinamis oleh JavaScript -->
                </div>
            </section>
        </article>
    </div>

    <!-- JavaScript -->
    <script src="js/artikel1.js"></script>
</body>

</html>