Spaces:

artmozai
/

link

Running

App Files Files

artmozai commited on Jul 22, 2025

Commit

d08b73c

verified ·

1 Parent(s): 8493cd8

update change index.html seo and style

Browse files

Files changed (1) hide show

index.html +162 -38

index.html CHANGED Viewed

@@ -1,65 +1,189 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta name="google-site-verification" content="TDPWzrp5HLeDmChbYjqLCOvWdONSPHHFmnQNG5LSwTY" />
-    <meta name="robots" content="index,follow">
-    <style type="text/css">
-        html,
-        body {
-            padding: 0;
             margin: 0;
-            background-color: #55aaff;
-            color: #fff;
-            font-family: Arial, sans-serif;
             display: flex;
             justify-content: center;
             align-items: center;
         }
         .container {
             text-align: center;
         }
-        .link {
-            display: block;
             width: 100%;
             padding: 15px;
-            margin: 10px 0;
-            background-color: #fff;
-            color: #55aaff;
             text-decoration: none;
-            border-radius: 5px;
-            font-size: 18px;
-            transition: background-color 0.3s, color 0.3s;
-            box-sizing: border-box;
         }
-        .link:hover {
-            background-color: #55aaff;
-            color: #fff;
         }
     </style>
 </head>
 <body>
-    <div class="container">
-        <h1>ArtMozai</h1>
         <script async src="https://cse.google.com/cse.js?cx=651d1b956c0ff4371"></script>
         <div class="gcse-search"></div>
-        <a href="https://artmozai.blogspot.com" class="link">Blog</a>
-        <a href="https://www.instagram.com/artmozai" class="link">Instagram</a>
-        <a href="https://x.com/artmozai" class="link">Twitter</a>
-        <a href="https://www.facebook.com/artmozai" class="link">Facebook</a>
-        <a href="https://pinterest.com/artmozai/" class="link">Pinterest</a>
-        <a href="https://github.com/artmozai" class="link">Github</a>
-        <a href="https://linktr.ee/artmozai" class="link">Linktree</a>
-        <a href="https://stock.adobe.com/uk/contributor/211463521/artmozai" class="link">Buy image</a>
-        <a href="https://stock.artmozai.workers.dev" class="link">Gallery image</a>
-        <a href="https://artmozai.myportfolio.com" class="link">Myportfolio</a>
-    </div>
-</body>
 </html>

 <!DOCTYPE html>
+<html lang="id">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ArtMozai - Official Links | Digital Art & Portfolio</title>
+    <meta name="description" content="Kumpulan link resmi ArtMozai. Temukan blog, galeri, portofolio, dan media sosial kami di satu tempat.">
+    <meta name="keywords" content="ArtMozai, digital art, portfolio, blog, photography, adobe stock, illustrator">
+    <meta name="author" content="ArtMozai">
+    <!-- VERIFIKASI & ROBOTS -->
+    <meta name="google-site-verification" content="TDPWzrp5HLeDmChbYjqLCOvWdONSPHHFmnQNG5LSwTY" />
+    <meta name="robots" content="index, follow">
+    <!-- OPEN GRAPH (Untuk Tampilan Saat Share di Media Sosial) -->
+    <meta property="og:title" content="ArtMozai - Official Links">
+    <meta property="og:description" content="Semua link penting ArtMozai di satu halaman.">
+    <meta property="og:image" content="https://artmozai.github.io/apple-icon.png">
+    <meta property="og:url" content="https://artmozai.github.io/">
+    <meta property="og:type" content="website">
+    <!-- TWITTER CARD -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="ArtMozai - Official Links">
+    <meta name="twitter:description" content="Semua link penting ArtMozai di satu halaman.">
+    <meta name="twitter:image" content="https://artmozai.github.io/apple-icon.png">
+    <!-- FAVICON -->
+    <link rel="icon" href="https://artmozai.github.io/apple-icon.png" type="image/png">
+    <!-- FONTS & ICONS -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "Person",
+      "name": "ArtMozai",
+      "url": "https://artmozai.github.io/",
+      "image": "https://artmozai.github.io/apple-icon.png",
+      "sameAs": [
+        "https://artmozai.blogspot.com",
+        "https://www.instagram.com/artmozai",
+        "https://x.com/artmozai",
+        "https://www.facebook.com/artmozai",
+        "https://pinterest.com/artmozai/",
+        "https://github.com/artmozai",
+        "https://linktr.ee/artmozai",
+        "https://stock.adobe.com/uk/contributor/211463521/artmozai",
+        "https://stock.artmozai.workers.dev",
+        "https://artmozai.myportfolio.com"
+      ]
+    }
+    </script>
+    <style>
+        /* CSS Variables untuk tema yang mudah diubah */
+        :root {
+            --bg-color: #121212;
+            --primary-color: #BB86FC;
+            --primary-variant: #3700B3;
+            --secondary-color: #03DAC6;
+            --text-color: #FFFFFF;
+            --surface-color: #1E1E1E;
+            --font-family: 'Poppins', sans-serif;
+        }
+        html, body {
             margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            background-color: var(--bg-color);
+            color: var(--text-color);
+            font-family: var(--font-family);
             display: flex;
             justify-content: center;
             align-items: center;
+            min-height: 100vh;
+            padding: 20px;
         }
         .container {
+            width: 100%;
+            max-width: 680px;
             text-align: center;
         }
+        .profile-header {
+            margin-bottom: 30px;
+        }
+        .profile-pic {
+            width: 120px;
+            height: 120px;
+            border-radius: 50%;
+            border: 3px solid var(--primary-color);
+            object-fit: cover;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+            margin-bottom: 15px;
+        }
+        h1 {
+            font-size: 2.2rem;
+            font-weight: 700;
+            margin: 0;
+            color: var(--text-color);
+        }
+        .bio {
+            font-size: 1rem;
+            color: rgba(255, 255, 255, 0.8);
+            margin-top: 8px;
+        }
+        .links-container a {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 15px;
             width: 100%;
             padding: 15px;
+            margin: 15px 0;
+            background-color: var(--surface-color);
+            color: var(--text-color);
             text-decoration: none;
+            border-radius: 12px;
+            font-size: 1rem;
+            font-weight: 500;
+            transition: transform 0.2s ease-in-out, background-color 0.2s ease;
+            border: 1px solid transparent;
+        }
+        .links-container a:hover {
+            transform: scale(1.05);
+            background-color: var(--primary-color);
+            color: var(--bg-color);
+            font-weight: 700;
         }
+        .links-container a i {
+            font-size: 1.2rem;
+        }
+        footer {
+            margin-top: 40px;
+            font-size: 0.8rem;
+            color: rgba(255, 255, 255, 0.5);
         }
     </style>
 </head>
 <body>
+    <main class="container">
+        <header class="profile-header">
+            <img src="https://artmozai.github.io/apple-icon.png" alt="Logo ArtMozai" class="profile-pic">
+            <h1>ArtMozai</h1>
+            <p class="bio">Digital Artist & Photographer. Creating visual stories.</p>
+        </header>
         <script async src="https://cse.google.com/cse.js?cx=651d1b956c0ff4371"></script>
         <div class="gcse-search"></div>
+        <nav class="links-container">
+            <a href="https://stock.adobe.com/uk/contributor/211463521/artmozai" target="_blank" rel="noopener noreferrer"><i class="fa-solid fa-cart-shopping"></i> Adobe Stock</a>
+            <a href="https://stock.artmozai.workers.dev" target="_blank" rel="noopener noreferrer"><i class="fa-solid fa-images"></i> Stock Gallery</a>
+            <a href="https://artmozai.myportfolio.com" target="_blank" rel="noopener noreferrer"><i class="fa-solid fa-palette"></i> MyPortfolio</a>
+            <a href="https://artmozai.blogspot.com" target="_blank" rel="noopener noreferrer"><i class="fa-solid fa-blog"></i> Blog</a>
+            <a href="https://www.instagram.com/artmozai" target="_blank" rel="noopener noreferrer"><i class="fab fa-instagram"></i> Instagram</a>
+            <a href="https://x.com/artmozai" target="_blank" rel="noopener noreferrer"><i class="fab fa-twitter"></i> Twitter / X</a>
+            <a href="https://www.facebook.com/artmozai" target="_blank" rel="noopener noreferrer"><i class="fab fa-facebook"></i> Facebook</a>
+            <a href="https://pinterest.com/artmozai/" target="_blank" rel="noopener noreferrer"><i class="fab fa-pinterest"></i> Pinterest</a>
+            <a href="https://github.com/artmozai" target="_blank" rel="noopener noreferrer"><i class="fab fa-github"></i> Github</a>
+            <a href="https://linktr.ee/artmozai" target="_blank" rel="noopener noreferrer"><i class="fa-solid fa-link"></i> Linktree</a>
+        </nav>
+        <footer>
+            <p>© <span id="year"></span> ArtMozai. All Rights Reserved.</p>
+        </footer>
+    </main>
+    <script>
+        document.getElementById('year').textContent = new Date().getFullYear();
+    </script>
+</body>
 </html>