Webleb - HTML UI Elements - Portfolio generale (passo dopo passo)

HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfólio</title>
    <link rel="stylesheet" href="styles.css">
    <head>
        
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    </head>

<body>
        <header>
            <h1>Meu Portfólio</h1>
            <nav>
                <ul>
                    <li><a href="#sobre">Sobre</a></li>
                    <li><a href="#projetos">Projetos</a></li>
                    <li><a href="#contato">Contato</a></li>
                </ul>
            </nav>
            <i id="toggle-theme" class="fas fa-adjust theme-icon"></i>
        </header>
        
    </body>

<section id="sobre">
        <h2>Sobre Mim</h2>
        <p>Descrição sobre você e suas habilidades.</p>
    </section>

<section id="projetos">
        <h2>Projetos</h2>
        <div class="projetos-container">
            
            <div class="projeto" data-category="web">
                <img src="https://cdn.discordapp.com/attachments/1277796210916462645/1289764974872498318/Moletom.png?ex=671eecbc&is=671d9b3c&hm=7a5fe7af545d6cd7229d9787538bc5b4fe9b3c40579a2a2b528c949b53d7bd18&" alt="Projeto 1">
                <h3>Projeto 1</h3>
                <p>Descrição do projeto 1.</p>
            </div>
            
            <div class="projeto" data-category="web">
                <img src="https://cdn.discordapp.com/attachments/1277796210916462645/1289764882199220234/Mackbook_Pro.png?ex=671eeca6&is=671d9b26&hm=f29756222fbf5aa18a6fcfcf1a54c286f44e8a21025e65c803d22cf9e3fae8ea&" alt="Projeto 2">
                <h3>Projeto 2</h3>
                <p>Descrição do projeto 2.</p>
            </div>
            
            <div class="projeto" data-category="web">
                <img src="https://cdn.discordapp.com/attachments/1277796210916462645/1289764869255598101/GARRAFA_3.png?ex=671eeca3&is=671d9b23&hm=976674f0d9011e00106a1cc9cf51bf82caaad0f885e13079a30680b3f6dab80b&" alt="Projeto 3">
                <h3>Projeto 3</h3>
                <p>Descrição do projeto 3.</p>
            </div>
            
        </div>
    </section>

<section id="contato">
        <section id="contato">
            <h2>Contato</h2>
            <a href="https://example.com/contact" class="contato-button">
                <i class="fas fa-envelope"></i> 
            </a>
        </section>
    </section>

CSS

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

:root {
    --primary-color: #111321; /* Yellow for primary elements */
    --background-color: #b4a196; /* Light brown background */
    --text-color: #111321; /* Dark text color */
    --project-background-color: #BAC2FE; /* Light blue for project backgrounds */
    --button-background-color: #fff; /* White button color for light mode */
    --button-text-color: #111321; /* Dark text color for light mode */
}

body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--background-color);
}

header {
    background-color: var(--primary-color);
    color: #fff;
    padding: 10px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.55);
    position: relative;
    border-radius: 30px; /* Rounded corners */
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    margin-top: 7px; /* Add margin to move the header down */
}

header:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 15px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    transition: border-bottom 0.3s;
    position: relative;
}

nav ul li a::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #fff;
    transition: width 0.3s;
    position: absolute;
    bottom: -2px;
    left: 0;
}

nav ul li a:hover::after {
    width: 100%;
}

#banner img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

section {
    padding: 40px 20px;
    text-align: center;
}

.categorias {
    margin: 20px 0;
    text-align: center;
}

.categoria {
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    padding: 10px 20px;
    margin: 5px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.2s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.categoria:hover {
    background-color: #e68900;
    transform: translateY(-3px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

.projetos-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.projeto {
    margin: 10px;
    padding: 20px;
    width: 250px;
    background-color: var(--project-background-color);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.55); /* Sombra leve */
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    position: relative;
    overflow: hidden;
    transform: translateY(10px);
    opacity: 0;
    animation: fadeInUp 0.5s forwards;
    animation-delay: calc(var(--i) * 0.1s);
}

.projeto:hover {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.projeto::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    border: 2px solid transparent;
    box-sizing: border-box;
    transition: border-color 0.4s ease;
}

.projeto:hover::before {
    border-color: var(--highlight-color, rgb(161, 161, 161)); /* Borda laranja */
    animation: borderExplosion 1s ease forwards;
}

/* Efeito de explosão da borda */
@keyframes borderExplosion {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); /* Começo da explosão */
    }
    50% {
        box-shadow: 0 0 10px 10px rgba(190, 190, 190, 0.2); /* Expansão */
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 165, 0, 0); /* Retorno */
    }
}

.projeto::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.15), transparent 70%);
    transform: scale(0);
    transition: transform 0.5s ease;
    border-radius: 50%;
    opacity: 0;
}

.projeto:hover::after {
    transform: scale(1.3); /* Brilho suave */
    opacity: 1;
}

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

footer {
    background-color: var(--primary-color);
    color: #fff;
    text-align: center;
    padding: 20px;
    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1);
}

/* Tema escuro */
body.dark-mode {
    --background-color: #2B2B2B; /* Dark gray background */
    --text-color: #FFFFFF; /* White text color */
    --project-background-color: #2B2B2B; /* Dark gray for project backgrounds */
    --button-background-color: #2B2B2B; /* Dark gray button background */
    --button-text-color: #FFFFFF; /* White button text color */
    --primary-color: #25D162; /* Green for primary elements */
}

.theme-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    font-size: 24px;
    color: #fff;
    transition: color 0.3s;
}

.theme-icon:hover {
    color: var(--primary-color);
}

.projeto img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 10px;
}

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

.contato-button {
    position: relative;
    background-color: var(--button-background-color);
    color: var(--button-text-color);
    border: none;
    padding: 15px 30px;
    margin: 20px 0;
    cursor: pointer;
    border-radius: 25px;
    font-size: 16px;
    font-weight: bold;
    overflow: hidden;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.contato-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 25px;
    box-sizing: border-box;
    border: 2px solid var(--primary-color);
    transform: scale(1);
    opacity: 1;
    animation: pulseBorder 2s infinite;
}

@keyframes pulseBorder {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.0;
    }
}

@keyframes blinkEffect {
    0%, 100% {
        background-color: var(--button-background-color);
    }
    50% {
        background-color: var(--button-background-color-hover);
    }
}

.contato-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    animation: blinkEffect 1.5s infinite;
}

Portfolio generale (passo dopo passo)

Consigliato

Pagina di destinazione del portfolio

Sito web del portfolio completato

Modello di sito Web moderno per portfolio

HTML

CSS

JS

Consigliato

Pagina di destinazione del portfolio

Sito web del portfolio completato

Modello di sito Web moderno per portfolio

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS