Web Designer Portfolio HTML CSS Template

Open In Editor Video Publish Your Code

<!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">
            </p>
            <div class="skills__data">
              <div class="skills__names">
                <i class="bx bxl-html5 skills__icon"></i>
                <span class="skills__name">HTML</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">CSS</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">25%</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>

Web Designer Portfolio HTML CSS Template

Recommended

CSS & GSAP Animation Techniques

HTML Animation Container Example

Website Landing Page Template

HTML

CSS

JS

Recommended

CSS & GSAP Animation Techniques

HTML Animation Container Example

Website Landing Page Template

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS