FCC: Product Landing Page

fcc-product-landing-page.markdown

FCC: Product Landing Page

A Pen by wanyutu on CodePen.

License.

index.html

<style>
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
</style>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<div class="head">
<header id="header"> 
  <nav id="nav-bar">
    <ul>
      <li> <a href="#contact" class="nav-link" >Contacts</a> </li>
      <li> <a href="#features" class="nav-link">Features</a> </li>
      <li> <a href="#how-it-works" class="nav-link" >How It Works</a> </li>
      <div class="logo">
    <img src="https://i.imgur.com/BgQDIko.png" width=80  height=80 alt="logo"  id="header-img">
 </div> 
      
    </ul>
  </nav>
</header>
</div>

<div class="container">
<section>
   <h1>Dash Foods Kenya</h1>
  <p class="top">best Online Food Ordering & Delivery App</p>
  <a href="https://imgur.com/6PqRGpZ"><img src="https://i.imgur.com/6PqRGpZh.jpg" title="source: imgur.com"class="banner" /></a>
 
  <form id="form" action="https://www.freecodecamp.com/email-submit" method="POST">
  <div class="list">  <input id="email" placeholder="Enter your e-mail" type="email" name="email" expected>
    <input id="submit" value="Subcribe to Mailing List" type="submit" class="btn"   name="email">
    </div>
    
<h2 id="how-it-works" >Dash Foods-Putting a smile on your face with Yummy meals</h2>
    
  </form>
  </section>
<section class="intro">
  <p>
    Craving for some pizza or fried chicken? Too lazy to cook? Need a bite to eat? Dash Food App will look for the nearest restaurant location using GPS and will make good food your way! dash Food allows you have a control of your day by letting you customize your food, select the desired food type and get it when you want it. No carrying your wallet, no waiting around! All and Everything is taken care of the app!
  </p>
  
</section>
<a href="https://imgur.com/21u43IT"><img src="https://i.imgur.com/21u43IT.png" title="source: imgur.com"  class="b2" width=100% height=100%/></a>
 <iframe width="760" id="video"  height="315"  src="https://www.youtube.com/embed/ODvDUXwIE7I" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<div id="features">
  <h3 class="css3panel-title ff-alternative  " itemprop="headline">Features</h3>
  
  </div>
<section id="pricing">
  <div class="user-app"><h4>User App</h4>
    <ol>
      <li>Social Login</li>
      <li>Delivery, Pickup, Dinein</li>
      <li>Various cuisines From around Kenya</li>
      <li>Multiple Payment Gateways</li>
      <li>Reviews and a lot more</li>
    </ol>
     <button>User App Download</button>
  </div>
  <div class="merchant-app"><h4>Merchant-App</h4>
    <ol>
      <li>Easy to manage food item</li>
      <li>Payment Gateway Selection</li>
      <li>Sales report / by item</li>
      <li>Push Notifications for new orders</li>
      <li>Complete Managment</li>
    </ol>
     <button>Merchant App Download</button>
  </div>
   <div class="driver-app"><h4>Driver-App</h4>
    <ol>
      <li>Google maps tracking</li>
      <li>Easy Registration</li>
      <li>charts and Reports</li>
      <li>Weekly payouts on mpesa and bank transfer</li>
      <li>In App customer chat</li>
    </ol>
     <button class="btn">Driver App Download</button>
    
  </div>
  </div>
</section>
</div>
<div class="play">
  <a href="https://imgur.com/dek7B5D"><img src="https://i.imgur.com/dek7B5D.png" alt="play store-appstore logo" height="30%" width="30%" /></a>
</div>
  
<footer class="foot" id="contact">
  <ul>
    <li><a href="https://www.google.com/" target="_blank">Privacy</a></li>
    <li><a href="https://www.google.com/" target="_blank">Terms</a></li>
    <li><a href="https://www.google.com/" target="_blank">Contact</a></li>
  </ul>
  <span>Copyright &copy; 2018 Coded by John Wanyutu for <a href="https://www.freecodecamp.org/" target="_blank">FreeCode Camp</a></span>
</footer>

style.css

body{
  font-family: 'Roboto Condensed', sans-serif;
  background-color:	#6495ED;
  margin:100px 250px 20px 250px;
  
}
.logo,#header{
  float:right;
    margin-right:20px;

}
nav li{
  float:right;
  list-style:none;
  display:block;
  margin:0px 20px 0px 0px;
  padding-top:20px;
}
nav a{
  color:black;
  text-decoration:none;
  text-transform:uppercase;
  font-weight:bold;  
   border-radius:5px;
}
nav a:hover{
  color:#ff1a8c;
  transition:200ms;
 
}
h1{
  color:#e60000;
  text-align:center;
  padding-top:10%;
  font-size:100px;
  text-transform:uppercase;
  text-decoration:none;
  animation: move 1s;
  -webkit-animation: move 1s;
}

@keyframes move {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
            
@-webkit-keyframes move {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

.list{
text-align:center;
  display:block;
  margin:10px 0 20px 0px;
}
h2{
  text-align:center;
  text-transform:uppercase;
}
.banner {
  display:block;
  margin:0 auto;
  padding:auto;
  width:100%;
}
.top {
  text-align:center;
  text-transform:capitalize;
  font-size:20px;
  font-weight:bold;
  
}
.intro p{
  margin:50px;
  line-height:30px;
  border:2px solid #ff1a8c;
  border-spacing:10px;
  box-sizing:border-box;
  padding:30px;
  margin:auto;
  font-size:1rem;
  background:#FFF0F5;

}
img.b2 {
  display:block;
  align-items:center;
    margin-left: auto;
    margin-right: auto;
  padding:3px;
    
}
#video{
  display: block;
margin: 0 auto;
  padding:50px 0px 20px 0px;
}
h3{
  text-align:center;
  padding-top:5px;
  text-transform:uppercase;
}
h4{
  text-transform:uppercase;
  background-color:	#E6E6FA;
  padding:5%  
}
.user-app,.merchant-app,.driver-app{
  border:solid 1px ;
  margin:10px;
  width:100%;
  padding:10px;
  text-align:center;
  background:#FFF0F5;
  
}
ol,li{
  text-align:left;
  font-weight:bold;
  line-height:40px;
}
button{
   width:100%;
  height:50px;
  margin-bottom:5px;
  background:  #ff1a8c;
  text-transform:uppercase;
  border:0;
  

}
button:hover,button:focus{
  background-color:#6666ff;
  color:white;
  font-weight:bold;
  transition: background-color 3ms ease-in;
}

#pricing{
  display: flex;
  grid-gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.foot li {
  text-decoration:none;
  display:block;
  margin-left:20px;
 float:right;
  list-style:none;
}
.mg{
 display: block;
   margin-left: auto;
   margin-right: auto;
}
.foot ul{
  text-decoration:none;
  padding:auto;
  
}
span,footer {
  text-align:center;
    padding:20px;
      margin:10px;
        font-color:black;
}
@media(max-width:600px){
 body {
    font-size:2rem;
  }
}
header{
  position:fixed;
  top:0;
   position: fixed;
 
  min-height: 75px;
  padding: 0px ;
  display: flex;
  width:100%;
  justify-content: space-around;
  align-items: right;
  background-color: #6495ED;
  @media (max-width: 400px) {
    flex-wrap: wrap;
  }
}
.play img {
  display:block;
    margin-left: auto;
    margin-right: auto;
   padding:30px 0px 10px 0px;
}
}