Homepage für eine Portfolio-Site

1609 alqsdeus

Im Editor öffnen Veröffentlichen Sie Ihren Code

Empfohlen

26 August 2025

HTML-Vorlage für Filmwebsites

25 November 2024

Responsive Website für Studentendaten

20 August 2025

HTML-CSS-Vorlage für Anmelde- und Registrierungsformular

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

Empfohlen

HTML-Vorlage für Filmwebsites

Responsive Website für Studentendaten

HTML-CSS-Vorlage für Anmelde- und Registrierungsformular

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS