Hugging Face's logo

Spaces:
GarGerry
/
Flux-web
Running

App Files Community
GarGerry commited on
Commit
79d3cd6
·
verified ·
1 Parent(s): 979d104

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +175 -53
index.html CHANGED
@@ -1,53 +1,175 @@
1
- <header>
2
- <h1>Selamat Datang di Portfolio Saya 🌙</h1>
3
- <nav>
4
- <ul>
5
- <li><a href="#skills">Skills</a></li>
6
- <li><a href="#projects">Projects</a></li>
7
- <li><a href="#contact">Contact</a></li>
8
- </ul>
9
- </nav>
10
- </header>
11
-
12
- <main>
13
- <section id="intro">
14
- <h2>Hi, Saya [Nama Kamu]</h2>
15
- <p>Seorang developer AI dan Blockchain yang selalu belajar.</p>
16
- </section>
17
-
18
- <section id="skills">
19
- <h2>Skills</h2>
20
- <ul>
21
- <li>Generative AI</li>
22
- <li>Blockchain</li>
23
- <li>Software Engineering</li>
24
- </ul>
25
- </section>
26
-
27
- <section id="projects">
28
- <h2>Projects</h2>
29
- <div class="project">
30
- <h3>Sentiment Analysis</h3>
31
- <p>Web app untuk analisis sentimen dalam Bahasa Indonesia.</p>
32
- </div>
33
- <div class="project">
34
- <h3>Visualisasi Squad Sepak Bola</h3>
35
- <p>Tools untuk membuat formasi tim sepak bola dengan statistik pemain.</p>
36
- </div>
37
- </section>
38
-
39
- <section id="contact">
40
- <h2>Contact</h2>
41
- <form>
42
- <input type="text" placeholder="Nama" required>
43
- <input type="email" placeholder="Email" required>
44
- <textarea placeholder="Pesan" rows="4" required></textarea>
45
- <button type="submit">Kirim</button>
46
- </form>
47
- </section>
48
- </main>
49
-
50
- <footer>
51
- <button id="chatButton">Tanya Saya</button>
52
- <p>© 2025 [Nama Kamu]</p>
53
- </footer>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="id">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Portfolio Saya</title>
7
+ <style>
8
+ /* General Styles */
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ margin: 0;
12
+ padding: 0;
13
+ }
14
+
15
+ header {
16
+ background: #6a0dad;
17
+ color: white;
18
+ padding: 1rem 0;
19
+ text-align: center;
20
+ }
21
+
22
+ header h1 {
23
+ font-size: 1.8rem;
24
+ }
25
+
26
+ nav {
27
+ margin-top: 1rem;
28
+ }
29
+
30
+ nav ul {
31
+ display: flex;
32
+ justify-content: center;
33
+ list-style: none;
34
+ padding: 0;
35
+ margin: 0;
36
+ }
37
+
38
+ nav ul li {
39
+ margin: 0 1rem;
40
+ }
41
+
42
+ nav ul li a {
43
+ text-decoration: none;
44
+ color: white;
45
+ }
46
+
47
+ main {
48
+ padding: 1rem;
49
+ }
50
+
51
+ section {
52
+ margin-bottom: 2rem;
53
+ text-align: center;
54
+ }
55
+
56
+ section h2 {
57
+ font-size: 1.5rem;
58
+ margin-bottom: 1rem;
59
+ color: #6a0dad;
60
+ }
61
+
62
+ #skills ul, #projects ul {
63
+ list-style: none;
64
+ padding: 0;
65
+ }
66
+
67
+ #skills ul li, #projects ul li {
68
+ margin: 0.5rem 0;
69
+ }
70
+
71
+ form {
72
+ max-width: 400px;
73
+ margin: 0 auto;
74
+ display: flex;
75
+ flex-direction: column;
76
+ gap: 1rem;
77
+ }
78
+
79
+ form input, form textarea {
80
+ padding: 0.5rem;
81
+ border: 1px solid #ccc;
82
+ border-radius: 5px;
83
+ }
84
+
85
+ form button {
86
+ background: #6a0dad;
87
+ color: white;
88
+ border: none;
89
+ padding: 0.5rem;
90
+ border-radius: 5px;
91
+ cursor: pointer;
92
+ }
93
+
94
+ form button:hover {
95
+ background: #530a85;
96
+ }
97
+
98
+ footer {
99
+ text-align: center;
100
+ padding: 1rem;
101
+ background: #f8f8f8;
102
+ }
103
+
104
+ /* Responsive Styles */
105
+ @media (max-width: 768px) {
106
+ header h1 {
107
+ font-size: 1.5rem;
108
+ }
109
+
110
+ nav ul {
111
+ flex-direction: column;
112
+ gap: 0.5rem;
113
+ }
114
+
115
+ section h2 {
116
+ font-size: 1.2rem;
117
+ }
118
+ }
119
+ </style>
120
+ </head>
121
+ <body>
122
+ <header>
123
+ <h1>Selamat Datang di Portfolio Saya</h1>
124
+ <nav>
125
+ <ul>
126
+ <li><a href="#skills">Skills</a></li>
127
+ <li><a href="#projects">Projects</a></li>
128
+ <li><a href="#contact">Contact</a></li>
129
+ </ul>
130
+ </nav>
131
+ </header>
132
+
133
+ <main>
134
+ <section id="about">
135
+ <h2>Hi, Saya [Nama Kamu]</h2>
136
+ <p>Seorang developer AI dan Blockchain yang selalu belajar.</p>
137
+ </section>
138
+
139
+ <section id="skills">
140
+ <h2>Skills</h2>
141
+ <ul>
142
+ <li>Generative AI</li>
143
+ <li>Blockchain</li>
144
+ <li>Software Engineering</li>
145
+ </ul>
146
+ </section>
147
+
148
+ <section id="projects">
149
+ <h2>Projects</h2>
150
+ <ul>
151
+ <li>
152
+ <strong>Sentiment Analysis</strong>: Web app untuk analisis sentimen dalam Bahasa Indonesia.
153
+ </li>
154
+ <li>
155
+ <strong>Visualisasi Squad Sepak Bola</strong>: Tools untuk membuat formasi tim sepak bola dengan statistik pemain.
156
+ </li>
157
+ </ul>
158
+ </section>
159
+
160
+ <section id="contact">
161
+ <h2>Contact</h2>
162
+ <form>
163
+ <input type="text" placeholder="Nama" required>
164
+ <input type="email" placeholder="Email" required>
165
+ <textarea placeholder="Pesan" rows="4" required></textarea>
166
+ <button type="submit">Kirim</button>
167
+ </form>
168
+ </section>
169
+ </main>
170
+
171
+ <footer>
172
+ &copy; 2025 [Nama Kamu]
173
+ </footer>
174
+ </body>
175
+ </html>