Product Landing Page - Build a Product Landing Page

HTML-CSS
1

why margin:auto; is not workin for styling .input
?

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

We can’t see your code right now.

4 
<!DOCTIPE html>
<html>
  <head>
    <title>Product Landing</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="header">
    <header id="header">
      <img src="data:image/png;base64,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" id="header-img">
      <nav id="nav-bar">
        <a class="nav-link" href="courses">courses</a>
        <a class="nav-link" href="timing">timing</a>
        <a class="nav-link" href="video">video</a>
      <nav>
    </header>
    </div>
    <div class="div-2">
    <section class="form-sec">
      <p>best web-site to learn coding</p>
     <form action="https://www.freecodecamp.com/email-submit" id="form">
     <div class="input">
        <input type="email" id="email" name="email" placeholder="email"/>
       <input type="submit" id="submit" value="submit" />
      </div>
     </form>
    </section>
    <section class="vdo-sec">
      <iframe  id="video" width="300px" height="300" src="https://www.youtube.com/embed/kUMe1FH4CHE" title="Learn HTML – Full Tutorial for Beginners (2022)" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </section>
    </div>
  </body>

</html>

.
.
.

.header{
  position:fixed;
  background-color:gray;
  width:100%;
  top:0;
  left:0;
  
}


img {
  width:50px;
  height:50px;
 
}
.div-2{
  display:flex;
  flex-direction:column;   
  align-items:center;
  margin:50px 0;
}

p{
  font-size:1.8rem;
}

#nav-bar {
  
  display:flex;
  flex-direction:row;
  float:right;
  align-items:center;
  
}
.input{
  margin:auto;
}
a{
  text-decoration:none;
  color:white;
  font-size:1.5rem;
  margin:10 8px;
}
iframe{
  margin:auto;
}
@media (max-width:200px){

}
5

it didnt work with align-items so i tried margin:auto; . . . . :smiling_face_with_tear:

6

what do you mean exactly when you are saying that it is not working?

7

i wanted to center the .input …put it in the center of screen

8

well, .input means ‘element with class input’ Oh, i see you have such div. Do you want to center that?

9

yeah it include two input element

10

yeah i want to center it … it didnt work with align-items neither with margin-auto;

11

Your div is a child of some section. This section is not flex-container. And I don’t think you are using grid… So align-items is kind of not good here.

12

oh thank u that was usefull

13

i made it child for a flex parent

14

So it’s all good now?

15

yeah ! … i had other problem , i wanted to align-items my .nav-bar without givin ‘a’ (anchor) a margin of : margin:10 8px; . . . . . shall i rewrite u the code ?

16

You can if you want.
But for this one you can just go ahead and experiment with flexbox on your own. That way you will learn bunch of stuff, and you navbar is already flexcontainer.

Just go to MDN and search for
flex-direction
and
flex-wrap
and
justify-content
and maybe
some general info about flex

Oh and also gap

17

i did my best to align them … okey will look for sollution by myself … thank you

18

Feel free to ask more stuff in case you will be lost in all this flex shenanigans

19

oh … thanks lot :innocent: … i’ll in case needed

20

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