Skip to content

Instantly share code, notes, and snippets.

@tas33n

tas33n/app-landing-page.markdown

Created December 8, 2022 18:49
Show Gist options
  • Save tas33n/d9afa47fd7374a94e1151837d86bea1d to your computer and use it in GitHub Desktop.
Save tas33n/d9afa47fd7374a94e1151837d86bea1d to your computer and use it in GitHub Desktop.
Download ZIP
App Landing Page
Raw
app-landing-page.markdown
Raw
index.html
<!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> Lucid - One Page Theme </title>
<link rel="stylesheet" type="text/css" href="/css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<!--Hero & Navigation-->
<div id="hero">
<div class="row container">
<nav class="navbar">
<span class="navbar-toggle" id="js-navbar-toggle">
<i class="fas fa-bars"></i>
</span>
<a href="#" class="logo">LUCID</a>
<ul class="main-nav" id="js-menu">
<li>
<a href="#" class="nav-links">Home</a>
</li>
<li>
<a href="#" class="nav-links">Features</a>
</li>
<li>
<a href="#" class="nav-links">About</a>
</li>
<li>
<a href="#" class="nav-links">Testimonials</a>
</li>
<li>
<a href="#" class="nav-links">Pricing</a>
</li>
<li>
<a href="#" class="nav-links">Contact</a>
</li>
</ul>
</nav>
</div>
<section>
<div class="row container">
<div id="hero-copy" class="col-2 column">
<p class="intro-text">Introducing Lucid Theme</p>
<h1 class="headline-text-light">Carefully crafted and beautiful landing page.</h1>
<p class="description-text">tiam ullamcorper et turpis eget hendrerit. Praesent varius risus mi, at elementum magna ultricies accumsan. Cras venenatis lacus sed dolor placerat tempus. Morbi blandit at neque ut imperdiet.</p>
<button class="button-dark">Download Now</button>
<button class="button-light">View Features</button>
</div>
<div id="hero-phone" class="col-2 column">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/572684/devices.png">
</div>
</div>
</section>
</div>
<!--Features Section-->
<section id="features" class="container">
<div class ="row container">
<p class="intro-text">product overview</p>
<h2>List of amazing features</h2>
</div>
<div class="row">
<div class="col-4 column">
<div class="feature-icon"><i class="fas fa-desktop"></i></div>
<h3>Responsive</h3>
<p class="description-text">Fusce fermentum placerat magna ac pharetra. Aliquam euismod elit non ipsum lacinia consectetur.</p>
</div>
<div class="col-4 column">
<div class="feature-icon"><i class="fas fa-cogs"></i></div>
<h3>Customizable</h3>
<p class="description-text" >Fusce fermentum placerat magna ac pharetra. Aliquam euismod elit non ipsum lacinia consectetur.</p>
</div>
<div class="col-4 column">
<div class="feature-icon"><i class="fas fa-thumbs-up"></i></div>
<h3>Lovely Design</h3>
<p class="description-text">Fusce fermentum placerat magna ac pharetra. Aliquam euismod elit non ipsum lacinia consectetur.</p>
</div>
<div class="col-4 column">
<div class="feature-icon"><i class="fas fa-mobile-alt"></i></div>
<h3>Mobile Friendly</h3>
<p class="description-text">Fusce fermentum placerat magna ac pharetra. Aliquam euismod elit non ipsum lacinia consectetur.</p>
</div>
</div>
</section>
<!--About 1 Section-->
<section id="about">
<div class="row container">
<div id="about-phone" class="col-2 colummn">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/572684/devices.png">
</div>
<div id="about-text" class="col-2 column">
<p class="intro-text">Dip into the details</p>
<h2>Beautiful on every device</h2>
<p class="description-text">Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<ul>
<li><i class="fas fa-trophy"></i> Awesome Design</li>
<li><i class="fas fa-mobile"></i> Fully Responsive</li>
<li><i class="fas fa-bolt"></i> Retina Ready</li>
<li><i class="fas fa-tasks"></i> Tons of features and easy to use</li>
</ul>
</div>
</div>
</section>
<!--About 2 Section-->
<section id="about2">
<div class="row container">
<div id="about2-text" class="col-2 column">
<p class="intro-text">Dip into the details</p>
<h2>Super easy to customize</h2>
<p class="description-text">Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div>
<div class="col-2 colummn">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/572684/iPhone5_lyingdown.png">
</div>
</div>
</section>
<!-- Testimonials -->
<section id="testimonials">
<div id="testimonials-heading" class="row container">
<p class="intro-text">Quality Has Its Price</p>
<h2 class="headline-text-light">Testimonials</h2>
</div>
<div class="row container">
<div class="col-2 column">
<p class="testimonial-text">Once upon a time all the Rivers combined to protest against the action of the Sea in making their waters salt. “When we come to you,” said they to the Sea.</p>
<div class="client">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/572684/Warstwa_7.png">
<div>
<span class="client-name">John Doe</span>
<span class="client-position">CEO, The Rivers Company</span>
</div>
</div>
</div>
<div class="col-2 column">
<p class="testimonial-text">Once upon a time all the Rivers combined to protest against the action of the Sea in making their waters salt. “When we come to you,” said they to the Sea.</p>
<div class="client">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/572684/Warstwa_7.png">
<div>
<span class="client-name">John Doe</span>
<span class="client-position">CEO, The Rivers Company</span>
</div>
</div>
</div>
</div>
</section>
<!--CTA Section -->
<section id="cta-section" >
<div class="row container cta">
<h2>Like what you see? Get this great theme now!</h2>
<div class="cta-buttons">
<button class="button-light">View Features</button>
<button class="button-dark">Download Now</button>
</div>
</div>
</section>
<!--Pricing & Plans -->
<section id="pricing">
<div class ="row container">
<p class="intro-text">Quality Has Its Price</p>
<h2>Pricing & Plans</h2>
</div>
<div class="row container">
<div class="col-4 column">
<div>
<ul class=price-table>
<li class="price-header">Free</li>
<li class="price-cell"><span class="price">$0</span> <br> <span class="per-month">/per month</span></li>
<li class="price-text"><p>Fusce fermentum placerat magna ac pharetra. Aliquam euismod elit non ipsum lacinia consectetur.</p><button class="price-button">Order Now</button></li>
</ul>
</div>
</div>
<div class="col-4 column">
<div>
<ul class=price-table>
<li class="price-header">Personal</li>
<li class="price-cell"><span class="price">$25</span> <br> <span class="per-month">/per month</span></li>
<li class="price-text"><p>Fusce fermentum placerat magna ac pharetra. Aliquam euismod elit non ipsum lacinia consectetur.</p><button class="price-button">Order Now</button></li>
</ul>
</div>
</div>
<div class="col-4 column">
<div>
<ul class=price-table>
<li class="price-header">Business</li>
<li class="price-cell-special"><span class="price">$50</span> <br> <span class="per-month-special">/per month</span></li>
<li class="price-text"><p>Fusce fermentum placerat magna ac pharetra. Aliquam euismod elit non ipsum lacinia consectetur.</p><button class="price-button-special">Order Now</button></li>
</ul>
</div>
</div>
<div class="col-4 column">
<div>
<ul class=price-table>
<li class="price-header">Ultimate</li>
<li class="price-cell"><span class="price">$99</span> <br> <span class="per-month">/per month</span></li>
<li class="price-text"><p>Fusce fermentum placerat magna ac pharetra. Aliquam euismod elit non ipsum lacinia consectetur.</p><button class="price-button">Order Now</button></li>
</ul>
</div>
</div>
</div>
</section>
<!-- Contact Us -->
<section id="contact">
<div class="row container">
<p class="intro-text">Stay In Touch</p>
<h2>Contact us</h2>
</div>
<div class="row container">
<div class="col-3 column">
<i class="fas fa-mobile"></i>
<p class="contact-info">Phone:(415)124-5678</p>
<p class="contact-info">Fax:(412)123-8290</p>
</div>
<div class="col-3 column">
<i class="fas fa-map"></i>
<p class="contact-info">1001 Brickell Bay Dr. <br>Suite 1900 <br>Miami, FL 33131</p>
</div>
<div class="col-3 column">
<i class="fas fa-envelope"></i>
<p class="contact-info">[email protected]</p>
</div>
</div>
<div class="row container">
<form class="row container">
<div class="form-left column">
<input type="text" id="form-name" placeholder="Name*">
<input type="text" id="form-email" placeholder="Email*">
<input type="text" id="form-subject" placeholder="Subject*">
</div>
<div class="form-right column">
<textarea id="message" placeholder="Message*"></textarea>
<p><button class="button-dark">Send Message</button></p>
</div>
</form>
</div>
<div class="row">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/572684/map.jpg">
</div>
</section>
<!--Footer -->
<footer id="footer-info">
<div class="row container">
<div class="footer-icons">
<i class="fab fa-behance"></i>
<i class="fab fa-dribbble"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-facebook"></i>
<i class="fab fa-linkedin"></i>
<p class="footer-copyright">copyright © 2019 lucid onepage theme</p>
</div>
</div>
</footer>
<script src="js/main.js">
</script>
</body>
</html>
Raw
script.js
let mainNav = document.getElementById('js-menu');
let navBarToggle = document.getElementById('js-navbar-toggle');
navBarToggle.addEventListener('click', function () {
mainNav.classList.toggle('active');
});
Raw
style.css
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
.container {
max-width: 1000px;
margin: 0 auto;
}
img {
width: 100%;
}
/* Navigation Styling */
.navbar {
font-size: 18px;
padding-bottom: 10px;
}
.main-nav {
list-style-type: none;
}
.nav-links,
.logo {
text-decoration: none;
color: #fff;
}
.main-nav li {
text-align: center;
margin: 15px auto;
}
.logo {
display: inline-block;
font-size: 22px;
margin-top: 10px;
margin-left: 20px;
}
.navbar-toggle {
position: absolute;
top: 10px;
right: 20px;
cursor: pointer;
color: #fff;
font-size: 24px;
}
/* Hides Menu by Default */
.main-nav {
list-style-type: none;
display: none;
}
.active {
display: block;
}
@media screen and (min-width: 768px) {
.navbar {
display: flex;
justify-content: space-between;
padding-bottom: 0;
height: 70px;
align-items: center;
}
.main-nav {
display: flex;
margin-right: 30px;
flex-direction: row;
justify-content: flex-end;
}
.main-nav li {
margin: 0;
}
.nav-links {
margin-left: 40px;
}
.logo {
margin-top: 0;
}
.navbar-toggle {
display: none;
}
.nav-links:hover {
border-bottom: solid 5px #008ed6;
}
}
/* Column classes */
.col-2 {
float: left;
width: 50%;
}
.col-3 {
float: left;
width: 33.3%;
}
.col-4 {
float: left;
width: 25%;
padding: 10px;
}
@media screen and (max-width: 600px) {
.column {
float: left;
width: 100%;
}
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Text Stying */
.intro-text{
color: #008ed6;
text-transform: uppercase;
font-weight: bold;
}
.headline-text-light {
color: #fff;
}
.description-text {
color: #909091;
}
/* Buttons */
.button-dark {
background-color: #008ed6;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
font-weight: bold;
margin: 4px 2px;
cursor: pointer;
text-transform: uppercase;
}
.button-light {
background-color: transparent;
border: solid 1px white;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-weight: bold;
display: inline-block;
font-size: 12px;
margin: 4px 2px;
cursor: pointer;
text-transform: uppercase;
}
/* Main Hero Section */
#hero {
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/572684/hero-background.jpg") no-repeat;
background-size: cover;
}
@media screen and (min-width:768px) {
#hero-phone img {
width: 400px;
}
}
#hero-phone {
text-align: center;
}
#hero-copy {
margin-top: 50px;
}
/* Features Section */
#features {
text-align: center;
padding: 30px 0px;
}
.feature-icon {
border: 1px solid #787878;
border-radius: 50%;
width: 100px;
height: 100px;
margin: 0 auto;
}
.feature-icon i {
font-size: 50px;
padding-top: 25px;
color: #008ed6;
}
#features p {
padding: 0 20px;
}
/* About Section */
#about {
border-top: solid 2px #f4f4f4;
padding: 30px 0;
}
@media screen and (min-width:768px) {
#about-phone img {
width: 400px;
}
}
#about-text li {
list-style-type: none;
font-weight: bold;
font-size: 14px;
line-height: 2;
}
#about-text i {
color:#008ed6;
}
#about2 {
background-color: #f2f2f2;
padding: 30px 0px;
}
#about2-text {
margin-top: 20px;
}
/* Testimonials Section */
#testimonials {
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/572684/Warstwa_8.png") no-repeat;
background-size: cover;
padding: 30px 0px;
}
#testimonials-heading {
text-align: center;
}
#testimonials {
color: #fff;
}
.testimonial-text {
padding: 10px;
font-style: italic;
}
.client {
display: flex;
align-items: center;
justify-content: left;
}
.client img{
width: 60px;
padding: 10px
}
.client span {
display: block;
padding: 5px
}
/* CTA Section */
#cta-section {
background-color: #000;
color: #fff;
padding: 30px;
}
@media screen and (min-width:768px){
.cta {
display: flex;
align-items: center;
justify-content: right;
}
.cta-buttons {
margin-left: 100px;
}
}
.cta-buttons {
margin: 0 auto;
}
/* Pricing Table */
#pricing {
text-align: center;
}
.price-table {
list-style: none;
border: 1px solid #999999;
text-align: center;
padding: 0px;
}
.price-table li {
list-style: none;
border: 1px solid #e0e0e0;
text-align: center;
}
.price-header {
text-transform: uppercase;
font-weight: bold;
padding: 10px;
}
.price-cell {
padding: 30px;
}
.price-cell-special {
padding: 30px;
background-color: #008ed6;
color: #fff;
}
.price {
font-size: 30px;
font-weight: bold;
}
.per-month {
color: #999999;
}
.per-month-special {
color: #fff;
}
.price-text {
color: #999999;
padding: 30px;
}
.price-cta {
padding: 10px;
}
.price-button {
background-color: transparent;
border: solid 1px #999999;
color: #008ed6;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-weight: bold;
display: inline-block;
font-size: 12px;
margin: 4px 2px;
cursor: pointer;
text-transform: uppercase;
}
.price-button-special {
background-color: #008ed6;
border: solid 1px #999999;
color: #fff;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-weight: bold;
display: inline-block;
font-size: 12px;
margin: 4px 2px;
cursor: pointer;
text-transform: uppercase;
}
/* Contact Section */
#contact {
text-align: center;
background-color: #e0e0e0;
padding-top: 30px;
}
#contact i {
color: #008ed6;
}
.contact-info {
color: #999999;
font-size: 10px;
}
/* Form Styling */
form {
width: 70%;
margin: 0 auto;
background-color: black;
padding: 30px;
}
.form-left {
width: 50%;
float: left;
}
.form-left input {
margin: 10px;
padding: 10px;
background-color: #000;
color: #999;
}
.form-right {
width: 50%;
float: left;
}
@media screen and (max-width: 600px) {
.form-left {
width: 100%;
}
.form-right {
width: 100%;
}
}
.form-right textarea {
background-color: #000;
color: #999;
height: 200px;
}
#map {
background: url("img/map.jpg") no-repeat;
background-size: cover;
}
/* Footer Styling */
#footer-info {
background-color: #000;
color: #999;
padding: 20px;
}
.footer-icons {
text-align: center;
word-spacing: 10px;
}
.footer-copyright {
text-transform: uppercase;
font-size: 10px;
word-spacing: 0px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment