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

संपादक में खोलें अपना कोड प्रकाशित करें क्या आपको एक वेबसाइट चाहिए?

अनुशंसित

25 August 2024

ऑनस्क्रॉल एनिमेशन: स्क्रॉलमैजिक के साथ गतिशील सामग्री स्क्रॉल

15 May 2025

<!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);
    }
}

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

अनुशंसित

ऑनस्क्रॉल एनिमेशन: स्क्रॉलमैजिक के साथ गतिशील सामग्री स्क्रॉल

पोर्टफोलियो

वेबसाइट

HTML

CSS

JS

अनुशंसित

ऑनस्क्रॉल एनिमेशन: स्क्रॉलमैजिक के साथ गतिशील सामग्री स्क्रॉल

पोर्टफोलियो

वेबसाइट

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS