securearray494 द्वारा एक कोड

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

30 March 2025

<!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>

securearray494 द्वारा एक कोड

अनुशंसित

ytr3d3 द्वारा एक कोड

सहराविलौए द्वारा एक कोड

Liamgilles76 द्वारा एक कोड

HTML

CSS

JS

अनुशंसित

ytr3d3 द्वारा एक कोड

सहराविलौए द्वारा एक कोड

Liamgilles76 द्वारा एक कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS