How to place text and image inside a shape with HTML?

I'm trying to teach myself HTML, and I've been stuck on this. I'm basically trying to place a web image on top of a solid black rectangle created in HTML. The rectangle should have enough room for text on the top and bottom, and be aligned to the right of the page. Ideally, it should look just like this. Example

1 answer

  • answered 2021-10-19 21:17 Markus

    You could use this as a starting point:

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    .card {
    width: 200px;
    background-color: #000;
    color: #fff;
    padding: 20px 40px;
    }
    a {
    color: #fff;
    }
    h1 {
    text-align: center;
    padding-bottom: 20px;
    }
    img {
    width: 100%;
    height: auto;
    }
    </style>
    </head>
    <body>
    <div class="card">
    <h1>TEXT HERE</h1> 
    <img src="https://via.placeholder.com/200" alt="image">
    <h2>Some text with a <a href="https://example.com">link</a>.</h2>
    </div>
    </body>
    </html> 
    

    Further reading: https://www.w3schools.com/howto/howto_css_cards.asp

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum