Plantilla de sitio web de portafolio de diseñador web

1,469 Metehan

Abrir en el editor Publica tu código

Plantilla de sitio web de portafolio de diseñador web

Recomendado

21 July 2025

Menú de navegación con botones de opción CSS

13 June 2025

Un código de Metehan

19 January 2024

Botón de Cambio de Tema

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