initial: bootstrap from BukidBountyApp base
This commit is contained in:
Jonathan Sykes
279
legacy/pages-html/landingpage/refer.php
Normal file
279
legacy/pages-html/landingpage/refer.php
Normal file
@@ -0,0 +1,279 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user