Interfaccia utente di DarkSpace

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

5 June 2025

Menu di navigazione con pulsanti di scelta CSS

4 December 2024

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cosmic Experience</title>
    <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@300;400;500;600;700;800&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <header class="header">
        <a href="#" class="logo">YOUR LOGO</a>
        <nav class="nav">
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Services</a>
            <a href="#">Contact</a>
        </nav>
    </header>

<div class="container">
            <div class="content">
                <span class="badge">LIMITED TIME OFFER</span>
                <h1>EXPLORE THE<br>COSMIC<br>UNIVERSE</h1>
                <p class="subtitle">Discover the mysteries of space with our exclusive premium access to stunning cosmic
                    imagery and data.</p>

<div class="features">
                    <div class="feature">
                        <div class="feature-icon">✓</div>
                        <div class="feature-text">4K Ultra HD Quality</div>
                    </div>
                    <div class="feature">
                        <div class="feature-icon">✓</div>
                        <div class="feature-text">Unlimited Downloads</div>
                    </div>
                    <div class="feature">
                        <div class="feature-icon">✓</div>
                        <div class="feature-text">Expert Commentary</div>
                    </div>
                    <div class="feature">
                        <div class="feature-icon">✓</div>
                        <div class="feature-text">Weekly Updates</div>
                    </div>
                </div>

<div class="buttons">
                    <a href="#" class="btn btn-primary">Get Started Now</a>
                    <a href="#" class="btn btn-secondary">Learn More</a>
                </div>
            </div>

<div class="product-card">
                <div class="card-header">
                    <div class="header-dot"></div>
                    <div class="header-dot"></div>
                    <div class="header-dot"></div>
                </div>
                <div class="card-content">
                    <h2 class="card-title">Cosmic Explorer Pro</h2>
                    <p class="card-text">Access the universe like never before with our premium suite of tools and HD
                        imagery</p>
                    <a href="#" class="card-button">Launch Explorer</a>
                </div>
            </div>
        </div>

</main>

</html>

CSS

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }
        
        body {
            background-color: #1a1a3a;
            color: #ffffff;
            overflow-x: hidden;
            min-height: 100vh;
        }
        
        .header {
            padding: 18px 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 100;
            background-color: transparent;
            
        }
        
        .logo {
            font-size: 1.3rem;
            font-weight: 700;
            color: #ffffff;
            text-decoration: none;
            letter-spacing: 1px;
        }
        
        .nav {
            display: flex;
            gap: 25px;
        }
        
        .nav a {
            color: #ffffff;
            text-decoration: none;
            font-weight: 500;
            font-size: 0.95rem;
            padding: 5px 0;
            transition: all 0.3s ease;
        }
        
        .nav a:hover {
            color: #5ce1e6;
        }
        
        .hero {
            width: 100%;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            background: linear-gradient(180deg, #1a1a3a 0%, #252568 90%);
            padding: 80px 5% 30px;
        }
        
        .stars {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }
        
        .star {
            position: absolute;
            background-color: #00d2ff;
            border-radius: 50%;
            animation: twinkle 4s infinite ease-in-out;
        }
        
        @keyframes twinkle {
            0%, 100% { opacity: 0.2; }
            50% { opacity: 1; }
        }
        
        .moon {
            position: absolute;
            top: 20%;
            right: 15%;
            width: 100px;
            height: 100px;
            background-color: #c8b6e2;
            border-radius: 50%;
            box-shadow: 0 0 40px rgba(200, 182, 226, 0.7);
            pointer-events: none;
        }
        
        .landscape {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 15vh;
            background-color: #000000;
            clip-path: polygon(0% 40%, 15% 60%, 33% 40%, 45% 60%, 60% 30%, 80% 55%, 100% 25%, 100% 100%, 0% 100%);
            opacity: 0.7;
        }
        
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            align-items: center;
            position: relative;
            z-index: 2;
        }
        
        .content {
            max-width: 550px;
        }
        
        .badge {
            display: inline-block;
            background-color: rgba(92, 225, 230, 0.15);
            color: #5ce1e6;
            padding: 8px 16px;
            border-radius: 30px;
            font-size: 0.8rem;
            font-weight: 600;
            margin-bottom: 25px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
        
        h1 {
            font-size: 3.8rem;
            line-height: 1.1;
            margin-bottom: 20px;
            color: #ffffff;
            letter-spacing: 1px;
            font-weight: 800;
            text-transform: uppercase;
        }
        
        .subtitle {
            font-size: 1rem;
            font-weight: 300;
            color: #cccccc;
            margin-bottom: 25px;
            line-height: 1.6;
        }
        
        .features {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin: 25px 0 35px;
        }
        
        .feature {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .feature-icon {
            width: 22px;
            height: 22px;
            background-color: rgba(92, 225, 230, 0.15);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #5ce1e6;
            font-size: 0.8rem;
        }
        
        .feature-text {
            font-size: 0.9rem;
            font-weight: 400;
            color: #ffffff;
        }
        
        .buttons {
            display: flex;
            gap: 15px;
        }
        
        .btn {
            display: inline-block;
            padding: 12px 25px;
            border-radius: 8px;
            font-weight: 600;
            font-size: 0.9rem;
            text-decoration: none;
            letter-spacing: 0.5px;
            transition: all 0.3s ease;
        }
        
        .btn-primary {
            background-color: #5ce1e6;
            color: #1a1a3a;
            border: none;
        }
        
        .btn-primary:hover {
            background-color: #40d0d5;
            transform: translateY(-3px);
        }
        
        .btn-secondary {
            background-color: transparent;
            color: #ffffff;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        
        .btn-secondary:hover {
            background-color: rgba(255, 255, 255, 0.1);
            border-color: #ffffff;
            transform: translateY(-3px);
        }
        
        .product-card {
            width: 100%;
            max-width: 400px;
            background-color: rgba(40, 40, 90, 0.5);
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            margin-left: auto;
        }
        
        .card-header {
            height: 35px;
            background-color: rgba(26, 26, 58, 0.8);
            display: flex;
            align-items: center;
            padding: 0 15px;
            gap: 5px;
        }
        
        .header-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #5ce1e6;
        }
        
        .card-content {
            padding: 30px 25px;
            text-align: center;
        }
        
        .card-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 15px;
            color: #ffffff;
        }
        
        .card-text {
            font-size: 0.85rem;
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.5;
            margin-bottom: 20px;
        }
        
        .card-button {
            display: inline-block;
            padding: 10px 20px;
            background-color: #5ce1e6;
            color: #1a1a3a;
            border-radius: 5px;
            font-size: 0.85rem;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
        }
        
        .card-button:hover {
            background-color: #40d0d5;
            transform: translateY(-3px);
        }
        
        .footer {
            position: absolute;
            bottom: 15px;
            width: 100%;
            text-align: center;
            font-size: 0.75rem;
            color: rgba(255, 255, 255, 0.6);
            z-index: 10;
            font-weight: 300;
        }
        .footer a{
            color: #5ce1e6;
            text-decoration: none;
        }
        
        @media (max-width: 1024px) {
            .container {
                max-width: 90%;
                gap: 30px;
            }
            
            h1 {
                font-size: 3.2rem;
            }
            
            .product-card {
                max-width: 380px;
            }
        }
        
        @media (max-width: 900px) {
            .container {
                grid-template-columns: 1fr;
                padding: 100px 20px 40px;
            }
            
            h1 {
                font-size: 3rem;
            }
            
            .content {
                max-width: 100%;
                order: 1;
            }
            
            .product-card {
                margin: 0 auto 30px;
                order: 0;
            }
            
            .features {
                max-width: 500px;
                margin: 25px auto 35px;
            }
        }
        
        @media (max-width: 768px) {
            .hero {
                padding: 80px 20px 30px;
            }
            
            h1 {
                font-size: 2.7rem;
            }
            
            .moon {
                width: 80px;
                height: 80px;
                top: 15%;
            }
        }
        
        @media (max-width: 600px) {
            .header {
                padding: 15px 20px;
            }
            
            .logo {
                font-size: 1.1rem;
            }
            
            .nav {
                gap: 15px;
            }
            
            .nav a {
                font-size: 0.85rem;
            }
            
            h1 {
                font-size: 2.2rem;
            }
            
            .subtitle {
                font-size: 0.9rem;
            }
            
            .features {
                grid-template-columns: 1fr;
                gap: 15px;
            }
            
            .buttons {
                flex-direction: column;
                max-width: 250px;
                margin: 0 auto;
            }
        }
        
        @media (max-width: 400px) {
            h1 {
                font-size: 1.9rem;
            }
            
            .badge {
                font-size: 0.7rem;
                padding: 6px 12px;
            }
            
            .card-title {
                font-size: 1.3rem;
            }
        }

Interfaccia utente di DarkSpace

Consigliato

Un codice di alejandrokundrah

Menu di navigazione con pulsanti di scelta CSS

Buon Albero di Natale!

HTML

CSS

JS

Consigliato

Un codice di alejandrokundrah

Menu di navigazione con pulsanti di scelta CSS

Buon Albero di Natale!

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS