पोर्टफोलियो साइट के लिए मुखपृष्ठ

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

अनुशंसित

22 May 2025

रफ़ल एमुलेटर के साथ फ़्लैश गेम प्लेयर

HTML

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>homepage for a portfolio site</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1 class="spotlight">Hello, I'm Sabrinna</h1>
        <p class="text">Welcome to my portfolio! I’m passionate about creating stunning designs that not only captivate the eye but also enhance user experience. Here, you will find a curated collection of my work, showcasing my skills in web design, graphic design, and branding.</p>
        <p class="text">I invite you to explore each project in detail. Click on the buttons below to discover more about my design philosophy, process, and the stories behind each piece. Your journey into my creative world starts here—let's dive in!</p>
        <div class="button-container">
            <a href="talk.html" class="button button-white">Let's Talk</a> 
            <a href="serv.html" class="button button-blue">Request a Service</a>
        </div>
    </div>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #000;
    color: #e0e0e0;
    overflow: hidden;
}

.container {
    text-align: center;
    max-width: 600px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease-out forwards;
}

.spotlight {
    font-size: 2.8em;
    font-weight: bold;
    color: transparent;
    background: linear-gradient(90deg, transparent, #c4c4c4, transparent);
    background-size: 200% 200%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: spotlightMove 2s ease-in-out infinite alternate;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease-out forwards, spotlightMove 3s ease-in-out infinite alternate;
}

.text {
    font-size: 1.1em;
    line-height: 1.6;
    color: #bfbfbf;
    margin-top: 20px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.4s;
}

.button-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.6s;
}

.button {
    padding: 10px 20px;
    border-radius: 25px;
    border: none;
    cursor: pointer;
    font-size: 1em;
    transition: all 0.3s ease;
    text-decoration: none; 
}

.button-white {
    background-color: #ffffff;
    color: #000000;
}

.button-blue {
    background-color: #1a73e8;
    color: #ffffff;
}

.button:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

@keyframes spotlightMove {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

पोर्टफोलियो साइट के लिए मुखपृष्ठ

अनुशंसित

3D वेबसाइट

पेज के बारे में

रफ़ल एमुलेटर के साथ फ़्लैश गेम प्लेयर

HTML

CSS

JS

अनुशंसित

3D वेबसाइट

पेज के बारे में

रफ़ल एमुलेटर के साथ फ़्लैश गेम प्लेयर

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS