Page de destination du développeur HTML CSS

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

16 October 2025

Exemple d'animation de chargement CSS

9 December 2024

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Name - Developer</title>
    <style>
        /* --- Reset & Basic Styling --- */
        body, h1, h2, p, ul, li {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Roboto Mono', monospace; /* Modern, techy font */
        }

body {
            background-color: #1a1a2e; /* Dark, techy background */
            color: #ffffff; /* Light text */
            line-height: 1.6;
        }

.container {
            width: 80%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem 0;
        }

/* --- Header & Navigation --- */
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 0;
            border-bottom: 2px solid #4e4e8e; /* Subtle, futuristic border */
        }

.logo {
            font-size: 2rem;
            font-weight: bold;
            text-decoration: none;
            color: #ffffff;
            transition: color 0.3s ease;
        }
        .logo:hover{
            color:#9067c6
        }

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

nav ul li {
            margin-left: 2rem;
        }

nav a {
            text-decoration: none;
            color: #ffffff;
            transition: color 0.3s ease;
            position: relative;
            display: inline-block; /* Needed for the underline effect */
            padding-bottom: 3px;  /* Space for the underline */
        }

nav a::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 2px; /* Thickness of the underline */
            background-color: #9067c6; /* Underline color */
            transform: scaleX(0);  /* Initially hidden */
            transform-origin: right;
            transition: transform 0.3s ease;
        }

nav a:hover::after {
            transform: scaleX(1); /* Show on hover */
            transform-origin: left;
        }

/* --- Hero Section --- */
        .hero {
            text-align: center;
            padding: 6rem 0;
            position: relative; /* For the background effect */
            overflow: hidden;    /* Clip the background circles */

}

.hero-title {
            font-size: 3.5rem;
            margin-bottom: 1rem;
            position: relative; /* For z-index */
            z-index: 2;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /*Text Shadow */
        }

.hero-subtitle {
            font-size: 1.5rem;
            color: #cccccc;
            margin-bottom: 2rem;
            position: relative;
            z-index: 2;
             text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /*Text Shadow */

}

.hero-bg-element {
            position: absolute;
            border-radius: 50%; /* Make them circles */
            opacity: 0.1;   /* Subtle */
            z-index: 1;     /* Behind the text */
        }

.circle-1 {
            width: 300px;
            height: 300px;
            background-color: #9067c6;
            top: -100px;
            left: -100px;
             animation: moveCircle1 15s infinite alternate ease-in-out;
        }
        .circle-2 {
            width: 200px;
            height: 200px;
            background-color: #4e4e8e;
            bottom: -50px;
            right: 100px;
            animation: moveCircle2 12s infinite alternate ease-in-out;

}

.btn {
            display: inline-block;
            padding: 1rem 2rem;
            background-color: #9067c6;
            color: #ffffff;
            text-decoration: none;
            border-radius: 30px; /* Rounded corners */
            transition: background-color 0.3s ease, transform 0.2s ease;  /* Smooth transition */
            border: none; /* Remove default button border */
            font-size: 1.1rem;
            cursor: pointer;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Subtle shadow */
        }

.btn:hover {
            background-color: #734b9f;
            transform: translateY(-3px); /* Slight lift on hover */
        }

/* --- About Section --- */
        .about {
            padding: 4rem 0;
            background-color: #24243e; /* Slightly different background */
        }

.about h2 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            text-align: center;
             text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /*Text Shadow */
        }

.about p {
            font-size: 1.1rem;
            line-height: 1.8;
            margin-bottom: 1rem;
        }

.about-content{
          display:flex;
          justify-content: space-between;
          align-items: center;
          flex-wrap:wrap;
          gap:2rem;
        }

.about-text{
          flex:1 1 300px;
        }
        .skills-list{
          flex:1 1 250px;
          display:flex;
          flex-wrap:wrap;
          gap:10px;
          justify-content: flex-start;
        }
        .skill-tag{
          background-color:#9067c6;
          color:white;
          padding: 5px 10px;
          border-radius: 5px;
          font-size:0.9rem
        }

/* --- Projects Section --- */
       .projects {
            padding: 4rem 0;
            text-align: center;
        }

.projects h2 {
            font-size: 2.5rem;
            margin-bottom: 2rem;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /*Text Shadow */
        }

.project-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

.project {
            background-color: #24243e;
            padding: 1.5rem;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
            transition: transform 0.3s ease, box-shadow 0.3s ease;  /* Hover effects */
        }

.project:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7);
        }

.project h3 {
            font-size: 1.5rem;
            margin-bottom: 0.5rem;
            color:#9067c6
        }

.project p {
           color: #cccccc;
           margin-bottom:1rem
        }
        .project-tech-stack{
            font-size:0.9rem;
            color:#888888;
            margin-bottom: 1rem;
        }
        .project-links a{
           display: inline-block;
           margin-right:10px;
           color:#9067c6;
           text-decoration: none;

}
        .project-links a:hover{
          text-decoration:underline;
        }

/* --- Contact Section --- */
        .contact {
            padding: 4rem 0;
            background-color: #24243e;
            text-align: center;
        }

.contact h2 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
             text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /*Text Shadow */
        }

.contact p {
          margin-bottom: 1.5rem;
        }

.contact-links a {
            display: inline-block;
            margin: 0 1rem;
            font-size: 1.5rem;
            color: #ffffff;
            transition: color 0.3s ease, transform 0.3s ease; /* Add transform to transition */
            text-decoration: none;
        }

.contact-links a:hover {
            color: #9067c6;
            transform: scale(1.2);  /* Enlarge on hover */

}

/* --- Footer --- */
    footer {
      padding:1rem 0;
      text-align:center;
      border-top: 2px solid #4e4e8e; /* Subtle, futuristic border */
      color:#888
    }

/* --- Keyframes for Background Animations --- */
        @keyframes moveCircle1 {
            0% {
                transform: translate(0, 0);
            }
            50% {
                transform: translate(50px, 30px);
            }
            100%{
                transform: translate(0,0)
            }
        }

@keyframes moveCircle2 {
            0% {
                transform: translate(0, 0);
            }
            50% {
                transform: translate(-40px, -20px);
            }
             100%{
                transform: translate(0,0)
            }
        }

/* --- Media Queries for Responsiveness --- */

@media (max-width: 768px) {
            .container {
                width: 90%;
            }

header {
                flex-direction: column;
                align-items: center;
            }

nav ul {
                margin-top: 1rem;
                flex-direction: column;
                align-items:center;
            }
            nav ul li{
              margin:0.5rem 0;
            }

.hero-title {
                font-size: 2.5rem;
            }

.hero-subtitle {
                font-size: 1.2rem;
            }

.about-content{
              flex-direction:column;
            }

.project-grid{
              grid-template-columns: 1fr;
            }

}
    </style>

<section class="hero">
            <div class="hero-bg-element circle-1"></div>
            <div class="hero-bg-element circle-2"></div>
            <h1 class="hero-title">Hello, I'm [Your Name]</h1>
            <p class="hero-subtitle">Full-Stack Developer | Problem Solver | Code Enthusiast</p>
            <a href="#projects" class="btn">View My Work</a>
        </section>

<section class="about" id="about">
          <div class="container">
            <h2>About Me</h2>
            <div class="about-content">
              <div class="about-text">
                <p>I'm a passionate developer with a love for building things with code.  I specialize in [Your Specialization - e.g., web development, mobile apps, etc.] and have experience with [List key technologies/languages - e.g., JavaScript, React, Node.js, Python, etc.].</p>
                <p>My goal is to create efficient, user-friendly, and impactful applications. I'm always eager to learn new technologies and tackle challenging problems.</p>
                <p> I am currently looking for a job as [your desired job title]. </p>
              </div>
              <div class="skills-list">
                <span class="skill-tag">JavaScript</span>
                <span class="skill-tag">React</span>
                <span class="skill-tag">Node.js</span>
                <span class="skill-tag">HTML</span>
                <span class="skill-tag">CSS</span>
                <span class="skill-tag">Python</span>
                <span class="skill-tag">SQL</span>
                <span class="skill-tag">Git</span>
                 </div>
            </div>
          </div>
        </section>

<section class="projects" id="projects">
            <h2>My Projects</h2>
            <div class="project-grid">
                <div class="project">
                    <h3>Project Title 1</h3>
                    <p class="project-tech-stack">React, Node.js, MongoDB</p>
                    <p>A brief description of the project and what it does. Highlight key features and your contributions.</p>
                    <div class="project-links">
                      <a href="#" target="_blank">Live Demo</a>
                      <a href="#" target="_blank">GitHub Repo</a>
                    </div>
                </div>

<div class="project">
                    <h3>Project Title 2</h3>
                     <p class="project-tech-stack">Python, Django, PostgreSQL</p>
                    <p>Description of the second project. Keep it concise and engaging.</p>
                     <div class="project-links">
                      <a href="#" target="_blank">Live Demo</a>
                      <a href="#" target="_blank">GitHub Repo</a>
                    </div>
                </div>

<div class="project">
                    <h3>Project Title 3</h3>
                     <p class="project-tech-stack">HTML, CSS, Javascript</p>
                    <p>Description of the second project. Keep it concise and engaging.</p>
                     <div class="project-links">
                      <a href="#" target="_blank">Live Demo</a>
                      <a href="#" target="_blank">GitHub Repo</a>
                    </div>
                </div>
                </div>
        </section>

<section class="contact" id="contact">
            <h2>Contact Me</h2>
            <p>I'm always open to new opportunities and collaborations.  Feel free to reach out!</p>
            <div class="contact-links">
                <a href="mailto:your.email@example.com"><i class="fas fa-envelope"></i></a> <a href="https://linkedin.com/in/yourprofile" target="_blank"><i class="fab fa-linkedin"></i></a> <a href="https://github.com/yourusername" target="_blank"><i class="fab fa-github"></i></a> </div>
        </section>
    </div>
    <footer>
      <p>© 2023 [Your Name]. All rights reserved.</p>
    </footer>
</body>
</html>

Page de destination du développeur HTML CSS

Recommandé

Exemple d'animation de chargement CSS

Bouton de survol

Mauvaise éducation parentale

HTML

CSS

JS

Recommandé

Exemple d'animation de chargement CSS

Bouton de survol

Mauvaise éducation parentale

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS