Interface do usuário DarkSpace

Abrir no Editor Publique Seu Código

Recomendado

10 December 2025

Exemplo de jogo de física ragdoll em Matter.js

25 November 2025

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

Interface do usuário DarkSpace

Recomendado

Exemplo de jogo de física ragdoll em Matter.js

Gado Louco 3D

HTML, Login Registrar animado

HTML

CSS

JS

Recomendado

Exemplo de jogo de física ragdoll em Matter.js

Gado Louco 3D

HTML, Login Registrar animado

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS