This forum is now read-only. Please use our new forums! Go to forums

banner
Close banner
0 points
Submitted by Luis Guerra
almost 9 years

[resolved] How to position paragraph and inputs to a different location on the page?

Hi - I finished the first exercise and would like to know how to lower my paragraph and input (s) to lower position on the page? Thanks in advance!

Here’s my code:

<!DOCTYPE html>
<head>
<style>

body {
    text-align: center;
    background: url("https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/splash.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: white;
    font-family: Helvetica;
    }
p {
    font-size: 24px;
    }  
input {
    border: 0;
    padding: 12px;
    font-size: 18px;
    }
input[type="submit"] {
     background: limegreen;
     color: black;
     }   
     
</style>
</head>
<body>
<img src="">
    <p>Hi! I am learning how to make
my very own web page! I really like
blueberry muffins and long walks on
the beach</p>
<input type="email" placeholder="Email">
<input type="submit">

</body>

Answer 555a436d76b8fe0bb2000087

0 votes

Permalink

Hi Luis Guerra,

Since you want to group the p and your inputs together, you can wrap them all in a div element.

<div>
    ... put everything that you want to move in here
</div>

Then you can apply some CSS styling to that div, like this:

div {
    position: relative;
    top: 100px;
}
points
Submitted by Judy
almost 9 years

3 comments

Luis Guerra almost 9 years

Got it - that makes sense. I’ll give it a try…

Luis Guerra almost 9 years

thank you for your reply!

Judy almost 9 years

You’re welcome!

Popular free courses

Explore full catalog