ARAZIM-1 / templates /home.html
RANA
Track geckodriver.exe using Git LFS
208e684
raw
history blame contribute delete
No virus
10.4 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- Responsive Meta Tag -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>ARAZIM</title>
<!-- Google Font -->
<!-- <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,900" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200,300,400,500,600,700,800" rel="stylesheet">
<!-- Adding Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<!-- Adding Bootstrap CDN and external CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- Adding CSS -->
<style>
html {
scroll-behavior: smooth;
}
body {
font-family: "Plus Jakarta Sans",sans-serif SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;;
font-size: 1.2rem;
}
/* For all section's title */
.section-title {
font-size: 3rem;
}
/* Navigation */
.logo {
font-weight: 900;
font-size: 1.5rem;
}
.nav-item {
margin: 0 20px;
}
/* Main Section */
#main {
background: url("https://i.postimg.cc/WbdCq2x3/background.png");
background-size: cover;
height: 120vh;
}
.header-main {
margin-top: 20px;
}
.header-info {
font-weight: 900;
font-size: 3rem;
color: #fff;
}
.btn-space {
margin-top: 20px;
}
/* Overview */
.info-width {
width: 60%;
font-size: 1.3rem;
}
.overview-icon {
font-size: 3rem;
color: #5a34fc;
}
.overview-row {
margin-top: 5rem;
}
.overview-header {
font-weight: 900;
}
.overview-icon, .overview-header, .info-width {
padding: 1rem 0;
}
/* Testimonials */
#testimonials {
background-color: #5a34fc;
margin-top: 100px;
padding: 100px 0;
}
.carousel-item {
padding: 7% 15%;
}
.carousel-item h3 {
font-size: 2.5rem;
}
/* Pricing */
#pricing {
margin-top: 100px;
padding: 100px 0;
}
.pricing-title {
margin-bottom: 100px;
}
.card {
box-shadow: 0px 3px 63px -12px rgba(0, 0, 0, 0.75);
border-color: #5a34fc;
border-radius: 10px;
}
.card-body {
padding: 7% 0;
}
.pricing-text {
color: #5a34fc;
font-size: 2rem;
font-weight: bold;
padding: 5% 0%;
}
.btn-block {
font-size: 1.5rem;
}
/* Call To Action */
#cta {
background-color: #5a34fc;
padding: 7% 15%;
}
.cta-text {
font-weight: bold;
font-size: 3rem;
color: #fff;
}
/* Footer */
#footer {
height: 200px;
}
.footer-icon {
font-size: 2rem;
color: #5a34fc;
padding: 5% 3%;
}
/* Media Queries */
@media only screen and (max-width: 768px) {
.iphone-mock {
display: none;
}
.card {
margin: 20px 0;
}
.header-info {
font-size: 2rem;
}
.btn-outline-light {
margin-left: 0px;
}
#footer {
height: 70px;
}
}
</style>
</head>
<body>
<!-- Main Section -->
<section id="main">
<div class="container">
<!-- Navbar Here -->
<nav class="navbar navbar-expand-md navbar-dark bg-transparent pt-5">
<a href="#" class="navbar-brand">
<img src="../static/images/logos/Logo.png" alt="Logo" class="logo" style="width: 150px;">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a href="#main" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="{{ url_for('register') }}" class="nav-link">Register/Login</a>
</li>
</li>
</ul>
</div>
</nav>
</div>
<br><br>
<div class="container">
<div class="row header-main">
<div class="col-md-6">
<h1 class="header-info">Building Foundations, Creating Homes: Real Estate Solutions You Can Trust</h1>
<button class="btn btn-outline-light btn-lg btn-space"><i class="fas fa-sign-in-alt"></i>&nbsp Join Us</button>
</div>
</div>
</div>
</section>
<!-- Overview Section -->
<section id="overview">
<h2 class="text-center section-title">Overview</h2>
<div class="container-fluid">
<div class="row overview-row">
<div class="col-md-4 text-center">
<i class="far fa-object-group overview-icon"></i>
<h3 class="overview-header">Creative Design</h3>
<p class="info-width mx-auto">We stay on top of the current trend and always stay ahead of modern design implement</p>
</div>
<div class="col-md-4 text-center">
<i class="fas fa-cogs overview-icon"></i>
<h3 class="overview-header">Fully Customizable</h3>
<p class="info-width mx-auto">Apps are fully Customizable to your needs and Our Talented Developer will be with you in every step of the way</p>
</div>
<div class="col-md-4 text-center">
<i class="fas fa-phone overview-icon"></i>
<h3 class="overview-header">24/7 Support</h3>
<p class="info-width mx-auto">We provide 24/7 support with our Amazing Customer Service Team</p>
</div>
</div>
</div>
</section>
<!-- Testimonial Section
<section id="testimonials">
<h2 class="text-center text-white section-title">Testimonials</h2>
<div class="container-fluid">
<div class="row">
<!-- Carousel Here -->
<!-- <div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<h3 class="text-white">Highly Recommend Apollo App. They Built my Potion Making App in 3 Weeks!</h3>
<p class="text-white">-- Hermione, Granger's street</p>
</div>
<div class="carousel-item">
<h3 class="text-white">Everyone in the Team were very attentive to my needs and went up and beyond </h3>
<p class="text-white">-- Harry, Privet Drive</p>
</div>
<div class="carousel-item">
<h3 class="text-white">They made a Beautiful App that detect Spiders so I can avoid those nasty creature</h3>
<p class="text-white">-- Ron, Ottery St Catchpole</p>
</div>
</div> -->
<!-- Left and right controls of Carousel -->
<!-- <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</section> -->
<!-- Pricing Section -->
<!-- <section id="pricing">
<h2 class="text-center section-title pricing-title">Pricing</h2>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-body text-center">
<h2 class="card-title text-muted">Basic Plan</h2>
<h1 class="card-title pricing-text">$19.99/month</h1>
<p class="card-text">5 Projects</p>
<p class="card-text">20 Images</p>
<p class="card-text">3 Design Template</p>
<button class="btn btn-dark btn-block">Sign Up</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body text-center">
<h2 class="card-title text-muted">Advance Plan</h2>
<h1 class="card-title pricing-text">$29.99/month</h1>
<p class="card-text">10 Projects</p>
<p class="card-text">30 Images</p>
<p class="card-text">5 Design Template</p>
<button class="btn btn-dark btn-block">Sign Up</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body text-center">
<h2 class="card-title text-muted">Pro Plan</h2>
<h1 class="card-title pricing-text">$39.99/month</h1>
<p class="card-text">Unlimited Projects</p>
<p class="card-text">Unlimited Images</p>
<p class="card-text">Unlimited Design Template</p>
<button class="btn btn-dark btn-block">Sign Up</button>
</div>
</div>
</div>
</div>
</div>
</section> -->
<!-- Call to Action Section -->
<!-- <section id="cta">
<h1 class="text-center cta-text">Built the App of your Dream and Manage your Business</h1>
<div class="btn-section text-center">
<button class="btn btn-dark btn-lg btn-space"><i class="fab fa-google-play"></i> Download</button>
<button class="btn btn-outline-light btn-lg btn-space"><i class="fab fa-apple"></i> Download</button>
</div>
</section> -->
<!-- Footer -->
<section id="footer" class="d-flex justify-content-center">
<i class="fab fa-facebook-f footer-icon"></i>
<i class="fab fa-instagram footer-icon"></i>
<i class="fab fa-twitter footer-icon"></i>
</section>
<!-- Bootstrap's Javascript -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>