279 lines
7.4 KiB
PHP
279 lines
7.4 KiB
PHP
<html>
|
|
<head>
|
|
<title>
|
|
Amaia Villas
|
|
</title>
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"/>
|
|
<style>
|
|
body {
|
|
font-family: 'Roboto', sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
.header {
|
|
position: relative;
|
|
background: url('https://placehold.co/1920x1080') no-repeat center center/cover;
|
|
height: 100vh;
|
|
color: white;
|
|
}
|
|
.header .overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
}
|
|
.header .content {
|
|
position: relative;
|
|
z-index: 2;
|
|
padding: 20px;
|
|
}
|
|
.header .logo {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 20px;
|
|
}
|
|
.header .logo img {
|
|
height: 50px;
|
|
margin-right: 10px;
|
|
}
|
|
.header .nav {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
padding: 20px;
|
|
}
|
|
.header .nav a {
|
|
color: white;
|
|
margin-left: 20px;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
}
|
|
.header .main-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20px;
|
|
}
|
|
.header .main-content .info {
|
|
max-width: 50%;
|
|
}
|
|
.header .main-content .info h1 {
|
|
font-size: 48px;
|
|
margin: 0;
|
|
}
|
|
.header .main-content .info p {
|
|
font-size: 18px;
|
|
margin: 10px 0;
|
|
}
|
|
.header .main-content .info .price {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
margin: 10px 0;
|
|
}
|
|
.header .main-content .info .btn {
|
|
background: #FFC107;
|
|
color: black;
|
|
padding: 10px 20px;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
border-radius: 5px;
|
|
}
|
|
.header .main-content .form {
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 5px;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.header .main-content .form input,
|
|
.header .main-content .form textarea,
|
|
.header .main-content .form select {
|
|
width: 100%;
|
|
padding: 10px;
|
|
margin: 10px 0;
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
}
|
|
.header .main-content .form .btn {
|
|
background: #FFC107;
|
|
color: black;
|
|
padding: 10px 20px;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
border-radius: 5px;
|
|
display: block;
|
|
text-align: center;
|
|
}
|
|
.gallery {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
background: white;
|
|
}
|
|
.gallery img {
|
|
width: 150px;
|
|
height: 100px;
|
|
margin: 0 10px;
|
|
border-radius: 5px;
|
|
}
|
|
.property-details {
|
|
text-align: center;
|
|
padding: 20px;
|
|
background: #f8f8f8;
|
|
}
|
|
.property-details h2 {
|
|
font-size: 24px;
|
|
margin: 0;
|
|
}
|
|
.property-details .details {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
}
|
|
.property-details .details .detail {
|
|
margin: 0 20px;
|
|
text-align: center;
|
|
}
|
|
.property-details .details .detail i {
|
|
font-size: 24px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.property-details .details .detail p {
|
|
margin: 5px 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<img class="overlay" scr="https://storage.googleapis.com/a1aa/image/lDf07rzUSwzXTaDmVv44QqId7CxPQGvecp6B3wHgilTsxokTA.jpg"/>
|
|
<div class="content">
|
|
<div class="logo">
|
|
<img height="50" id="websitelogo" src="https://storage.googleapis.com/a1aa/image/lDf07rzUSwzXTaDmVv44QqId7CxPQGvecp6B3wHgilTsxokTA.jpg" width="50"/>
|
|
<h1>
|
|
AMAIA
|
|
</h1>
|
|
</div>
|
|
<div class="nav">
|
|
<a href="#">
|
|
HOME
|
|
</a>
|
|
<a href="#">
|
|
ROOM DETAIL
|
|
</a>
|
|
<a href="#">
|
|
BLOG
|
|
</a>
|
|
<a href="#">
|
|
CONTACT AGENT
|
|
</a>
|
|
</div>
|
|
<div class="main-content">
|
|
<div class="info">
|
|
<h1 id="propertyname">
|
|
Skies Calumpit
|
|
</h1>
|
|
<p id="propertyaddress">
|
|
Calumpit Bulacan
|
|
</p>
|
|
<p class="price" id="propertyprice">
|
|
$1,799,000
|
|
</p>
|
|
<a class="btn" href="#">
|
|
SCHEDULE A SHOWING
|
|
</a>
|
|
</div>
|
|
<div class="form">
|
|
<input placeholder="Name" type="text"/>
|
|
<input placeholder="Phone Number" type="text"/>
|
|
<input placeholder="Email" type="email"/>
|
|
<textarea placeholder="Message"></textarea>
|
|
<input placeholder="mm/dd/yyyy" type="text"/>
|
|
<select>
|
|
<option value="">
|
|
Select Property
|
|
</option>
|
|
<option value="property1">
|
|
Property 1
|
|
</option>
|
|
<option value="property2">
|
|
Property 2
|
|
</option>
|
|
<option value="property3">
|
|
Property 3
|
|
</option>
|
|
</select>
|
|
<a class="btn" href="#">
|
|
MAKE APPOINTMENT
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="gallery">
|
|
<img alt="Image 1" height="100" src="https://storage.googleapis.com/a1aa/image/g3NA06cYf9W6BaRe9t3JdmqxfYX40cf8bryCYK2P8Iw9GjSOB.jpg" width="150"/>
|
|
<img alt="Image 2" height="100" src="https://storage.googleapis.com/a1aa/image/B7Aee8wvEmk7rkDoS6AiFj0ZHy7lP8GTfoe42uKSDTcBHjSOB.jpg" width="150"/>
|
|
<img alt="Image 3" height="100" src="https://storage.googleapis.com/a1aa/image/GCeyrTZ3gLymTiOuV08p1nyxiFBYZe00EsVu5hQg18npxokTA.jpg" width="150"/>
|
|
<img alt="Image 4" height="100" src="https://storage.googleapis.com/a1aa/image/DmJ2k9vco5ppAttbofmvWUmG1bwBfsw02zXwg6yqfSVajRJnA.jpg" width="150"/>
|
|
<img alt="Image 5" height="100" src="https://storage.googleapis.com/a1aa/image/Pae8im0ZOK1OGKwYZAaXuivbESXfC1RN62QNyjrWZdQqxokTA.jpg" width="150"/>
|
|
</div>
|
|
<div class="property-details">
|
|
<h2>
|
|
PROPERTY DETAILS
|
|
</h2>
|
|
<div class="details">
|
|
<div class="detail">
|
|
<i class="fas fa-ruler-combined">
|
|
</i>
|
|
<p>
|
|
SQUARE FEET
|
|
</p>
|
|
<p>
|
|
2500
|
|
</p>
|
|
</div>
|
|
<div class="detail">
|
|
<i class="fas fa-bed">
|
|
</i>
|
|
<p>
|
|
BEDROOMS
|
|
</p>
|
|
<p>
|
|
3
|
|
</p>
|
|
</div>
|
|
<div class="detail">
|
|
<i class="fas fa-bath">
|
|
</i>
|
|
<p>
|
|
BATHROOMS
|
|
</p>
|
|
<p>
|
|
4
|
|
</p>
|
|
</div>
|
|
<div class="detail">
|
|
<i class="fas fa-calendar-alt">
|
|
</i>
|
|
<p>
|
|
YEAR BUILT
|
|
</p>
|
|
<p>
|
|
1996
|
|
</p>
|
|
</div>
|
|
<div class="detail">
|
|
<i class="fas fa-car">
|
|
</i>
|
|
<p>
|
|
CAR PARKING
|
|
</p>
|
|
<p>
|
|
2
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |