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

अनुशंसित

3 December 2024

<!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 द्वारा एक कोड

अनुशंसित

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

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

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

HTML

CSS

JS

अनुशंसित

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

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

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

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS