Modèle de site Web de portefeuille moderne

1264 lebdev

Ouvrir dans l'éditeur Publiez votre code

Modèle de site Web de portefeuille moderne

Recommandé

14 September 2024

Basculement des yeux de Minion

14 June 2024

Titre de l'animation

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

Modèle de site Web de portefeuille moderne

Recommandé

Basculement des yeux de Minion

Effet de carte Flips 3D

Titre de l'animation

HTML

CSS

JS

Recommandé

Basculement des yeux de Minion

Effet de carte Flips 3D

Titre de l'animation

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS