Hyottoko

d8soxee · Nov 11, 2024 · dfd95b7 · dfd95b7
commit dfd95b7
Show file tree

Hide file tree

Showing 7 changed files with 559 additions and 0 deletions.
diff --git a/assets/hyotokkoicon.png b/assets/hyotokkoicon.png
diff --git a/assets/hytokko.jpg b/assets/hytokko.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hyottoko Swordsmith</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="main-wrapper">
+        <div class="content-container">
+            <!-- Navigation -->
+            <nav class="navbar navbar-expand-lg">
+                <div class="container-fluid">
+                    <a class="navbar-brand" href="#">
+                        <img src="assets/hyotokkoicon.png" alt="Hyottoko Logo" class="logo">
+                    </a>
+                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+                        <span class="navbar-toggler-icon"></span>
+                    </button>
+                    <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
+                        <ul class="navbar-nav">
+                            <li class="nav-item">
+                                <a href="index.html" class="nav-link">Home</a>
+                            </li>
+                            <li class="nav-item">
+                                <a href="wswordsmiths.html" class="nav-link" >W Swordsmiths</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="#">Events</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="#">Contact</a>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="search-box-wrapper d-none d-lg-block">
+                        <input type="search" placeholder="search..." class="search-input">
+                        <i class="fas fa-search search-icon"></i>
+                    </div>
+                </div>
+            </nav>
+
+            <!-- Main Content -->
+            <div class="container-fluid p-0">
+                <div class="row g-0">
+                    <!-- Text Content -->
+                    <div class="col-md-6">
+                        <div class="text-content">
+                            <h2 class="ramen-title text-center">Hyottoko</h2>
+                            <div class="swordsmiths-content">
+                                <h3>WE ARE</h3>
+                                <div class="swordsmiths-text">SWORDSMITHS</div>
+                                <p></p>
+                                <p class="description">Hyottoko Swordsmiths (刀かたな鍛か冶じ Katanakaji?) are a dedicated group of highly skilled artisans living and working in the Swordsmith Village.</p>
+                                <button class="apply-btn" id="moreBtn">More</button>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Image Content -->
+                    <div class="col-md-6">
+                        <div class="image-wrapper">
+                            <div class="character-image-container">
+                                <img src="assets/hytokko.jpg" alt="Hyottoko Character" class="character-image">
+                                <div class="japanese-text">
+                                    <span>刀</span>
+                                    <span>鍛</span>
+                                    <span>冶</span>
+                                </div>
+                                <h1 class="hyottoko-text">Katanakaji</h1>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,74 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Navbar toggle animation
+    const navbarToggler = document.querySelector('.navbar-toggler');
+    const navbarCollapse = document.querySelector('.navbar-collapse');
+
+    navbarToggler.addEventListener('click', function() {
+        this.classList.toggle('active');
+    });
+
+    // Close navbar when clicking outside
+    document.addEventListener('click', function(event) {
+        const isNavbar = event.target.closest('.navbar');
+        if (!isNavbar && navbarCollapse.classList.contains('show')) {
+            navbarCollapse.classList.remove('show');
+            navbarToggler.classList.remove('active');
+        }
+    });
+
+    // Search input animation
+    const searchInput = document.querySelector('.search-input');
+    const searchIcon = document.querySelector('.search-icon');
+
+    searchInput.addEventListener('focus', () => {
+        searchIcon.style.color = 'var(--orange-primary)';
+    });
+
+    document.getElementById("moreBtn").addEventListener("click", function() {
+        window.location.href = "swordsmiths.html"; // Ubah "newpage.html" sesuai halaman tujuan
+    });
+
+    searchInput.addEventListener('blur', () => {
+        searchIcon.style.color = '#666';
+    });
+
+    // Apply button hover effect
+    const applyBtn = document.querySelector('.apply-btn');
+
+    applyBtn.addEventListener('mouseenter', () => {
+        applyBtn.style.transform = 'translateY(-2px)';
+    });
+
+    applyBtn.addEventListener('mouseleave', () => {
+        applyBtn.style.transform = 'translateY(0)';
+    });
+
+    // Responsive image handling
+    function adjustImageContainer() {
+        const imageContainer = document.querySelector('.character-image-container');
+        const contentContainer = document.querySelector('.content-container');
+
+        if (window.innerWidth >= 768) {
+            imageContainer.style.height = `${contentContainer.offsetHeight}px`;
+        } else {
+            imageContainer.style.height = '300px';
+        }
+    }
+
+    // Call on load and resize
+    adjustImageContainer();
+    window.addEventListener('resize', adjustImageContainer);
+
+    // Smooth scroll for navigation
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function (e) {
+            e.preventDefault();
+            const target = document.querySelector(this.getAttribute('href'));
+            if (target) {
+                target.scrollIntoView({
+                    behavior: 'smooth'
+                });
+            }
+        });
+    });
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,228 @@
+:root {
+    --orange-primary: #FF4500;
+    --orange-secondary: #FFA500;
+    --white: #ffffff;
+    --black: #000000;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background-color: var(--orange-secondary);
+    font-family: 'Arial', sans-serif;
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+}
+
+.logo {
+    width: 200px;
+    height: auto; 
+}
+
+
+.main-wrapper {
+    width: 100%;
+    max-width: 1400px;
+    margin: 0 auto;
+}
+
+.content-container {
+    background-color: #F9E6CF;;
+    border-radius: 20px;
+    overflow: hidden;
+    padding: 20px;
+    margin: 0 auto;
+    position: relative;
+}
+
+/* Navigation Styles */
+.navbar {
+    padding: 15px 0;
+}
+
+.logo {
+    height: 40px;
+    width: auto;
+}
+
+.nav-link {
+    color: var(--black);
+    font-weight: 500;
+    font-size: 1rem;
+    margin: 0 15px;
+    transition: color 0.3s ease;
+}
+
+.nav-link:hover {
+    color: var(--orange-primary);
+}
+
+.search-box-wrapper {
+    position: relative;
+}
+
+.search-input {
+    padding: 8px 35px 8px 15px;
+    border-radius: 20px;
+    border: 1px solid #ddd;
+    outline: none;
+    width: 200px;
+}
+
+.search-icon {
+    position: absolute;
+    right: 15px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #666;
+}
+
+/* Content Styles */
+.text-content {
+    padding: 40px;
+}
+
+.ramen-title {
+    font-size: 2.5rem;
+    font-weight: bold;
+    margin-bottom: 30px;
+}
+
+.hiring-content {
+    text-align: left;
+}
+
+.swordsmiths-content h3 {
+    font-size: 1.5rem;
+    margin-bottom: 10px;
+}
+
+.swordsmiths-text {
+    font-size: 4rem;
+    font-weight: 900;
+    color: var(--orange-primary);
+    line-height: 1;
+    margin-bottom: 20px;
+}
+
+.description {
+    color: #666;
+    margin-bottom: 20px;
+}
+
+.apply-btn {
+    background-color: var(--black);
+    color: var(--white);
+    border: none;
+    padding: 10px 30px;
+    border-radius: 5px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.apply-btn:hover {
+    background-color: var(--orange-primary);
+    transform: translateY(-2px);
+}
+
+/* Image Section */
+.image-wrapper {
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+}
+
+.character-image-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+}
+
+.character-image {
+    max-width: 100%;
+    height: auto;
+    object-fit: contain;
+}
+
+.japanese-text {
+    position: absolute;
+    right: 20px;
+    top: 20px;
+    background-color: var(--orange-primary);
+    padding: 10px;
+    border-radius: 5px;
+}
+
+.japanese-text span {
+    color: var(--white);
+    font-size: 1.5rem;
+    margin: 0 5px;
+}
+
+.hyottoko-text {
+    position: absolute;
+    bottom: 20px;
+    right: 20px;
+    color: var(--white);
+    font-size: 2rem;
+    font-weight: bold;
+}
+
+/* Responsive Design */
+@media (max-width: 992px) {
+    .navbar-nav {
+        padding: 20px 0;
+    }
+
+    .search-box-wrapper {
+        margin-top: 20px;
+    }
+}
+
+@media (max-width: 768px) {
+    .content-container {
+        padding: 10px;
+    }
+
+    .text-content {
+        padding: 20px;
+    }
+
+    .hiring-text {
+        font-size: 3rem;
+    }
+
+    .character-image-container {
+        min-height: 300px;
+    }
+}
+
+@media (max-width: 576px) {
+    body {
+        padding: 10px;
+    }
+
+    .text-content {
+        padding: 15px;
+    }
+
+    .hiring-text {
+        font-size: 2.5rem;
+    }
+
+    .character-image-container {
+        min-height: 250px;
+    }
+}