finish styling and stuff

2026-11-08 18:09:03 +07:00
parent f9e37204ae
commit 8b036f3601
3 changed files with 170 additions and 6 deletions
@@ -0,0 +1,132 @@
+footer {
+    margin-top: 3rem;
+    padding: 20px;
+    text-align: center;
+}
+
+/* Mengatur tampilan dasar halaman */
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    min-height: 100vh;
+    background-color: #e8e8e8;
+    font-family: Arial, sans-serif;
+    color: #222222;
+}
+
+/* Mengatur posisi header dan navigasi */
+.header {
+    width: min(1500px, 100%);
+    margin: 1em auto;
+}
+
+.nav {
+    margin-bottom: 3em;
+}
+
+.nav-list {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    list-style-type: none;
+    gap: 2em;
+    padding: 0;
+}
+
+.nav-list li:first-child {
+    margin-right: auto;
+}
+
+.nav-list a {
+    display: block;
+    color: #222222;
+    text-decoration: none;
+    padding: 8px 12px;
+    border-radius: 6px;
+}
+
+.nav-list a:hover {
+    background-color: #d0d0d0;
+}
+
+/* Mengatur judul halaman */
+main > h1 {
+    text-align: center;
+    margin: 30px 0;
+}
+
+/* Mengatur kotak utama Contact */
+.contact-card {
+    width: min(650px, 100%);
+    margin: 40px auto;
+    background-color: white;
+    border: 1px solid #cccccc;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 8px 8px 0 #444444;
+}
+
+/* Mengatur header kecil pada kotak Contact */
+.contact-header {
+    background-color: #444444;
+    color: white;
+    padding: 8px 15px;
+}
+
+.contact-header p {
+    margin: 0;
+}
+
+/* Mengatur isi kotak Contact */
+.contact-content {
+    padding: 40px 20px;
+    text-align: center;
+}
+
+.contact-content h2 {
+    font-size: 28px;
+    margin-bottom: 8px;
+}
+
+.contact-content > p {
+    color: #777777;
+    margin-bottom: 30px;
+}
+
+/* Mengatur posisi pilihan kontak */
+.contact-options {
+    display: flex;
+    justify-content: center;
+    gap: 30px;
+}
+
+/* Mengatur masing-masing pilihan kontak */
+.contact-item {
+    width: 180px;
+    padding: 15px;
+    border-radius: 10px;
+    transition: 0.2s;
+}
+
+.contact-item:hover {
+    background-color: #f0f0f0;
+    transform: translateY(-4px);
+}
+
+.contact-item a {
+    text-decoration: none;
+}
+
+.contact-icon {
+    display: block;
+    font-size: 35px;
+    margin-bottom: 10px;
+}
+
+.contact-item h3 {
+    margin: 8px 0;
+}
+