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" />

    <!-- Font Awesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
      integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <!-- CSS link -->
    <link rel="stylesheet" href="./assets/sass/style.css" />
    <title>Designer | Sass Template</title>
  </head>
  <body>
    <!-- Header section start -->
    <div class="header header">
      <!-- Navbar section start -->
      <nav class="nav">
        <div class="container">
          <div class="logo">
            <img
              src="./assets/images/white-logo.png"
              alt="Logo"
              class="logo-img"
            />
          </div>
          <div class="nav-list">
            <a href="./index.html" class="nav-list-link active">Homepage</a>
            <a href="./about.html" class="nav-list-link">About Us</a>
            <a href="./explore.html" class="nav-list-link">Explore Work</a>
            <a href="./trending.html" class="nav-list-link">Trending</a>
            <a href="./contact.html" class="nav-list-link">Contact Us</a>
          </div>
          <div class="burger">
            <i class="fa-solid fa-bars"></i>
          </div>
        </div>
      </nav>
      <!-- Navbar section end -->
      <!-- Home section start -->
      <section class="home">
        <div class="page-start">
          <p class="page-secondary-text">WE PROVIDE EVERYTHING</p>
          <h1 class="page-title"><span>INTERIOR</span> DESIGNER</h1>
          <button class="white-btn">
            <a href="#">Discover Me</a>
          </button>
        </div>
        <form class="form container">
          <div class="main-content">
            <div class="form-group">
              <label for="text" class="form-label">Search Work by Title</label>
              <input
                type="text"
                id="text"
                class="form-control"
                placeholder="Type any work title..."
              />
            </div>
            <div class="form-group">
              <label for="dropdown1" class="form-label">Choose Category</label>
              <select name="#" id="dropdown1" class="form-control">
                <option value="value1">Choose category</option>
                <option value="value2">Interior Design</option>
                <option value="value3">Exterior Design</option>
                <option value="value4">New Ideas</option>
                <option value="value5">Trendy Design</option>
              </select>
            </div>
            <div class="form-group">
              <label for="dropdown2" class="form-label">Price Range</label>
              <select name="#" id="dropdown2" class="form-control">
                <option value="option1">Choose price</option>
                <option value="option2">$100 - $250</option>
                <option value="option3">$250 - $500</option>
                <option value="option4">$500 - $1000</option>
                <option value="option5">$1000 +</option>
              </select>
            </div>
            <div class="form-group">
              <label for="dropdown3" class="form-label">Pick a Plan</label>
              <select name="#" id="dropdown3" class="form-control">
                <option value="options1">Choose plan</option>
                <option value="options2">Standard</option>
                <option value="options3">Professional</option>
                <option value="options4">Golden</option>
                <option value="options5">Premium</option>
              </select>
            </div>
          </div>
          <button class="btn">
            <a href="#">Search Now</a>
          </button>
        </form>
      </section>
      <!-- Home section end -->
    </div>
    <!-- Header section end -->
    <!-- Work section start -->
    <section class="work container">
      <div class="section-start">
        <h1 class="section-title">EXPLORE SOME OF OUR LATEST</h1>
        <p class="section-text">
          INTERIOR DESIGN WORK <span class="section-fullstop">.</span>
        </p>
      </div>
      <div class="content">
        <div class="content-img">
          <img src="./assets/images/explore-work-left-image.jpg" alt="img" />
        </div>
        <div class="content-text">
          <h1 class="title">Interior Design</h1>
          <p class="text">
            <i class="fa-solid fa-calendar-days"></i>
            January 22, 2022
          </p>
          <a href="#" class="title-icon">
            The Waterfront Cafe and Restaurant
            <i class="fa-solid fa-right-long"></i>
          </a>
          <div class="par">
            <p class="text">
              <i class="fa-solid fa-map"></i>
              Florida, USA
            </p>
            <p class="text w-70">
              Designer HTML5 Nursaidbek Qodirov is 100% free to
              <br />
              download provided by Nursaidbek Qodirov website.
            </p>
          </div>
          <h1 class="title">Building & Developing</h1>
          <p class="text">
            <i class="fa-solid fa-calendar-days"></i>
            January 20, 2022
          </p>
          <a href="#" class="title-icon">
            Home Land Port Canaveral Suites
            <i class="fa-solid fa-right-long"></i>
          </a>
          <div class="par">
            <p class="text">
              <i class="fa-solid fa-map"></i>
              Miami Beach, Florida, USA
            </p>
            <p class="text w-70">
              This is based on Sass latest syntax CSS layout where you can
              easily edit and use Sass components.
            </p>
          </div>
          <h1 class="title">Giving Your Brand Power</h1>
          <div class="par-2">
            <p class="text">
              <i class="fa-solid fa-calendar-days"></i>
              January 18, 2022
            </p>
            <a href="#" class="title-icon">
              Hallandale Beach Motel Design
              <i class="fa-solid fa-right-long"></i>
            </a>
          </div>
          <div class="par">
            <p class="text">
              <i class="fa-solid fa-map"></i>
              North City Beach Park
            </p>
            <p class="text w-70">
              Feel free to download & use this template for your websites.
              Please tell your friends about Nursaidbek Qodirov.
            </p>
          </div>
          <h1 class="title">Boost Up Your Style</h1>
          <div class="par-2">
            <p class="text">
              <i class="fa-solid fa-calendar-days"></i>
              January 16, 2022
            </p>
            <a href="#" class="title-icon">
              Interior for Marina Beach Resort
              <i class="fa-solid fa-right-long"></i>
            </a>
          </div>
          <div class="par">
            <p class="text">
              <i class="fa-solid fa-map"></i>
              Sunny Isles Beach, FL 33160
            </p>
            <p class="text w-70">
              You are <span>NOT allowed</span> to redistribute the downloadable
              ZIP file of this template on any other website. Please contact us
              for more info.
            </p>
          </div>
        </div>
      </div>
    </section>
    <!-- Work section end -->
    <!-- Whatstrending section start -->
    <section class="whatstrending">
      <div class="content">
        <div class="content-text">
          <div class="section-start">
            <h1 class="section-title">CHECK OUT WHATS TRENDING IN</h1>
            <p class="section-text">
              OUR INTERIOR WORK
              <span class="section-fullstop">.</span>
            </p>
          </div>
          <p class="main-text">
            Lorem Ipsum dolor sit amet, consectetur adipsicing kengan omeg kohm
            tokito adipcingi elit, sed do eismuod larehai med at vero eos et
            suscipit neque rerum molestias accusamus et iusto odio dignissimos
            ducimus qui blanditis.
          </p>
          <button class="btn">
            <a href="#">Discover Me</a>
          </button>
        </div>
        <div class="content-img">
          <div class="main-img">
            <div class="descr">
              <h1 class="title">MODERNIZED INTERIOR</h1>
              <p class="text">Guest Room Decoration</p>
            </div>
          </div>
          <div class="second-img"></div>
        </div>
      </div>
    </section>
    <!-- Whatstrending section end -->
    <!-- Contact Section start -->
    <section class="contact">
      <div class="content container">
        <div class="content-text">
          <div class="section-start">
            <h1 class="section-title">DON'T BE HESITATED</h1>
            <p class="section-text">
              TALK TO US
              <span class="section-fullstop">NOW!</span>
            </p>
          </div>
          <form action="#" class="form">
            <div class="form-group">
              <input
                type="text"
                class="form-control"
                placeholder="First Name*"
              />
              <input
                type="text"
                class="form-control"
                placeholder="Last Name*"
              />
            </div>
            <div class="form-group">
              <input
                type="text"
                class="form-control"
                placeholder="Your Email"
              />
              <input type="text" class="form-control" placeholder="Subject*" />
            </div>
            <textarea
              cols="30"
              rows="10"
              class="form-control"
              placeholder="Message"
            ></textarea>
            <button class="form-btn">
              <a href="#">Send Message</a>
            </button>
          </form>
        </div>
        <div class="content-image">
          <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3072.5394187471625!2d66.9186086127865!3d39.63757317564198!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3f4d19a0eca604a7%3A0x81055face6a0c6af!2sGame%20Club%20Gigabyte!5e0!3m2!1sru!2s!4v1692157651025!5m2!1sru!2s"
            width="100%"
            height="500"
            style="border: 0"
            allowfullscreen=""
            loading="lazy"
            referrerpolicy="no-referrer-when-downgrade"
          ></iframe>
        </div>
      </div>
    </section>
    <!-- Contact Section end -->
    <!-- Footer section start -->
    <footer class="footer container">
      <div class="first-line">
        <div class="left-side">
          <div class="logo">
            <img src="./assets/images/footer-logo.png" alt="Logo" />
          </div>
          <p class="main-text">
            Designer is free Sass CSS template. Everyone can get the best HTML
            CSS templates from Nursaidbek Qodirov website.
          </p>
        </div>
        <div class="right-side">
          <ul class="foo-list">
            <li class="foo-list-item title">Our Location</li>
            <li class="foo-list-item">Sunny Isles Beach,</li>
            <li class="foo-list-item">Florida 33160,</li>
            <li class="foo-list-item">United States</li>
          </ul>
          <ul class="foo-list">
            <li class="foo-list-item title">Customer Care</li>
            <li class="foo-list-item">010-020-0340</li>
            <li class="foo-list-item">090-080-0760</li>
            <li class="foo-list-item">info@company.com</li>
          </ul>
          <ul class="foo-list">
            <li class="foo-list-item title">Follow Us</li>
            <li class="foo-list-item">
              <i class="fa-brands fa-facebook"></i> Facebook
            </li>
            <li class="foo-list-item">
              <i class="fa-brands fa-twitter"></i> Twitter
            </li>
            <li class="foo-list-item">
              <i class="fa-brands fa-linkedin"></i> Linkedin
            </li>
          </ul>
          <form class="form">
            <h3 class="form-title">Subscribe To Our Newsletter</h3>
            <div class="form-group">
              <input type="email" class="form-control" placeholder="Type your email..."/>
              <button class="form-btn">
                <a href="#">Submit <i class="fa-solid fa-right-long"></i></a>
              </button>
            </div>
          </form>
        </div>
      </div>
      <div class="bottom-line">
        <div class="left-side">
          <p class="text">
            Copyright © 2022 Designer Co., Ltd. All Rights Reserved.
          </p>
          <p class="link">
            <a href="#">Design: TemplateMo</a>
          </p>
        </div>
        <div class="right-side">
          <p class="top-link">
            <a href="#">Go to Top <i class="fa-solid fa-up-long"></i></a>
          </p>
        </div>
      </div>
    </footer>
    <!-- Footer section end -->
    <!-- Js link -->
    <script src="./assets/js/script.js"></script>
    <!-- End Js link -->
  </body>
</html>