Https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-product-landing-page-project/build-a-product-landing-page

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
How do I place the video?

   **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="styles.css">
   <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@300&display=swap" rel="stylesheet">
   <title>Shaul Streicher Products</title>
   </head>
   <body>
     <header id="header">
       <img id="header-img" src="https://iili.io/hDFA0P.png"  alt="shaul-streicher-logo" border="0">
       <nav id="nav-bar">
         <div class="nav-link"><a class="link-dn" href="product">content</a></div>
         <div class="nav-link"><a class="link-dn"href="video">create</a></div>
         <div class="nav-link"><a class="link-dn"href="contact">contact</a></div>
           </div>
       </header>
       <main>
         <section>
             <div class="video"
             position: relative; width: 100%; height: 0; padding-top: 56.2500%; padding-bottom: 48px; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden; border-radius: 8px; will-change: transform;>  <iframe loading="lazy" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0;margin: 0;"    src="https:&#x2F;&#x2F;www.canva.com&#x2F;design&#x2F;DAFEhHTJ8Tc&#x2F;watch?embed" allowfullscreen="allowfullscreen" allow="fullscreen">  </iframe></div><a href="https:&#x2F;&#x2F;www.canva.com&#x2F;design&#x2F;DAFEhHTJ8Tc&#x2F;watch?utm_content=DAFEhHTJ8Tc&amp;utm_campaign=designshare&amp;utm_medium=embeds&amp;utm_source=link" target="_blank" rel="noopener">Black And Blue Neon Gradient Welcome to My Channel Youtube Intro Video</a> by shaul streicher
 
 </section>
         

         </main>
     </body>
 </html>

/* file: styles.css */
* {
 font-family: Barlow;
 text-decoration: none;
}
html {
 display: 
}
header {
 position: fixed;
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 flex-direction: row;
 flex-wrap: wrap;
 width: 100%;
 margin: -10;
 background: linear-gradient(20deg, rgba(100,0,8,1) 0%, rgba(233,216,146,1) 20%, rgba(255, 255, 255, 0) 75%);
 filter: blur(2px)
 height: 23%;
}
#header-img {
 width: 49%;
 padding: 2vh 0 0 0;
 margin: 25px 0 0 -10px;
 min-width: 350px;
 max-width: 500px;
}
header img{
}
nav {
 display: flex;
 justify-content: flex-end;
 gap: 15%;
 padding-top: 58px;
 justify-self: space-between;
 width: 49%;
 margin: 0 10px 0 0;
}
.nav-link {
 font-size: 18px;
 font-weight: bold;
 text-align: center;
 padding: 5px;
 border-radius: 10%;
}
.link-dn {
 color: #121212;
}
.nav-link:hover {
 background-color: #e9d892;
 border: solid 1.5px #823127

}
.link-dn:hover {
 color: #823127;

}
/* Main */
.video {
 position: relative;
 width: 100%;
height: 0;
box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16);
margin: auto; 
overflow: hidden; 
border-radius: 8px; 
will-change: transform;
}

@media (max-width: 685px){
 header {
   margin: -10;
   padding: 0;
   flex-wrap: wrap;
 }
 img {
   width: 500px;
   margin-top: 65px;
   height: 40%;
   
 }
 nav {
   flex-direction: ;
   justify-self: center;
   width: 25%;
   margin: 0 0 0 0;
   position: absolute;
   top: px;
   left: 75%;
   gap: 0;
   height: 30%;
   font-size: 15px;

  }
  .nav-link:hover {
    border: none;
    background-color: #e9d89299;
  }
header a  {
    font-size: 15px;
  }
  .create {
    width: 80%;
    height: 500px;
  }
}
@media (max-width: 380px) {
 nav {
   flex-direction:row ;
   top: -255px;
   padding: 0;
 }

}

   **Your browser information:**

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

Challenge: Build a Product Landing Page

Link to the challenge:

2

Hi, which user story you can’t fullfil.?

3

I added an video to my page but can’t figure out how to place the element in the page flow

4

Hi, I saw how you added the video in your html. you can add it to your html like this

   <iframe
            id="video"
            height="300"
            width="600"
            src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&amp;controls=0&amp;showinfo=0"
            allowfullscreen
            controls
          ></iframe>
``

hope it helps.!
5

But how do place it? why isn’t going with the page flow?

6

I think you added to much inline css with it just add the html for now.

7

Hi, i reviewed your code once again,

.video {
 position: relative;
 width: 100%;
height: 0;
box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16);
margin: auto; 
overflow: hidden; 
border-radius: 8px; 
will-change: transform;
}

in this part of your css code the property overflow which is set to hidden makes the video not to appear. also I removed all the inline css from video div, the problem that your video doesn’t stay in the document flow is with the css.

8

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