fork download 
  1. /* package whatever; // don't place package name! */
  2.  
  3. import java.util.*;
  4. import java.lang.*;
  5. import java.io.*;
  6.  
  7. /* Name of the class has to be "Main" only if the class is public. */
  8. class Ideone
  9. {
  10. 	public static void main (String[] args) throws java.lang.Exception
  11. 	{
  12. 		// your code goes here
  13. 	}
  14. }
Success #stdin #stdout 0.11s 54628KB
comments (?)
stdin 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gemini Store - Modern & Stylish</title>
    <script src="https://c...content-available-to-author-only...s.com"></script>
    <link href="https://f...content-available-to-author-only...s.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://c...content-available-to-author-only...e.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <style>
        /* Custom styles for the e-commerce site */
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f3f4f6; /* Light gray background for a clean look */
        }
        .product-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: pointer;
        }
        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        .btn-primary {
            background-color: #4f46e5; /* A modern indigo color */
            color: white;
            transition: background-color 0.3s ease;
        }
        .btn-primary:hover {
            background-color: #4338ca; /* Darker shade on hover */
        }
        .nav-link {
            position: relative;
            transition: color 0.3s;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -4px;
            left: 50%;
            background-color: #4f46e5;
            transition: width 0.3s ease, left 0.3s ease;
        }
        .nav-link:hover::after {
            width: 100%;
            left: 0;
        }
    </style>
</head>
<body class="bg-gray-100">

    <!-- Header Section -->
    <header class="bg-white shadow-md sticky top-0 z-50">
        <div class="container mx-auto px-6 py-4">
            <div class="flex items-center justify-between">
                <div>
                    <!-- Store Logo and Name -->
                    <a href="#" class="text-2xl font-bold text-gray-800 lg:text-3xl">
                        <i class="fa-solid fa-gem text-indigo-600"></i> GeminiStore
                    </a>
                </div>

                <!-- Desktop Navigation -->
                <nav class="hidden md:flex items-center space-x-6">
                    <a href="#" class="nav-link text-gray-600 hover:text-indigo-600 font-medium">Home</a>
                    <a href="#products" class="nav-link text-gray-600 hover:text-indigo-600 font-medium">Shop</a>
                    <a href="#" class="nav-link text-gray-600 hover:text-indigo-600 font-medium">New Arrivals</a>
                    <a href="#" class="nav-link text-gray-600 hover:text-indigo-600 font-medium">Contact</a>
                </nav>

                <!-- Header Icons -->
                <div class="flex items-center space-x-4">
                    <button class="text-gray-600 hover:text-indigo-600">
                        <i class="fas fa-search text-xl"></i>
                    </button>
                    <button class="text-gray-600 hover:text-indigo-600 relative">
                        <i class="fas fa-shopping-cart text-xl"></i>
                        <span class="absolute -top-2 -right-2 bg-indigo-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
                    </button>
                    <!-- Mobile Menu Button -->
                    <button class="mobile-menu-button md:hidden text-gray-600 hover:text-indigo-600">
                        <i class="fas fa-bars text-xl"></i>
                    </button>
                </div>
            </div>
             <!-- Mobile Menu (hidden by default) -->
            <div class="mobile-menu hidden mt-4 md:hidden">
                <a href="#" class="block py-2 px-4 text-sm text-gray-600 hover:bg-indigo-50 rounded">Home</a>
                <a href="#products" class="block py-2 px-4 text-sm text-gray-600 hover:bg-indigo-50 rounded">Shop</a>
                <a href="#" class="block py-2 px-4 text-sm text-gray-600 hover:bg-indigo-50 rounded">New Arrivals</a>
                <a href="#" class="block py-2 px-4 text-sm text-gray-600 hover:bg-indigo-50 rounded">Contact</a>
            </div>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="bg-white">
        <div class="container mx-auto px-6 py-16 md:py-24 text-center">
            <h1 class="text-4xl md:text-6xl font-bold text-gray-800 leading-tight">Summer Collection</h1>
            <p class="text-lg md:text-xl text-gray-600 mt-4 max-w-3xl mx-auto">Discover the latest trends in fashion. Fresh styles for a vibrant season. Quality and comfort guaranteed.</p>
            <button class="btn-primary font-bold py-3 px-8 mt-8 rounded-full text-lg shadow-lg hover:shadow-xl transition-shadow">Shop Now</button>
        </div>
    </section>

    <!-- Products Section -->
    <main id="products" class="container mx-auto px-6 py-12">
        <h2 class="text-3xl font-bold text-center text-gray-800 mb-8">Featured Products</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
            <!-- Product Card 1 -->
            <div class="product-card bg-white rounded-lg shadow-lg overflow-hidden">
                <img src="https://p...content-available-to-author-only...d.co/400x400/E2E8F0/4A5568?text=Product+1" alt="Modern Watch" class="w-full h-64 object-cover" onerror="this.onerror=null;this.src='https://p...content-available-to-author-only...d.co/400x400/CCCCCC/FFFFFF?text=Image+Not+Found';">
                <div class="p-6">
                    <h3 class="text-xl font-semibold text-gray-800">Modern Watch</h3>
                    <p class="text-gray-600 mt-2">Sleek and stylish watch for everyday use.</p>
                    <div class="flex justify-between items-center mt-4">
                        <span class="text-2xl font-bold text-indigo-600">$199</span>
                        <button class="btn-primary py-2 px-4 rounded-lg font-medium">Add to Cart</button>
                    </div>
                </div>
            </div>

            <!-- Product Card 2 -->
            <div class="product-card bg-white rounded-lg shadow-lg overflow-hidden">
                <img src="https://p...content-available-to-author-only...d.co/400x400/D1D5DB/374151?text=Product+2" alt="Leather Backpack" class="w-full h-64 object-cover" onerror="this.onerror=null;this.src='https://p...content-available-to-author-only...d.co/400x400/CCCCCC/FFFFFF?text=Image+Not+Found';">
                <div class="p-6">
                    <h3 class="text-xl font-semibold text-gray-800">Leather Backpack</h3>
                    <p class="text-gray-600 mt-2">Durable and spacious for all your adventures.</p>
                    <div class="flex justify-between items-center mt-4">
                        <span class="text-2xl font-bold text-indigo-600">$129</span>
                        <button class="btn-primary py-2 px-4 rounded-lg font-medium">Add to Cart</button>
                    </div>
                </div>
            </div>

            <!-- Product Card 3 -->
            <div class="product-card bg-white rounded-lg shadow-lg overflow-hidden">
                <img src="https://p...content-available-to-author-only...d.co/400x400/9CA3AF/1F2937?text=Product+3" alt="Wireless Headphones" class="w-full h-64 object-cover" onerror="this.onerror=null;this.src='https://p...content-available-to-author-only...d.co/400x400/CCCCCC/FFFFFF?text=Image+Not+Found';">
                <div class="p-6">
                    <h3 class="text-xl font-semibold text-gray-800">Wireless Headphones</h3>
                    <p class="text-gray-600 mt-2">Immersive sound experience, noise-cancelling.</p>
                    <div class="flex justify-between items-center mt-4">
                        <span class="text-2xl font-bold text-indigo-600">$249</span>
                        <button class="btn-primary py-2 px-4 rounded-lg font-medium">Add to Cart</button>
                    </div>
                </div>
            </div>

            <!-- Product Card 4 -->
            <div class="product-card bg-white rounded-lg shadow-lg overflow-hidden">
                <img src="https://p...content-available-to-author-only...d.co/400x400/6B7280/111827?text=Product+4" alt="Stylish Sunglasses" class="w-full h-64 object-cover" onerror="this.onerror=null;this.src='https://p...content-available-to-author-only...d.co/400x400/CCCCCC/FFFFFF?text=Image+Not+Found';">
                <div class="p-6">
                    <h3 class="text-xl font-semibold text-gray-800">Stylish Sunglasses</h3>
                    <p class="text-gray-600 mt-2">Protect your eyes with style and elegance.</p>
                    <div class="flex justify-between items-center mt-4">
                        <span class="text-2xl font-bold text-indigo-600">$89</span>
                        <button class="btn-primary py-2 px-4 rounded-lg font-medium">Add to Cart</button>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-800 text-white">
        <div class="container mx-auto px-6 py-10">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-lg font-semibold">About Us</h3>
                    <p class="mt-4 text-gray-400">Your one-stop shop for the latest trends and styles. We are committed to quality and customer satisfaction.</p>
                </div>
                <div>
                    <h3 class="text-lg font-semibold">Categories</h3>
                    <ul class="mt-4 space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white">Men</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Women</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Accessories</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Shoes</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-semibold">Support</h3>
                    <ul class="mt-4 space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Shipping</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Returns</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Contact Us</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-semibold">Stay Connected</h3>
                    <div class="flex mt-4 space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-pinterest"></i></a>
                    </div>
                </div>
            </div>
            <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-500">
                <p>&copy; 2024 GeminiStore. All Rights Reserved.</p>
            </div>
        </div>
    </footer>

    <script>
        // JavaScript for mobile menu toggle
        const mobileMenuButton = document.querySelector('.mobile-menu-button');
        const mobileMenu = document.querySelector('.mobile-menu');

        mobileMenuButton.addEventListener('click', () => {
            // Toggles the 'hidden' class from Tailwind CSS
            mobileMenu.classList.toggle('hidden');
        });
    </script>
</body>
</html>
stdout 
Standard output is empty
https://ideone.com/Bifbsr
language:
Java (HotSpot 12)
created:
4 days ago
visibility:
public

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!