Looking to create a unique tag for a card on my website to showcase a new product. My vision is to have an eye-catching design positioned in the top left corner of the card.
Seeking assistance with crafting the CSS code for this specific element.
Initial attempts at creating a square shape with rounded corners didn't meet expectations. Here's a sample layout for reference.
Below is the HTML and CSS code snippet for the card:
#games div {
background-color: #3A7BCD;
border-radius: 7px;
cursor: pointer;
overflow: clip;
min-width: 100%;
max-width: 400px;
margin-bottom: 15px;
}
#games div *:not(img) {
margin: 10px;
}
#games div img {
width: 100%;
height: 200px;
object-fit: cover;
}<div>
<img src="https://i.postimg.cc/9FJYqQKg/Screen-Shot-2024-05-08-at-4-22-24-PM.png" alt="Banner image">
<h2>
Title
</h2>
<p>
Description
</p>
</div>