Product Landing Page - Build a Product Landing Page

HTML-CSS
21

you mean like this?

Responsive Web Design Projects: Build a Product Landing Page | freeCodeCamp.org

22

sorry I forgot to enclose the word <style> in the backtick so it didn’t show up

23

I can only see code if you post it here.

24

i did that already and you said it was wrong,

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital@0;1&display=swap');

body {
  font-family: 'nunito';
  color: white;
  background-color: black;
  line-height: 1.4;
  width: 100%;
  font-size: 1vw;
}

#background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}

.stretch {
    width:100%;
    height:100%;
}

h1 {
  font-size: 1.4vw;
  color: white;
}

h2 {
  font-size: 2vw;
  color: white;
}

h3 {
  font-size: 3vw;
  color: white;
}

a {
  color: white;
  text-decoration: none;
}

a:hover{ 
  text-decoration: underline;
  filter: brightness(150%);
  filter: drop-shadow(8px 8px 10px white);
}


header {
  position: fixed;
  top: 0px;
  width: 100%;
  height: 19px;
  padding: 25px 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: black;
  opacity: 0.7;
  
  z-index:5;
}

#shop {
  margin-left: 13%;
  margin-top: -30%;
  display: flex; 
  justify-content: space-between;
  width: 75%;
}


#portfolio {
  margin-left: 27%;
  margin-top: 45%;
  display: flex; 
  justify-content: space-between;
  width: 50%;
}


#phone-logo:hover {
  filter: brightness(150%);
  filter: drop-shadow(8px 8px 10px white);
}

#youtube-logo:hover {
  filter: brightness(150%);
  filter: drop-shadow(8px 8px 10px white);
}

#iVuDang_header_a:hover {
  filter: brightness(150%);
  filter: drop-shadow(8px 8px 10px white);
}

#mystory {
  margin-left: 0;
  margin-top: 20%;
  display: flex; 
  justify-content: space-between;
  width: 100%;
}

#storylayover {
  background-color: black;
  width: 100%;
  opacity: 0.9;
}
    

.submit { /* Thanks @yuhomyan for the CSS button effect */
  display: block; 
  width: 51.5%;
  height: 3vw;
  margin-top: 0vw;
  margin-bottom: 1vw;
  font-size: 1.5vw;
  
  color: white;
  border-radius: 5px;
  cursor: pointer;
  
  background: #00aced;
  box-shadow:  0 0 5px #00aced,  0 0 8px #00aced;
  padding: 0;
  border: none;
  z-index: 2;
  -webkit-transition: all 0.3s linear;
	transition: all 0.3s linear;
}


.submit:hover{
  background-color: transparent;
  color: #00aced;
  box-shadow: 0 5px 3px -3px #00aced, 0 -5px 3px -3px #00aced,
    0 5px 3px -3px #00aced, 0 -5px 3px -3px #00aced;
}

  .email {
    display: block; 
    width: 50%;
    height: 2rem;
    padding: 0.25rem 0.75rem;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
  }

  .text {
    display: block; 
    width: 50%;
    height: 2rem;
    padding: 0.25rem 0.75rem;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
  }


@media only screen and (max-width: 800px){
  body {
  flex-wrap: wrap;
  }
  
  #header-img {
  width: 30vw;
  }
  
  .nav-link {
  font-size: 2.5vw; 
  }

  #video {
   width: 250px;
   height: auto; 
  }
  
  
  .submit {
    width: 20%;
    padding: 0.75rem;
    background: royalblue;
    color: white;
    border-radius: 2px;
    cursor: pointer;
  }

  .email {
    display: block; 
    width: 18.5%;
    height: 2rem;
    padding: 0.25rem 0.75rem;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
  }

  .text {
    display: block; 
    width: 18.5%;
    height: 2rem;
    padding: 0.25rem 0.75rem;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
  }
}

here it is again

25

please refer to the exercise instructions here:

Note: Be sure to add <link rel="stylesheet" href="styles.css"> in your HTML to link your stylesheet and apply your CSS

So you will need this link tag (not a style tag).

Also you need to remove the margin being added to the body.
(i found this by right-clicking on the nav-bar and choosing the option to “Inspect” it in firefox, but you can also do this in chrome). In the developer tools on firefox or chrome you can see that there is a 8px margin at the top from the body element.

26

ok now it works thank you!

1 Like
27

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