Página de inicio para un sitio de portafolio

2,705 alqsdeus

Abrir en el editor Publica tu código

Página de inicio para un sitio de portafolio

Recomendado

14 December 2024

Un código de ab_andybv

6 February 2025

Un código de nathphr816

8 May 2026

piloto de F1

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