Product Landing Page

In this example below you will see how to do a Product Landing Page with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by vanderdrilu, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright vanderdrilu ©

Technologies

  • HTML
  • CSS
  • JavaScript
    <script src="https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js"></script>

<!-- 

Hello Camper!

For now, the test suite only works in Chrome! Please read the README below in the JS Editor before beginning. Feel free to delete this message once you have read it. Good luck and Happy Coding! 

- The freeCodeCamp Team 

-->
<header id="header">
  <nav id="nav-bar"><img id="header-img" src="https://sites.google.com/site/ryderhelp/_/rsrc/1432230143223/comma/commaen.jpg">
     <a class="nav-link" href="#About">About</a> |
    <a class="nav-link" href="#History">History</a> |
    <a class="nav-link" href="#EULA">EULA</a> |
    <a class="nav-link" href="#Download">Download</a></nav>
</header>

<body>
<br>
  <form id="form" action="https://www.freecodecamp.org/email-submit">
    <input name="email" id="email" placeholder="enter your email" type="email" required="">
    <input type="submit" id="submit" >
  </form>
  <img id="mainimage" src="https://sites.google.com/site/ryderhelp/_/rsrc/1432230143223/comma/commaen.jpg">
  <br>
  <div id="About">
    Program adds the missing commas based on grammar rules before:
    <ul>

      <li> correlative conjunctions</li>
      <li> coordinating conjunctions</li>
      <li> subordinating conjunctions</li>
      <li> before interjection</li>
      <li> before quotes up</li>
      <li> between the same parts of speech: nouns, adjectives, numerals</li>
      <li> before question tags</li>
    </ul>
    <ul>

      Program corrects:

      <li>missing quotation marks</li>
      <li>repairs mismatch with quotation, comma, double dot</li>
      <li> subordinating conjunctions that do not qualify for containing comma</li>
      <li> English, Slovak and Czech language</li>
    </ul>
    <ul>
      Program identifies word classes included:

      <li>gerund and noun as adjective.</li>
      <li>dates</li>
    </ul>
  </div>
  <div id="Download">
    <div>
    <a type="button" href="https://drive.google.com/uc?export=download&amp;id=0BzcdCoPYdjJWTElmcWE0eFVqNjg">download 32 bit</a>
 
 <a type="button" href="https://drive.google.com/uc?export=download&amp;confirm=no_antivirus&amp;id=0BzcdCoPYdjJWeDQxejMybkxyTmc">download 64 bit</a> <br>
    
 
    <a  href="https://virustotal.com/sk/file/94d6978a189411a26819fbf67d5027ec780d095e47134a14fdc7d8bb821bb365/analysis/" target="_blank"><span style="font-size:10px">scan report from virus total 20.06.2016</span> </a>
      </div>
  </div>
  <div>
  <iframe id="video" src="https://www.youtube.com/embed/3gPMVU7yi1k"></iframe></div>
 <div id="History">
  <iframe title="RSS Feed"  id="648953333" name="648953333"  class="igm" src="//ag0p85pls00984bsg1fkeb3bkqkq4832-a-sites-opensocial.googleusercontent.com/gadgets/ifr?url=http://www.gstatic.com/sites-gadgets/rss-sites/rss_sites.xml&amp;container=enterprise&amp;view=home&amp;lang=sk&amp;country=ALL&amp;sanitize=0&amp;v=daa11a461d938ff4&amp;libs=core:setprefs:settitle&amp;mid=230&amp;parent=https://sites.google.com/site/ryderhelp/comma/history#up_snippet=1&amp;up_bg_color=%23fff&amp;up_txt_color=%23000&amp;up_rss_feed_url=https://sites.google.com/site/ryderhelp/comma/history/commarss.rss&amp;up_items_to_show=4&amp;up_title_color=%2300c&amp;up_display=1&amp;up_font_size=12&amp;up_font_family=Sans+Serif&amp;st=e%3DAIHE3cAL%252BxyjhpYsrn2mXFUEsZ8EYvkPhWC81Jtsk0EC8Axe674T9G4czfjSqk%252FVJ9TjkcfZ6bBWmiRgsq3kNI0uwdmR%252Fgrlro9JmyK%252Bu2ednaBuDow9IQYwDoc%252F%252BMzSGqgHRJfYzhlg%26c%3Denterprise&amp;rpctoken=-128394">History</iframe></div>
  <br>
  <div class="flex-container">
  <div>Option 1.<br> Trial version
restrictions:
    <ul style="list-style-type:disc">
<li>30 days</li>
      <li> 30 launch</li>
      <li>1000 phrases</li>
          </ul>
    <br>
    <a type="button" href="#Download" target="_blank">choose option 1</a>
    
    </div>
    <div>Option 2.<br> Online english only<br><div style="width:300px ; height:300px"><iframe id="frameweb"src="http://commacheck.azurewebsites.net" frameborder="0"></iframe></div><br><a type="button" href="http://commacheck.azurewebsites.net"target="_blank">choose option 2 </a></div>
    <div >Option 3.<br>
      Buy <H2>5 €</H2>
      One PC
      <br>
      <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="JVDCJXKFFFDRS">
<input type="hidden" name="on0" value="HardiskID" ><input type="text" name="os0" maxlength="200" placeholder="HardiskID">

<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/sk_SK/i/scr/pixel.gif" width="1" height="1">
</form>

      <a type="button" href="https://sites.google.com/site/ryderhelp/comma/buy" target="_blank">choose option 3</a></div>
    
    </div>
  <div id="EULA"
      >
    
    License
    <ol type="list-style-type:decimal">
      <li>
 Under this agreement Ing. Ľubomír Drinka (vendor) grants to user(the License) a non-exclusive and non-transferable license to use program čiarka or comma (software)</li>
<li>Software includes the executable computer program and electronic and online documentation and any files, exceptions dictionary under GNU/PL, that may accompany the product.</li>
<li> Copyright, intellectual property rights  and distribution rights of software remain to vendor</li>
<li>The software license is fixed to one hard-disk ID.</li>
<li>The software can not be modified, reverse engineered, or decompiled with any current or future technological availability</li>
 <li> Break any terms will be considered as material breach of this agreement</li>
<li>The original purchase price paid by License will constitute, the entire license fee and is the full considerations of this agreement.</li>
      </ol>
    </div>
</body>

/*Downloaded from https://www.codeseek.co/vanderdrilu/product-landing-page-rKyqxv */
    h2{color:darkgreen}
#mainimage{
  float:right;
  width:300px;
  height:300px;
  overflow:hidden;
}
#frameweb{ 
 margin:20px 40px;
  width:160%; height:400%;
 scrolling:no;
    transform:scale(0.4,0.17);
   -moz-transform-origin: top left; -webkit-transform-origin: top left; -o-transform-origin: top left;
  -ms-transform-origin: top left; transform-origin: top left;
  box-shadow: none;
}
#frameweb :hover{ t}
ul, ol{
  text-align:left
}
.flex-container {
   align-content: center;
  display: inline-flex;;
  flex-wrap: nowrap;
  background-color: DodgerBlue;
    flex-direction: row;
    justify-content: flex-start;
  margin: 0 auto;
 
}
.flex-container > div {
  color:  white;
  width: 250px;
  height:330px;
  margin: 10px;
  text-align: center;
  line-height: 30x;
  font-size: 15px;
  border: 1px solid whitesmoke;
  padding:5px;
  position:relative;
  font-size:20px;
}
.flex-container> div >a[type=button]{
   position: absolute;
  left:20px;
  bottom:10px;
  margin : 10px 15px; 
  color:white;
}
a[type=button]{
 
  background-color:inherit;
  border:1px solid whitesmoke;
  
  width: 200px;
  font-size:20px;
 
   text-decoration-line:none;
  padding:3px;
}
nav >a{color:white;
  text-decoration-line:none;
  padding:50px;
}
a:visited {
    color: none;
}
a{
  text-shadow: 1px 2px 3px black;
    margin : 45px 15px;
    color:floralwhite
}

iframe{
   border-radius: 25px;
  box-shadow:-2px 4px 6px 10px lightblue;
  width:560px;
  height:315px ;
    allow:autoplay; 
  encrypted-media;
  allowfullscreen;
 margin:30px auto;
  
}
form{text-align:center;margin-top:40px;
}
input[type=submit]{box-shadow:1px 2px black ;border:1px solid black; background-color: lightskyblue;border-radius:5px,padding:2px;}
nav> img{width:30px;heigth:30px; float:left}
nav { 
    position: fixed;
    top: 0px;
    width: 100%;
    display: block;
  background-color:black;
 overflow: hidden;
padding: 1% 1% 1% 1%;
  text-align:center;
}

  @media (max-width: 350px) {
    iframe {
      width:10%;
      height:10%;
          
    }
  }

body{ 
padding:0px 50px 10px 50px;
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #3366FF 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #3366FF 100%);

/* Opera */ 
background-image: -o-linear-gradient(top, #FFFFFF 0%, #3366FF 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(100, #3366FF));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #3366FF 100%);

/* W3C Markup */ 
background-image: linear-gradient(to bottom, #FFFFFF 0%, #3366FF 100%);}


/*Downloaded from https://www.codeseek.co/vanderdrilu/product-landing-page-rKyqxv */
    // !! 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. 


Comments