Plantilla de sitio web de portafolio moderno

1663 lebdev

Abrir en el editor Publica tu código

Plantilla de sitio web de portafolio moderno

Recomendado

25 August 2024

Exploración de productos de animación de interfaz de usuario

5 June 2025

Un código de alejandrokundrah

15 November 2025

Formulario de transferencia de monedas con selección de pago

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

Exploración de productos de animación de interfaz de usuario

Un código de alejandrokundrah

Formulario de transferencia de monedas con selección de pago

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS