Skip to content

Instantly share code, notes, and snippets.

@yadavanuj1996

yadavanuj1996/fcc-product-landing-page.markdown

Last active August 20, 2019 03:27
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save yadavanuj1996/a5e0e8b9c0adb33346436e77901ddc03 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save yadavanuj1996/a5e0e8b9c0adb33346436e77901ddc03 to your computer and use it in GitHub Desktop.
Download ZIP
FCC: Product Landing Page
Raw
fcc-product-landing-page.markdown
Raw
index.html
<!-- <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
-->
<!Doctype html>
<html lang="en-US">
<head>
<title>Product Landing Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Anuj Yadav">
<meta name="description" content="Product landing page">
<link href="https://fonts.googleapis.com/css?family=Work+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nanum+Gothic&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/ba3646b588.js"></script>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<header id="header">
<nav id="nav-bar">
<div id="logo-head">
<!-- uncomment for fcc solution
<img src="https://www.irex.org/sites/default/files/storage-images/IREX_Logo_Color-H.png" alt="logo" id="header-img">
-->
<i id="gem" class="far fa-gem"></i>
</div>
<div id="nav-links">
<a href="#product-heading" class="nav-link">Products</a>
<a href="#business" class="nav-link">Business</a>
<a href="#support" class="nav-link">Support</a>
<a href="#newsletter" class="nav-link">Newsletter</a>
</div>
</nav>
</header>
<main>
<div id="landing-div">
<div id="landing-img-div">
<img id="landing-img" src="https://i.ibb.co/7jjrLQD/collection-shops-stores-53876-28381-removebg-preview.png" alt="deals">
</div>
<div id="landing-taglines" class="lg-padding">
<p id="coupon-head"><em>Coupon</em></p>
<p id="discount-head"><b>Enjoy Your </br>
Discounts</b></p>
<p id="deals-head">
Best deals across all categories</p>
<button>Watch the Clip</button>
<p id="watch-deal-text">WATCH THE Deals</p>
</div>
</div>
<h2 id="product-heading">Product Categories</h2>
<div id="products">
<div class="product-category">
<img src="https://image.flaticon.com/icons/svg/608/608857.svg" id="product-category-img" alt="product category image">
<p>Restaurant</p>
</div>
<div class="product-category">
<img src="https://image.flaticon.com/icons/svg/931/931949.svg" id="product-category-img" alt="product category image">
<p>Bar</p>
</div>
<div class="product-category">
<img src="https://image.flaticon.com/icons/svg/579/579125.svg" id="product-category-img" alt="product category image">
<p>Cafe</p>
</div>
<div class="product-category">
<img src="https://image.flaticon.com/icons/svg/135/135763.svg" id="product-category-img" alt="product category image">
<p>Grocery</p>
</div>
<div class="product-category">
<img src="https://image.flaticon.com/icons/svg/1005/1005735.svg" id="product-category-img" alt="product category image">
<p>Beauty & Wellness</p>
</div>
<div class="product-category">
<img src="https://image.flaticon.com/icons/svg/1965/1965920.svg" id="product-category-img" alt="product category image">
<p>Home Services</p>
</div>
<div class="product-category">
<img src="https://image.flaticon.com/icons/svg/148/148998.svg" id="product-category-img" alt="product category image">
<p>Electronics</p>
</div>
<div class="product-category">
<img src="https://image.flaticon.com/icons/svg/1908/1908162.svg" id="product-category-img" alt="product category image">
<p>Gym</p>
</div>
</div>
<div id="details">
<p id="details-items">Restaurants, Cafes, Salad House and Bars</p>
<p id="details-tagline">Live Without Limits</p>
<p id="details-text"><b>Discover infinite ways to enjoy services.</b>
</br>Achieve a refined way with endless luxuries and food.</p>
<video id="video" controls poster="https://www.wecraftcreative.com/wp-content/uploads/2019/04/vid-new.jpg">
<source src="https://interactive-examples.mdn.mozilla.net/media/examples/flower.mp4"
type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>
</div>
<div id="business">
<div id="business-text">
<p id="business-heading">Discount & Coupons </p>
<p id="business-tagline"><b>Never Miss A Offer or Discount</b></p>
<p id="business-text">Perfect your shopping, eating and other experiences with our application and exclusive deals having special outlet and city wise discounts that will help save your money and get best customer experience.</p>
</div>
<div id="business-image">
<img src="https://i.ibb.co/vH6PYqW/edited.png" alt="business-image">
</div>
</div>
<div id="business-two">
<div id="business-text">
<p id="business-heading">Discount & Coupons </p>
<p id="business-tagline"><b>Never Miss A Offer or Discount</b></p>
<p id="business-text">Perfect your shopping, eating and other experiences with our application and exclusive deals having special outlet and city wise discounts that will help save your money and get best customer experience.</p>
</div>
<div id="business-image">
<img src="https://9to5mac.com/wp-content/uploads/sites/6/2016/10/itunes-gift-card-collection.jpg?quality=82&strip=all&w=1600" alt="business-image">
</div>
</div>
<div id="support">
<p id="support-items">BEST CUSTOMER SUPPORT</p>
<p id="support-tagline">Coupons & Deals</p>
<p id="support-text"><b>We ensure every business and brand provide
</br>the best deals to you.</b></p>
<video id="video-two" poster="https://image.freepik.com/free-vector/discount-comic-labels-set_98292-2762.jpg" controls>
<source src="https://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4"
type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>
</div>
<div id="redeem-coupon">
<p id="redeem-coupon-heading">Get Discounts Today</p>
<p id="redeem-coupon-tagline">Sign up today to get exclusive deals and offers worth thousands</p>
<div id="redeem-div">
<div id="redeem-image">
<img src="https://i.ibb.co/Pg9BMrb/test.png" alt="redeem-image">
</div>
<div id="redeem-text">
Try offers today and discover new way of shopping.<br></br>
<button>Sign Up</button>
</div>
</div>
</div>
<div id="newsletter">
<p id="newsletter-text">Get best deals and offer details right in your email</p>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<label>E-Mail: </label>
<input type="email" name="email" id="email" type="text" placeholder="E-mail address">
<input id="submit" type="submit" value="Submit">
</form>
</div>
</main>
<footer>
<div id="footer-main">
<div id="footer-logo-div">
<i id="gem" class="far fa-gem"></i>
<p>Here To Serve You</p>
</div>
<div id="footer-content-div">
<div id="footer-products">
<p class="footer-links-heading">Products</p>
<a class="footer-links" href="#">Products Link</a></br>
<a class="footer-links" href="#">Products Link</a></br>
<a class="footer-links" href="#">Products Link</a></br>
<a class="footer-links" href="#">Products Link</a></br>
<a class="footer-links" href="#">Products Link</a></br>
<a class="footer-links" href="#">Products Link</a></br>
</div>
<div id="footer-downloads">
<p class="footer-links-heading">Downloads</p>
<a class="footer-links" href="#">Downloads Link</a></br>
<a class="footer-links" href="#">Downloads Link</a></br>
<a class="footer-links" href="#">Downloads Link</a></br>
<a class="footer-links" href="#">Downloads Link</a></br>
<a class="footer-links" href="#">Downloads Link</a></br>
<a class="footer-links" href="#">Downloads Link</a></br>
</div>
<div id="footer-support">
<p class="footer-links-heading">Support</p>
<a class="footer-links" href="#">Support Link</a></br>
<a class="footer-links" href="#">Support Link</a></br><a class="footer-links" href="#">Support Link</a></br><a class="footer-links" href="#">Support Link</a></br><a class="footer-links" href="#">Support Link</a></br><a class="footer-links" href="#">Support Link</a></br>
</div>
</div>
<div id="footer-social-div">
<p class="footer-links-heading">Follow Us</p>
<div id="footer-social-icons-div">
<i class="fab fa-twitter social-icons"></i>
<i class="fab fa-facebook-f social-icons"></i>
<i class="fab fa-youtube social-icons"></i>
<i class="fab fa-instagram social-icons"></i>
</div>
<p class="footer-links-heading">Newsletter</p>
<div id="footer-news-letter-div">
<input type="email" name="news-letter-email" id="news-letter-email" type="text" placeholder="">
<i id="newsletter-submit" class="fas fa-chevron-right"></i>
</div>
</div>
</div>
<p id="terms-and-conditions">Copyright © 2019 XYZ. All rights reserved. Terms & Conditions,Privacy,Cookies,Policy,License Agreement & Policy subjected to website.
</p>
</footer>
</body>
</html>
Raw
script.babel
// !! IMPORTANT README:
// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place.
/***********
INSTRUCTIONS:
- Select the project you would
like to complete from the dropdown
menu.
- Click the "RUN TESTS" button to
run the tests against the blank
pen.
- Click the "TESTS" button to see
the individual test cases.
(should all be failing at first)
- Start coding! As you fulfill each
test case, you will see them go
from red to green.
- As you start to build out your
project, when tests are failing,
you should get helpful errors
along the way!
************/
// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!
// Once you have read the above messages, you can delete all comments.
Raw
style.css
:root{
--small-fs: 10px;
--small-lh: 20px;
--medium-fs: 20px;
--medium-lh: 30px;
--large-fs: 40px;
--large-lh: 50px;
--extra-large-fs: 50px;
--extra-large-lh: 60px;
--video-width: 80%;
--flex-direction-lg-row-rev-sm-col-rev: row-reverse;
--flex-direction-lg-row-sm-col-rev: row;
--flex-direction-lg-row-sm-col: row;
--text-align-lg-left-sm-center: left;
--display-ls-flex-sm-none: flex;
--footer-logo-div-right-border: 1px solid white;
--lg-flex-start-sm-center: flex-start;
--width-lg-50per-sm-100per:50%;
}
body {
font-family: "Work Sans", sans-serif;
margin: 0px;
}
#header-img {
height: 80px;
width: 180px;
}
a {
text-decoration: none;
}
@media only screen and (min-width: 320px) and (max-width: 720px) {
:root{
--small-fs: 5px;
--small-lh: 10px;
--medium-fs: 15px;
--medium-lh: 25px;
--large-fs: 25px;
--large-lh: 35px;
--extra-large-fs: 25px;
--extra-large-lh: 35px;
--video-width: 95%;
--flex-direction-lg-row-rev-sm-col-rev: column-reverse;
--flex-direction-lg-row-sm-col-rev: column-reverse;
--flex-direction-lg-row-sm-col: column;
--text-align-lg-left-sm-center: center;
--display-ls-flex-sm-none: none;
--footer-logo-div-right-border: none;
--lg-flex-start-sm-center: center;
--width-lg-50per-sm-100per:100%;
}
#nav-links #logo-head a.nav-link{
display: none;
}
a.nav-link {
display: none;
}
#coupon-head {
display: none;
font-size: 16px;
line-height: 24px;
}
#discount-head {
font-size: 20px;
line-height: 30px;
font-family: "Nanum Gothic", sans-serif;
margin-top: 10px;
margin-bottom: 10px;
}
#deals-head {
font-size: 10px;
line-height: 20px;
}
#watch-deal-text{
display: none;
}
button {
color: #000;
background-color: #50e3c2;
border-color: #50e3c2;
box-shadow: none;
border: none;
padding: 0.603125rem 1.0625rem;
font-size: 0.825rem;
line-height: 0.5;
border-radius: 0.1875rem;
}
.product-category {
width: 50% !important;
text-align: center;
padding-bottom: 10px;
}
}
@media (min-width: 721px){
nav {
display: flex;
align-items: center;
justify-content: space-between;
}
#nav-links {
width: 40%;
display: flex;
flex-direction: row;
justify-content: space-around;
}
a.nav-link {
color: white;
}
#nav-link {
color: white !important;
}
.nav-link-space {
padding-right: 100px;
}
#coupon-head {
font-size: 16px;
line-height: 24px;
}
#discount-head {
font-size: 40px;
line-height: 50px;
font-family: "Nanum Gothic", sans-serif;
margin-top: 10px;
margin-bottom: 10px;
}
#deals-head {
font-size: 21px;
line-height: 32px;
}
button {
color: #000;
background-color: #50e3c2;
border-color: #50e3c2;
box-shadow: none;
border: none;
padding: 1.03125rem 2.0625rem;
font-size: 1.125rem;
line-height: 1.5;
border-radius: 0.1875rem;
}
.product-category {
width: 25% !important;
text-align: center;
padding-bottom: 10px;
}
.lg-padding{
padding-left: 10%;
}
}
#landing-div {
display: flex;
flex-direction: var(--flex-direction-lg-row-sm-col,row);
justify-content: space-around;
align-items: center;
margin: 20px 0px 20px 0px;
padding: 20px 0px 20px 0px;
}
#landing-img-div {
width: var(--width-lg-50per-sm-100per,50%);
display: flex;
flex-direction: row-reverse;
justify-content: center;
}
#landing-img {
max-width: 100%;
}
#landing-taglines {
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: var(--lg-flex-start-sm-center,flex-start);
}
header {
/*Uncomment for fcc solution
width: 100%;
position: fixed;
also put width 100% in nav
*/
background-color: #1f2c39;
color: white;
}
#details-items {
font-size: var(--medium-fs,20px);
line-height: var(--medium-lh,30px);
}
#details-tagline {
font-size: var(--extra-large-fs,50px);
line-height: var(--extra-large-lh,60px);
font-family: "Nanum Gothic", sans-serif;
margin-top: 10px;
margin-bottom: 10px;
}
#details-text {
font-size: var(--medium-fs,20px);
line-height: var(--medium-lh,30px);
text-align: center;
}
#details {
display: flex;
flex-direction: column;
align-items: center;
margin: 20px 0px 20px 0px;
padding: 20px 0px 40px 0px;
background-color: #50e3c2;
}
#video{
width: var(--video-width,80%);
}
#business-heading {
font-size: var(--medium-fs,20px);
line-height: var(--medium-lh,30px);
}
#business-tagline {
font-size: var(--large-fs,40px);
line-height: var(--large-lh,50px);
font-family: "Nanum Gothic", sans-serif;
margin-top: 10px;
margin-bottom: 10px;
}
#business-text {
font-size: var(--medium-fs,20px);
line-height: var(--medium-lh,30px);
flex-basis: 50%;
margin: 10px;
}
#business-image {
flex-basis: 50%;
margin: 10px;
}
#business {
display: flex;
flex-direction: var(--flex-direction-lg-row-rev-sm-col-rev,row-reverse);
justify-content: center;
text-align: center;
align-items: center;
margin: 0px 25px 0px 25px;
padding: 0px 25px 0px 25px;
}
#business-two{
display: flex;
flex-direction: var(--flex-direction-lg-row-sm-col-rev,row);
justify-content: center;
text-align: center;
align-items: center;
margin: 0px 25px 0px 25px;
padding: 0px 25px 0px 25px;
}
img {
max-width: 100%;
display: block;
height: auto;
}
#products {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.product-category img {
width: 100%;
height: 100px;
display: block;
}
#product-heading{
text-align:center;
font-size: 30px;
line-height: 40px;
font-family: "Nanum Gothic", sans-serif;
margin-top: 40px;
margin-bottom: 30px;
}
#support-items {
font-size: var(--medium-fs,20px);
line-height: var(--medium-lh,30px);
}
#support-tagline {
font-size: var(--extra-large-fs,50px);
line-height: var(--extra-large-lh,60px);
font-family: "Nanum Gothic", sans-serif;
margin-top: 10px;
margin-bottom: 10px;
color:#50e3c2;
}
#support-text {
font-size: var(--medium-fs,20px);
line-height: var(--medium-lh,30px);
text-align: center;
}
#video-two{
width: var(--video-width,80%);
}
#support {
display: flex;
flex-direction: column;
align-items: center;
margin: 20px 0px 20px 0px;
padding: 20px 0px 40px 0px;
background-color: #1F2C39;
color: white;
}
#redeem-coupon-heading{
font-size: 30px;
line-height: 40px;
font-family: "Nanum Gothic", sans-serif;
margin-top: 10px;
padding-top: 40px;
margin-bottom: 10px;
color:#000;
text-align: center;
}
#redeem-coupon-tagline{
font-size: var(--medium-fs,20px);
line-height: var(--medium-lh,30px);
text-align: center;
}
#redeem-text{
font-size: var(--extra-large-fs,50px);
line-height: var(--extra-large-lh,50px);
font-family: "Nanum Gothic", sans-serif;
text-align:var(--text-align-lg-left-sm-center,left);
}
#redeem-div{
display: flex;
flex-direction: var(--flex-direction-lg-row-sm-col,row);
justify-content: center;
align-items: center;
}
#newsletter{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 40px;
}
#newsletter-text{
font-size: 20px;
line: height: 30px;
text-align: center;
}
#submit{
color: #000;
background-color: #50e3c2;
border-color: #50e3c2;
box-shadow: none;
border: none;
padding: 0.3125rem 1.625rem;
border-radius: 0.1875rem;
}
#email{
height: 20px;
border-radius: 0px;
border: 0px;
border-bottom: 2px solid #6d6c71 !important;
}
footer{
background-color: #343A40;
padding-bottom: 1px;
color: white;
padding-top: 25px;
}
#footer-main{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
border-bottom: 1px solid white;
padding-bottom: 15px;
}
#footer-logo-div{
flex-basis: 20%;
border-right: var(--footer-logo-div-right-border,1px solid white);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#footer-content-div{
flex-basis: 60%;
display: var(--display-ls-flex-sm-none,flex);
flex-direction: row;
justify-content: space-around;
align-items: flex-start;
}
#footer-social-div{
flex-basis: 20%;
display: flex;
flex-direction: column;
}
#footer-logo-img{
width: 100px !important;
}
.footer-links{
color: white !important;
}
.footer-links-heading{
font-weight: bold;
}
i{
color: #50e3c2;
}
#news-letter-email{
height: 15px;
border-radius: 2px;
border: 2px solid #50e3c2;
padding: 4px;
}
#newsletter-submit{
color: #50e3c2;
border: 1px solid #50e3c2;
height: 15px;
padding: 5px;
}
#footer-news-letter-div{
display: flex;
flex-direction: row;
}
#terms-and-conditions{
text-align: center;
font-size: 12px;
}
#gem{
font-size: 40px;
color: white;
text-align:center;
}
#gem{
font-size: 40px;
color: white;
text-align:center;
}
#gem-header{
font-size: 40px;
color: white;
text-align:center;
}
#logo-head{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 60px;
width: 200px;
}
.social-icons{
font-size: 25px !important;
padding-left: 4px;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment