product landing page

index.html

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<div class="container-fluid">
  
  <!––my header ––>
  <header id="header" class="green-gradient-down">
    
    <!–– my navigation bar ––>
    <nav id="nav-bar">
      <ul>
        <li ><a class="nav-link" href="#header-text">Home</a></li>
        <li ><a class="nav-link" href="#about">About</a></li>
        <li ><a class="nav-link" href="#music">Music</a></li>
        <li ><a class="nav-link" href="#contact">Contact</a></li>
      </ul>
    </nav>
    
    <h1 id="header-text" class="text-center h1-margin ">
      Ispum Guitars
    </h1>
    
    <img id="header-img" height="100" width="200" class="d-block mx-auto" src="https://cdn-www.enfocus.com/sites/combell-www.enfocus.com/files/media/blog/2017-08-09-Lorem-Ipsum/lorem-ipsum.jpg" alt="logo"></img> 
  
    <p class="text-center reg-p-class">
      "lignum cithara" - our motto.
    </p> 
  </header>
  
  <main>
    <h2 class="text-center guitars-h2">
      These are some of the guitars we make.
    </h2> 

    <!–– some of my projects and pictures––>

    <div class="pic">
        <a accesskey="j" href="#" target="_blank">
          <img class="project-pictures" src="https://media.guitarcenter.com/is/image/MMGS7/RA-090-Dreadnought-Acoustic-Guitar-Natural/423794000010000-00-220x220.jpg" alt="wooden guitar 0"> 
        </a>
     </div>
    
    <div class="pic">
        <a accesskey="k" href="#" target="_blank">
          <img class="project-pictures" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQILLCi506oUf6o-k07INdE2z4w5GNFdCAs6ybeod0pxs5fUKzBQA" alt="wooden guitar 1"> 
        </a>
     </div>
    
    <div class="pic">
        <a accesskey="l" href="#" target="_blank">
          <img class="project-pictures" src="https://media.musiciansfriend.com/is/image/MMGS7/224ce-K-Deluxe-Grand-Auditorium-Acoustic-Electric-Guitar-Shaded-Edge-Burst/J45043000001000-00-500x500.jpg" alt="wooden guitar 2"> 
        </a>
     </div>
      
    <!–– the about me section ––>
    <article class=" green-gradient-down padding-cls">
      <h2 id="about" class="text-center nav-bar-bump">
        About Ispum Guitars.
      </h2>

      <div>
        <p class="about-p">
          Here at Ispum Guitars we believe in only the <b>best</b> guitars possible. We make our guitars from the finest Lorum Ispum wood there is. We also higher the brightest "freecode campers" there are to build them. We believe in the quality of all our products. We also encourage you to join our family of players and coders and buy one today! 
        </p>
      </div>
    </article>

    <!–– embeded music player from soundcloud ––>

    <div>
      <h2 class="sep" id="music">This is some music played on Ispum Guitars.</h2>
      
           <!-- anything after the ? can be changed--> 

          <iframe width="500" height="166" scrolling="no" frameborder="yes" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/412809531&color=%100#50c878&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=true&show_teaser=true"></iframe> 

        <iframe width="500" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/412809558&color=%100#50c878&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe> 

         <iframe width="500" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/412809516&color=%100#50c878&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe> 
        
    </div>
    
    <iframe id="video" width="500" height="166" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

    <div class="green-gradient-down">
      <h2 class="sep" id="contact">Subscribe to our news letter!</h2>

      <p>Want to get updates and news about Ispum Guitars? Just give us your email so we can spam you with worthless emails and deals!</p>

      <form id="form" action="https://www.freecodecamp.com/email-submit" target="_self">
          <div class="row">
            <div class="contact-margin col-xs-4">
              <input type="text" 
              placeholder="name" id="name" name="email" required>
              <input type="email" 
              placeholder="email" id="email" name="email" required>
            </div> 
          </div>
          <div class="row">
            <div class="contact-margin col-xs-4">      
              <input class="btn btn-primary" type="submit" id="submit" value="Submit" name="email"></input>
            </div>
          </div>    
      </form>  
    </div>  
  </main>

  <div id="query-prank">
    
  </div>
  
  <footer>
    <div class="silver-background">
        <p class="sep text-center">Made by Barron V Brock</p>
    </div>
  </footer>
</div>

product-landing-page.markdown

product landing page

A Pen by Barron M Brock on CodePen.

License.

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.css

body{
  background-color: #D3D3D3;
}

@media (min-width: 800px){
     #query-prank {
       height:1px;
       display:flex;
      }
  }

/* 
  #filthy bootstrap user who looks down on querys
*/

/*
"https://cdn-www.enfocus.com/sites/combell-www.enfocus.com/files/media/blog/2017-08-09-Lorem-Ipsum/lorem-ipsum.jpg"
*/

.project-pictures{
    border-color: gray;
    border-width: 2.5px;
    border-style: solid;
    border-radius: 25%;
    width: 400px;
    height: 350px;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px; 
}

.pic{
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}

.h1-margin{
   margin-top: 60px;
   margin-bottom: 20px;
}

.reg-p-cls{
  margin-left: 10px;
  font-size: 20px;  
}

.guitars-h2{
  margin-top: 60px;
  margin-bottom: 10px;
}

.grey-circle-border{
   border: 3px solid gray;
   padding: 25px;
   border-radius: 50%;
}

.about-p{
   margin-left:60px;
   margin-right:60px;
   padding: 20px;
}

.padding-cls{
  margin-top:60px;
  padding: 25px;
}

.sep{
  margin-top:60px;
  margin-bottom: 10px;
}

.silver-background{
  background-color: grey;
}

.green-gradient-down{
  background: linear-gradient(180deg,#D3D3D3,#50c878,#D3D3D3);
}

.contact-margin{
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 16px;
}

/*negitive padding is not a thing but margin is, Also
this allows the nav bar to jump just above the object but
there is some styiling things I need to sort out first*/
.nav-bar-bump{
  padding:80px;
  margin-top:-80px;
  margin-bottom:-80px;
}

/* nav is a new thing in html5 for help with nav bars and lets me style only 
this ul/li elemeant */

nav{
  position: fixed;
  top: 0;
  /* put these items in nav instead of nav ul to prevent problems */
  width: 100%;
  left: 0;
}

nav ul{
    list-style-type: none;
    /*list style type dumps the dots */ 
    margin: 0;
    padding: 0;
    /*The overflow property specifies what should happen if content overflows an element's box. */
    overflow: hidden;
    background-color: #C0C0C0;
    border: 2px solid #000;
}

nav li{
    border-right: 2px solid #000000;
    float: left;
}

nav li a {
    display: block;
    color: black;
    text-align: center;
    /*The CSS padding property is used to generate space around an element's content, inside of any defined borders. */
    padding: 14px 16px;
    text-decoration: none;
}

nav li a:hover {
    background-color: #A9A9A9;
    color: white;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />