Question 194130 in Html Question posted in
Some basic documentation can be found here.

Html – how do I fix the margin

this is the goal poster

enter image description here

the is my poster

enter image description here

can you read my code and tell me what I did wrong/ if there was an easier way
The project is to make a Motivational Poster website.

TODO: Create a motivational post website.
Style it how ever you like.
Look at the goal image for inspiration.
But it must have the following features:

  1. The main h1 text should be using the Regular Libre Baskerville Font from Google Fonts:
    https://fonts.google.com/specimen/Libre+Baskerville
  2. The text should be white and background black.
  3. Add your own image into the images folder inside assets. It should have a 5px white border.
  4. The text should be center aligned.
  5. Create a div to contain the h1, p and image elements. Adjust the margins so that the image and text are centered on the page.
    Hint: You horizontally center a div by giving it a width of 50% and a margin-left of 25%.
    Hint: Set the image to have a width of 100% so it fills the div.
  6. Read about the text-transform property on MDN docs to make the h1 uppercase with CSS.
    https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform
h1 {
    color: white;
    font-family: 'Libre Baskerville', cursive;
}

p {
    color: white
}

body {
    background: black;
}


#texts {
    text-transform: uppercase;
}


#box1 {
    border: 5px solid;
    text-align: center;
    color: white;
    width: 450px;
    height: 500px;
    padding-top: 50px;
}


div {
    width: 50%;
    height: 100%;
    margin-left: 25%;
    margin-top: 25%;
}
<!DOCTYPE html>

<html>
    <head>
        <link rel="stylesheet" href="style.css" />
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link
            href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap"
            rel="stylesheet"
        />
    </head>

    <body>
        <div id="box1">
            <!-- <img src="max-harlynking-UdCNVHNgHdI-unsplash.jpg" alt="" width="100%" height="50%" /> -->
            <img src="https://picsum.photos/640/480" alt="" width="100%" height="50%" />

            <h1 id="texts">let's a go!!!</h1>
            <p id="texts">we did it</p>
        </div>
    </body>
</html>

the picture should be center when minimized (take up half the screen) it look good but when full its centered but at the bottom.

I’ve only just stared learn so I only know the extreme basic of html and CSS*

Tags:

2

Answers


  1. 0

    Is that what you want? I’ve added text-align: center; to #texts to center both text elements. I’ve added a parent <div> to #box1 and added display: flex; justify-content: center; so basically I’ve used to Flexbox to center #box1 horizontally. Seems like what you want.

    h1 {
    color: white;
    font-family: "Libre Baskerville", cursive;
}

p {
    color: white;
}

body {
    background: black;
}

#texts {
    text-transform: uppercase;
    text-align: center;
}

#box1 {
    border: 5px solid;
    color: white;
    width: 450px;
}

.container {
    display: flex;
    justify-content: center;
}
    <!DOCTYPE html>

<html>
    <head>
        <link rel="stylesheet" href="style.css" />
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap" rel="stylesheet" />
    </head>

    <body>
        <div class="container">
            <div id="box1">
                <!-- <img src="max-harlynking-UdCNVHNgHdI-unsplash.jpg" alt="" width="100%" height="50%" /> -->
                <img src="https://picsum.photos/640/480" alt="" width="100%" height="100%" />
            </div>
        </div>
        <h1 id="texts">let's a go!!!</h1>
        <p id="texts">we did it</p>
    </body>
</html>
    Login or Signup to reply.
  2. 0

    Please check the code. You can increase the width via change the width of id "#box1".

    body{
  background-color:#000000;
}
#box1{
  margin: auto;
  width: 300px;
  margin-top: 50px;
  text-align: center;
}
#texts{
  color:#ffffff;
}
    <!DOCTYPE html>

<html>
    <head>
        <link rel="stylesheet" href="style.css" />
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link
            href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap"
            rel="stylesheet"
        />
    </head>

    <body>
        <div id="box1">
            <!-- <img src="max-harlynking-UdCNVHNgHdI-unsplash.jpg" alt="" width="100%" height="50%" /> -->
            <img src="https://picsum.photos/640/480" alt="" width="100%" height="50%" />

            <h1 id="texts">let's a go!!!</h1>
            <p id="texts">we did it</p>
        </div>
    </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search