Plantilla HTML para portafolio de diseñador web

Abrir en el editor Video Publica tu código

Recomendado

11 March 2025

Animación de barra de carga CSS HTML

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Portfolio</title>
    
    <link
      href="https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/boxicons.min.css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
 
    <header class="l-header">
      <nav class="nav bd-grid">
        <div>
          <a href="#" class="nav__logo">Sxrgxxxxx 
        </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">Trabajo</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">
            Hola,<br />Yo soy <span class="home__title-color">Sergio</span><br />
            Web Designer
          </h1>

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

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

<div>
            <h2 class="about__subtitle">I'am Sergio</h2>
            <p class="about__text">
                Soy un diseñador web apasionado por crear experiencias digitales atractivas y funcionales. Con varios años de experiencia en el diseño de interfaces de usuario y la creación de sitios web responsivos, me esfuerzo por combinar estética y usabilidad en cada proyecto que emprendo.              
            </p>
            <br>
            <p class="about__text">
                Mi objetivo es ayudar a las empresas a destacar en el mundo digital mediante diseños innovadores y soluciones creativas que impulsen su presencia en línea y mejoren la experiencia del usuario.
            </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">
              Me gusta crear, ver como una simple imagen se convierte en algo interactivo en la web, ver como puedo fucionarme con un simple boton para que la experiencia no sea algo simple.
            </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="contact section" id="contact">
        <h2 class="section-title">Contacto</h2>

<div class="contact__container bd-grid">
          <form class="form">
             <div class="title">Bienvenido,<br><span>registrate para continuar</span></div>
                <input type="email" placeholder="Email" name="email" class="input">
                <input type="password" placeholder="Password" name="password" class="input">
            <div class="login-with">
            <div class="button-log"></div>
            <div class="button-log">
                    <svg class="icon" height="56.6934px" id="Layer_1" style="enable-background:new 0 0 56.6934 56.6934;" version="1.1" viewBox="0 0 56.6934 56.6934" width="56.6934px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M51.981,24.4812c-7.7173-0.0038-15.4346-0.0019-23.1518-0.001c0.001,3.2009-0.0038,6.4018,0.0019,9.6017  c4.4693-0.001,8.9386-0.0019,13.407,0c-0.5179,3.0673-2.3408,5.8723-4.9258,7.5991c-1.625,1.0926-3.492,1.8018-5.4168,2.139  c-1.9372,0.3306-3.9389,0.3729-5.8713-0.0183c-1.9651-0.3921-3.8409-1.2108-5.4773-2.3649  c-2.6166-1.8383-4.6135-4.5279-5.6388-7.5549c-1.0484-3.0788-1.0561-6.5046,0.0048-9.5805  c0.7361-2.1679,1.9613-4.1705,3.5708-5.8002c1.9853-2.0324,4.5664-3.4853,7.3473-4.0811c2.3812-0.5083,4.8921-0.4113,7.2234,0.294  c1.9815,0.6016,3.8082,1.6874,5.3044,3.1163c1.5125-1.5039,3.0173-3.0164,4.527-4.5231c0.7918-0.811,1.624-1.5865,2.3908-2.4196  c-2.2928-2.1218-4.9805-3.8274-7.9172-4.9056C32.0723,4.0363,26.1097,3.995,20.7871,5.8372  C14.7889,7.8907,9.6815,12.3763,6.8497,18.0459c-0.9859,1.9536-1.7057,4.0388-2.1381,6.1836  C3.6238,29.5732,4.382,35.2707,6.8468,40.1378c1.6019,3.1768,3.8985,6.001,6.6843,8.215c2.6282,2.0958,5.6916,3.6439,8.9396,4.5078  c4.0984,1.0993,8.461,1.0743,12.5864,0.1355c3.7284-0.8581,7.256-2.6397,10.0725-5.24c2.977-2.7358,5.1006-6.3403,6.2249-10.2138  C52.5807,33.3171,52.7498,28.8064,51.981,24.4812z"></path></svg>
            </div>
            <div class="button-log">
                    <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="56.693px" viewBox="0 0 56.693 56.693" version="1.1" id="Layer_1" height="56.693px" class="icon"><path d="M40.43,21.739h-7.645v-5.014c0-1.883,1.248-2.322,2.127-2.322c0.877,0,5.395,0,5.395,0V6.125l-7.43-0.029  c-8.248,0-10.125,6.174-10.125,10.125v5.518h-4.77v8.53h4.77c0,10.947,0,24.137,0,24.137h10.033c0,0,0-13.32,0-24.137h6.77  L40.43,21.739z"></path></svg>
            </div>
            </div>
                    <button class="button-confirm">Vamos →</button>
         </form>
        </div>
      </section>

</main>

<footer class="footer">
      <p class="footer__title">Sergio Armijo</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>

CSS

/* ===== VARIABLES ===== */
        :root {
        --first-color: #f5f5f5;     /* Gris muy claro (casi blanco) */
        --second-color: #e0e0e0bf;    /* Gris claro */
        --third-color: #bdbdbd;     /* Gris medio */
        --text-color: #424242;      /* Gris oscuro para textos */
        --body-color: #fafafa;      /* Fondo general, muy claro */
        --container-color: #9e9e9e; /* Gris neutro para contenedores */
        --title-color: #212121;     /* Gris casi negro para títulos */
       }

/* ===== 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 ===== */
     .form {
       --input-focus: #2d8cf0;
       --font-color: #323232;
       --font-color-sub: #666;
       --bg-color: #fff;
       --main-color: #323232;
       padding: 20px;
       background: lightgrey;
       display: flex;
       flex-direction: column;
       align-items: flex-start;
       justify-content: center;
       gap: 20px;
       border-radius: 5px;
       border: 2px solid var(--main-color);
       box-shadow: 4px 4px var(--main-color);
     }
     
     .title {
       color: var(--font-color);
       font-weight: 900;
       font-size: 20px;
       margin-bottom: 25px;
     }
     
     .title span {
       color: var(--font-color-sub);
       font-weight: 600;
       font-size: 17px;
     }
     
     .input {
       width: 250px;
       height: 40px;
       border-radius: 5px;
       border: 2px solid var(--main-color);
       background-color: var(--bg-color);
       box-shadow: 4px 4px var(--main-color);
       font-size: 15px;
       font-weight: 600;
       color: var(--font-color);
       padding: 5px 10px;
       outline: none;
     }
     
     .input::placeholder {
       color: var(--font-color-sub);
       opacity: 0.8;
     }
     
     .input:focus {
       border: 2px solid var(--input-focus);
     }
     
     .login-with {
       display: flex;
       gap: 20px;
     }
     
     .button-log {
       cursor: pointer;
       width: 40px;
       height: 40px;
       border-radius: 100%;
       border: 2px solid var(--main-color);
       background-color: var(--bg-color);
       box-shadow: 4px 4px var(--main-color);
       color: var(--font-color);
       font-size: 25px;
       display: flex;
       justify-content: center;
       align-items: center;
     }
     
     .icon {
       width: 24px;
       height: 24px;
       fill: var(--main-color);
     }
     
     .button-log:active, .button-confirm:active {
       box-shadow: 0px 0px var(--main-color);
       transform: translate(3px, 3px);
     }
     
     .button-confirm {
       margin: 50px auto 0 auto;
       width: 120px;
       height: 40px;
       border-radius: 5px;
       border: 2px solid var(--main-color);
       background-color: var(--bg-color);
       box-shadow: 4px 4px var(--main-color);
       font-size: 17px;
       font-weight: 600;
       color: var(--font-color);
       cursor: pointer;
     }

/* ===== FOOTER ===== */
       .footer {
       background-image: url('img/fondo1.png');
       background-size: cover;
       background-repeat: no-repeat; 
       color: #fff;
       text-align: center;
       font-weight: 600;
       padding: 2rem 0;
       position: relative;
       z-index: 1;
      }

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

JS

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

Plantilla HTML para portafolio de diseñador web

Recomendado

Un código de stevenolaeem

Latidos del corazón

Animación de barra de carga CSS HTML

HTML

CSS

JS

Recomendado

Un código de stevenolaeem

Latidos del corazón

Animación de barra de carga CSS HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS