homepage per un sito portfolio

2085 alqsdeus

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

27 October 2024

Portfolio generale (passo dopo passo)

6 March 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);
    }
}

homepage per un sito portfolio

Consigliato

Portfolio generale (passo dopo passo)

Un codice di lebdev

Un codice di alejandrokundrah

HTML

CSS

JS

Consigliato

Portfolio generale (passo dopo passo)

Un codice di lebdev

Un codice di alejandrokundrah

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS