Interfaz de usuario de DarkSpace

Abrir en el editor Publica tu código

Recomendado

17 August 2024

Un código de mamadoudiallo34204

24 August 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;
            }
        }

Interfaz de usuario de DarkSpace

Recomendado

Juego de Sudokus

Un código de mamadoudiallo34204

Producto deslizante

HTML

CSS

JS

Recomendado

Juego de Sudokus

Un código de mamadoudiallo34204

Producto deslizante

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS