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

Question

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

Answer 1

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 to place text and image inside a shape with HTML?

Question

1 answers

solution1
0 2021-10-19 21:17:02

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

Question

1 answers

solution1 0 2021-10-19 21:17:02

solution1
0 2021-10-19 21:17:02