Um código por securearray494

1444 securearray494

Abrir no Editor Video Publique Seu Código

Recomendado

25 June 2025

Um código de Mete

27 December 2024

Um código por efficientfunction480

19 October 2024

Código da barra de navegação HTML CSS

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Developer Landing</title>
    <style>
        body {
            margin: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #1a1a1a;
            color: #e0e0e0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            overflow: hidden; /* Prevent scrollbars */
        }

.container {
            text-align: center;
            position: relative;
        }

.title {
            font-size: 3em;
            font-weight: bold;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
            letter-spacing: 2px;
            color: #64ffda; /* Teal accent */
        }

.subtitle {
            font-size: 1.2em;
            color: #a8b2d1;
            margin-bottom: 40px;
        }

.button {
            background-color: #64ffda;
            color: #1a1a1a;
            padding: 15px 30px;
            border: none;
            border-radius: 5px;
            font-size: 1em;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s ease;
            text-decoration: none;
            display: inline-block;
        }

.button:hover {
            background-color: #4ac9b7;
            transform: translateY(-3px);
        }

.background-circles {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none; /* Allow interaction with content */
        }

.circle {
            position: absolute;
            border-radius: 50%;
            background: linear-gradient(135deg, rgba(100, 255, 218, 0.1), rgba(100, 255, 218, 0.05));
            animation: float 6s infinite alternate;
        }

.circle:nth-child(1) {
            width: 150px;
            height: 150px;
            top: 10%;
            left: 10%;
            animation-delay: 0s;
        }

.circle:nth-child(2) {
            width: 80px;
            height: 80px;
            top: 60%;
            right: 15%;
            animation-delay: 2s;
        }

.circle:nth-child(3) {
            width: 200px;
            height: 200px;
            bottom: 5%;
            left: 30%;
            animation-delay: 4s;
        }

@keyframes float {
            0% {
                transform: translateY(0);
            }
            100% {
                transform: translateY(-20px);
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="background-circles">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
        <h1 class="title">CodeCrafted</h1>
        <p class="subtitle">Building Digital Experiences with Precision and Passion.</p>
        <a href="#projects" class="button">View Projects</a>
    </div>
</body>
</html>

Recomendado

Um código de Mete

Um código por efficientfunction480

Código da barra de navegação HTML CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS