Awesome Responsive Cards (Services Section - Full Animated Portfolio) || HTML, CSS and JavaScript

byramCoder -
0

  Hello coders, in this article, I have shown you how to create an amazing services section in the personal portfolio website with animated dark mode toggle. It would be great if you checkout the full series of this full animated portfolio. This is the written version of the video uploaded in the ramCoder YouTube Channel. Creating this amazing about section in this amazing portfolio is not a work of headache, anyone can make this website easily. I have uploaded the source code file in the GitHub repository with the download link at the end of this article. Also, I have embedded the code in the code box in this article also. It is completely build with vanilla CSS and vanilla JavaScript.

I have used fonts from google fonts, icons from fontawesome icons, and just vanilla CSS and JavaScript. This is the day 4 of the full build tutorial.


If you want to use this amazing animated portfolio website with dark mode, you will need to follow couple of steps mentioned below:

Step 1:

First of all, you will need to create an index.html file and paste the following code into it and save the changes to take the effect.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Animated Portfolio Homepage With DarkMode Toggle - ramCoder</title>
    <link rel="stylesheet" href="./style.css" />
    <link rel="stylesheet" href="./responsive.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
      integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
  </head>
  <body>
    <div class="boxes">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <nav>
      <div class="burger-div">
        <i class="fas fa-bars burger"></i>
      </div>
      <div class="logo">John</div>
      <div class="links">
        <ul>
          <a href="#home">
            <li class="home-link nav-link">Home</li>
          </a>
          <a href="#about">
            <li class="nav-link">About</li>
          </a>
          <a href="#services">
            <li class="nav-link">Services</li>
          </a>
          <li class="nav-link">Contact</li>
        </ul>
      </div>
      <input type="checkbox" name="" id="themeswitch" class="checkbox" />
    </nav>
    <section class="home" id="home">
      <div class="content">
        <h2>Explore the programming beauty!</h2>
        <p>with <span class="name">John Doe</span></p>
        <button class="contact-btn">Contact</button>
      </div>
      <div class="image"><img src="./profile.png" /></div>
    </section>
    <section class="about" id="about">
      <h2>About Me</h2>
      <div class="abt-content">
        <div class="abt-text">
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus
          aliquam deleniti laboriosam numquam voluptate aut eligendi? Suscipit
          molestiae autem eum a similique aliquam expedita deleniti eius
          voluptatum. Reiciendis, voluptatibus ex.
        </div>
        <div class="abt-languages">
          <div class="language">
            <i class="fab fa-html5"></i>
            <p>HTML 5</p>
          </div>
          <div class="language">
            <i class="fab fa-css3-alt"></i>
            <p>CSS 3</p>
          </div>
          <div class="language">
            <i class="fab fa-js-square"></i>
            <p>JavaScript</p>
          </div>
          <div class="language">
            <i class="fab fa-react"></i>
            <p>React.js</p>
          </div>
        </div>
      </div>
      <div class="social">
        <a href="#">
          <i class="fab fa-facebook"></i>
        </a>
        <a href="#">
          <i class="fab fa-instagram"></i>
        </a>
        <a href="#">
          <i class="fab fa-twitter"></i>
        </a>
        <a href="#">
          <i class="fab fa-linkedin-in"></i>
        </a>
      </div>
    </section>
    <section class="services" id="services">
      <h2>Services</h2>
      <div class="services-content">
        <div class="services-card">
          <h3>Websites</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum
            veniam ratione quos saepe, unde, obcaecati facere cum quibusdam
            recusandae reiciendis totam voluptatem rem ut ipsa officiis nesciunt
            itaque culpa non.
          </p>
        </div>
        <div class="services-card">
          <h3>UI/ UX</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore
            corrupti omnis fugit quo atque impedit sunt possimus mollitia nisi
            suscipit molestiae unde modi, neque nobis aut nulla, maxime tempora
            provident.
          </p>
        </div>
        <div class="services-card">
          <h3>Web Apps</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni hic
            debitis eum saepe repellat illum cumque necessitatibus vel harum
            voluptate repellendus aspernatur, exercitationem deserunt dolores
            doloribus voluptatum iusto perspiciatis tenetur!
          </p>
        </div>
      </div>
    </section>
    <script src="./script.js"></script>
  </body>
</html>{codeBox}

Step 2:

After finishing up with the index.html file, you will need to create an style.css file and paste the following code into it to take the effect.

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
  transition: 0.1s ease;
}
html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}
a {
  text-decoration: none;
}
:root {
  --bg-color: rgb(226, 226, 226);
  --text-color: rgb(36, 34, 34);
  --highlighted-color: rgb(240, 68, 32);
}
[data-theme="dark"] {
  --bg-color: rgb(36, 34, 34);
  --text-color: rgb(226, 226, 226);
  --highlighted-color: rgb(240, 68, 31);
}
body {
  height: 100vh;
  width: 100vw;
  background-color: var(--bg-color);
}
/* background animation  */
.boxes div {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: transparent;
  border: 3px solid var(--text-color);
  border-radius: 5px;
}

.boxes div:nth-child(1) {
  top: 70%;
  left: 10%;
  animation: box-animate 10s infinite;
}

.boxes div:nth-child(2) {
  top: 20%;
  left: 80%;
  animation: box-animate 9s infinite;
}

.boxes div:nth-child(3) {
  top: 50%;
  left: 50%;
  animation: box-animate 6s infinite;
}

.boxes div:nth-child(4) {
  top: 80%;
  left: 60%;
  animation: box-animate 15s infinite;
}

.boxes div:nth-child(5) {
  top: 30%;
  left: 30%;
  animation: box-animate 9s infinite;
}

.boxes div:nth-child(6) {
  top: 90%;
  left: 90%;
  animation: box-animate 12s infinite;
}

.boxes div:nth-child(7) {
  top: 80%;
  left: 30%;
  animation: box-animate 2s infinite;
}

.boxes div:nth-child(8) {
  top: 40%;
  left: 20%;
  animation: box-animate 2s infinite;
}

.boxes div:nth-child(9) {
  top: 50%;
  left: 80%;
  animation: box-animate 2s infinite;
}

@keyframes box-animate {
  0% {
    transform: scale(0) translateY(0) rotate(0);
    opacity: 1;
  }

  100% {
    transform: scale(1.3) translateY(-90px) rotate(360deg);
    opacity: 0;
  }
}
/* navbar styles */
nav {
  height: 60px;
  width: 100vw;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  z-index: 1;
  background-color: var(--bg-color);
}
.burger-div {
  display: none;
  pointer-events: none;
}
.logo {
  font-size: 2rem;
  color: var(--highlighted-color);
  font-weight: bolder;
  cursor: pointer;
}
.links {
  width: 60%;
  display: flex;
  justify-content: space-around;
  font-size: 1.2rem;
  color: var(--text-color);
}
.home-link {
  color: var(--highlighted-color);
  position: relative;
}
.links ul {
  display: flex;
  list-style: none;
  width: 80%;
  justify-content: space-around;
}
.links ul a {
  color: var(--text-color);
}
.links ul li {
  cursor: pointer;
  position: relative;
}
.links ul li:hover {
  color: var(--highlighted-color);
}
.links ul li::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 2px;
  height: 2px;
  width: 0%;
  background-color: var(--highlighted-color);
  transition: 0.3s ease;
}
.links ul li:hover::after {
  width: 70%;
}
.checkbox {
  height: 30px;
  width: 60px;
  appearance: none;
  background-color: var(--text-color);
  border-radius: 50px;
  position: relative;
  transition: 0.4s ease;
  cursor: pointer;
}
.checkbox::before {
  content: "";
  width: 30px;
  height: 30px;
  background-color: var(--highlighted-color);
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(1.1);
  transition: 0.3s ease;
}
.checkbox:checked::before {
  left: calc(60px - 30px);
}
/* hero section  */
.home {
  padding-top: 60px;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.content {
  color: var(--text-color);
  height: 100%;
  width: 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.content h2 {
  font-size: 3rem;
  margin-bottom: 40px;
  position: relative;
}
.content h2::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 2px;
  height: 2px;
  width: 40%;
  background-color: var(--highlighted-color);
}
.content p {
  font-size: 1.5rem;
  margin-bottom: 40px;
}
.content p span {
  color: var(--highlighted-color);
  font-size: 2rem;
}
.contact-btn {
  height: 40px;
  width: 100px;
  outline: none;
  border: 2px solid var(--highlighted-color);
  background-color: transparent;
  color: var(--text-color);
  font-size: 1.1rem;
  border-radius: 10px;
  box-shadow: inset 0 0 0 0 var(--highlighted-color);
  transition: 0.3s ease;
  cursor: pointer;
}
.contact-btn:hover {
  box-shadow: inset 100px 0 0 0 var(--highlighted-color);
  color: rgb(226, 226, 226);
}
.image {
  max-width: 30%;
}
.image img {
  width: 100%;
  height: auto;
  background-color: transparent;
  position: relative;
  border-radius: 50%;
  box-shadow: inset 500px 0 0 0 var(--highlighted-color);
  transition: all 0.3s ease;
}
.image img:hover {
  transform: scale(1.01);
}
/* about section  */
.about {
  padding-top: 60px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  color: var(--text-color);
}
.about h2 {
  text-align: center;
  font-size: 2.5rem;
  color: var(--highlighted-color);
  position: relative;
}
.about h2::after {
  content: "";
  height: 2px;
  width: 60%;
  position: absolute;
  bottom: -10px;
  left: 20%;
  background-color: var(--highlighted-color);
}
.abt-content {
  display: flex;
  justify-content: space-around;
}
.abt-text {
  width: 40%;
  margin: auto 0;
  font-size: 1.1rem;
  word-spacing: 3px;
  box-shadow: 0 0 100px var(--highlighted-color);
  border: 2px solid var(--highlighted-color);
  border-radius: 10px;
  padding: 15px;
  background: transparent;
  transition: 0.3s ease;
}
.abt-text:hover {
  transform: scale(1.02);
}
.abt-languages {
  width: 30%;
}
.language {
  height: 60px;
  width: 100%;
  display: flex;
  border-bottom: 2px solid var(--highlighted-color);
  align-items: center;
  justify-content: space-between;
  font-size: 1.2rem;
}
.language i {
  font-size: 2rem;
}
.social {
  width: 200px;
  display: flex;
  justify-content: space-around;
}
.social a {
  text-decoration: none;
  color: var(--text-color);
}
.social i {
  font-size: 2rem;
  transition: 0.2s ease;
  cursor: pointer;
}
.social i:hover {
  transform: scale(1.1);
}
/* services section  */
.services {
  padding-top: 60px;
  min-height: 100vh;
  max-height: max-content;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  color: var(--text-color);
}
.services h2 {
  text-align: center;
  font-size: 2.5rem;
  color: var(--highlighted-color);
  position: relative;
}
.services h2::after {
  content: "";
  height: 2px;
  width: 60%;
  position: absolute;
  bottom: -10px;
  left: 20%;
  background-color: var(--highlighted-color);
}
.services-content {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.services-card {
  width: 30%;
  border: 2px solid var(--highlighted-color);
  padding: 15px;
  height: 40vh;
  background-color: transparent;
  font-size: 1.1rem;
  word-spacing: 3px;
  box-shadow: 0 0 40px var(--highlighted-color);
  border-radius: 10px;
  transition: 0.3s ease;
  cursor: pointer;
}
.services-card:hover {
  transform: scale(1.01) translateY(-3px);
  box-shadow: 0 5px 20px var(--highlighted-color);
}
.services-card h3 {
  position: relative;
  padding-bottom: 2%;
  margin-bottom: 5%;
  border-bottom: 2px solid var(--highlighted-color);
  font-weight: 900;
}
.services-card p {
  text-transform: capitalize;
  font-size: 1rem;
}{codeBox}

Step 3:

After finishing up with style.css file, you will need to create an responsive.css file and the following CSS code and save the changes to take the effect.

@media (max-width: 920px) {
  .home {
    flex-direction: column-reverse;
  }
  .content {
    width: 90%;
    height: 50%;
  }
  .content h2,
  .content p {
    margin-bottom: 20px;
  }
  .image {
    min-height: 40%;
    max-width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .image img {
    height: 100%;
    width: auto;
    max-width: 100%;
  }
  .services h2 {
    margin-bottom: 60px;
  }
  .services-content {
    flex-direction: column;
    width: 80%;
  }
  .services-card {
    width: 100%;
    height: min-content;
    margin-bottom: 20px;
  }
  .services-card h2 {
    margin-bottom: 2%;
  }
}
@media (max-width: 768px) {
  .burger-div {
    display: block;
    color: var(--text-color);
    font-size: 1.5rem;
    pointer-events: all;
    width: 60px;
  }
  .burger {
    cursor: pointer;
    transition: 0.2s ease;
  }
  .links {
    display: none;
    width: 60px;
    position: relative;
  }
  .checkbox {
    display: block;
  }
  .active-nav {
    display: inline-block;
    width: 100vw;
    height: calc(100vh - 60px);
    position: absolute;
    top: 60px;
    left: 0;
    background-color: var(--bg-color);
    z-index: 1;
  }
  .active-nav ul {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }
  .abt-content {
    flex-direction: column;
    align-items: center;
  }
  .abt-text {
    width: 80%;
  }
  .abt-languages {
    width: 80%;
  }
}{codeBox}

Step 4:

After completing with both the CSS files, you will need to create an script.js file and paste the following code into it to take the effect.

var themeSwitcher = document.querySelector(".checkbox");

var currentTheme = localStorage.getItem("theme");

if (currentTheme) {
  document.documentElement.setAttribute("data-theme", currentTheme);
  if (currentTheme === "dark") {
    themeSwitcher.checked = true;
  }
}

function switchTheme(e) {
  if (e.target.checked) {
    document.documentElement.setAttribute("data-theme", "dark");
    localStorage.setItem("theme", "dark");
  } else {
    document.documentElement.setAttribute("data-theme", "light");
    localStorage.setItem("theme", "light");
  }
}

themeSwitcher.addEventListener("change", switchTheme, false);

const burger = document.querySelector(".burger");
const nav = document.querySelector(".links");
const links = document.querySelectorAll(".nav-link");

burger.addEventListener("click", () => {
  nav.classList.toggle("active-nav");
  burger.classList.toggle("fa-times");
});

for (let i of links) {
  i.addEventListener("click", (e) => {
    if (e.target.classList.contains("nav-link")) {
      nav.classList.toggle("active-nav");
      burger.classList.toggle("fa-times");
    }
  });
}{codeBox}

So, congratulations! You just created an amazing portfolio with animated services section in under 3 minutes.

Tags:

Post a Comment

Previous Post Next Post