Tell us what’s happening:
please am some stubborn underline text that don’t want disappear. I has tried everything I could but isn’t work out, below are my code and also a link: https://codepen.io/cassyblaise/pen/aBjoZN
Your code so far
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Product landing page</title>
<meta charset="UTF-8"/>
</head>
<body>
<div id="wrapper">
<header id="header">
<div class="logo">
<img id=header-img src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="original trombones logo"/>
</div>
<nav class="nav-bar">
<ul id="nav-li">
<li><a class="nav-link" href="#features">Features</a></li>
<li><a class="nav-link" href="#how-it-work">How it work</a></li>
<li><a class="nav-link" href="#pricing">Pricing</a></li>
</ul>
</nav>
</header>
<section id="hero">
<h2 class="top">Handcrafted, home-made masterpieces</h2>
<form id="form">
<input name="email" id="email" type="email" placeholder="enter your email address" required/>
<input id="submit" type="submit" value="Get started" class="btn">
</form>
</h2>
</section>
<div class="container">
<section class="features">
<div class="grid">
<div class="icon">
<i class="fa fa-3x fa-fire"></i>
</div>
<div class="dist">
<h2> Premium Materials</h2>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</div>
<div class="grid">
<div class="icon">
<i class="fa fa-3x fa-truck"></i>
</div>
<div class="dist">
<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" arid-hidden="true"></i>
</div>
<div class="dist">
<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-work">
<iframe id="video" height="312" src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</section>
<section id="pricing">
<div id="tenor">
<div class="level">Tenor Trombones</div>
<h2>$600</h2>
<ol>
<li>Great playlist</li>
<li>Play Tenor</li>
<li>Back Play</li>
<li>Front Play</li>
</ol>
<button class="btn">Select</button>
</div>
<div id="bass">
<div class="level">Bass Trombones</div>
<h2>$1000</h2>
<ol>
<li>Bass Playlist</li>
<li>Play Bass</li>
<li>Bass Play</li>
<li>Front Bass</li>
</ol>
<button class="btn">Select</button>
</div>
<div id="valve">
<div class="level">Valve Trombones</div>
<h2>$1500</h2>
<ol>
<li>Valve Playlist</li>
<li>Great Valve</li>
<li>Play Valve</li>
<li>Back Valve</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>© 2018, Original Trombones</span>
<!--
Am stil working on this.
<div class="social_center">
<a href="https://www.facebook.com/Obokcasmir/" class="fa fa-facebook fa-2x social"></a>
<a href="https://twitter.com/cassyjnr/" class="fa fa-twitter fa-2x social"></a>
</div>
-->
</footer>
</div>
</div>
</body>
</html>
```css
body{
font: 15px/1.5 Arial, Halvetical, san-serif;
background-color: #eee;
margin: ;
padding: ;
}
/*Global*/
#wrapper{
position: relative;
}
/*header*/
#header{
top: 0;
background-color: #354248;
color: #ffffff;
padding-top: 0px 20px;
min-height: 80px;
border-bottom: #e8491d 3px solid;
diplay: flex;
justify-content: space-around;
align-items: center;
}
header a {
color: #ffffff;
text-decoration: none;
text-tranform: uppercase;
font-size: 16px;
}
header li{
float:left;
display: inline;
padding: 0 20px 0 20px;
}
nav{
float: right;
margin-top:10px;
}
img{
height: 100%;
width: 100%;
max-width: 300px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin-left: 20px;
}
#hero{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
margin-top: 50px;
height: 200px;
}
.top{
margin-bottom:20px;
word-wrap: break-word;
}
input[type="email"]{
max-width: 250px;
width: 100%;
padding: 5px;
}
input[type="submit"]{
max-width: 150px;
width: 100%;
padding: 20px;
margin: 15px 0;
border: 0;
background-color: #f1c40f;
}
#submit:hover{
background-color: #e8491d;
transition: background-color 1s;
}
/*feastures*/
.features{
margin-top: 40px;
}
.icon{
display: flex;
align-items: center;
justify-content: center;
height: 125px;
width: 20vw;
color: #e8491d;
float: left;
}
.dist{
display: inline;
flex-direction: column;
justify-content: center;
height: 120px;
width: 80vw;
padding: 5px;
}
#how-it-work{
margin-top: 50px;
display: flex;
justify-content: center;
}
iframe{
max-width: 500px;
width:100%;
}
/*Pricing*/
#pricing {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(3, 1fr);
}
#tenor, #bass, #valve{
display:flex;
flex-direction: column;
align-items: center;
text-align: center;
width calc:(100% / 3);
margin: 10px;
border: 1px solid #000;
border-radius: 3px;
}
.level{
background-color: #ddd;
color: black;
width: 100%;
padding: 15px 0;
text-transform: uppercase;
font-weight: 500;
}
h2{
margin-top: 15px;
}
a {
list-style: none;
text-decoration: none;
cursor: pointer;
color: black;
}
ol, li{
margin-top: 15px 0;
padding: 5px 0;
list-style: none;
}
button{
margin: 15px 0;
border: 0;
background-color: #f1c40f;
font-weight: 400;
}
button:hover{
background-color: #e8491d;
transform: backgroud-color 1s;
}
/*footer*/
footer{
margin-top: 10px;
background-color:#ddd;
padding: 20px;
}
footer a{
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
list-style:none;
}
footer ul{
margin: 0;
padding: 0;
}
footer li{
float: left;
display: inline;
padding: 0 20px 0 20px;
margin: 10px;
}
span{
margin-top: 5px;
display: flex;
justify-content: flex-end;
font-size: 0.9em;
color: #444;
}
/* Am still working on this
.social_center {
padding: 20px 0;
background-color: #dedede;
}
*/
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36.
Link to the challenge:
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript