Ghibli Google

I'll create a Google homepage redesigned in the Studio Ghibli style while maintaining the core functionality. Ghibli Google

G o o g l e

Google offered in: Español Français 日本語

* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Nunito', Arial, sans-serif; height: 100vh; position: relative; overflow: hidden; display: flex; flex-direction: column; background-color: #e8f4f8; } /* Background Elements */ .background-container { position: absolute; width: 100%; height: 100%; z-index: -1; overflow: hidden; } .clouds { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('https://i.imgur.com/JD9oe7p.png') repeat-x; background-size: contain; opacity: 0.6; animation: cloudMove 120s linear infinite; } .totoro { position: absolute; bottom: 10px; right: 20px; width: 150px; height: 150px; background: url('https://i.imgur.com/8KpbRoe.png') no-repeat; background-size: contain; opacity: 0.8; } .grass { position: absolute; bottom: 0; left: 0; width: 100%; height: 80px; background: url('https://i.imgur.com/7MFUxGS.png') repeat-x; background-size: contain; } @keyframes cloudMove { 0% { background-position: 0 0; } 100% { background-position: 3000px 0; } } /* Header */ header { padding: 20px; } nav ul { display: flex; justify-content: flex-end; list-style: none; } nav ul li { margin-left: 15px; } nav ul li a { color: #5f6368; text-decoration: none; font-size: 14px; transition: color 0.3s; } nav ul li a:hover { color: #1a73e8; text-decoration: underline; } .apps-icon { display: inline-block; opacity: 0.7; } .profile { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background-color: #8e6cd8; color: white; font-weight: bold; } /* Main Content */ main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 100px; } .logo-container { margin-bottom: 30px; } .logo { font-family: 'Caveat', cursive; font-size: 90px; font-weight: 600; letter-spacing: -2px; position: relative; display: inline-block; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); } .logo span { display: inline-block; position: relative; transform-origin: center; } .g { color: #4285f4; transform: rotate(-5deg); } .o { color: #ea4335; transform: rotate(3deg); } .o2 { color: #fbbc05; transform: rotate(-2deg); } .g2 { color: #4285f4; transform: rotate(4deg); } .l { color: #34a853; transform: rotate(-3deg); } .e { color: #ea4335; transform: rotate(2deg); } .search-container { width: 100%; max-width: 584px; margin: 0 auto; } .search-box { display: flex; align-items: center; height: 46px; border: 2px solid #a2d2ff; border-radius: 24px; padding: 0 15px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); background-color: white; position: relative; transition: all 0.3s; } .search-box:hover, .search-box:focus-within { box-shadow: 0 3px 15px rgba(0, 0, 0, 0.15); border-color: #7eb6ff; } .search-icon { color: #9aa0a6; margin-right: 10px; } .search-input { flex: 1; height: 100%; border: none; outline: none; font-size: 16px; background: transparent; } .voice-search, .camera-search { margin-left: 10px; cursor: pointer; } .search-buttons { display: flex; justify-content: center; margin-top: 30px; } .search-buttons button { background-color: #f8f9fa; border: 1px solid #f8f9fa; border-radius: 4px; color: #3c4043; font-size: 14px; margin: 0 5px; padding: 10px 16px; cursor: pointer; transition: all 0.3s; position: relative; overflow: hidden; } .search-buttons button::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('https://i.imgur.com/JNhsLYh.png') repeat; opacity: 0.05; pointer-events: none; } .search-buttons button:hover { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); border-color: #dadce0; background-color: #f1f3f4; } .languages { margin-top: 30px; font-size: 14px; color: #4d5156; } .languages a { color: #1a0dab; text-decoration: none; margin: 0 5px; } .languages a:hover { text-decoration: underline; } /* Footer */ footer { background-color: #f2f2f2; border-top: 1px solid #dadce0; color: #70757a; font-size: 14px; position: absolute; bottom: 0; width: 100%; } .footer-top { padding: 15px 30px; border-bottom: 1px solid #dadce0; } .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 15px 30px; } .footer-left, .footer-center, .footer-right { display: flex; flex-wrap: wrap; } footer a { color: #70757a; text-decoration: none; margin: 0 15px 0 0; } .footer-right a { margin: 0 0 0 15px; } footer a:hover { text-decoration: underline; } /* Responsive Design */ @media (max-width: 768px) { .logo { font-size: 70px; } .search-container { max-width: 90%; } .footer-bottom { flex-direction: column; } .footer-left, .footer-center, .footer-right { justify-content: center; margin: 10px 0; } .footer-right a { margin: 0 15px; } .totoro { display: none; } } @media (max-width: 480px) { .logo { font-size: 50px; } .search-buttons button { padding: 8px 12px; } .clouds { opacity: 0.4; } } document.addEventListener('DOMContentLoaded', function() { // Add subtle animation to logo letters const logoLetters = document.querySelectorAll('.logo span'); logoLetters.forEach(letter => { const randomDelay = Math.random() * 2; const randomDuration = 2 + Math.random() * 3; letter.style.animation = `float ${randomDuration}s ease-in-out ${randomDelay}s infinite alternate`; }); // Add keyframe animation for floating effect const styleSheet = document.styleSheets[0]; styleSheet.insertRule(` @keyframes float { 0% { transform: translateY(0) rotate(var(--rotation, 0deg)); } 100% { transform: translateY(-5px) rotate(var(--rotation, 0deg)); } } `, styleSheet.cssRules.length); // Set initial rotation values document.querySelector('.g').style.setProperty('--rotation', '-5deg'); document.querySelector('.o').style.setProperty('--rotation', '3deg'); document.querySelector('.o2').style.setProperty('--rotation', '-2deg'); document.querySelector('.g2').style.setProperty('--rotation', '4deg'); document.querySelector('.l').style.setProperty('--rotation', '-3deg'); document.querySelector('.e').style.setProperty('--rotation', '2deg'); // Add search functionality const searchInput = document.querySelector('.search-input'); const searchButtons = document.querySelectorAll('.search-buttons button'); searchButtons.forEach(button => { button.addEventListener('click', function() { if (searchInput.value.trim() !== '') { const isLucky = button.textContent === "I'm Feeling Lucky"; const searchUrl = isLucky ? `https://www.google.com/doodles` : `https://www.google.com/search?q=${encodeURIComponent(searchInput.value)}`; window.location.href = searchUrl; } }); }); // Allow search on Enter key searchInput.addEventListener('keypress', function(e) { if (e.key === 'Enter' && searchInput.value.trim() !== '') { window.location.href = `https://www.google.com/search?q=${encodeURIComponent(searchInput.value)}`; } }); // Add subtle parallax effect to background elements document.addEventListener('mousemove', function(e) { const xAxis = (window.innerWidth / 2 - e.pageX) / 50; const yAxis = (window.innerHeight / 2 - e.pageY) / 50; const clouds = document.querySelector('.clouds'); const totoro = document.querySelector('.totoro'); clouds.style.transform = `translate(${xAxis * 0.5}px, ${yAxis * 0.5}px)`; if (totoro) { totoro.style.transform = `translate(${xAxis * -1.5}px, ${yAxis * -0.5}px)`; } }); }); This Studio Ghibli-styled Google homepage features: 1. A dreamy background with animated clouds and grass inspired by Ghibli landscapes 2. A small Totoro character in the corner (visible on larger screens) 3. Hand-drawn style Google logo with playful, slightly rotated letters 4. Soft color palette and rounded elements typical of Ghibli's aesthetic 5. Subtle animations including floating logo letters and parallax effects 6. Fully functional search interface that maintains Google's simplicity The design preserves all the core Google functionality while adding whimsical Ghibli-inspired elements. You can open the index.html file to see the result.