Product Landing Page - Build a Product Landing Page

Tell us what’s happening.
why did the website template page always is loading

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header id="header">
      <nav id="nav-bar">
      <img id="header-img" src="https://images.pexels.com/photos/9897836/pexels-photo-9897836.jpeg?auto=compress&cs=tinysrgb&w=600" alt="logo" /> 
      <h3>Diverse_Collection</h3>
        <ul class="lists">
li>a href="#Home" class="nav-link">Home</a></li>
li>a href="#About" class="nav-link">About</a></li>
li>a href="#Pricing" class="nav-link">Pricing</a></li>
        </ul>
      </nav>
    </header>
    <div class="video-container">
          <video id="video" src="https://player.vimeo.com/external/350245348.sd.mp4?s=5a4dafd828188844cef2274dd0bc8babb7d06687&profile_id=164&oauth2_token_id=57447761">
      </video>
      </div>
      <form id="form">
        <input id="email" placeholder="input your email address" />
        <button id="submit">SUBMIT</button>
      </form>
  </body>
</html>
/* file: styles.css */
*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html{
font-size: 100%;
}

body{
font-family: sans-serif, times new roman;
background: #fffdea;
color: #333333;
}

#header{
background: #ffffff;
padding: 1rem;
}

#nav-bar{
display: flex;
align-items: center;
justify-content: space-between;
}

img{
  position: relative;
  width: 5rem;
  height: 4rem;
  border: 2px orange solid;
  border-radius: 50%;
}

#nav-bar h3{
  font-size: 1.5rem;
  font-family: mooli;
  color: orange;
  text-align: center;
  right: 20rem;
}

#nav-bar ul{
  display: grid;
  grid-template-columns: repeat (3, 1fr);
  font-size: 1.3rem;
}

#nav-bar ul li{
  list-style: none;
  padding: 15px;
}

#nav-bar ul a{
  text-decoration: none;
  color: black;
}

#nav-bar ul a:hover{
  background: black;
  color: white;
  padding: 10px;
  border-radius: 5px;
}

.video-container{
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px
}

.video-container video{
width: 100%;
height: auto;
border-radius: 20px;
}

.video-container video::-webkit-media-controls{
background: rgba (0, 0, 0, 0.7);
color: #fff;
border-radius: 20px;
padding: 10px;
}

.video-container video::-webkit-media-controls{
background: #ff6347;
border-radius: 50%;
height: 10px;
width: 10px;
}

.video-container video::-webkit-media-controls-play-button::before{
  content: "";
  color: #fff;
}

#form{
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

#form input{
  padding: 1rem;
  border-radius: 5px;
  display: block;
  align-items: center;
}

#submit{
  display: inline-block;
  padding: 10px;
  margin: 10px;
  background: black;
  color: white;
  border-radius: 5px;
  border: none;
}

#submit:hover{
  background: orange;
  color: white;
  cursor: pointer;
  border: none;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36

Challenge: Product Landing Page: Build a Product Landing Page

Link to the challenge:

I don’t know what loading issues you might be having, but this syntax is incorrect. You are missing opening angle brackets (<) on your li elements and also missing angle brackets around your opening anchor tags which come immediately after.

1 Like

ok
thanks for the correction, but what i am actually asking for is that the webpage that we are building looks like it is not openning

The webpage preview loads ok for me but you may need to try a hard refresh of the page (CTRL+F5) or possibly even paste your code into the page on a different browser, if it’s not rendering properly as is.

ok
let me try, because i tried to open it in different browser but it failed.

You should be seeing something like this… ensure that the Preview window is selected via the highlighted button.

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