Modello di sito Web portfolio HTML CSS JavaScript

691 kmahamadou009

Apri nell'Editor Pubblica il Tuo Codice

Modello di sito Web portfolio HTML CSS JavaScript

Consigliato

27 December 2024

Una home page creata con directory

11 December 2024

Un codice di staticcloud996

22 September 2025

Frammento di animazione HTML Neuron

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>

Consigliato

Una home page creata con directory

Un codice di staticcloud996

Frammento di animazione HTML Neuron

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS