Hello All!!
I’m still a novice and having trouble passing my tests for the code, not sure what is going on, but I’m sure my position is all screwed, any hits and explanations would be greatly appreciated.
The errors:
- Each
.nav-linkelement should have anhrefattribute. - 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). - Your
#nav-barshould always be at the top of the viewport.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Better Yourself!!!!</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header id="header">
<nav id="nav-bar">
<div class="logo">
<img src="
id="header-img"/>
<span class="the-product">Better yourself</span>
</div>
<ul class="nav-link">
<li><a href="#features" class="nav-link">Features</a></li>
<li><a href="#audio" class="nav-link">Books about time optimazation</a></li>
<li><a href="#for_sale" class="nav-link">Books on Amazon</a></li>
</ul>
</nav>
</header>
<!--place the email submit on the footer for feedback-->
<section id="features">
<div class="feature">
<i class="ri-computer-fill ri-4x icon" ></i>
<div>
<h2 class="computer">24/7 Customer support</h2>
<p class="paragraph-computer"> At Better Yourself, our commitment to providing 24/7 customer support underscores our dedication<br>to your success and satisfaction. Our around-the-clock support team is always ready to assist you,<br> ensuring that you have uninterrupted access to expert assistance whenever you need it.</p>
</div>
<div class="feature">
<i class="ri-book-fill ri-4x icon" ></i>
<div>
<h2>Books</h2>
<p >
<p> At Better help, we take pride in offering a thoughtfully curated collection of books designed<br> to enhance mental health and optimize your time. Our extensive range covers a spectrum of topics, providing invaluable<br> insights and practical strategies to empower you on your journey to a balanced and fulfilling life.</p>
</div>
</div>
<div class="feature">
<i class="ri-truck-fill ri-4x icon"></i>
<div>
<h2> 2 Day shipping
</h2>
<p>At Better help, we understand the importance of receiving your orders promptly,<br. which is why we are thrilled to offer our clients the advantage of 2-day shipping. This commitment to swift delivery is designed to enhance your overall shopping experience and provide unparalleled convenience.</p>
</div>
</div>
<section id="audio">
<iframe id="video" width="400" height="200" src="https://www.youtube.com/embed/A0CBqHjaY3A?si=MM3U8Nltn2ZWRCzM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>
</iframe>
</section>
<section id="email_section">
<h2 class="questions">Contact Us</h2>
<form id="form" action="//">
<input id="email" type="email" placeholder="Enter your email adress" name="email" required>
<input id="submit" type="submit"></input>
</form>
</section>
</div>
</section>
<section id="for_sale">
<h2 class="Sale">For Sale</h2>
<div class="product-image product1">
<div class="inner-card">
<div class="author">By James clear</div>
<h1 class="header">Atomic Habits</h1>
<p class="content">
Atomic Habits by James Clear is a comprehensive, practical guide on how to change your habits<br> and get 1% better every day. Using a framework called the Four Laws of Behavior Change, Atomic Habits teaches readers a simple set of rules for creating good habits and breaking bad ones. Read the full summary to glean 3 key lessons from Atomic Habits, learn how to build a habit in 4 simple steps, and get a handy reference guide for the strategies recommended throughout the book.
</p>
<div class="flex">
<p class="main-price"></p>
<p class="old-price"></p>
</div>
<button class="add">Add to cart</button>
</div>
</div>
</div>
<div class="card_1"></div>
<div class="card"></div>
</div>
</section>
</div>
</body>
</html>
Css
:root{
--white:white;
--text: #6C7289;
--pale: tan;
}
*{
margin: 0;
}
body{
background-color: var(--pale);
margin-top: 20px;
height: 80%;
position: relative;
width:100%;
}
#header-img{
width: 60px;
object-fit: contain;
}
#nav-bar{
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
position: absolute;
width: 100%;
top: 0;
background-color: var(--white);
margin-top: -20px;
padding-top: 40px;
cursor: pointer;
}
.nav-link{
display: flex;
list-style: none;
}
.nav-link a {
text-decoration: none;
color: var(--text);
padding: 0 10px;
margin: 0,10%;
}
.logo{
display: flex;
position: absolute;
align-items: center;
height: 20px;
top:18px;
left:2px;
padding: 0;
margin: 0;
font-size:12px;
}
.logo span{
display: flex;
position: absolute;
font-size: 12px;
left:50px;
}
.the-product{
position: relative;
display: flex;
font-size: 25px;
font-weight: 700;
margin:0;
font-family: 'Edu TAS Beginner', cursive;
}
/*might have to try flex box on this submission box */
#features{
display: flex;
position: relative;
align-items: center;
justify-content: center;
font-family:'Edu TAS Beginner', cursive;
align-items: center;
justify-content: center;
font-size: 15px;
margin: 20px;
padding-top: 150px;
}
.questions{
margin-bottom:10px;
}
#email_section {
position: relative;
left: 125px;
top: 5px;
text-align: center;
margin: 0;
}
section{
background-color: var(pale);
}
#audio{
position: relative;
width:100%;
margin-top: 50px;
margin-bottom: 0%;
padding-bottom: 0%;
align-content: center;
left: 250px;
}
/*make a border radius for submit btn along with the email entry feild*/
.the-product-image{
width:100%;
margin:auto;
height:500px;
}
.product1{
position: relative;
background-image: url("https://images-na.ssl-images-amazon.com/images/I/51mUXHrT4oL.jpg");
background-repeat: no-repeat;
background-size:cover;
border-radius: 10px;
top: 250px;
left: 450px;
width: 500px;
height:450px;
margin-bottom: 100px;
}
.card_1{
width: 500px;
position: absolute;
margin: auto;
margin-bottom:10px;
border-style: solid;
height: 440px;
left: 450px;
border-color: white;
top:250px;
border-width: 12px;
border-radius: 30px;
}
#for_sale{
position: absolute;
margin-bottom: 0%;
padding-bottom: 0%;
height:10px;
}
.product-card{
position: absolute;
margin-bottom: 0%;
padding-bottom: 0%;
height:10px;
}
.Sale{
display: flex;
position: absolute;
top: 200px;
right: -250px;
padding-bottom: 0%;
margin-bottom: 0%;
text-decoration: underline;
font-weight: bold;
}
.inner-card{
position: absolute;
bottom: -200px;
border-style: solid;
border-radius: 20px;
border-color: white;
border-width: 5px;
left: 50px;
}
.author{
position: absolute;
left: 160px;
top: -30px;
text-decoration: underline;
}
.header{
position: absolute;
left: 130px;
top: -55px;
text-decoration: underline;
}
.content{
position: relative;
font-size: 12px;
font-family: 'Playfair Display', serif;
left:5px;
}
.add{
position: relative;
left: 160px;
cursor: pointer;
border-radius: 30px;
background-color: var(--pale);
}
.add:hover{
background-color: aliceblue;
}
@mdeia only screen and(min-width:600px){
#nav-bar{
flex-direction:row;
}
}
@media only screen and(450px < width < 600px){
.card{
display: flex;
max-width:525px;
}
.inner-card{
width: 300px;
padding:20px;
}
.product-image{
width:400px;
border-radius: 10px 0 0 10px;
}
}