पोर्टफोलियो सामान्य (चरण दर चरण)

2337 robustbug755

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

18 October 2024

HTML CSS पोर्टफोलियो वेबसाइट टेम्पलेट

18 November 2024

आधुनिक पोर्टफोलियो वेबसाइट टेम्पलेट

22 August 2024

पोर्टफोलियो वेबसाइट-एलेक्स

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

अनुशंसित

HTML CSS पोर्टफोलियो वेबसाइट टेम्पलेट

आधुनिक पोर्टफोलियो वेबसाइट टेम्पलेट

पोर्टफोलियो वेबसाइट-एलेक्स

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS