Tell us what’s happening:
Describe your issue in detail here.
Although I have completed the user story, my video keeps loading and then stops without playing, and also it is covering my h4 element the about us attribute and finally I uploaded to icon images which are also not displaying. Can anyone please help?
**Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<header id="header">
Lucent Atelier
<img id="header-img" src="https://lh3.googleusercontent.com/p/AF1QipNjJPqWOa1dfEAhV8oIGNahDu7Sp5DgeUO2Ls0Y=s1460-w720-h1460-rw">
<nav id="nav-bar">
<a href="#About Us" class="nav-link"> About Us </a>
<a href="#Our products" class="nav-link"> Our products </a>
<a href="#Order now" class="nav-link">Order now </a>
</nav>
</header>
<body id="details">
<video controls id="video">
<source src="https://pin.it/3TaPkEo" type="video/mp4">
</video>
<h4 id="About Us"> About Us </h4>
<p>Do you need a casual bag for your daily travel? Be it to school, the market, to a friend's etc. At Lucent atelier, we offer quality and classy handmade tote bags, knapsacks, crossbags, pack organisers and souvenirs bag to cater for your utmost needs. We also offer NYSC camping kit sales. Our biggest dream is to satisfy your needs. Click on the call icon below to place your order. </p>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<label for="email">
Want to get to know us better? Fill below </label>
<input id="email" type="email" name="email" placeholder="enter mail here">
<button type="submit">
<input id="submit" type="submit">
</button>
</form>
<h4 id="Our products"> Our products
</h4>
<img src="https://lh3.googleusercontent.com/p/AF1QipMVXUdozfgAPy6Vgt_wV3K9Xi4CSPoOGCtZRMup=s1348-w720-h1348" alt="checked totebag ">
<h4 id="Order now"> Order now! </h4>
<div class="container">
<div class="box-1">
<a id="box-container" href="08130021353"> <img src="https://pin.it/4rsESYm" alt="click to place your order now."> </a>
</div>
<div class="box-2">
<a href="https://wa.me/2348130021353"> <img src="https://pin.it/17mPb6p" alt="not answering? drop a message."> </a>
</div>
</div>
</body>
</html>
<link rel="stylesheet" href="styles.css">
/* file: styles.css */
header {
background: white;
text-align: center;
position: fixed;
width: 100%;
top: 0;
left: 0;
background-color: #cc0000;
color: white;
padding: 0.3em;
font-family: sans-serif;
font-size: 15px;
}
#header-img {
width: 25px;
}
body {
background: white;
}
video {
max-width: 100%;
height: auto;
position: relative;
top: 50px;
bottom: 150px;
}
img {
max-width: 100%;
height: auto;
}
h4 {
font-family: lobster;
font-size: 20px;
background-color: #cc0000;
color: white;
}
p {
font-family: montserrat;
}
#submit {
background-color: #cc0000;
color: white;
}
#About Us {
padding: 20px;
margin: -200px;
}
.container {
height: 300px;
display: flex;
flex-direction: columns;
}
.box-1 {
background-color: pink;
width: 50%;
height: 50%;
}
.box-2 {
background-color: gray;
width: 50%;
height: 50%;
}
**Your browser information:**
User Agent is: Mozilla/5.0 (Linux; Android 8.0.0; ANE-LX1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.58 Mobile Safari/537.36
Challenge: Responsive Web Design Projects - Build a Product Landing Page
Link to the challenge:
