Modelo de site de portfólio moderno

1774 lebdev

Abrir no Editor Video Publique Seu Código

Recomendado

29 May 2025

Painel de administração do AdminHub v2.1

17 July 2025

Formulário de inscrição de login rotativo 3D HTML CSS

29 June 2025

Modelo HTML para blog e podcast em turco

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Out-of-the-Box Portfolio</title>

</head>
<body>
    <header>
        <div class="container">
            <h1 class="logo">Your Name</h1>
            <nav>
                <ul>
                    <li><a href="#about">About</a></li>
                    <li><a href="#skills">Skills</a></li>
                    <li><a href="#projects">Projects</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

<section id="hero">
        <div class="container">
            <div class="hero-content">
                <h2>Hi, I'm <span class="highlight">Your Name</span></h2>
                <p>Creating immersive web experiences with passion and creativity.</p>
                <a href="#projects" class="cta-button">See My Work</a>
            </div>
            <div class="hero-animation">
                <div class="circle"></div>
                <div class="circle"></div>
                <div class="circle"></div>
            </div>
        </div>
    </section>

<section id="about">
        <div class="container">
            <h2>About Me</h2>
            <p>I’m a creative developer with a knack for innovative solutions. I specialize in crafting sleek, user-friendly websites that merge aesthetics with functionality.</p>
        </div>
    </section>

<section id="skills">
        <div class="container">
            <h2>Skills</h2>
            <div class="skills-grid">
                <div class="skill-card">
                    <h3>HTML</h3>
                    <p>Building clean, semantic, and accessible markup.</p>
                </div>
                <div class="skill-card">
                    <h3>CSS</h3>
                    <p>Designing responsive and visually appealing layouts.</p>
                </div>
                <div class="skill-card">
                    <h3>JavaScript</h3>
                    <p>Adding interactivity and functionality.</p>
                </div>
                <div class="skill-card">
                    <h3>React</h3>
                    <p>Creating modern, dynamic web applications.</p>
                </div>
            </div>
        </div>
    </section>

<section id="projects">
        <div class="container">
            <h2>Projects</h2>
            <div class="projects-grid">
                <div class="project-card">
                    <h3>Project 1</h3>
                    <p>A stunning website showcasing sleek animations.</p>
                </div>
                <div class="project-card">
                    <h3>Project 2</h3>
                    <p>A full-stack application with a seamless user interface.</p>
                </div>
                <div class="project-card">
                    <h3>Project 3</h3>
                    <p>An interactive data visualization tool.</p>
                </div>
            </div>
        </div>
    </section>

<section id="contact">
        <div class="container">
            <h2>Contact Me</h2>
            <p>Let’s collaborate to bring your ideas to life!</p>
            <a href="mailto:yourname@example.com" class="cta-button">Get in Touch</a>
        </div>
    </section>

<footer>
        <p>© 2024 Your Name. All rights reserved.</p>
    </footer>
</body>
</html>

CSS

/* General Reset */
body, h1, h2, p, ul, li {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: #444;
    background: #f5f5f5;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Header */
header {
    background: linear-gradient(135deg, #1e3a8a, #6366f1);
    padding: 15px 0;
    color: white;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

header ul {
    list-style: none;
    display: flex;
}

header ul li {
    margin: 0 10px;
}

header ul li a {
    text-decoration: none;
    color: white;
    font-weight: bold;
    transition: color 0.3s;
}

header ul li a:hover {
    color: #d1d5db;
}

/* Hero Section */
#hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 100px 20px;
    text-align: center;
    background: linear-gradient(135deg, #6a11cb, #2575fc);
    color: white;
    position: relative;
    overflow: hidden;
    width: 100%;
}

#hero .highlight {
    color: #ffd700;
}

.hero-content {
    max-width: 800px;
}

.hero-animation {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-animation .circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    animation: float 6s infinite;
}

.hero-animation .circle:nth-child(1) {
    width: 100px;
    height: 100px;
    top: 20%;
    left: 10%;
}

.hero-animation .circle:nth-child(2) {
    width: 150px;
    height: 150px;
    top: 50%;
    right: 20%;
}

.hero-animation .circle:nth-child(3) {
    width: 200px;
    height: 200px;
    bottom: 10%;
    left: 40%;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

/* About Section */
#about, #skills, #projects, #contact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 60px 20px;
    width: 100%;
    max-width: 1200px;
}

#about h2, #skills h2, #projects h2, #contact h2 {
    margin-bottom: 20px;
    font-size: 28px;
    color: #2575fc;
}

#about p {
    max-width: 800px;
}

/* Skills Section */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    width: 100%;
}

.skill-card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    text-align: center;
}

.skill-card:hover {
    transform: translateY(-10px);
}

/* Projects Section */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    width: 100%;
}

.project-card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    text-align: center;
}

.project-card:hover {
    transform: translateY(-10px);
}

/* Contact Section */
.cta-button {
    display: inline-block;
    padding: 10px 20px;
    background: #6366f1;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s;
}

.cta-button:hover {
    background: #4f46e5;
}

/* Footer */
footer {
    background: #1e293b;
    color: white;
    text-align: center;
    padding: 15px 0;
    width: 100%;
}

Recomendado

Painel de administração do AdminHub v2.1

Formulário de inscrição de login rotativo 3D HTML CSS

Modelo HTML para blog e podcast em turco

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS