Project name: Floral Studio a responsive design

Hi Everone, welcome to my blog in this blog post i will share the code of JavaScript practice project "Floral studio" 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 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>Floral studio</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header>
      <nav>
        <div class="container">
          <h1 class="logo">Floral Studio</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 id="home">
      <div class="container">
        <h2>Welcome to Floral Studio</h2>
        <p>
          Discover the beauty of nature with our stunning floral arrangements.
        </p>
        <a href="#contact" class="btn">Get in Touch</a>
      </div>
    </section>

<section id="about">
      <div class="container">
        <h2>About Us</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu
          lacus mi. Mauris in ex vel urna rutrum Lorem ipsum dolor sit amet
          consectetur adipisicing elit. Doloribus mollitia, debitis eligendi nam
          sequi numquam, maxime ea suscipit accusamus esse ducimus ex iste
          veniam dolor nesciunt laudantium reprehenderit consequuntur cum? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint, quasi.
        </p>
        <a href="#contact" class="btn" id="about-btn">Load More</a>
      </div>
    </section>
    <hr>

<section id="services">
      <div class="container">
        <h2>Our Services</h2>
        <div class="service-card">
          <img src="flower1.jpg" alt="Flower" />
          <h3>Wedding Arrangements</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="service-card">
          <img src="flower2.jpg" alt="Flower" />
          <h3>Event Decorations</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="service-card">
          <img src="flower3.jpg" alt="Flower" />
          <h3>Corporate Bouquets</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>
    </section>
    <hr>

<section id="contact">
      <div class="container">
        <h2>Contact Us</h2>
        <form id="contact-form">
          <input type="text" name="name" placeholder="Your Name" required />
          <input type="email" name="email" placeholder="Your Email" required />
          <textarea
            name="message"
            placeholder="Your Message"
            required
          >

style.css:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.5;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Header styles */

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

.logo {
  text-align: center;
  font-family: cursive;
  color: blueviolet;
  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;
  padding: 1rem 1.5rem;
  font-weight: bold;
  font-size: 18px;
}

.nav-links a:hover {
  color: blueviolet;
  transition: ease-in-out;
}

/* Home section styles */

#home {
  background-image: url("bg.jpg");
  background-size: cover;
  background-position: center;
  color: #fff;
  text-align: center;
  padding: 150px 0;
}

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

#home p {
  font-size: 18px;
  margin-bottom: 40px;
}

.btn {
  display: inline-block;
  background-color: blueviolet;
  color: #fff;
  padding: 10px 30px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s;
}

.btn:hover {
  background-color: lightgray;
  color: blueviolet;
  border: 2px solid blueviolet;
}

/* About section styles */
#about h2 {
  color: blueviolet;
}
#about {
  background-color: #fff;
  padding: 100px 0;
  text-align: center;
}

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

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

#about-btn {
  margin-top: 20px;
}
/* Services section styles */
#services h2 {
  color: blueviolet;
}

#services {
 
  padding: 100px 0;
  background-color: rgb(212, 180, 241);
}

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

.service-card {
  background-color: #fff;
  border: 2px solid blueviolet;
  padding: 20px;
  margin-bottom: 30px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.service-card img {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  margin-bottom: 20px;
}

.service-card h3 {
  font-size: 24px;
  margin-bottom: 10px;
}

.service-card p {
  font-size: 16px;
}

/* Contact section styles */
#contact h2 {
  color: blueviolet;
}

#contact {
  background-color: #fff;
  padding: 100px 0;
  text-align: center;
}

#contact h2 {
  font-size: 36px;
  margin-bottom: 40px;
}

#contact-form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#contact-form input,
#contact-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
}

#contact-form button {
  background-color: blueviolet;
  color: #fff;
  border: none;
  padding: 10px 30px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s;
}

#contact-form button:hover {
  background-color: lightgray;
  color: blueviolet;
  border: 2px solid blueviolet;
}

/* Footer styles */

footer {
  background-color: #f8f8f8;
  padding: 20px 0;
  text-align: center;
}

/* Media Queries */

@media screen and (max-width: 768px) {
  .container {
    padding: 10px;
  }

.nav-links {
    flex-direction: column;
    align-items: flex-start;
  }

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

#home {
    padding: 100px 0;
  }

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

#home p {
    font-size: 16px;
    margin-bottom: 20px;
  }

.btn {
    padding: 8px 20px;
  }

#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-card {
    margin-bottom: 20px;
  }

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

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

#contact {
    padding: 80px 0;
  }

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

#contact-form input,
  #contact-form textarea {
    font-size: 14px;
  }

#contact-form button {
    padding: 8px 20px;
  }
}

index.js:

Here is the explaination:

This code provides smooth scrolling functionality for anchor links on a web page. When the DOM content is loaded, it selects all anchor links with the class 'nav-links'. It then attaches a click event listener to each anchor link. When an anchor link is clicked, it prevents the default behavior of navigating to a different page. Instead of navigating, it retrieves the target location specified in the link's href attribute. The smoothScroll function is called, passing the target location as an argument. The smoothScroll function finds the element on the page corresponding to the target location and scrolls the window smoothly to that element using the scrollTo method with the "smooth" behavior.

FINAL WORDS:
Thank you 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

Project name: Floral Studio a responsive design

Comments

Post a Comment

Popular posts from this blog

Project name: Profile statistics

Anmie Pics Generator

snack zilla : a responsive design with a slider