Use HTML, CSS, and JavaScript to create an eye-catching Real Estate Landing site. Easily buy, sell, and discover properties. Included is source code for simple implementation.
This is where your Real Estate journey starts. Greeting from the world of responsive design, where purchasing and selling real state is simple. We’ll explore the craft of creating an engaging landing page for your real estate website in this article. We’ll give you the skills you need to produce a digital display that makes an impact, from the fundamental languages of HTML, CSS, and JavaScript to the finer points of user experience optimization. This tutorial will offer priceless insights to help you take your real estate website to new heights of success, regardless of your level of experience as a developer. Together, let’s set out on this journey and turn your idea into an amazing reality.
- HTML CODE
Making our HTML file for the Real Estate landing page is the first task we must complete. Well-structured markup will be our first step. Simply insert the following codes into your file after it has been created. Keep in mind that a file with the .html extension needs to be saved.
It begins with the declaration of document type and version, followed by the HTML structure with language tag and then contains meta information like character encoding and links to external resources. Meta tags provide essential details for responsive design and browser compatibility, while external resources include linked stylesheets and scripts.
The header section features the website logo and navigation sections, sections of the webpage are dedicated to various content areas, and the footer includes additional information and links. Finally, a JavaScript file is included for interactivity.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Real Estate Website Landing Page | Coding Jasim</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link href="styles.css" type="text/css" rel="Stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/95dc93da07.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
</head>
<body>
<div id="hero-container">
<header>
<div class="flex container">
<a id="logo" href="#">BRAND</a>
<nav>
<button id="nav-toggle" class="hamburger-menu">
<span class="strip"></span>
<span class="strip"></span>
<span class="strip"></span>
</button>
<ul id="nav-menu">
<li><a href="#" class="active">About us</a></li>
<li><a href="#">Homes</a></li>
<li><a href="#">Rentals</a></li>
<li><a href="#">Properties</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li id="close-flyout"><span class="fas fa-times"></span></li>
</ul>
</nav>
</div>
</header>
<section id="hero">
<div class="fade"></div>
<div class="hero-text">
<h2>Rentals, Buy and sell Real Estate properties</h2>
<p>Lorem ipsum dolor sit amet consectectur adipisicing elit. Laboriosam assumenda ea quo cupiditate facere deleniti fuga officia.</p>
</div>
</section>
</div>
<section id="how-it-works">
<div class="container">
<h2>How It Works</h2>
<div class="flex">
<div>
<span class="fas fa-home"></span>
<h4>Find a Property.</h4>
<p>Lorem ipsum dolor sit amet consectectur adipisicing elit.</p>
</div>
<div>
<span class="fas fa-dollar-sign"></span>
<h4>Buy a Property.</h4>
<p>Lorem ipsum dolor sit amet consectectur adipisicing elit.</p>
</div>
<div>
<span class="fas fa-chart-line"></span>
<h4>Investing.</h4>
<p>Lorem ipsum dolor sit amet consectectur adipisicing elit.</p>
</div>
</div>
</div>
</section>
<section id="properties">
<div class="container">
<h2>Properties</h2>
<div id="properties-slider" class="slick">
<div>
<img src="images/prop1.webp" alt="Property 1" />
<div class="property-details">
<p class="price">$4,500,000</p>
<span class="beds">6 beds</span>
<span class="baths">5 baths</span>
<span class="sqft">5,250 sqft.</span>
<address>
480 12th, Unit 14, San Francisco, CA
</address>
</div>
</div>
<div>
<img src="images/prop2.webp" alt="Property 1" />
<div class="property-details">
<p class="price">$3,650,000</p>
<span class="beds">4 beds</span>
<span class="baths">3 baths</span>
<span class="sqft">3,750 sqft.</span>
<address>
480 12th, Unit 14, San Francisco, CA
</address>
</div>
</div>
<div>
<img src="images/prop3.webp" alt="Property 1" />
<div class="property-details">
<p class="price">$3,400,000</p>
<span class="beds">5 beds</span>
<span class="baths">3 baths</span>
<span class="sqft">3,850 sqft.</span>
<address>
480 12th, Unit 14, San Francisco, CA
</address>
</div>
</div>
<div>
<img src="images/prop4.webp" alt="Property 1" />
<div class="property-details">
<p class="price">$3,400,000</p>
<span class="beds">3 beds</span>
<span class="baths">3 baths</span>
<span class="sqft">3,100 sqft.</span>
<address>
480 12th, Unit 14, San Francisco, CA
</address>
</div>
</div>
<div>
<img src="images/prop5.webp" alt="Property 1" />
<div class="property-details">
<p class="price">$3,000,000</p>
<span class="beds">4 beds</span>
<span class="baths">2 baths</span>
<span class="sqft">2,950 sqft.</span>
<address>
480 12th, Unit 14, San Francisco, CA
</address>
</div>
</div>
</div>
<button class="rounded">View All Property Listings</button>
</div>
</section>
<section id="agents">
<div class="container">
<h2>Agents</h2>
<p class="large-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus minima neque tempora reiciendis.</p>
<div class="flex">
<div class="card">
<img src="images/markwaugh.webp" alt="Realtor 1" />
<h3>Mark Waugh</h3>
<p>Real Estate Agent</p>
</div>
<div class="card">
<img src="images/stevewaugh.webp" alt="Realtor 1" />
<h3>Steve Waugh</h3>
<p>Real Estate Agent</p>
</div>
<div class="card">
<img src="images/yuvraj.webp" alt="Realtor 1" />
<h3>Yuvraj Singh</h3>
<p>Real Estate Agent</p>
</div>
<div class="card">
<img src="images/stevensmith.webp" alt="Realtor 1" />
<h3>Steve Smith</h3>
<p>Real Estate Agent</p>
</div>
<div class="card">
<img src="images/michaelvaughan.webp" alt="Realtor 1" />
<h3>Micheal Vaughan</h3>
<p>Real Estate Agent</p>
</div>
<div class="card">
<img src="images/shanewatson.webp" alt="Realtor 1" />
<h3>Stuart Redman</h3>
<p>Real Estate Agent</p>
</div>
</div>
</div>
</section>
<section id="the-best">
<div class="flex container">
<img src="images/property1.webp" alt="Property 1">
<div>
<h2>We Are the Best Real Estate Firm</h2>
<p class="large-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p>Est qui eos quasi ratione nostrum excepturi id recusandae fugit omnis ullam pariatur itaque nisi voluptas impedit Quo suscipit omnis iste velit maxime.</p>
<ul>
<li>Placeat maxime animi minus</li>
<li>Placeat maxime animi minus</li>
<li>Placeat maxime animi minus</li>
<li>Placeat maxime animi minus</li>
<li>Placeat maxime animi minus</li>
</ul>
<button class="rounded">Learn More</button>
</div>
</div>
</section>
<section id="services">
<div class="container">
<h2>Services</h2>
<div class="flex">
<div>
<div class="fas fa-home"></div>
<div class="services-card-right">
<h3>Search Property</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis quis molestiae vitae eligendi at.</p>
<a href="#">Learn More</a>
</div>
</div>
<div>
<div class="fas fa-dollar-sign"></div>
<div class="services-card-right">
<h3>Buy Property</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis quis molestiae vitae eligendi at.</p>
<a href="#">Learn More</a>
</div>
</div>
<div>
<div class="fas fa-chart-line"></div>
<div class="services-card-right">
<h3>Investing</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis quis molestiae vitae eligendi at.</p>
<a href="#">Learn More</a>
</div>
</div>
<div>
<div class="fas fa-building"></div>
<div class="services-card-right">
<h3>List a Property</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis quis molestiae vitae eligendi at.</p>
<a href="#">Learn More</a>
</div>
</div>
<div>
<div class="fas fa-search"></div>
<div class="services-card-right">
<h3>Property Locator</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis quis molestiae vitae eligendi at.</p>
<a href="#">Learn More</a>
</div>
</div>
<div>
<div class="fas fa-mobile-alt"></div>
<div class="services-card-right">
<h3>BRAND Apps</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis quis molestiae vitae eligendi at.</p>
<a href="#">Learn More</a>
</div>
</div>
</div>
</div>
</section>
<section id="testimonials">
<div class="container">
<h2>What Our Customers Are Saying</h2>
<div id="testimonials-slider">
<div>
<blockquote>
<p>"Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia nostrum vitae explicabo dolore ratione. Quia iure quod ipsa blanditiis sint nulla a nam veritatis ex eos. Dicta molestiae dolorum laudantium."</p>
</blockquote>
<div class="testimonials-caption">
<img src="Customer 1 Image" alt="Client 7" />
<p>Cutomer1 name</p>
</div>
</div>
<div>
<blockquote>
<p>"Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia nostrum vitae explicabo dolore ratione. Quia iure quod ipsa blanditiis sint nulla a nam veritatis ex eos. Dicta molestiae dolorum laudantium."</p>
</blockquote>
<div class="testimonials-caption">
<img src="Customer 2 Image" alt="Client 7" />
<p>Customer2 name</p>
</div>
</div>
<div>
<blockquote>
<p>"Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia nostrum vitae explicabo dolore ratione. Quia iure quod ipsa blanditiis sint nulla a nam veritatis ex eos. Dicta molestiae dolorum laudantium."</p>
</blockquote>
<div class="testimonials-caption">
<img src="Customer 3 Image" alt="Client 7" />
<p>Customer3 name</p>
</div>
</div>
</div>
</div>
</section>
<section id="contact">
<div class="container">
<h2>Contact Us</h2>
<div class="flex">
<div id="form-container">
<h3>Contact Form</h3>
<form>
<label for="name">Name</label>
<input type="text" id="name" />
<label for="email">Email</label>
<input type="text" id="email" />
<label for="subject">Subject</label>
<input type="text" id="subject" />
<label for="message">Message</label>
<textarea id="message">Write your message here..</textarea>
<button class="rounded">Send Message</button>
</form>
</div>
<div id="address-container">
<label>Address</label>
<address>
101 W MAIN ST S APT 101, WASHINGTON DC 20019-4649, USA
</address>
<label>Phone</label>
<a href="#">456-456-4565</a>
<label>Email Address</label>
<a href="#">emailid@domain.com</a>
</div>
</div>
</div>
</section>
<footer>
<div class="flex container">
<div class="footer-about">
<h5>About BRAND</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque facere laudantium magnam voluptatum autem. Amet aliquid nesciunt veritatis aliquam.</p>
</div>
<div class="footer-quick-links">
<h5>Quick Links</h5>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div class="footer-subscribe">
<h5>Subscribe to our Newsletter</h5>
<div id="subscribe-container">
<input type="text" placeholder="Enter Email" />
<button class="right-rounded">Send</button>
</div>
<h5 class="follow-us">Follow Us</h5>
<ul>
<li><a href="#"><span class="fab fa-facebook-f"></span></a></li>
<li><a href="#"><span class="fab fa-twitter"></span></a></li>
<li><a href="#"><span class="fab fa-instagram"></span></a></li>
<li><a href="#"><span class="fab fa-linkedin-in"></span></a></li>
</ul>
</div>
</div>
<small>
Copyright © 2025 All rights reserved | This template is made with <span class="fa fa-heart"></span> by <a href="https://codingjasimweb.com">Coding Jasim</a>
</small>
</footer>
<script src="script.js"></script>
</body>
</html>- CSS CODE
Next, we should enhance the appearance of Real Estate landing page by incorporating CSS. This will improve the visual presentation of our landing page. Generate a CSS file named styles.css and insert the provided code into your CSS file. Keep in mind that the file must have a .css extension. Let’s analyze the summary as follows:
It begins with global styles that define default webpage settings like font and margins, apply styles universally, and specify styles for containers, headings, paragraphs, and specific button classes. Then followed with various CSS styles for different section of a webpage. It includes the styles for the header, hero section, and “How it Works” section, detailing elements like the header container, navigation, logos, and list items. Additionally, it describes styles for the hero section, including fading effects and text content, as well as styles for the “Properties” section, focusing on layout, heading, and property details.
Then further move on with CSS styling with specific ID’s. The ID “Agents” section includes styles for margins, padding, borders, and individual agent cards. While ID “the-best” section focuses on image and text margins. The “services” section specifies background colors, padding, and styles for headings and links, including hover effects. Lastly, the “testimonials” and “contact” sections define styles for headings, testimonials, and form elements, while the “footer” sets styles for background, text, and layout of footer element.
@import url('https://fonts.googleapis.com/css?family=Playfair+Display|Roboto&display=swap');
body {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
font-size: 1rem;
font-weight: 400;
color: #777;
line-height: 1.7;
}
* {
outline: none;
}
*:not(.slick-track):not(.slick-list) {
transition: 0.4s;
}
.container {
max-width: 1140px;
margin: 0 auto;
padding: 0 20px;
}
.flex {
display: flex;
justify-content: space-between;
}
h1, h2, h3, h4, h5 {
margin: 0;
padding: 0;
}
h1, h2 {
font-family: 'Poppins';
font-weight: 700;
}
h1 {
font-size: 3rem;
line-height: 1.2;
margin-bottom: 1rem;
}
h2 {
font-size: 2.5rem;
color: #ff960c;
margin-bottom: 1rem;
line-height: 1.2;
}
h3 {
font-size: 1.4rem;
font-weight: 300;
}
h4 {
font-size: 1.2rem;
font-weight: 300;
}
h5 {
font-size: 1rem;
font-family: "Playfair Display", serif;
}
p {
margin: 0 0 1rem;
}
button.rounded {
background: blue;
border: none;
color: #fff;
font-size: 16px;
border-radius: 30px;
padding: 10px 30px;
line-height: 1.5;
cursor: pointer;
}
p.large-paragraph {
font-size: 1.25rem;
font-weight: 300;
}
/* end: global styles */
/* start: header styles */
#hero-container {
min-height: 600px;
height: calc(100vh);
position: relative;
background-color: rgb(88, 3, 246);
}
header {
background: transparent;
padding: 1rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
position: fixed;
width: 100%;
z-index: 3;
}
#logo {
font-family: "Roboto", "Helvetica", "Sans-serif";
font-size: 1.7rem;
font-weight: 800;
color: #fff;
text-decoration: none;
position: relative;
top: 4px;
}
.hamburger-menu {
background-color: transparent;
border: 1px solid #fff;
padding: 3px 5px;
width: 30px;
cursor: pointer;
margin-top: 10px;
display: none;
}
.hamburger-menu .strip {
display: block;
height: 1px;
background-color: #fff;
margin: 4px 0;
}
header ul {
list-style-type: none;
}
header ul li {
display: inline-block;
margin: 0 15px;
}
#close-flyout {
display: none;
}
header ul li a {
color: #999;
font-size: 16px;
text-decoration: none;
}
header ul.is-sticky li a {
color: #000;
}
header ul li a:hover,
header ul li a.active {
color: #fff;
}
header ul.is-sticky li a:hover,
header ul.is-sticky li a.active {
color: #f69314;
}
/* end: header styles */
/* start: hero section styles */
#hero {
background-size: cover;
position: absolute;
top: 0;
left: 0;
z-index: 1;
height: 100%;
width: 100%;
}
#hero .fade {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(52, 58, 64, 0.9);
z-index: 1;
}
#hero .hero-text {
position: absolute;
top: 50%;
margin: -75px auto 0;
left: 0;
right: 0;
z-index: 2;
color: #fff;
width: 500px;
text-align: center;
}
#hero .hero-text p {
line-height: 1.5em;
font-weight: 300;
font-size: 1rem;
}
/* end: hero section styles */
/* start: how it works styles */
#how-it-works {
padding: 3rem 0;
background: #f8f9fa;
text-align: center;
}
#how-it-works h2 {
margin-bottom: 3rem;
}
#how-it-works .flex > div {
width: 30%;
}
#how-it-works h4 {
color: #343a40;
margin-top: 1rem;
}
#how-it-works span.fas {
/*color: #f69314;*/
color: teal;
font-size: 35px;
}
#properties {
margin: 4rem 0 8rem;
position: relative;
}
#properties h2 {
margin-bottom: 3rem;
}
#properties .container {
position: relative;
}
#properties .container:before {
content: "/";
position: absolute;
right: 80px;
top: 18px;
color: #999;
}
#properties-slider a.slick-arrow {
color: #000;
position: absolute;
top: -78px;
right: 0;
text-transform: uppercase;
letter-spacing: 0.1rem;
text-decoration: none;
}
#properties-slider a.slick-prev {
right: 80px;
}
#properties-slider .slick-slide {
padding: 0 15px;
}
#properties-slider img {
width: 100%;
height: 200px;
display: block;
}
#properties-slider .property-details {
padding: 1rem;
}
#properties-slider .price {
font-size: 1.2rem;
color: #343a40;
font-weight: 800;
margin: 0 0 0.5rem 0;
}
#properties-slider .property-details span {
font-size: 0.8rem;
padding-right: 15px;
}
#properties-slider .property-details span.baths {
padding-left: 10px;
}
#properties-slider .property-details span.sqft {
padding-right: 0;
padding-left: 10px;
}
#properties-slider .property-details span.beds,
#properties-slider .property-details span.baths {
border-right: 1px solid #888;
}
#properties-slider .property-details address {
font-size: 0.8rem;
font-style: normal;
margin-top: 0.5rem;
}
#properties button.rounded {
display: block;
margin: 2rem auto 0;
width: 350px;
}
#agents {
margin: 4rem 0 6rem;
padding: 0 0 6rem;
border-bottom: 1px solid #ccc;
}
#agents p.large-paragraph {
width: 50%;
margin-bottom: 4rem;
}
#agents .flex {
flex-wrap: wrap;
padding: 0;
}
#agents .card {
width: 32%;
background: #f0f0f0;
margin-bottom: 2rem;
}
#agents .card img {
width: 100%;
object-fit: cover;
width: 365px;
height: 400px;
}
#agents .card h3 {
font-family: "Playfair Display", serif;
color: #000;
}
#agents .card h3,
#agents .card p {
padding-left: 1rem;
}
#the-best {
margin: 2rem 0;
}
#the-best .flex > img {
width: 47%;
}
#the-best .flex > div {
width: 40%;
}
#the-best ul {
padding-left: 20px;
margin-bottom: 4rem;
}
#the-best ul li {
margin: 10px 0;
}
#services {
background: #f8f9fa;
padding: 6rem 0;
margin: 8rem 0;
border-bottom: 1px solid #dee2e6;
}
#services h2 {
text-align: center;
margin-bottom: 3rem;
}
#services .flex {
flex-wrap: wrap;
}
#services .flex > div {
width: 30%;
margin-bottom: 2rem;
}
#services .flex > div .fas {
/*color: #f69314;*/
color: teal;
font-size: 40px;
float: left;
margin-top: 15px;
width: 20%;
text-align: center;
}
#services .flex > div .services-card-right {
float: right;
width: 75%;
}
#services .flex > div a {
color: #f69314;
text-decoration: none;
}
#services .flex > div a:hover {
text-decoration: underline;
}
#testimonials {
margin-bottom: 8rem;
}
#testimonials h2 {
text-align: center;
}
#testimonials-slider .slick-slide {
text-align: center;
}
#testimonials-slider blockquote {
font-size: 1.5rem;
font-style: italic;
margin: 1rem auto 3rem;
max-width: 740px;
}
#testimonials-slider .testimonials-caption {
width: 200px;
margin: 0 auto;
}
#testimonials-slider .testimonials-caption img {
float: left;
border-radius: 30px;
width: 60px;
}
.testimonials-caption p {
position: relative;
top: 13px;
font-size: 1.2rem;
}
#testimonials-slider .slick-arrow {
text-decoration: none;
position: absolute;
font-size: 40px;
color: #222;
top: 50%;
margin-top: -35px;
z-index: 1;
}
#testimonials-slider .slick-next {
right: 0;
}
/* end: testimonials styles */
/* start: contact us styles */
#contact {
background: #f8f9fa;
padding: 4rem 0 8rem;
}
#contact h2 {
text-align: center;
margin-bottom: 4rem;
}
#form-container {
width: 58%;
background: #fff;
padding: 3rem;
box-sizing: border-box;
height: 0%;
}
#form-container h3 {
color: #000;
font-family: "Playfair Display", serif;
margin-bottom: 2rem;
}
#form-container label {
display: block;
color: #000;
margin-top: 1rem;
}
#form-container input,
#form-container textarea {
display: block;
border-radius: 20px;
padding: 10px;
border: 1px solid #ced4da;
width: 100%;
box-sizing: border-box;
height: 43px;
font-family: "Roboto", "Helvetica", "Sans-serif";
font-size: 1rem;
color: #495057;
}
#form-container textarea {
height: 170px;
margin-bottom: 2rem;
resize: none;
}
#address-container {
width: 38%;
background: #fff;
padding: 1.5rem;
box-sizing: border-box;
height: 0%;
}
#address-container label {
font-weight: 700;
display: block;
margin-top: 2rem;
}
#address-container label:first-child {
margin-top: 0;
}
#address-container address {
margin-bottom: 1.5rem;
font-style: normal;
}
#address-container a {
text-decoration: none;
color: #f69314;
}
#address-container a:hover {
text-decoration: underline;
}
/* end: contact us styles */
/* start: footer styles */
footer {
background: #333;
padding: 8rem 0;
}
footer .flex {
padding-bottom: 6rem;
border-bottom: 1px solid #777;
}
footer h5 {
color: #fff;
margin-bottom: 1rem;
font-weight: 300;
}
footer h5.follow-us {
margin-top: 1rem;
}
footer .footer-about {
width: 47%;
}
footer .footer-about p {
width: 65%;
}
footer .footer-quick-links {
width: 16%;
}
footer .footer-quick-links ul {
list-style-type: none;
padding: 0;
margin: 0;
}
footer .footer-quick-links ul li {
margin: 10px 0;
}
footer .footer-quick-links ul li a {
color: #777;
text-decoration: none;
}
footer .footer-quick-links ul li a:hover {
color: #fff;
}
footer .footer-subscribe {
width: 35%;
}
#subscribe-container {
position: relative;
}
footer .footer-subscribe input {
border-radius: 30px;
height: 43px;
font-family: "Roboto", "Helvetica", "Sans-serif";
border: 1px solid #6c757d;
background-color: transparent;
font-size: 1rem;
padding: 10px;
color: #fff;
box-sizing: border-box;
width: 80%;
}
footer button.right-rounded {
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
background: #f69314;
font-size: 16px;
color: #000;
padding: 10px 30px 9px;
line-height: 1.5;
cursor: pointer;
border: none;
position: absolute;
right: 0;
}
footer button.right-rounded:hover {
background: #fff;
}
footer .footer-subscribe ul {
list-style-type: none;
padding: 0;
margin: 0;
}
footer .footer-subscribe ul li {
display: inline-block;
margin: 0 16px;
}
footer .footer-subscribe ul li:first-child {
margin-left: 0;
}
footer .footer-subscribe ul li a {
text-decoration: none;
color: #777;
}
footer .footer-subscribe ul li a:hover {
color: #fff;
}
footer small {
margin-top: 3rem;
font-size: 1rem;
display: block;
text-align: center;
}
footer small a {
color: #777;
text-decoration: none;
}
footer small a:hover {
color: #fff;
}
/* end: footer styles */
/* start: media queries */
@media (max-width: 991px) {
#logo {
top: 1px;
}
#nav-toggle {
display: block;
}
nav ul {
position: fixed;
background: #fff;
right: -100%;
top: 0;
margin: 0;
padding: 2rem;
height: 100%;
width: 300px;
box-sizing: border-box;
box-shadow: 5px 0 10px 3px #999;
}
#close-flyout {
position: absolute;
right: 2rem;
top: 1.5rem;
font-size: 30px;
color: #777;
cursor: pointer;
display: block;
line-height: 1;
margin: 0;
}
nav ul li {
display: block;
margin: 20px 0;
}
nav ul li:first-child {
margin-top: 50px;
}
nav ul li a {
font-size: 20px;
color: #212529;
}
nav ul li a.active,
nav ul li a:hover {
color: #f69314;
}
}
@media (max-width: 767px) {
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.75rem;
}
h3 {
font-size: 1.2rem;
}
.large-paragraph {
font-size: 1rem;
}
p {
font-size: 0.8rem;
}
.container {
max-width: 540px;
}
#hero .hero-text {
width: 400px;
}
#agents .card {
width: 49%;
}
#the-best .flex > img {
display: none;
}
#the-best .flex > div {
width: 100%;
}
#testimonials-slider p {
font-size: 1.2rem;
}
#properties .container:before {
top: 2px;
font-size: 0.85rem;
}
#properties-slider a.slick-arrow {
font-size: 0.85rem;
}
#properties button.rounded {
width: 300px;
}
#services .flex > div {
width: 48%;
}
#contact .flex {
flex-wrap: wrap;
}
#form-container {
width: 100%;
padding: 2rem;
}
#address-container {
width: 100%;
margin-top: 2rem;
}
footer {
padding: 6rem 0;
}
footer .flex {
flex-wrap: wrap;
}
footer .flex > div {
width: 100%;
margin-top: 1rem;
}
footer .flex > div:first-child {
margin-top: 0;
}
footer .footer-about p {
font-size: 1rem;
width: 100%;
}
footer .footer-subscribe input {
width: 90%;
}
footer h5.follow-us {
margin-top: 2rem;
}
}
@media (max-width: 500px) {
#hero .hero-text {
width: 330px;
}
#agents {
margin: 4rem 0 3rem;
padding: 0 0 3rem;
}
#agents .card {
width: 100%;
}
#agents p.large-paragraph {
width: 100%;
}
#how-it-works .flex {
display: block;
}
#how-it-works .flex > div {
width: 100%;
margin-top: 2rem;
}
#properties button.rounded {
width: 250px;
}
#services {
padding: 4rem 0 3rem;
margin: 4rem 0;
}
#services .flex > div {
width: 100%;
}
#testimonials {
margin-bottom: 4rem;
}
#testimonials-slider p {
font-size: 1rem;
}
#testimonials-slider .slick-arrow {
display: none !important;
}
#contact {
padding: 4rem 0;
}
#contact h2 {
margin-bottom: 2rem;
}
#form-container {
padding: 1.5rem;
}
footer {
padding: 4rem 0;
}
}
@media (max-width: 400px) {
#hero .hero-text {
max-width: 275px;
width: 100%;
}
#properties button.rounded {
max-width: 250px;
width: 100%;
}
nav ul {
width: 200px;
}
}- JavaScript
At last, generate a JavaScript file titled script.js and insert the provided code into this file. Ensure that is correctly linked to your HTML document so that the scripts run on the page. Don’t forget, you need to create a file with a .js extension. Let’s analyze the summary of provided JavaScript code as follows:
The Document Ready Function executes code only after the HTML document is fully loaded, while the selecting DOM elements involves using jQuery Selectors to target specific elements in the HTML, such as $(‘header’) for the <header> element and $(‘#logo’) for the element with the ID “logo”.
Next to initializes a Slick Slider for testimonials with options for infinite scrolling and navigation arrows. It also manages the visibility of a navigation menu through a toggle button and adjust the header and navigation styles based on scroll events, including background color and shadow effects. Additionally, it triggers a scroll event on document load to ensure proper styling of header and navigation elements.
$(function () {
let headerElem = $('header');
let logo = $('#logo');
let navMenu = $('#nav-menu');
let navToggle = $('#nav-toggle');
$('#properties-slider').slick({
slidesToShow: 4,
slidesToScroll: 1,
prevArrow: '<a href="#" class="slick-arrow slick-prev">previous</a>',
nextArrow: '<a href="#" class="slick-arrow slick-next">next</a>',
responsive: [
{
breakpoint: 1100,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
infinite: true,
}
},
{
breakpoint: 767,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
infinite: true,
}
},
{
breakpoint: 530,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
infinite: true,
}
}
]
});
$('#testimonials-slider').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
prevArrow: '<a href="#" class="slick-arrow slick-prev"><</a>',
nextArrow: '<a href="#" class="slick-arrow slick-next">></a>'
});
navToggle.on('click', () => {
navMenu.css('right', '0');
});
$('#close-flyout').on('click', () => {
navMenu.css('right', '-100%');
});
$(document).on('click', (e) => {
let target = $(e.target);
if (!(target.closest('#nav-toggle').length > 0 || target.closest('#nav-menu').length > 0)) {
navMenu.css('right', '-100%');
}
});
$(document).scroll(() => {
let scrollTop = $(document).scrollTop();
if (scrollTop > 0) {
navMenu.addClass('is-sticky');
logo.css('color', '#000');
headerElem.css('background', '#fff');
navToggle.css('border-color', '#000');
navToggle.find('.strip').css('background-color', '#000');
} else {
navMenu.removeClass('is-sticky');
logo.css('color', '#fff');
headerElem.css('background', 'transparent');
navToggle.css('bordre-color', '#fff');
navToggle.find('.strip').css('background-color', '#fff');
}
headerElem.css(scrollTop >= 200 ? {'padding': '0.5rem', 'box-shadow': '0 -4px 10px 1px #999'} : {'padding': '1rem 0', 'box-shadow': 'none' });
});
$(document).trigger('scroll');
});Conclusion & Final Thoughts
In the continuously changing realm of Real Estate, having a responsive website landing page is not merely a choice–it’s essential. As we wrap up our exploration of the nuances of design, development, and optimization, it becomes evident that the secret to achieving success lies in meticulous attention to detail and a dedication to quality.
By leveraging the capabilities of HTML, CSS, and JavaScript along with intellectual design components and user-focused features, you are equipped to craft a digital environment that engages and covert visitors. Therefore, whether you are prompting upscale properties or charming starter homes, keep in mind that every pixel matters and each user interaction is significant. With the knowledge acquired from this guide, proceed with assurance, knowing that your Real Estate website landing page is set for triumph in a competitive landscape.