Create a Stunning Real Estate Landing Page: HTML, CSS, JavaScript Guide

By Faraz - March 05, 2024

Learn to create a high-converting real estate landing page using HTML, CSS, and JavaScript. Boost your property listings with our expert guide.

Join us on Telegram

Create a Stunning Real Estate Landing Page HTML, CSS, JavaScript Guide.webp

Read Also Designing a Modern Fitness App Interface with HTML and CSS.webp

Designing a Modern Fitness App Interface with HTML and CSS (Source Code)

Welcome to the world of real estate landing page! This web page is like a digital brochure for showcasing properties online. Imagine walking into a beautiful house – that's the feeling we want to create digitally. In this guide, we'll show you how to make your real estate landing page shine using simple codes like HTML, CSS, and JavaScript. Let's dive in and make your properties stand out online!

Source Code

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our real estate landing page.

After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.

Let's break down the HTML code step by step:

1. <!DOCTYPE html>: Declares the document type and version of HTML being used.

2. <html lang="en">: Defines the root element of the HTML document and specifies the language as English.

3. <head>: Contains meta-information about the HTML document, such as character encoding, viewport settings, title, and links to external resources like stylesheets and scripts.

<meta charset="UTF-8" />: Sets the character encoding to UTF-8.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />: Provides instructions to the browser on how to handle the page's rendering and compatibility.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />: Specifies the viewport properties for responsive design.
<title>Real Estate Landing Page</title>: Sets the title of the page.
<link rel="stylesheet" href="styles.css" />: Links an external CSS file named "styles.css" to style the HTML document.
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.1/css/font-awesome.min.css" rel="stylesheet" />: Links an external stylesheet from Font Awesome for icons.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>: Links the jQuery library from a Content Delivery Network (CDN) for JavaScript functionality.

4. <body class="light-theme">: Defines the body of the HTML document with a class attribute "light-theme", indicating the default theme.

5. Inside the body, there's a main div with a class "banner" containing two main sections - "banner-left" and "banner-right".

6. banner-left contains:

A switch to toggle between light and dark themes.
A heading with the text "Transparent Modern Property".
A description of the real estate services provided.
A form to search for properties using a zip code.
Social media icons for Facebook, Instagram, and Twitter.

7. banner-right contains:

Images of properties and a count of satisfied families and available units for sale.

8. <script src="script.js"></script>: Links an external JavaScript file named "script.js" for additional functionality.

This is the basic structure of our real estate landing page using HTML, and now we can move on to styling it using CSS.

<!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>Real Estate Landing Page</title>
    <link rel="stylesheet" href="styles.css" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.1/css/font-awesome.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  </head>
  <body class="light-theme">
    <div class="banner d-flex align-items-center">
        <div class="banner-left">
            <label class="switch d-flex">
                <input id="toggle-theme" type="checkbox">
                <span class="light-txt">light</span>
                <span class="dark-txt">dark</span>
            </label>
            <h1>Transparent <br> Modern <br> Property</h1>
            <div class="inner-desc">
                <p>we are here to make your journey to a new home, simple and memorable. So we decided to bring you a
                    platform which allows you to browse through millions of property listings across 900+ cities in
                    India.
                    Now buying and renting comes with the freedom of ease and comfort. </p>
                <form>
                    <div class="form-group d-flex flex-wrap">
                        <input type="text" class="form-control" id="exampleInputtext1"
                            placeholder="Enter zipcode to search properties here">
                        <button type="submit" class="black-btn">Search</button>
                    </div>
                </form>
            </div>
            <div class="social-icons d-flex align-items-center">
                <ul class="d-flex">
                    <li><a href="#" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
                    <li><a href="#" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
                    <li><a href="#" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
                </ul>
                <span>Follow us</span>
            </div>
        </div>
        <div class="banner-right d-flex">
            <div class="family">
                <img src="https://yudiz.com/codepen/real-estate/property-img-one.png" alt="img" class="img-fluid">
                <img src="https://yudiz.com/codepen/real-estate/property-img-two.png" alt="img" class="img-fluid">
                <div class="banner-right-inner">
                    <h2>42k+</h2>
                    <span>satisfied <br> family</span>
                    <img src="https://yudiz.com/codepen/real-estate/heart-icon.svg" alt="heart-icon" class="img-fluid">
                </div>
                <img src="https://yudiz.com/codepen/real-estate/property-img-three.png" alt="img" class="img-fluid">
                <img src="https://yudiz.com/codepen/real-estate/property-img-four.png" alt="img" class="img-fluid">
            </div>
            <div class="sale">
                <img src="https://yudiz.com/codepen/real-estate/property-img-five.png" alt="img" class="img-fluid">
                <img src="https://yudiz.com/codepen/real-estate/property-img-six.png" alt="img" class="img-fluid">
                <div class="banner-right-inner">
                    <h2>30k+</h2>
                    <span>Available <br> Unit for Sale</span>
                    <img src="https://yudiz.com/codepen/real-estate/unit-icon.svg" alt="unit-icon" class="img-fluid">
                </div>
                <img src="https://yudiz.com/codepen/real-estate/property-img-seven.png" alt="img" class="img-fluid">
                <img src="https://yudiz.com/codepen/real-estate/property-img-eight.png" alt="img" class="img-fluid">
            </div>
        </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

Read Also Create Stylish Newsletter Subscription Box HTML CSS Tutorial.jpg

Create Stylish Newsletter Subscription Box | HTML/CSS Tutorial

Step 2 (CSS Code):

Once the basic HTML structure of the landing page is in place, the next step is to add styling to the landing page using CSS.

Next, we will create our CSS file. In this file, we will use some basic CSS rules to style our page.

Let's break down the code section by section:

1. @import: This line imports a font from Google Fonts called Montserrat with various weights and styles.

2. Theme Variables:

.light-theme: Defines variables for colors in a light theme.
.dark-theme: Defines variables for colors in a dark theme.

3. Utility Classes:

.d-flex, .flex-wrap, .justify-content-between, .align-items-center: These classes define common flexbox properties for layout.
ul, ol: Styles list elements to remove default padding and margin.

4. Element Styles:

.img-fluid: Ensures images scale fluidly within their parent containers.
*: Applies a universal box-sizing rule to include padding and borders in the element's total width and height.
body: Sets font family and size for the entire document.
h1, h2, a, img, p, span, li: Sets default styles for these elements with transitions.

5. Banner Section:

.banner: Defines styles for a banner section, including height, overflow, padding, and position.
.banner-left, .banner-right: Styles for the left and right sections of the banner.
.banner::after: Pseudo-element for the banner's background overlay.
.banner-left h1, .banner-left p, .banner-left .form-control, .banner-left .black-btn: Styles for text, form controls, and buttons in the left section of the banner.
.banner-right-inner: Styles for the inner content of the right section of the banner.
.family, .sale: Styles for images in the right section of the banner.

6. Social Icons Section:

.social-icons: Styles for a list of social icons.
.social-icons a: Styles for social icon links.
.social-icons span: Styles for a separator line between social icons.

7. Media Queries:

These define styles for different screen sizes, adjusting font sizes, layout proportions, and other properties accordingly.

This will give our real estate landing page an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

.light-theme {
  --black-color: #000;
  --grey-color: #b5b2b2;
  --grey-color-200: #9e9e9e;
  --grey-border: #e4dfdd;
  --grey-border-200: rgba(149, 146, 146, 0.32);
  --text-color: rgba(0, 0, 0, 0.5);
  --white-color: #fff;
  --green-color: #88ffc6;
}

.dark-theme {
  --black-color: #fff;
  --text-color: rgba(255, 255, 255, 0.5);
  --white-color: #000;
  --green-color: #88ffc6;
}

.d-flex {
  display: flex;
  display: -webkit-flex;
}
.flex-wrap {
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
}
.justify-content-between {
  justify-content: space-between;
  -webkit-justify-content: space-between;
}
.align-items-center {
  align-items: center;
  --webkit-align-items: center;
}
ul,
ol {
  list-style: none;
  padding: 0px;
  margin: 0px;
  transition: all 1.2s;
  -webkit-transition: all 1.2s;
}
.img-fluid {
  max-width: 100%;
  height: auto;
}

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
body {
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  line-height: 30px;
}
h1 {
  font-size: 91px;
  line-height: 110px;
  font-weight: 700;
  text-transform: uppercase;
  transition: all 1.2s;
  -webkit-transition: all 1.2s;
}
h2 {
  font-size: 52px;
  line-height: 62px;
  font-weight: 800;
  transition: all 1.2s;
  -webkit-transition: all 1.2s;
}
a {
  text-decoration: none;
  transition: all 1.2s;
  -webkit-transition: all 1.2s;
}
img,
p,
span,
li {
  transition: all 1.2s;
  -webkit-transition: all 1.2s;
}

.banner {
  height: 100vh;
  overflow: hidden;
  min-height: 820px;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  padding: 0px 40px;
  position: relative;
}
.banner::after {
  content: "";
  position: absolute;
  transition: all 1s;
  -webkit-transition: all 1s;
  top: 0;
  right: 0%;
  width: 0%;
  background: #000;
  height: 100%;
}
.dark-theme .banner::after {
  content: "";
  width: 100%;
}

.banner-left {
  width: 70%;
  position: relative;
  z-index: 1;
}
.banner-left h1 {
  margin-bottom: 0px;
  position: relative;
  color: var(--black-color);
}
.dark-theme .banner-left h1 {
  color: #000;
  text-shadow: 0px 0px 2px #88ffc6;
}
.banner-left h1::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  left: -40px;
  width: 10px;
  background: var(--green-color);
  height: 100%;
}

.inner-desc {
  margin-top: 58px;
  max-width: 1000px;
}
.inner-desc form {
  margin-top: 51px;
}
.banner-left p {
  text-transform: uppercase;
  color: var(--text-color);
}

.switch {
  margin-bottom: 20px;
  background: rgba(0, 0, 0, 0.1);
  position: relative;
  border-radius: 50px;
  width: 200px;
  transition: all 1.2s;
  -webkit-transition: all 1.2s;
}
.switch.checked {
  background: #34323d;
}
.switch::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  background: #fff;
  border-radius: 50px;
  z-index: 1;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15);
  transition: 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -webkit-transition: 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.switch input[type="checkbox"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.switch span {
  color: var(--black-color);
  display: block;
  width: 50%;
  text-align: center;
  padding: 10px;
  z-index: 2;
  text-transform: capitalize;
}
.switch.checked::before {
  left: 50%;
}
.switch.checked .dark-txt {
  color: #000;
}

.banner-left .form-control {
  border: 1px solid var(--grey-border);
  background: transparent;
  height: auto;
  padding: 33px 37px;
  width: 70%;
  font-size: 16px;
  line-height: 20px;
  text-transform: uppercase;
  color: var(--black-color);
}
.dark-theme .banner-left .form-control {
  border-color: var(--text-color);
  transition: all 1.2s;
  -webkit-transition: all 1.2s;
}
.banner-left .form-control::placeholder {
  color: var(--text-color);
  text-transform: uppercase;
  transition: all 1.2s;
  -webkit-transition: all 1.2s;
}
.banner-left .form-control:focus {
  border: 1px solid var(--green-color);
  box-shadow: none;
  -webkit-box-shadow: none;
  outline: none;
}
.banner-left .black-btn {
  font-size: 16px;
  line-height: 20px;
  text-transform: uppercase;
  color: var(--white-color);
  transition: all 1.2s;
  -webkit-transition: all 1.2s;
  padding: 30px 50px;
  width: 30%;
  background: var(--black-color);
  border: 1px solid var(--black-color);
}
.banner-left .black-btn:hover {
  color: var(--black-color);
  cursor: pointer;
  background: var(--white-color);
}
.dark-theme .banner-left .black-btn:hover {
  border-color: var(--text-color);
  border-left: none;
}

.social-icons {
  margin-top: 90px;
}
.social-icons li {
  margin: 0px 10px;
}
.social-icons li:first-child {
  margin-left: 0px;
}
.social-icons li:last-child {
  margin-right: 0px;
}
.social-icons a {
  width: 40px;
  height: 40px;
  font-size: 18px;
  line-height: 40px;
  border-radius: 50%;
  border: 1px solid var(--grey-border-200);
  color: var(--black-color);
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
}
.social-icons a:hover {
  background: var(--black-color);
  border-color: var(--black-color);
  color: var(--white-color);
}
.social-icons span {
  color: var(--grey-color);
  position: relative;
  display: block;
  margin-left: 150px;
}
.social-icons span:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -150px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  height: 0.2px;
  border: 1px dashed var(--grey-color-200);
  width: 140px;
}

.banner-right {
  position: relative;
  z-index: 1;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  width: 30%;
  padding-left: 70px;
  align-self: self-start;
}
.banner-right > div {
  width: 46%;
  flex-shrink: 0;
  -webkit-flex-shrink: 0;
}
.banner-right-inner {
  border: 1px solid var(--black-color);
  position: relative;
  padding: 35px 22px 22px;
  margin-top: 45px;
  transition: all 1.2s;
  -webkit-transition: all 1.2s;
}
.dark-theme .banner-right-inner {
  border: 1px solid var(--green-color);
}
.banner-right-inner img {
  position: absolute;
  top: 18px;
  right: 18px;
}
.dark-theme .banner-right-inner img {
  -webkit-filter: invert(100%);
  filter: invert(100%);
}
.banner-right-inner h2 {
  margin-bottom: 15px;
  color: var(--black-color);
}
.banner-right-inner span {
  font-size: 20px;
  line-height: 26px;
  text-transform: capitalize;
  color: var(--text-color);
}
.dark-theme .banner-right-inner span {
  color: var(--green-color);
}
.family > img,
.sale > img {
  width: 100%;
  object-fit: cover;
  display: block;
  margin-top: 45px;
}
.family > img:first-child,
.sale > img:first-child {
  margin-top: 0px;
}

.banner-right .family {
  position: relative;
  animation: myanimation 10s infinite linear;
  transform: translateY(calc(-50% + 50vh));
}
.banner-right .sale {
  position: relative;
  animation: myanimationtwo 10s infinite linear;
}

@keyframes myanimation {
  0% {
    transform: translateY(calc(-40% + 50vh));
    -webkit-transform: translateY(calc(-50% + 50vh));
  }
  25% {
    transform: translateY(0%);
    -webkit-transform: translateY(0%);
  }
  75% {
    transform: translateY(calc(-100% + 100vh));
    -webkit-transform: translateY(calc(-100% + 100vh));
  }
  100% {
    transform: translateY(calc(-40% + 50vh));
    -webkit-transform: translateY(calc(-50% + 50vh));
  }
}

@keyframes myanimationtwo {
  0% {
    transform: translateY(calc(-70% + 100vh));
    -webkit-transform: translateY(calc(-70% + 100vh));
  }
  25% {
    transform: translateY(calc(-100% + 100vh));
    -webkit-transform: translateY(calc(-100% + 100vh));
  }
  75% {
    transform: translateY(0%);
    -webkit-transform: translateY(calc(0%));
  }
  100% {
    transform: translateY(calc(-70% + 100vh));
    -webkit-transform: translateY(calc(-70% + 100vh));
  }
}

@media (min-width: 1400px) and (max-width: 1699px) {
  body {
    font-size: 14px;
    line-height: 26px;
  }
  h1 {
    font-size: 61px;
    line-height: 75px;
  }
  h2 {
    font-size: 36px;
    line-height: 46px;
  }

  .banner {
    min-height: 700px;
  }
  .banner-left .form-control {
    width: 75%;
  }
  .banner-left .black-btn {
    width: 25%;
  }
  .banner-left .form-control,
  .banner-left .black-btn {
    padding: 20px 30px;
  }
  .banner-left .form-control,
  .banner-left .black-btn {
    font-size: 14px;
    line-height: 20px;
  }
  .inner-desc {
    margin-top: 32px;
  }

  .banner-right {
    padding-left: 45px;
  }
  .banner-right .sale {
    transform: translateY(-70px);
    -webkit-transform: translateY(-70px);
  }
  .banner-right-inner {
    padding: 30px 15px 20px;
    margin-top: 35px;
  }
  .family > img,
  .sale > img {
    margin-top: 35px;
  }

  .banner-right-inner img {
    top: 15px;
    right: 15px;
    width: 18px;
  }
  .banner-right-inner h2 {
    margin-bottom: 5px;
  }
  .banner-right-inner span {
    font-size: 16px;
    line-height: 26px;
  }

  .social-icons {
    margin-top: 50px;
  }
  .social-icons li {
    margin: 0px 7px;
  }
}

@media (min-width: 1200px) and (max-width: 1399px) {
  body {
    font-size: 14px;
    line-height: 26px;
  }
  h1 {
    font-size: 45px;
    line-height: 61px;
  }
  h2 {
    font-size: 28px;
    line-height: 40px;
  }

  .banner {
    min-height: 600px;
  }
  .banner-left .form-control {
    width: 75%;
  }
  .banner-left .black-btn {
    width: 25%;
  }

  .banner-left .form-control,
  .banner-left .black-btn {
    padding: 15px 20px;
  }
  .banner-left .form-control,
  .banner-left .black-btn {
    font-size: 14px;
    line-height: 20px;
  }

  .inner-desc {
    margin-top: 30px;
  }
  .inner-desc form {
    margin-top: 30px;
  }
  .banner-right {
    padding-left: 45px;
  }
  .banner-right .sale {
    transform: translateY(-60px);
    -webkit-transform: translateY(-60px);
  }
  .banner-right-inner {
    padding: 25px 12px 15px;
    margin-top: 30px;
  }
  .family > img,
  .sale > img {
    margin-top: 30px;
  }

  .banner-right-inner img {
    top: 15px;
    right: 15px;
    width: 18px;
  }
  .banner-right-inner h2 {
    margin-bottom: 5px;
  }
  .banner-right-inner span {
    font-size: 14px;
    line-height: 24px;
  }

  .social-icons {
    margin-top: 30px;
  }
  .social-icons li {
    margin: 0px 7px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  body {
    font-size: 12px;
    line-height: 24px;
  }
  h1 {
    font-size: 40px;
    line-height: 55px;
  }
  h2 {
    font-size: 22px;
    line-height: 32px;
  }

  .banner {
    padding: 0px 25px;
    min-height: 570px;
  }
  .banner-left .form-control {
    width: 75%;
  }
  .banner-left .black-btn {
    width: 25%;
  }

  .banner-left .form-control,
  .banner-left .black-btn {
    padding: 16px 30px;
  }
  .banner-left .form-control,
  .banner-left .black-btn {
    font-size: 12px;
    line-height: 20px;
  }
  .banner-left h1::before {
    left: -25px;
    width: 7px;
  }
  .switch span {
    padding: 8px 10px;
  }

  .inner-desc,
  .inner-desc form {
    margin-top: 30px;
  }

  .banner-right {
    padding-left: 20px;
  }
  .banner-right .sale {
    transform: translateY(-60px);
    -webkit-transform: translateY(-60px);
  }
  .banner-right-inner {
    padding: 25px 12px 15px;
    margin-top: 30px;
  }
  .family > img,
  .sale > img {
    margin-top: 30px;
  }
  .banner-right-inner img {
    top: 15px;
    right: 15px;
    width: 18px;
  }
  .banner-right-inner h2 {
    margin-bottom: 5px;
  }
  .banner-right-inner span {
    font-size: 14px;
    line-height: 24px;
  }

  .social-icons {
    margin-top: 40px;
  }
  .social-icons a {
    font-size: 16px;
    line-height: 40px;
  }
  .social-icons li {
    margin: 0px 7px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  body {
    font-size: 12px;
    line-height: 24px;
  }
  h1 {
    font-size: 35px;
    line-height: 50px;
  }
  h2 {
    font-size: 20px;
    line-height: 30px;
  }

  .banner {
    padding: 0px 25px;
    min-height: 510px;
  }
  .banner-left {
    width: 60%;
  }
  .banner-left .form-control {
    width: 70%;
  }
  .banner-left .black-btn {
    width: 30%;
  }

  .banner-left .form-control,
  .banner-left .black-btn {
    padding: 12px;
  }
  .banner-left .form-control,
  .banner-left .black-btn {
    font-size: 12px;
    line-height: 20px;
  }
  .banner-left h1::before {
    left: -25px;
    width: 7px;
  }
  .switch span {
    padding: 8px 10px;
  }

  .inner-desc {
    margin-top: 30px;
  }
  .inner-desc form {
    margin-top: 40px;
  }

  .banner-right {
    padding-left: 30px;
    width: 40%;
  }
  .banner-right .sale {
    transform: translateY(-60px);
    -webkit-transform: translateY(-60px);
  }
  .banner-right-inner {
    padding: 25px 12px 15px;
    margin-top: 30px;
  }
  .family > img,
  .sale > img {
    margin-top: 30px;
  }
  .banner-right-inner img {
    top: 15px;
    right: 15px;
    width: 18px;
  }
  .banner-right-inner h2 {
    margin-bottom: 5px;
  }
  .banner-right-inner span {
    font-size: 12px;
    line-height: 20px;
  }

  .social-icons {
    margin-top: 40px;
  }
  .social-icons a {
    font-size: 14px;
    line-height: 35px;
    width: 35px;
    height: 35px;
  }
  .social-icons li {
    margin: 0px 7px;
  }
}

@media (max-width: 767px) {
  body {
    font-size: 12px;
    line-height: 24px;
  }
  h1 {
    font-size: 35px;
    line-height: 50px;
  }
  h2 {
    font-size: 20px;
    line-height: 30px;
  }

  .banner {
    padding: 25px 15px;
    flex-direction: column;
    -webkit-flex-direction: column;
    height: auto;
    overflow: auto;
  }
  .banner-left {
    width: 100%;
    margin-bottom: 30px;
  }
  .banner-left .form-control {
    width: 60%;
  }
  .banner-left .black-btn {
    width: 40%;
  }
  .banner-left .form-control,
  .banner-left .black-btn {
    padding: 12px;
  }
  .banner-left .form-control,
  .banner-left .black-btn {
    font-size: 12px;
    line-height: 20px;
  }
  .banner-left h1::before {
    left: -15px;
    width: 7px;
  }
  .switch span {
    padding: 8px 10px;
  }

  .inner-desc {
    margin-top: 30px;
  }
  .inner-desc form {
    margin-top: 35px;
  }

  .banner-right {
    padding-left: 0px;
    width: 100%;
    flex-direction: column;
    -webkit-flex-direction: column;
    overflow: hidden;
  }
  .banner-right .family {
    display: flex;
    display: -webkit-flex;
    margin-bottom: 20px;
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
  .banner-right > div {
    width: fit-content;
  }
  .banner-right .sale {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    display: flex;
    display: -webkit-flex;
  }
  .banner-right-inner {
    padding: 20px 12px 10px;
    margin: 0px;
    min-width: 140px;
  }
  .family > img,
  .sale > img {
    margin: 0px 10px;
    min-width: 200px;
    height: 115px;
  }
  .family > img:first-child,
  .sale > img:first-child {
    margin-left: 0px;
  }
  .family > img:last-child,
  .sale > img:last-child {
    margin-right: 0px;
  }
  .banner-right-inner img {
    top: 15px;
    right: 15px;
    width: 18px;
  }
  .banner-right-inner h2 {
    margin-bottom: 5px;
  }
  .banner-right-inner span {
    font-size: 12px;
    line-height: 20px;
  }

  @keyframes myanimation {
    0% {
      transform: translateX(calc(-50% + 50vw));
      -webkit-transform: translateX(calc(-50% + 50vw));
    }
    25% {
      transform: translateX(0%);
      -webkit-transform: translateX(0%);
    }
    75% {
      transform: translateX(calc(-100% + 100vw));
      -webkit-transform: translateX(calc(-100% + 100vw));
    }
    100% {
      transform: translateX(calc(-50% + 50vw));
      -webkit-transform: translateX(calc(-50% + 50vw));
    }
  }

  @keyframes myanimationtwo {
    0% {
      transform: translateX(calc(-45% + 50vw));
      -webkit-transform: translateX(calc(-45% + 50vw));
    }
    25% {
      transform: translateX(calc(-100% + 100vw));
      -webkit-transform: translateX(calc(-100% + 100vw));
    }
    75% {
      transform: translateX(0%);
      -webkit-transform: translateX(0%);
    }
    100% {
      transform: translateX(calc(-45% + 50vw));
      -webkit-transform: translateX(calc(-45% + 50vw));
    }
  }

  .social-icons {
    margin-top: 40px;
  }
  .social-icons a {
    font-size: 14px;
    line-height: 35px;
    width: 35px;
    height: 35px;
  }
  .social-icons li {
    margin: 0px 4px;
  }
  .social-icons span {
    margin-left: 90px;
  }
  .social-icons span:before {
    width: 85px;
    left: -90px;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .family > img,
  .sale > img {
    min-width: 300px;
  }
}

Step 3 (JavaScript Code):

Finally, we need to create a function in JavaScript.

Let's break down the code section by section:

1. $(document).ready(function () { ... });: This line ensures that the JavaScript code executes only after the HTML document has been fully loaded. It's a jQuery shorthand for "run this code when the document is ready."

2. const themeSwitch = document.querySelector("#toggle-theme");: This line selects the HTML element with the id "toggle-theme" and assigns it to the variable themeSwitch. This element is typically a checkbox used for toggling between light and dark themes.

3. themeSwitch.addEventListener("change", () => { ... });: This line adds an event listener to the themeSwitch element that listens for changes, such as when the checkbox is clicked. When a change event occurs (i.e., when the checkbox state changes), the following function is executed:

document.body.classList.toggle("dark-theme");: This line toggles the presence of the CSS class "dark-theme" on the body element of the HTML document. If the class is not present, it adds it; if it's already present, it removes it. This action effectively toggles between light and dark themes by changing the styling applied to the page.

4. $("#toggle-theme").on("click", function () { ... });: This line uses jQuery to add a click event listener to the element with the id "toggle-theme" (presumably the same checkbox element as before). When this element is clicked, the following function is executed:

$(this).parent().toggleClass("checked");: This line uses jQuery to toggle the presence of the CSS class "checked" on the parent element of the clicked element. This class is typically used for styling purposes, such as indicating visually that the checkbox is checked.

Create a JavaScript file with the name script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.

$(document).ready(function () {
  const themeSwitch = document.querySelector("#toggle-theme");
  themeSwitch.addEventListener("change", () => {
    document.body.classList.toggle("dark-theme");
  });

  $("#toggle-theme").on("click", function () {
    $(this).parent().toggleClass("checked");
  });
});

Final Output:

Create a Stunning Real Estate Landing Page HTML, CSS, JavaScript Guide.gif

Read Also Create Connect Four Game Using HTML, CSS, and JavaScript.jpg

Create Connect Four Game Using HTML, CSS, and JavaScript (Source Code)

Conclusion:

Creating a real estate landing page involves a combination of HTML, CSS, and JavaScript to deliver a seamless user experience. By following best practices and optimizing for conversions, you can attract more potential buyers and renters to your properties. Start building your stunning landing page today!

Code by: Yudiz Solutions Limited

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊