Dental House: A responsive design with animated scrolling

Hi Everone, welcome to my blog and in this blog post i will share the code of JavaScript practice project "Dental House" for beginners along with explaination. You can copy the code by clicking the button just above the code. Read the explaiantion for better understanding. let's get started with index.html file:

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Dental House</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>

<header>
      <nav>
        <div class="container">
          <h1 class="logo">Dental House</h1>
          <ul class="nav-links">
            <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>
      </nav>
    </header>

<section class="animated" id="home">
      <div class="home">
        <h1>Welcome to Your Dental House</h1>
        <p>Providing quality dental care for your family</p>
        <a href="#" class="b-btn">Schedule an Appointment</a>
      </div>
    </section>

<section class="animated"  id="about">
      <div class="container">
        <h2>About Us</h2>
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit.
          Reprehenderit necessitatibus error incidunt sapiente minima minus
          totam id placeat magni optio, dignissimos odio enim! Id quidem
          quisquam reiciendis officiis neque tenetur? Dicta tenetur laborum
          quisquam, provident delectus nostrum doloribus est vero libero ratione
          unde cum incidunt reprehenderit? Non tenetur, ducimus alias facilis
          eius numquam animi veniam explicabo corporis qui iusto quasi accusamus
          ullam modi repellat aperiam pariatur? Nisi, ea aspernatur temporibus
          dolore quis reiciendis voluptate quaerat unde dignissimos hic
          excepturi laudantium iusto blanditiis repellendus cum officiis rem
          velit minima. Mollitia ex maiores cum quo, at odit dolor cumque. Nisi,
          reiciendis doloremque.
        </p>
        <a href="#contact" class="a-btn" id="about-btn">Load More</a>
      </div>
    </section>

<section class="services animated" id="services">
      <h2>Our Services</h2>
      <div class="services-card">
        <div class="service">
          <img src="s3.jpg" alt="Service 1" />
          <h3>Root Canals</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="service">
          <img src="s2.jpg" alt="Service 2" />
          <h3>Teeth Cleaning</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="service">
          <img src="s4.jpg" alt="Service 1" />
          <h3>Teeth Fillings</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="service">
          <img src="s5.jpg" alt="Service 2" />
          <h3>Teeth Restorations</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="service">
          <img src="s6.jpg" alt="Service 1" />
          <h3>Teeth Whitening</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="service">
          <img src="s2.jpg" alt="Service 2" />
          <h3>Extractions</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>
    </section>

<section   id="contact">
      <h2>Find Us</h2>
      <div
        style="
          max-width: 100%;
          list-style: none;
          transition: none;
          overflow: hidden;
          width: 100%;
          height: 500px;
        "
      >
        <div
          id="g-mapdisplay"
          style="height: 100%; width: 100%; max-width: 100%"
        >
          <iframe
            style="height: 100%; width: 100%; border: 0"
            frameborder="0"
            src="https://www.google.com/maps/embed/v1/place?q=New+York,+NY,+USA&key=AIzaSyBFw0Qbyq9zTFTd-tUY6dZWTgaQzuU17R8"
          ></iframe>
        </div>
        <a
          class="from-embedmap-code"
          href="https://www.bootstrapskins.com/themes"
          id="grab-map-data"
          >premium bootstrap themes</a
        ><style>
          #g-mapdisplay img.text-marker {
            max-width: none !important;
            background: none !important;
          }
          img {
            max-width: none;
          }
        </style>
      </div>
    </section>

<footer>
      <div class="container">
        <h2>Contact Us</h2>
        <p>123 Dental Street, City, State, ZIP</p>
        <p>Phone: 123-456-7890</p>
        <p>Email: info@yourdentalhouse.com</p>
      </div>
      <p>© 2023 Your Dental House. All rights reserved.</p>
    </footer>

style.css:

/* Reset default styles */
body {
  margin: 0;
  padding: 0;
}

/* Navbar styles */

header {
  background-color: rgb(252, 251, 252);
  padding: 10px 0;
}

.logo {
  text-align: center;
  font-family: cursive;
  color: rgb(43, 137, 226);
  letter-spacing: 2px;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.nav-links {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-links li {
  margin-right: 10px;
}

.nav-links a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
  font-size: 18px;
}

.nav-links a:hover {
  background-color: rgb(43, 137, 226);
  padding: 8px;
  color: white;
  border-radius: 20px;
  transition: ease-in-out;
}

/* Section styles */
.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 40px;
  }
  
  .container h2 {
    font-size: 24px;
    color: #333;
    margin-bottom: 20px;
  }
  
  .container p {
    font-size: 18px;
    color: #666;
    line-height: 1.5;
  }

/* home */

#home {
  height: 100vh;
  width: 100%;
  background: url("bg2.jpg");
  background-size: cover;
  background-position: center;
  position: relative;
}

.home {
  text-align: center;
  padding: 200px 0;
}

.home h1 {
  font-size: 36px;
  color: rgb(252, 252, 252);
}

.home p {
  font-size: 18px;
  color: rgb(250, 248, 248);
}

.booking {
  text-align: center;
  margin-bottom: 30px;
}

.b-btn {
  display: inline-block;
  font-weight: bold;
  padding: 10px 20px;
  background-color: rgb(43, 137, 226);
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
}

.b-btn:hover {
  color: black;
}
/* about */

#about h2 {
  color: rgb(7, 11, 15);
}

#about {
  background-color: rgb(43, 137, 226);
  padding: 100px 0;
  text-align: center;
}

#about h2 {
  font-size: 36px;
  margin-bottom: 20px;
}

#about p {
  font-size: 18px;
}

#about-btn {
  margin-top: 20px;
  background-color: black;
  color: white;
  padding: 10px;
  text-decoration: none;
  border-radius: 5px;
}

/* services */

.services-card {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.services h2 {
  font-size: 36px;
  margin-bottom: 20px;
  text-align: center;
}

.service {
  width: 300px;
  margin: 20px;
  padding: 20px;
  border: 2px solid rgb(175, 203, 230);
  background-color: #f0f0f0;
  text-align: center;
  transition: transform 0.3s ease;
}

.service:hover {
  transform: translateY(-10px);
  box-shadow: 0 0 10px rgba(43, 137, 226,0.6);
}

.service img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.service h3 {
  margin-bottom: 10px;
}

.service p {
  color: #555;
}

/* Find Us */

#contact h2 {
  text-align: center;
  font-size: 36px;
  margin-bottom: 20px;
}

/* Contact section styles */
#contact {
  background-color: #f4f4f4;
  padding: 40px 0;
}

#contact .container {
  text-align: center;
}

#contact h2 {
  margin: 0 0 20px;
  font-size: 36px;
  color: #333;
}

/* Footer styles */
footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 20px;
}

footer p {
  font-size: 14px;
}

/* Add animation classes */
.animated {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.4s ease, transform 0.3s ease;
  }
  
  .animated.show {
    opacity: 1;
    transform: translateX(0);
  }

/* Media queries for responsiveness */
@media screen and (max-width: 768px) {
  .nav-links {
    flex-direction: column;
    align-items: flex-start;
  }

.nav-links li {
    margin-bottom: 10px;
  }

.nav-links a:hover{
    color: rgb(42, 137, 226);
    background-color: white;
  }

#about {
    padding: 80px 0;
  }

#about h2 {
    font-size: 28px;
    margin-bottom: 10px;
  }

#about p {
    font-size: 16px;
  }

#services {
    padding: 80px 0;
  }

#services h2 {
    font-size: 28px;
    margin-bottom: 30px;
  }

.service {
    width: 100%;
    max-width: 400px;
  }

.service h3 {
    font-size: 20px;
    margin-bottom: 8px;
  }

.service p {
    font-size: 14px;
  }
}

index.js:

Here is the explaination:

This code sets up an intersection observer to handle scroll animations on specific elements. The handleScrollAnimations function is called whenever an observed element intersects with the viewport.
Inside the handleScrollAnimations function, it checks if an observed element (entry) is intersecting with the viewport using the isIntersecting property. If it is, the show class is added to the element's class list to trigger the animation. If the element is no longer intersecting, the show class is removed.
An Intersection Observer instance named observer is created, passing the handleScrollAnimations function as the callback and a threshold value of 0.2. The threshold determines the amount of intersection required to trigger the callback function.
Next, the code selects all elements with the class animated using the querySelectorAll method and stores them in the animatedElements variable.
Finally, the observer is set to observe each element in the animatedElements collection by iterating over them with a forEach loop and calling observe on each element, which registers it for observation.
FINAL WORDS:
Don't forget to leave your feedback in the comment section. Follow front.end24 on instagram for more project ideas

Code Explained: front.end24 Edition

Search This Blog

Dental House: A responsive design with animated scrolling

Comments

Post a Comment

Popular posts from this blog

Project name: Profile statistics

Anmie Pics Generator

snack zilla : a responsive design with a slider