Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:
…my awesome font logo is not shown on the running command page. Can anyone tell me the solving trick for this issue?
Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36 Edg/110.0.1587.63

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

Post entire html and css code here.

1 Like
3

my html code:

<!DOCTYPE html>
<html>
  <head>
    <link rel='stylesheet' href='styles.css' />
    <link 
    rel='stylesheet'
    src= 'https://use.fontawesome.com/releases/v5.8.1/css/all.css'
    integrity= 'sha384-50oBUHEmvpQ+1Furfhe8BFbkEhXn1xcYPr8jYAACNpfV7p+nqUivzIebhndOJK28anvf'
    crossorigin= 'anonymous'
    />
  </head>
  <body>
    <div id="page-wrapper">
      <header id = 'header'>
        <div class= 'logo'>
          <img
            id='header-img'
            src='https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png'
            alt='original thrombones logo'
          />   
        </div>

        <nav id= 'nav-bar'>
          <ul>
            <li><a class='nav-link' href='#features'>Features</a></li>
            <li><a class='nav-link' href='#how-it-works'>How It Works</a></li>
            <li><a class='nav-link' href='#pricing'>Pricing</a></li>
          </ul>
        </nav>
      </header>
        <div class='container'></div>

        <section id='hero'>
          <h2>Handcrafted, home-made masterpices</h2>
          <form id='form' action='https://www.freecodecamp.com/email-submit'>
            <input
              name='email'
              type='email'
              id='email'
              placeholder='Enter your email address'
              required
            />

            <input
            id='submit'
            type='submit'
            value='GET STARTED'
            class='btn'
            />
          </form>
        </section>
        <div class="container">
          <section id="features">
            <div class="grid">
              <div class="icon"><i class="fa fa-3x fa-fire"></i></div>
              <div class="desc">
                <h2>Premiam Materials</h2>
                <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
              </div>
    </div>

      <div class="grid">
        <div class="icon"><i class="fa fa-3x fa-truck"></i></div>
        <div class="desc">
          <h2>Fast Shipping</h2>
          <p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
        </div>
      </div>

      <div class="grid">
        <div class="icon"><i class="fa fa-3x fa-battery-full"></i></div>
        <div class="desc">
          <h2>Quality Assurance</h2>
          <p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
        </div>
      </div>
      </section>

      <section id='how-it-works'>
        <iframe 
        id="video"
        height= '315'
        src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&amp;controls=0&amp;showinfo=0"
        frameborder= '0'
        allowfullscreen
        ></iframe>
      </section>
      <section id="pricing">
        <div class="product" id="tenor">
          <div class="level">Tenor Trombone</div>
          <h2>$600</h2>
          <ol>
            <li>Lorem ipsum.</li>
            <li>Lorem ipsum.</li>
            <li>Lorem ipsum dolor.</li>
            <li>Lorem ipsum.</li>
          </ol>
          <button class="btn">SELECT</button>
        </div>
        <div class="product" id="bass">
          <div class="level">Bass Trombone</div>
          <h2>$900</h2>
          <ol>
            <li>Lorem ipsum.</li>
            <li>Lorem ipsum.</li>
            <li>Lorem ipsum dolor.</li>
            <li>Lorem ipsum.</li>
          </ol>
          <button class="btn">SELECT</button>
        </div>
        <div class="product" id="valve">
          <div class="level">VALVE TROMBONE</div>
          <h2>$1200</h2>
          <ol>
            <li>Plays similiar to a trumpet.</li>
            <li>Great for Jazz Bands.</li>
            <li>Lorem ipsum dolor.</li>
            <li>Lorem ipsum.</li>
          </ol>
          <button class="btn">SELECT</button>
        </div>
      </section>
      <footer>
        <ul>
          <li><a href='#'>Privacy</a></li>
          <li><a href='#'>Terms</a></li>
          <li><a href='#'>Contact</a></li>
        </ul>
        <span>Copyright 2016, Original Trombones</span>
      </footer>
      </div>
    </div>
  </body>
</html>

and this is CSS:

//**global element styling**//
@import 'https://fonts.googleapis.com/css?family=Lato:400,700';

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body
{
  background-color: #eee;
  font-family: 'Lato', sans-serif
}

#page-wrapper
{
  position: relative;
}

li{
  list-style: none;
}

a
{
  color: #000;
  text-decoration: none;
}

//**global classes styling **//

.container
{
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}

.btn
{
  padding: 0 20px;
  height: 40px;
  font-size: 1em;
  font-weight: 900;
  text-transform: uppercase;
  border: 3px black solid;
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
}

.grid
{
  display: flex;
}

header
{
  position: fixed;
  top: 0;
  min-height: 75px;
  padding: 0px 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #eee
}

@media(max-width: 600px)
header
{
{
  flex-wrap: wrap
}
}

.logo
{
  width: 60vw;
}

@media(max-width: 650px)
{
  .logo
  {
    margin-top: 15px;
    width: 100%;
    position: relative;
  }
}

.logo > img
{
  width: 100%;
  height: 100%;
  max-width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-left: 20px;
}

@media(max-width: 650px)
{
  .logo > img
  {
    margin: 0 auto;
  }
}

nav
{
  font-weight: 400;
}

@media(max-width: 650px)
{
  nav
  {
    margin-top: 10px;
    width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 50px;
  }
nav li
  {
    padding-bottom: 5px;
  }
}

nav > ul
{
  width: 35vw;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

@media(max-width: 650px)
{
  nav>ul
  {
    flex-direction: column;
  }
}

#hero
{
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 text-align: center;
 height: 200px;
 margin-top: 50px;
}

#hero > h2
{
  margin-bottom: 20px;
  word-wrap: break-word
}

#hero input[type='email']
{
  max-width: 275px;
  width: 100%;
  padding: 5px;
}

#hero input[type='submit']
{
  max-width: 150px;
  width: 100%;
  height: 30px;
  margin: 15px 0;
  border: 0;
  background-color: #f1c40f;
}

#hero input[type='submit']:hover
{
  background-color: orange;
  transition: background-color 1s;
}

@media(max-width: 650px)
{
  #hero
  {
    margin-top: 120px
  }
}

#features
{
  margin-top: 30px
}

#features .icon
{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 125px;
  width: 20vw;
  color: darkorange;
}

@media(max-width: 550px)
{
  #features .icon
  {
    display: none;
  }
}

#features .desc
{
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 125px;
  width: 80vw;
  padding: 5px;
}

@media(max-width: 550px)
{
  #features.desc
  {
    width: 100%;
    text-align: center;
    padding: 0;
    height: 150px;
  }
}

@media(max-width: 650px)
{
  #features
  {
    margin-top: 0;
  }
}

#how-it-works
{
  margin-top: 50px;
  display: flex;
  justify-content: center;
}

#how-it-works > iframe
{
  max-width: 560px;
  width: 100%;
}

#pricing
{
  margin-top: 60px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.product
{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: calc(100% / 3);
  margin: 10px;
  border: 1px solid #000;
  border-radius: 3px;
}

.product > .level
{
  background-color: #ddd;
  color: black;
  padding: 15px 0;
  width: 100%;
  text-transform:uppercase;
  font-weight: 700;
}

.product > h2
{
  margin-top: 15px;
}

.product > ol
{
  margin: 15px 0; 
}

.product > ol > li
{
  padding: 5px 0;
}

.product > button
{
  border: 0;
  margin: 15px 0; 
  background-color: #f1c40f
}

.product > button:hover
{
  background-color: orange;
  transition: background-color 1s;
}

@media (max-width: 800px)
{
  #pricing
  {
    flex-direction: column;
  }
  .product
  {
    max-width: 300px;
    width :100%;
    margin: 0 auto;
    margin-bottom: 10px;
  }
}

footer
{
  margin-top: 30px;
  background-color: #ddd;
  padding: 20px;
}

footer > ul
{
  display: flex;
  justify-content: flex-end;
}

footer > ul > li
{
  padding: 0 10px;
}

footer > span
{
  margin-top: 5px;
  display: flex;
  justify-content: flex-end;
  font-size: 0.9em;
  color: #444
}
4

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like
5

thanks for your suggestions…

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.