Modèle de site Web de portefeuille HTML CSS JavaScript

1,670 kmahamadou009

Ouvrir dans l'éditeur Publiez votre code

Modèle de site Web de portefeuille HTML CSS JavaScript

Recommandé

21 September 2024

Ajouter un bouton pour ouvrir l'ajout de données de profil avec validation

29 August 2025

Gestionnaire de tâches HTML : ajouter, supprimer et terminer des tâches

19 December 2025

Modèle de formulaire de connexion HTML avec connexion via les réseaux sociaux

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Portfolio website complete</title>
    
    <link
      href="https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/boxicons.min.css"
      rel="stylesheet"
    />
    <style>
      /* ===== VARIABLES ===== */
      :root {
        --first-color: #ffc2d1;
        --second-color: #ffa8be;
        --third-color: #ff85a1;
        --text-color: #5d2a42;
        --body-color: #fff0f3;
        --container-color: #ffccd5;
        --title-color: #5d2a42;
      }

/* ===== BASE ===== */
      *,
      ::before,
      ::after {
        box-sizing: border-box;
      }

html {
        scroll-behavior: smooth;
      }

body {
        margin: 0;
        padding: 0;
        font-family: "Poppins", sans-serif;
        font-size: 0.938rem;
        background-color: var(--body-color);
        color: var(--text-color);
        line-height: 1.6;
      }

h1,
      h2,
      h3,
      p,
      ul {
        margin: 0;
      }

ul {
        padding: 0;
        list-style: none;
      }

a {
        text-decoration: none;
      }

img {
        max-width: 100%;
        height: auto;
      }

/* ===== CLASS CSS ===== */
      .section {
        padding: 4rem 0 2rem;
      }

.section-title {
        font-size: 2rem;
        color: var(--title-color);
        text-align: center;
        margin-bottom: 1.5rem;
        font-weight: 600;
      }

.section-subtitle {
        display: block;
        font-size: 1rem;
        margin-bottom: 3rem;
        text-align: center;
      }

/* ===== LAYOUT ===== */
      .bd-grid {
        max-width: 1024px;
        display: grid;
        grid-template-columns: 100%;
        column-gap: 2rem;
        width: calc(100% - 2rem);
        margin-left: 1rem;
        margin-right: 1rem;
      }

.l-header {
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        background-color: var(--first-color);
        box-shadow: 0 1px 4px rgba(146, 161, 176, 0.15);
      }

/* ===== NAV ===== */
      .nav {
        height: 3rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 600;
      }

@media screen and (max-width: 768px) {
        .nav__menu {
          position: fixed;
          top: 3rem;
          right: -100%;
          width: 80%;
          height: 100%;
          padding: 2rem;
          background-color: var(--second-color);
          transition: 0.5s;
          border-left: 1px solid rgba(93, 42, 66, 0.1);
        }
      }

.nav__item {
        margin-bottom: 2rem;
      }

.nav__link {
        color: var(--text-color);
        font-weight: 600;
      }

.nav__link:hover {
        color: var(--text-color);
        border-bottom: 2px solid var(--text-color);
      }

.nav__logo {
        color: var(--text-color);
        font-weight: 700;
      }

.nav__toggle {
        color: var(--text-color);
        font-size: 1.5rem;
        cursor: pointer;
      }

/* Active menu */
      .active {
        color: var(--text-color);
        border-bottom: 2px solid var(--text-color);
      }

/*=== Show menu ===*/
      .show {
        right: 0;
      }

/* ===== HOME ===== */
      .home {
        height: calc(100vh - 3rem);
        row-gap: 1rem;
      }

.home__data {
        align-self: center;
      }

.home__title {
        font-size: 2.5rem;
        margin-bottom: 2.5rem;
      }

.home__title-color {
        color: var(--text-color);
      }

.home__social {
        display: flex;
        flex-direction: column;
      }

.home__social-icon {
        width: max-content;
        margin-bottom: 1rem;
        font-size: 1.5rem;
        color: var(--text-color);
      }

.home__social-icon:hover {
        color: var(--text-color);
        opacity: 0.8;
      }

.home__img {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 300px;
      }

.home__blob {
        fill: var(--first-color);
      }

.home__blob-img {
        width: 360px;
      }

/* ===== BUTTONS ===== */
      .button {
        display: inline-block;
        background-color: var(--third-color);
        color: #fff;
        padding: 0.75rem 2.5rem;
        font-weight: 600;
        border-radius: 0.5rem;
        transition: 0.3s;
      }

.button:hover {
        box-shadow: 0 10px 20px rgba(93, 42, 66, 0.2);
        background-color: var(--second-color);
      }

/* ===== ABOUT ===== */
      .about__container {
        row-gap: 2rem;
        text-align: center;
      }

.about__subtitle {
        margin-bottom: 1rem;
      }

.about__img {
        justify-self: center;
      }

.about__img img {
        width: 200px;
        border-radius: 0.5rem;
        box-shadow: 0 4px 20px rgba(93, 42, 66, 0.2);
      }

/* ===== SKILLS ===== */
      .skills__container {
        row-gap: 2rem;
        text-align: center;
      }

.skills__subtitle {
        margin-bottom: 1rem;
      }

.skills__text {
        margin-bottom: 2rem;
      }

.skills__data {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        font-weight: 600;
        padding: 0.5rem 1rem;
        margin-bottom: 2rem;
        border-radius: 0.5rem;
        box-shadow: 0 4px 20px rgba(93, 42, 66, 0.1);
        background-color: var(--container-color);
      }

.skills__icon {
        font-size: 2rem;
        margin-right: 1rem;
        color: var(--text-color);
      }

.skills__names {
        display: flex;
        align-items: center;
      }

.skills__bar {
        position: absolute;
        left: 0;
        bottom: 0;
        background-color: var(--third-color);
        height: 0.25rem;
        border-radius: 0.5rem;
        z-index: -1;
      }

.skills__html {
        width: 95%;
      }

.skills__css {
        width: 85%;
      }

.skills__js {
        width: 65%;
      }

.skills__ux {
        width: 85%;
      }

.skills__img {
        border-radius: 0.5rem;
        box-shadow: 0 4px 20px rgba(93, 42, 66, 0.2);
      }

/* ===== WORK ===== */
      .work__container {
        justify-items: center;
        row-gap: 2rem;
      }

.work__img {
        position: relative;
        overflow: hidden;
        border-radius: 0.5rem;
        box-shadow: 0 4px 20px rgba(93, 42, 66, 0.2);
      }

.work__img img {
        width: 100%;
        transition: 0.4s;
      }

.work__img:hover img {
        transform: scale(1.1);
      }

/* ===== CONTACT ===== */
      .contact__input {
        width: 100%;
        font-size: 0.938rem;
        font-weight: 600;
        padding: 1rem;
        border-radius: 0.5rem;
        border: 1.5px solid var(--second-color);
        outline: none;
        margin-bottom: 1rem;
        background-color: var(--container-color);
        color: var(--text-color);
      }

.contact__button {
        display: block;
        border: none;
        outline: none;
        font-size: 0.938rem;
        cursor: pointer;
        margin-left: auto;
      }

/* ===== FOOTER ===== */
      .footer {
        background-color: var(--first-color);
        color: var(--text-color);
        text-align: center;
        font-weight: 600;
        padding: 2rem 0;
      }

.footer__title {
        font-size: 2rem;
        margin-bottom: 2rem;
      }

.footer__social {
        margin-bottom: 2rem;
      }

.footer__icon {
        font-size: 1.5rem;
        color: var(--text-color);
        margin: 0 1rem;
      }

.footer__copy {
        font-size: 0.75rem;
      }

/* ===== MEDIA QUERIES ===== */
      @media screen and (min-width: 768px) {
        body {
          margin: 0;
        }

.section {
          padding-top: 6rem;
        }

.section-title {
          margin-bottom: 3rem;
        }

.nav {
          height: calc(3rem + 1.5rem);
        }

.nav__list {
          display: flex;
        }

.nav__item {
          margin-left: 3rem;
          margin-bottom: 0;
        }

.nav__toggle {
          display: none;
        }

.home {
          height: 100vh;
        }

.home__data {
          align-self: flex-end;
        }

.home__social {
          padding-top: 0;
          padding-bottom: 2.5rem;
          flex-direction: row;
          align-self: flex-end;
        }

.home__social-icon {
          margin-bottom: 0;
          margin-right: 2rem;
        }

.home__img {
          width: 450px;
          bottom: 15%;
        }

.about__container,
        .skills__container {
          grid-template-columns: repeat(2, 1fr);
          align-items: center;
          text-align: initial;
        }

.about__img img {
          width: 300px;
        }

.work__container {
          grid-template-columns: repeat(3, 1fr);
        }

.contact__form {
          width: 460px;
        }

.contact__inputs {
          grid-template-columns: repeat(2, 1fr);
        }
      }

@media screen and (min-width: 1024px) {
        .bd-grid {
          margin-left: auto;
          margin-right: auto;
        }

.home__img {
          right: 10%;
        }
      }
    </style>
  </head>
  <body>
    
    <header class="l-header">
      <nav class="nav bd-grid">
        <div>
          <a href="#" class="nav__logo">Mete Han</a>
        </div>

<div class="nav__menu" id="nav-menu">
          <ul class="nav__list">
            <li class="nav__item">
              <a href="#home" class="nav__link active">Home</a>
            </li>
            <li class="nav__item">
              <a href="#about" class="nav__link">About</a>
            </li>
            <li class="nav__item">
              <a href="#skills" class="nav__link">Skills</a>
            </li>
            <li class="nav__item">
              <a href="#work" class="nav__link">Work</a>
            </li>
            <li class="nav__item">
              <a href="#contact" class="nav__link">Contact</a>
            </li>
          </ul>
        </div>

<main class="l-main">
      
      <section class="home bd-grid" id="home">
        <div class="home__data">
          <h1 class="home__title">
            Hi,<br />I'am <span class="home__title-color">Mete Han</span><br />
            Web Designer
          </h1>

<a href="#contact" class="button">Contact</a>
        </div>

<section class="about section" id="about">
        <h2 class="section-title">About</h2>

<div>
            <h2 class="about__subtitle">I'am Mete Han</h2>
            <p class="about__text">
              I'm a passionate web designer with over 5 years of experience creating beautiful and functional websites. My expertise includes UI/UX design, front-end development, and creating responsive layouts that work perfectly on all devices.
            </p>
            <br>
            <p class="about__text">
              I believe in clean, elegant designs that prioritize user experience and accessibility. When I'm not designing, you can find me exploring new design trends or contributing to open-source projects.
            </p>
          </div>
        </div>
      </section>

<section class="skills section" id="skills">
        <h2 class="section-title">Skills</h2>

<div class="skills__container bd-grid">
          <div>
            <h2 class="skills__subtitle">Profesional Skills</h2>
            <p class="skills__text">
              I've worked with a variety of technologies and tools to create amazing web experiences. Here's a breakdown of my core competencies.
            </p>
            <div class="skills__data">
              <div class="skills__names">
                <i class="bx bxl-html5 skills__icon"></i>
                <span class="skills__name">HTML5</span>
              </div>
              <div class="skills__bar skills__html"></div>
              <div>
                <span class="skills__percentage">95%</span>
              </div>
            </div>
            <div class="skills__data">
              <div class="skills__names">
                <i class="bx bxl-css3 skills__icon"></i>
                <span class="skills__name">CSS3</span>
              </div>
              <div class="skills__bar skills__css"></div>
              <div>
                <span class="skills__percentage">85%</span>
              </div>
            </div>
            <div class="skills__data">
              <div class="skills__names">
                <i class="bx bxl-javascript skills__icon"></i>
                <span class="skills__name">JAVASCRIPT</span>
              </div>
              <div class="skills__bar skills__js"></div>
              <div>
                <span class="skills__percentage">65%</span>
              </div>
            </div>
            <div class="skills__data">
              <div class="skills__names">
                <i class="bx bxs-paint skills__icon"></i>
                <span class="skills__name">UX/UI</span>
              </div>
              <div class="skills__bar skills__ux"></div>
              <div>
                <span class="skills__percentage">85%</span>
              </div>
            </div>
          </div>

<section class="work section" id="work">
        <h2 class="section-title">Work</h2>

<section class="contact section" id="contact">
        <h2 class="section-title">Contact</h2>

<footer class="footer">
      <p class="footer__title">Mete Han</p>
      <div class="footer__social">
        <a href="#" class="footer__icon"><i class="bx bxl-facebook"></i></a>
        <a href="#" class="footer__icon"><i class="bx bxl-instagram"></i></a>
        <a href="#" class="footer__icon"><i class="bx bxl-twitter"></i></a>
      </div>
      <p class="footer__copy">© 2025 All rights reserved</p>
    </footer>

<script src="https://unpkg.com/scrollreveal"></script>

<script>
      /*===== MENU SHOW =====*/
      const showMenu = (toggleId, navId) => {
        const toggle = document.getElementById(toggleId),
          nav = document.getElementById(navId);

if (toggle && nav) {
          toggle.addEventListener("click", () => {
            nav.classList.toggle("show");
          });
        }
      };
      showMenu("nav-toggle", "nav-menu");

/*===== ACTIVE AND REMOVE MENU =====*/
      const navLink = document.querySelectorAll(".nav__link");

function linkAction() {
        /*Active link*/
        navLink.forEach((n) => n.classList.remove("active"));
        this.classList.add("active");

/*Remove menu mobile*/
        const navMenu = document.getElementById("nav-menu");
        navMenu.classList.remove("show");
      }
      navLink.forEach((n) => n.addEventListener("click", linkAction));

/*===== SCROLL REVEAL ANIMATION =====*/
      const sr = ScrollReveal({
        origin: "top",
        distance: "80px",
        duration: 2000,
        reset: true,
      });

/*SCROLL HOME*/
      sr.reveal(".home__title", {});
      sr.reveal(".home__social-icon", { delay: 200 });
      sr.reveal(".button", { delay: 200 });

/*SCROLL ABOUT*/
      sr.reveal(".about__img", {});
      sr.reveal(".about__subtitle", { delay: 400 });
      sr.reveal(".about__text", { delay: 400 });

/*SCROLL SKILLS*/
      sr.reveal(".skills__subtitle", {});
      sr.reveal(".skills__text", {});
      sr.reveal(".skills__data", { interval: 200 });
      sr.reveal(".skills__img", { delay: 600 });

/*SCROLL WORK*/
      sr.reveal(".work__img", { interval: 200 });

/*SCROLL CONTACT*/
      sr.reveal(".contact__input", { interval: 200 });
    </script>
  </body>
</html>

CSS