Webleb - Extraits de Code - Un code par securearray494

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>

Un code par securearray494

Recommandé

Code d'icône sociale en 3D

Un code de Mete

Un code par ribeirosarah905

HTML

CSS

JS

Recommandé

Code d'icône sociale en 3D

Un code de Mete

Un code par ribeirosarah905

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS