Responsive Web Design Projects - Build a Product Landing Page

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="">
  <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>
<body id="details">
  <video controls id="video">
    <source src="" type="video/mp4">
  <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="">
    <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">
  <h4 id="Our products"> Our products 
  <img src="" 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="" alt="click to place your order now."> </a>
    <div class="box-2">
      <a href=""> <img src="" alt="not answering? drop a message."> </a>

<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:

1 Like

Hi @Nodrot and Welcome!

I dont know what you actual problem is, but you have some issues in your code like missing a head element, inside of it you should put your <link rel="stylesheet" href="styles.css"> line, not at the bottom of your HTML. If you want to use a header element it should go inside other element body, section, etc… And also everything you want to display in user’s screen it needs to be inside the body element.

Anyway if you share your code in CodePen or other similar plataform it is easier to help you.
This is a link it might help you as well:
Audio and Video Delivery. On MDN Web Docs

I hope that helps you in any way. Happy coding! and great job!! :clap: :clap: :ok_hand:

1 Like

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