Product Landing Page - Build a Product Landing Page

Tell us what’s happening:
Describe your issue in detail here.

Your code so far

I am trying to get the video and images to appear but I am having a hard time with this. How can I do that?

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<header id="header">
   <img id="header-img" src=""alt="piano" width="300"height="100"></img>
   <div class="flex container">
      <nav id="nav-bar">
         <nav class="nav-link"><a href="">Features</nav><nav class="nav-link"><a href="">How it works</a></nav><nav class="nav-link"><a href="">Pricing</a></nav></nav>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <form id= "form" action="" method="get" class="form-example">
      <div class="form-example">
      <label  for="email">Email address:</label>
      <input id="email" name="email"  
type="email"      placeholder="Enter email here." required></div>
      <div class="form-example"><input id="submit" type="submit" value="submit">
     <iframe id="video" src=""></iframe>
     <div class="photo">
       <img src="" alt="Fingers on the piano" width="200" height="200"></img>
       <img src="" alt="Man playing piano" width="200" height="200"></img>
       <img src="" alt="Child playing piano" width="200" height="200"></img>
/* file: styles.css */
  text-align: center;
  text-transform: uppercase;
  padding: 40px;
  background-color: #0a0a23;
  color: #fff;
  border-bottom: 6px solid #fdb347;
  padding:5px 5px;
h1{font-family:Garamond;font-size: 32px; 
border: 10px;
padding: 20px;
font-color: #39034B;
border: 3px
padding: 20px;
.img{border: 4px;}
#form{font-size:20px; padding: 20px;}
#email{font-size: 20px; padding: 2px;}
#submit{padding: 2px;margin-top: 5px;
margin-bottom: 5px 0px;}
#video{padding: 24px;margin-top: 15px;
margin-bottom: 15px 0px;}

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

for images:
go to the website,
right click over the image
select ‘copy image link’
then past the link in to your code

videos can be a little more work. I think it mainly depends on the website.

for example:
If its a YouTube video you use the ‘SHARE’ button, then click embed.
This will give you the entire <iframe> along with width, height, etc.

It looks like the website your trying to use for the video has different rules and licences.
I’m not sure what they allow and don’t allow.
They do also have a share button, however it seems limited

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