Product Landing Page -Feedback/help needed

Product Landing Page -Feedback/help needed
0

#1

Hi Everyone!
I am almost finished with the Product Landing Page project, and I would love to have some feedback from somebody before I sent it :slight_smile:
Here it is: https://codepen.io/LucaNa/pen/ejgLJP

As you can see I made it with CSS Grid (woohoo), I am aware that it’s not a masterpiece, but since this was my first try with it I am quite happy about it. However, there are a few things that I am stuck with:

  • I am not sure how to make the email validation
  • the sticky header only sticky for a small distance
  • somehow I integrated a whole youtube page instead of only one video
    -the “info” part wants to be in pyramid style (not at all in one row)
    -yeah, probably thats what I can say

Any help would be hugely appreciated!
<3


#2

Instead of position: sticky; use position: fixed; on you stylin’ of nav tag. About email validation except doing some regexp in js, all other validation is done serverside. But you don’t need to do regexp, putting type=email is good enough. I don’t see any yt video on your page … PS: To put youtube video on codepen you have to use embed. Check out yt api for that. That how i did it.


#3

I was not able to find the applicable lesson, but take a look at the available input element attributes which will have what you are looking for.

Can you give us more information on this one? What are you expecting the header to do when you do something or the screen is at a certain size? Then explain what is happening instead that you do not want.

That is because you pasted the youtube video as the source of the iframe, which will not work. You should have clicked on the SHARE link below the video (bottom right) and chosen Embed which would give you the following code to put in place of your current iframe code.

<iframe width="560" height="315" src="https://www.youtube.com/embed/LsoPlVzlbJE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

If you want the info section items to be all in one row with 3 columns, you need to wrap each pair of divs contained in the div with class=“content2” in their own divs like:

<div class="content2" id="info">
  <div>
    <div class="icon"></div>
    <div class="text">
      <h2>Materials</h2>
      <p>You can use this and<br> that to clean the your shoes</p>
    </div>
  </div>
  <div>
    <div class="icon"></div>
    <div class="text">
      <h2>How to do it</h2>
      <p>Try it at night,<br> after dinner</p>
    </div>
  </div>
  <div>
    <div class="icon"></div>
    <div class="text">
      <h2>Where to find it</h2>
      <p>Somewhere on the planet Earth.<br> Probably.</p>
    </div>
  </div>
</div>

Then, in your CSS, you should be using the grid-template-areas property and assigning content to it like:

.content2 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background-color: pink;
    grid-template-areas: content; /* this was missing before */
    height: 100%;
    /*padding-bottom: 60px;*/
    align-content: center;
} 

#4

Thanks @RandellDawson for the quick help!
I implemented everything, and it works beautifully.
About the sticky header: well, I wanted it to stick on top during all actions on the page. now it only sticks to the blue (header) part.

@codename11 also thanks for the reply! I already used the type=email, so then it should be good to go. about the nav-bar position. unfortunately, I cannot use “fixed” cause it doesn’t go well with the grid system ( at least that is what i experienced with it)