There are 2 issues that I can’t pass about the top navbar. up to a certain screen size the navbar items are not showing as a real menu. i have been stuck over a week on this project
-
Each
.nav-linkelement should have anhrefattribute. -
Failed:Each
.nav-linkelement should link to a corresponding element on the landing page (has anhrefwith a value of another element’s id. e.g.#footer).
its HTML code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.1.1/css/all.css" />
<title>Rare Books Selling - Proudly Old Fashioned</title>
<meta charset="utf-8">
<meta name="viewport" content="device=device-width, initial-scale=1.0">
</head>
<body>
<header id="header">
<img id="header-img" src="https://cdn.pixabay.com/photo/2016/03/31/18/50/book-1294676_960_720.png"/> <h1>Old Fashioned Rare Books®</h1>
<nav id="nav-bar">
<ul>
<li class="nav-link"><a href="#Features">Features</a></li>
<li class="nav-link"><a href="#How-It-Works">How It Works</a></li>
<li class="nav-link"><a href="#Location">Location</a></li>
</ul>
</nav>
</header>
<main>
<h2>Original, Rare, Classics and Elite Books Selling</h2>
<p id="Features"><i class="fa-solid fa-magnifying-glass fa-2x"></i> We come from a long tradition of discovery and selling of rare books of over a century: since 1901. We discover and carefully choose the finest books of premium quality and conditions that might not be known by all the public or first editions of classics such as labour of works written by Shakespeare raging from every type of writing; Therefore we hunt philosophical essays, plays, novels, novellas, critical writings, drafts of writings that differ from their published versions. </p>
<h2 style="text-align:center">Our Offers</h2>
<p style="text-align:center"><i>Carpe Diem</i> as these Offers are Limited-Time Only</p>
<div class="columns">
<ul class="price">
<li class="header">Basic</li>
<li class="grey">$ 299.99 </li>
<li>3 Rare Books from the XXI Century</li>
<li>Included Necessary Tools for Maintaining </li>
<li>Collection in store in 15 business days</li>
<li>Option to purchase $39 Gift Card</li>
<li class="grey"><a href="#" class="table-button">Purchase Now</a></li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header" style="background-color:#576F72">Pro</li>
<li class="grey">$ 599.99</li>
<li>6 Rare Books raging from the XVIII Century </li>
<li>Included Necessary Tools for Maintaining</li>
<li>Collection in store in 7 business days</li>
<li>Option to obtain membership card</li>
<li class="grey"><a href="#" class="table-button">Purchase Now</a></li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header">Premium</li>
<li class="grey">$ 999.99</li>
<li>9 Rare Books raging from the XIII Century</li>
<li>Included Necessary Tools for Maintaining</li>
<li>Collection in store in 3 business days</li>
<li>Option to obtain membership card and gift cards for $99, $199 or $299</li>
<li class="grey"><a href="#" class="table-button">Purchase Now</a></li>
</ul>
</div>
<p id="How-It-Works"><i class="fa-regular fa-credit-card fa-2x"></i> Visit our store at 789 Gower Street, Caerdydd - Cymru and look through all the gems we have. Only payments with credit or debit cards are accepted as we only deal with high-quality items. As our books are very delicate and old, we do not ship them. Our company will provide you with all the necessary tools and advice to keep perfect care of your books.</p>
<iframe width="560" height="315" id="video" style="display:block; margin:0 auto;" src="https://www.youtube.com/embed/BG3eAR1ngeg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p id="Location"> <i class="fa-solid fa-store fa-2x"></i> We are open from Monday to Friday (8am - 5pm) excluding holidays. We are situated next to the Parliament of Cymru facing the ocean. Our phone number is 03015942222</p>
<p>In order to receive notifications about new arrivals, fill in the box below:</p>
<form action="https://www.freecodecamp.com/email-submit" id="form">
<input id="email" type="email" name="email" placeholder="write your full email address">
<input id="submit" type="submit" value="Begin Now">
</form>
</main>
<footer>
<p>Our store is in 789 Gower Street, Caerdydd - Cymru </p>
<p>Copyright 2022 Old Fashioned Rare Books®</p>
</footer>
</body>
</html>
its CSS code
#header-img {
width: 80px;
height: 60px;
margin-right: 5px;
}
body {
background-color: #F0EBE3;
margin: 0;
font-family: open sans;
}
h1 {
font-family: monospace;
font-style: italic;
color: #576F72;
font-size: 25px;
display: inline-block;
margin: 10px;
padding-bottom: 10px;
text-align: center;
}
a {
color: #7D9D9C;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #7a4988;
}
h2, input, a, p {
font-family: open sans;
}
footer p {
font-size: 14px;
font-style: italic;
display: flex;
justify-content: center;
width: 100%;
}
#submit {
width: 100px;
height: 30px;
background-color: #7D9D9C;
color: white;
border-radius: 10px;
cursor: pointer;
}
i {
font-size: 18px;
color: #7D9D9C;
display: block;
}
#email {
width: 180px;
height: 30px;
}
header {
display: flex;
width: 100%;
height: 100px;
background-color: #E4DCCF;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
}
nav ul {
display: flex;
justify-content: space-evenly;
color: #576F72;
flex-wrap: wrap;
align-items: center;
padding-inline-start: 0;
margin-block: 0;
height: 100%;
margin-right: 10px;
padding: 15px;
overflow: hidden;
list-style-type: none;
}
nav ul li {
padding-right: 10px;
}
p {
color: #05445e;
}
h2 {
color: #7a4988;
padding-top: 60px;
margin-top: 10px;
font-size: 15px;
}
main {
padding-top: 40px;
margin: 0 auto 10px auto;
max-width: 600px;
}
/*styling for pricing tables*/
* {
box-sizing: border-box;
}
.columns {
float: left;
width: 33.3%;
padding: 8px;
}
.price {
list-style-type: none;
border: 1px solid #7D9D9C;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.price:hover {
box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}
.price .header {
background-color: #7D9D9C;
color: white;
font-size: 25px;
}
.price li {
border-bottom: 1px solid #F0EBE3;
padding: 20px;
text-align: center;
}
.price .grey {
background-color: #F0EBE3;
font-size: 20px;
}
.table-button {
background-color: #576F72;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 18px;
}
@media only screen and (max-width: 600px) {
.columns {
width: 100%;
}
}
/*responsive navbar*/
body {
margin: 0;
}
#nav-bar {
overflow: hidden;
background-color: #E4DCCF;
}
#nav-bar a {
float: left;
display: block;
color: #7D9D9C;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
#nav-bar a:hover {
color: #7a4988;
}
@media screen and (max-width: 600px) {
#nav-bar a:not(:first-child) {display: none;}
#nav-bar a {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
#nav-bar .responsive {position: relative;}
#nav-bar .responsive {
position: absolute;
right: 0;
top: 0;
}
#nav-bar .responsive a {
float: none;
display: block;
text-align: right;
}
}