Skip to content

Instantly share code, notes, and snippets.

@TrueSlu

TrueSlu/freecodecamp-product-landing-page.markdown

Created October 15, 2018 16:58
Show Gist options
  • Save TrueSlu/4d26ad35b08809ba85972da1775be8b3 to your computer and use it in GitHub Desktop.
Save TrueSlu/4d26ad35b08809ba85972da1775be8b3 to your computer and use it in GitHub Desktop.
Download ZIP
FreeCodeCamp - Product Landing Page
Raw
freecodecamp-product-landing-page.markdown
Raw
index.html
<header id="header" class="header-section">
<nav id="nav-bar" class="navbar navbar-expand-sm navbar-dark fixed-top bg-dark">
<div class="container">
<a href="#" class="navbar-brand">
<img src="https://github.com/neel6762/Free-Code-Camp-Prdocuct-Landing-Page-/blob/master/src/img/header-img.png?raw=true" alt="#logoImg" height="50" width="50" >
<h3 class="d-inline align-middle"> Scoops</h3>
</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav"><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="#home" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#menu" class="nav-link">Menu</a>
</li>
<li class="nav-item">
<a href="#service" class="nav-link">Services</a>
</li>
<li class="nav-item">
<a href="#home" class="nav-link">Connect</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!-- Landing Page -->
<section class="landing-page">
<div class="container text-white main-section-text">
<p class="h3 font-weight-light text-center">Scooping Happiness To Life</p>
<h2 class="display-2 s-size text-center"><small class="lead display-4">visit </small>- SCOOPS</h2>
<div class="bg-dark mt-5 p-3 text-center">
<label for="getupdates">Get Notified For Discounts And New Menu Items !</label>
<form id="form">
<div class="input-group mb-2 align-center">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="email" class="form-control" placeholder="Username">
<a href="https://www.freecodecamp.com/email-submit">
<button class="btn btn-outline-light ml-4 mr-auto" id="submit"><i class="far fa-paper-plane"></i> Subscribe</button>
</a>
</div>
</form>
</div>
</div>
</section>
<!-- Menu -->
<section class="py-2 mt-3" id="menu">
<div class="container">
<div class="row">
<div class="col">
<p class="h2 font-weight-light s-size text-center p-1">
WE SERVE WORLD CLASS
</p>
<p class="lead text-center">HAVE A LOOK</p><hr class="bg-dark">
</div>
</div>
<div class="card-columns">
<div class="card">
<img src="https://github.com/neel6762/Free-Code-Camp-Prdocuct-Landing-Page-/blob/master/src/img/choclatecard.jpg?raw=true" alt="choclate" class="card-img-top">
<div class="card-body">
<h3 class="h5 card-title">Choclate</h3>
<p class="card-text">
Crafted by hand, served with Love
</p>
<button class="btn btn-outline-dark"><i class="fa fa-arrow-right"></i> View here</button>
</div>
</div>
<div class="card">
<img src="https://github.com/neel6762/Free-Code-Camp-Prdocuct-Landing-Page-/blob/master/src/img/candies-2.jpg?raw=true" alt="candies" class="card-img-top">
<div class="card-body">
<h3 class="h5 card-title">Candies</h3>
<p class="card-text">
Crafted by hand, served with Love
</p>
<button class="btn btn-outline-dark"><i class="fa fa-arrow-right"></i> View here</button>
</div>
</div>
<div class="card">
<img src="https://github.com/neel6762/Free-Code-Camp-Prdocuct-Landing-Page-/blob/master/src/img/vanilaChoc.jpg?raw=true" alt="vanilaChoc" class="card-img-top">
<div class="card-body">
<h3 class="h5 card-title">Vanila -Choclate</h3>
<p class="card-text">
Crafted by hand, served with Love
</p>
<button class="btn btn-outline-dark"><i class="fa fa-arrow-right"></i> View here</button>
</div>
</div>
<div class="card">
<img src="https://github.com/neel6762/Free-Code-Camp-Prdocuct-Landing-Page-/blob/master/src/img/fusion.jpg?raw=true" alt="fusion" class="card-img-top">
<div class="card-body">
<h3 class="h5 card-title">Fusion</h3>
<p class="card-text">
Crafted by hand, served with Love
</p>
<button class="btn btn-outline-dark"><i class="fa fa-arrow-right"></i> View here</button>
</div>
</div>
<div class="card">
<img src="https://github.com/neel6762/Free-Code-Camp-Prdocuct-Landing-Page-/blob/master/src/img/shake.jpg?raw=true" alt="shake" class="card-img-top">
<div class="card-body">
<h3 class="h5 card-title">Shake</h3>
<p class="card-text">
Crafted by hand, served with Love
</p>
<button class="btn btn-outline-dark"><i class="fa fa-arrow-right"></i> View here</button>
</div>
</div>
<div class="card">
<img src="https://github.com/neel6762/Free-Code-Camp-Prdocuct-Landing-Page-/blob/master/src/img/fudfeNut.jpg?raw=true" alt="fudgeNut" class="card-img-top">
<div class="card-body">
<h3 class="h5 card-title">Fudge Nut</h3>
<p class="card-text">
Crafted by hand, served with Love
</p>
<button class="btn btn-outline-dark"><i class="fa fa-arrow-right"></i> View here</button>
</div>
</div>
</div>
</div>
</section>
<!-- services -->
<section id="service" class="mt-3 py-2 bg-dark text-white">
<div class="container">
<div class="row">
<div class="col">
<p class="h2 font-weight-light s-size text-center p-1">
<i class="fas fa-glass-martini"></i> PARTY ORDERS ?
</p>
<p class="lead text-center">LET US HELP YOU</p><hr class="bg-light">
</div>
</div>
<div class="row py-1">
<div class="col-md-6 mb-2">
<form>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" placeholder="Name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<label for="number">Contact</label>
<input type="text" class="form-control" placeholder="Your Contact Number">
</div>
<div class="form-group">
<label for="details">Message</label>
<textarea id="" cols="30" rows="3" class="form-control" placeholder="Enter Your Message Here"></textarea>
</div>
<button class="btn btn-outline-light btn-block"><i class="far fa-paper-plane"></i> Submit</button>
</form>
</div>
<div class="col-md-6 mb-2 pt-4 d-none d-md-block">
<div class="card">
<img src="https://images.pexels.com/photos/587741/pexels-photo-587741.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">
</div>
</div>
</div>
</div>
</section>
<!-- Footer Section -->
<section id="connect" class="p-2">
<div class="container pt-2">
<div class="row">
<div class="col">
<p class="s-size text-center">SOCIAL LINK</p>
</div>
</div>
<div class="row">
<div class="col text-center">
<a href="" class="text-dark mx-2"><i class="fab fa-instagram"></i></a>
<a href="" class="text-dark mx-2"><i class="fab fa-facebook"></i></a>
</div>
</div>
<div class="row">
<div class="col text-center">
<p class="h6 font-weight-light">&copy; Neel Patel</p>
</div>
</div>
</div>
</section>
Raw
style.css
body{
background: #EBEBEB;
}
.landing-page{
background: linear-gradient(#eeecec33,rgba(109, 8, 88, 0.51)), url(https://images.unsplash.com/photo-1469533667357-006056eaf780?ixlib=rb-0.3.5&s=37b9a32…&auto=format&fit=crop&w=1050&q=80);
background-size: cover;
background-attachment: fixed;
min-height: 700px;
}
li{
font-size: 20px;
}
.main-section-text{
padding-top: 200px;
}
.s-size{
letter-spacing: 6px;
}
hr{
width: 50%;
}
.b-left{
border-left: 1px solid black;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment