Real Estate Website Landing Page
MAURICE YANGA
Web Designer
Web Developer
Website CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="output.css">
<title>Document</title>
</head>
<body class="font-serif">
<div>
<div class="bg-gray-200 flex items-center justify-around text-xs py-2 font-semibold">
<div>
<p>Welcome to Relxtower</p>
</div>
<div class="flex justify-around space-x-6">
<a href="#">+1 567-2233874</a>
<a href="#">contact@Relixtower.com</a>
</div>
</div>
<div class="flex justify-around bg-stone-800 text-gray-100 text-sm py-2">
<div class="flex text-lg items-end">
<h1 class="text-4xl">R</h1>
<h1>elx</h1>
<h1 class="text-yellow-600">tower</h1>
</div>
<div class="flex justify-around items-center space-x-6 pl-16 ">
<a class="hover:text-yellow-600 hover:transform hover:scale-110 hover:duration-100" href="#">Home</a>
<a class="hover:text-yellow-600 hover:transform hover:scale-110 hover:duration-100" href="#">About us</a>
<a class="hover:text-yellow-600 hover:transform hover:scale-110 hover:duration-100" href="#">Services</a>
<a class="hover:text-yellow-600 hover:transform hover:scale-110 hover:duration-100" href="#">Apartments</a>
<a class="hover:text-yellow-600 hover:transform hover:scale-110 hover:duration-100" href="#">Gallery</a>
<a class="hover:text-yellow-600 hover:transform hover:scale-110 hover:duration-100" href="#">Blog</a>
</div>
</div>
<div class=" bg-fixed" style=" background-image: url(img/int4.jpeg); background-repeat: no-repeat;background-size:cover;">
<header class="flex" style="background-color:rgba(0, 0, 0, 0.596) ">
<div class="relative space-y-20 px-10 py-10 my-20 text-gray-100">
<div>
<!-- whitecircle svg goes here -->
</div>
<div class="border-4 border-yellow-600 border-r-0 py-4 pl-4 ml-10 space-y-8">
<div class="text-4xl">
<h1>Discover Modern Building Design.</h1>
</div>
<div class="flex space-x-10 text-xs">
<div class="flex justify-center items-center">
<svg class="w-6 h-6 text-yellow-600" data-slot="icon" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z"></path>
</svg>
<p>3 Bedrooms</p>
</div>
<div class="flex justify-center items-center">
<svg class="w-6 h-6 text-yellow-600" data-slot="icon" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M11.42 15.17 17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 0 0 4.486-6.336l-3.276 3.277a3.004 3.004 0 0 1-2.25-2.25l3.276-3.276a4.5 4.5 0 0 0-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437 1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008Z"></path>
</svg>
<p>Square feet</p>
</div>
<div class="flex justify-center items-center">
<svg class="w-6 h-6 text-yellow-600" data-slot="icon" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"></path>
</svg>
<p>Bedroom</p>
</div>
<div class="flex justify-center items-center">
<svg class="w-6 h-6 text-yellow-600" data-slot="icon" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 18.75a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 0 1-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 0 0-3.213-9.193 2.056 2.056 0 0 0-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 0 0-10.026 0 1.106 1.106 0 0 0-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12"></path>
</svg>
<p>Car parking</p>
</div>
</div>
<div class="flex items-center">
<button class="bg-yellow-600 px-4 rounded-full text-gray-100 text-sm py-1 hover:tranform hover:scale-105 hover:duration-150 hover:text-gray-950 hover:font-semibold">Get a House</button>
<div class="bg-white w-6 h-6 rounded-full ml-4 px-1 py-1 ">
<!-- arrow svg goes here -->
<svg class="w-4 h-4 text-yellow-600 fill-current" data-slot="icon" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z"></path>
</svg>
</div>
</div>
</div>
<div>
<!-- whitecircle svg goes here -->
</div>
<div class="absolute bottom-0 md:top-44 md:-right-32 text-2xl text-yellow-600 ml-10">
<h3 class="text-white">Price:</h3>
<p>$1,786.80</p>
</div>
</div>
</header>
</div>
<div class="container mx-auto lg:px-32 px-10 flex justify-around space-x-10 mt-20">
<div class="relative md:flex py-1 my-10 md:pr-2 md:border-r-8 border-t-8 border-yellow-600 ">
<img class="w-auto h-96" src="img/house.jpeg" alt="">
<div class="w-24 h-auto bg-yellow-600 text-gray-200 py-2 text-sm rounded-sm absolute -right-2 top-32 text-center">
<p>36 years of experience</p>
</div>
</div>
<div class="container mx-auto py-12 text-sm ">
<div>
<p class="text-yellow-600">About Us</p>
<h1 class="text-4xl font-bold text-gray-900 py-4">Welcome To Our Relxtower</h1>
<p class="pb-4 italic font-semibold text-gray-600">Lorem ipsum dolor, sit amet consectetur adipisicing.</p>
<p class="text-gray-700">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus sunt temporibus eligendi ipsam, nemo adipisci vitae accusantium numquam incidunt qui enim? Alias, repellat tempora. Optio, fugit totam! Fuga aliquid dolorum quis earum eos aperiam consequuntur, rerum placeat quibusdam ducimus commodi. Nostrum repellendus fugit dicta laboriosam vitae asperiores iste cum tempore voluptatum molestias esse provident obcaecati, magni autem. doloremque.</p>
<button class="bg-yellow-600 text-gray-100 py-1 px-2 mt-2 rounded-xl hover:tranform hover:scale-105 hover:duration-150 hover:text-gray-950 hover:font-semibold">Get Started</button>
</div>
</div>
</div>
<div class="mt-20" style="background: url(img/int3.jpg); background-repeat: no-repeat; background-size:cover;">
<header class=" text-center " style="background-color: rgba(240, 255, 255, 0.553);">
<div class="flex justify-around items-center py-32">
<div class="flex flex-col justify-center items-center">
<div class="w-10 h-10 bg-yellow-600 rounded-full px-1 py-1">
<!-- svg goes here -->
<svg class="w-8 h-8 text-white" data-slot="icon" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M11.42 15.17 17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 0 0 4.486-6.336l-3.276 3.277a3.004 3.004 0 0 1-2.25-2.25l3.276-3.276a4.5 4.5 0 0 0-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437 1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008Z"></path>
</svg>
</div>
<h1 class="font-bold text-gray-800 text-lg">2543</h1>
<p class="text-sm text-gray-500">square Feet</p>
</div>
<div class="flex flex-col justify-center items-center">
<div class="w-10 h-10 bg-yellow-600 rounded-full px-1 py-1">
<!-- svg goes here -->
<svg class="w-8 h-8 text-white" data-slot="icon" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z"></path>
</svg>
</div>
<h1 class="font-bold text-gray-800 text-lg">4</h1>
<p class="text-sm text-gray-500">bathrooms</p>
</div>
<div class="flex flex-col justify-center items-center">
<div class="w-10 h-10 bg-yellow-600 rounded-full px-1 py-1">
<!-- svg goes here -->
<svg class="w-8 h-8 text-white" data-slot="icon" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"></path>
</svg>
</div>
<h1 class="font-bold text-gray-800 text-lg">6</h1>
<p class="text-sm text-gray-500">Bedrooms</p>
</div>
<div class="flex flex-col justify-center items-center">
<div class="w-10 h-10 bg-yellow-600 rounded-full px-1 py-1">
<!-- svg goes here -->
<svg class="w-8 h-8 text-gray-100 fill-current" data-slot="icon" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 18.75a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 0 1-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 0 0-3.213-9.193 2.056 2.056 0 0 0-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 0 0-10.026 0 1.106 1.106 0 0 0-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12"></path>
</svg>
</div>
<h1 class="font-bold text-gray-800 text-lg">4</h1>
<p class="text-sm text-gray-500">car parking</p>
</div>
</div>
</header>
</div>
<div class="mb-10">
<div class="flex flex-col justify-center text-center mt-28">
<p class="text-yellow-600">Lorem, ipsum.</p>
<h1 class="text-4xl text-gray-800 mt-2 border-b-4 border-yellow-600 border-spacing-5 mb-10">Interior Views</h1>
</div>
<div class="flex flex-col space-y-4 md:space-y-0 justify-center items-center md:flex-row md:justify-center md:space-x-4">
<img class="w-72 h-48 md:w-72 md:h-72 hover:transform hover:scale-105 duration-200 rounded shadow-lg hover:shadow-2xl" src="img/int.jpeg" alt="">
<img class="w-72 h-48 md:w-72 md:h-72 hover:transform hover:scale-105 duration-200 rounded shadow-lg hover:shadow-2xl" src="img/int2.jpeg" alt="">
<img class="w-72 h-48 md:w-72 md:h-72 hover:transform hover:scale-105 duration-200 rounded shadow-lg hover:shadow-2xl" src="img/kit.jpeg" alt="">
</div>
</div>
</div>
</body>
</html>
More Projects by MAURICE
Resources
Dіscover Freelancers