Team Skills And Stats

index.html

<header>
  <div class="container">
    <p>Mesbah</p>
    <div class="links">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
        <path d="M9.5 20c-2.538 0-4.923-0.988-6.718-2.782s-2.782-4.18-2.782-6.717c0-2.538 0.988-4.923 2.782-6.718s4.18-2.783 6.718-2.783c2.538 0 4.923 0.988 6.718 2.783s2.782 4.18 2.782 6.718-0.988 4.923-2.782 6.717c-1.794 1.794-4.18 2.782-6.718 2.782zM9.5 2c-4.687 0-8.5 3.813-8.5 8.5s3.813 8.5 8.5 8.5 8.5-3.813 8.5-8.5-3.813-8.5-8.5-8.5z" />
        <path d="M14.5 8h-10c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h10c.276 0 .5.224.5.5s-.224.5-.5.5zM14.5 11h-10c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h10c.276 0 .5.224.5.5s-.224.5-.5.5zM14.5 14h-10c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h10c.276 0 .5.224.5.5s-.224.5-.5.5z" />
      </svg>
      <ul>
        <li><a href="#Home">Home</a></li>
        <li><a href="#About">About</a></li>
        <li><a href="#Services">Services</a></li>
        <li><a href="#Contact">Contact</a></li>
      </ul>
    </div>
  </div>
</header>
<section class="sec1" id="Home">
  <div class="container">
    <h1>Mesbah's <span>Services</span></h1>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam omnis nisi voluptates distinctio illo, quos, vero et voluptatibus, quam maiores sequi aliquid obcaecati nulla adipisci inventore. Voluptas tenetur voluptatibus explicabo.lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugiat voluptate enim molestias inventore, nobis totam itaque alias aperiam tempora voluptates animi asperiores blanditiis.</p>
  </div>
</section>
<section class="sec2" id="Services">
  <div class="container">
    <div>
      <img src="https://image.flaticon.com/icons/png/512/2868/2868182.png" alt="design">
      <h1>Design Quality</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab quo molestias expedita harum repellat? Tempore.</p>
    </div>
    <div>
      <img src="https://image.flaticon.com/icons/png/512/543/543135.png" alt="price">
      <h1>Cheap Price</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab quo molestias expedita harum repellat? Tempore.</p>
    </div>
    <div>
      <img src="https://image.flaticon.com/icons/png/512/1455/1455339.png" alt="performance">
      <h1>Amazing Performace</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab quo molestias expedita harum repellat? Tempore.</p>
    </div>
  </div>
</section>
<section class="sec3" id="About">
  <div class="container">
    <div class="image">
      <img src="https://i.postimg.cc/5t0dtqwJ/Screenshot-5-removebg-preview.png" alt="discuss">
    </div>
    <div>
      <h1>About Us</h1>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reprehenderit, nostrum? Nesciunt aliquid officia ad fuga ut quo sed aliquam unde, nemo nihil dignissimos nisi atque eveniet dolorum minus beatae at quaerat dolores voluptate totam consequuntur inventore eius ratione ipsum! Nisi delectus ex obcaecati architecto doloribus quasi dolores quibusdam debitis officiis, ratione deserunt illo accusantium officia possimus dignissimos numquam reprehenderit incidunt pariatur praesentium alias est repudiandae id fugiat beatae.</p>
    </div>
  </div>
</section>
<section class="sec4">
  <div class="container">
    <div>
      <p>10</p>
      <p>Services</p>
    </div>
    <div>
      <p>70</p>
      <p>Designs</p>
    </div>
    <div>
      <p>120</p>
      <p>Clients</p>
    </div>
  </div>
</section>
<section class="sec5" id="Contact">
  <div class="container">
    <h2>Our Skills</h2>
    <div class="progs">
      <div>
        <label for="html">HTML</label>
        <progress id="html" max="100" value="60">60%</progress>
      </div>
      <div>
        <label for="css">CSS</label>
        <progress id="css" max="100" value="70">70%</progress>
      </div>
      <div>
        <label for="javascript">JavaScript</label>
        <progress id="javascript" max="100" value="80">80%</progress>
      </div>
      <div>
        <label for="php">PHP</label>
        <progress id="php" max="100" value="65">65%</progress>
      </div>
      <div>
        <label for="python">Python</label>
        <progress id="python" max="100" value="90">90%</progress>
      </div>
    </div>
  </div>
</section>
<footer>
  <div class="container">
    <p>Designed With 3 By <span>Khalid Mesbah</span></p>
    <p>All Rights Reserved &copy; 2021</p>
  </div>
</footer>

script.js

//https://elzero.org/frontend-team-skills-and-stats-design/

style.scss

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
  user-select: none;
}
html {
  scroll-behavior: smooth;
}
body {
  & > *:nth-child(2n - 1):not:last-child {
    background: #fff;
  }
  & > *:nth-child(2n - 2) {
    background: #f6f6f6;
  }
  footer {
    background: #333;
  }
}
.container {
  padding: 0 10vw;
  margin: 0 auto;
}
/* Small */
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
/* Medium */
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
/* Large */
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
section {
  padding: 30px 0;
}
header,
footer {
  padding: 15px 0;
}
header {
  position: sticky;
  top: 0;
  left: 0;
  background: #fff;
  border-bottom: 3px solid #aaa5;
  z-index: 2;
}
header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  svg {
    display: none;
  }
  p {
    font: bold 1.2rem sans-serif;
  }
  ul {
    list-style: none;
    display: flex;
    gap: 10px;
    li {
      transition: all 300ms;
      padding-left: 5px;
      cursor: pointer;
      &:hover {
        box-shadow: 0 2px 0 0 #03a9f4;
      }
      a {
        text-decoration: none;
        color: #000;
        &:is(:hover, :active, :visited) {
          color: #000;
        }
      }
    }
  }
}
@media (max-width: 450px) {
  header .container .links {
    position: relative;
    &:hover ul {
      opacity: 1;
      pointer-events: initial;
    }
    svg {
      display: block;
      width: 35px;
      height: 35px;
      border-radius: 50%;
    }
    ul {
      position: absolute;
      left: calc(50% - 50px);
      display: flex;
      flex-direction: column;
      background: #aaa;
      width: 100px;
      padding: 20px;
      border-radius: 5px;
      opacity: 0;
      pointer-events: none;
      transition: all 300ms;
      a {
        color: #fffe;
      }
      li:hover {
        box-shadow: none;
        transform: translatex(5px);
        border-left: 1px solid #03a9f4;
      }
    }
  }
}
.sec1 .container {
  text-align: center;
  h1 {
    margin-bottom: 10px;
    span {
      color: #03a9f4;
    }
  }
}
.sec2 .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  div {
    display: grid;
    place-content: center;
    text-align: center;
    transition: transform 300ms, box-shadow 300ms;
    &:hover {
      box-shadow: 3px 3px 0 2px #03a9f4;
      transform: translate(-3px, -3px);
    }
    h1 {
      margin: 10px;
      font-size: 1em;
    }
    p {
      color: #0009;
    }
    img {
      width: 60px;
      margin: auto;
    }
  }
}
.sec3 .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 15px;
  .image {
    display: grid;
    place-content: center;
    img {
      object-fit: cover;
      max-width: 100%;
    }
  }
  div {
    h1 {
      margin: 10px 0;
    }
  }
}
.sec4 .container {
  display: grid;
  place-content: center;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 15px;
  div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    padding: 15px 0;
    &:first-child {
      background: #b33939;
    }
    &:nth-child(2) {
      background: #227093;
    }
    &:last-child {
      background: #218c74;
    }
    p:first-child {
      font-size: 3rem;
      font-weight: 500;
    }
    p:last-child {
      font-size: 0.8em;
    }
  }
}
.sec5 .container {
  padding-bottom: 40px;
  padding-top: 10px;
  h2 {
    margin: 20px auto 25px auto;
    text-align: center;
  }
  .progs {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    div {
      display: flex;
      align-items: center;
      gap: 10px;
      label {
        font-weight: bold;
        width: 20%;
        text-align: right;
      }
      progress {
        width: 90%;
        height: 30px;
        background: #fff;
        position: relative;
        &::-webkit-progress-value {
          background: #03a9f4;
        }
        &::-webkit-progress-bar {
          background: #fff;
        }
        &::after {
          content: attr(value) "%";
          position: absolute;
          width: 40px;
          height: 25px;
          color: #fff;
          left: calc(60% - 45px);
          top: calc(50% - 12.5px);
          display: grid;
          place-content: center;
        }
      }
      &:nth-child(2)progress::after {
        left: calc(70% - 45px);
      }
      &:nth-child(3)progress::after {
        left: calc(80% - 45px);
      }
      &:nth-child(4)progress::after {
        left: calc(65% - 45px);
      }
      &:nth-child(5)progress::after {
        left: calc(90% - 45px);
      }
    }
  }
}
footer .container {
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  span {
    color: #03a9f4;
    cursor: help;
    transition: all 400ms;
    display: inline-block;
    text-transform: uppercase;
    &:hover {
      opacity: 0.8;
      text-shadow: 0 0 150px #fff, 0 0 125px #fff, 0 0 100px #fff, 0 0 75px #fff,
        0 0 50px #fff, 0 0 25px #fff, 0 0 1px #fff;
      letter-spacing: 1px;
    }
  }
}
@media (max-width: 600px) {
  .progs div {
    flex-direction: column;
  }
}
::-webkit-scrollbar {
  width: 7px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #03a9f4;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: #03a9f4aa;
}

team-skills-and-stats.markdown

Team Skills And Stats

A Pen by K.Mesbah on CodePen.

License.