Product Landing Page - Build a Product Landing Page

HTML-CSS
1

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:

2

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
3

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

4

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.

5

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

6

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

Untitled
Untitled1915×967 146 KB