@VCarames
Posted
Hey @Bambijow, some suggestions to improve you code:
- To give you HTML code structure, you want to set up your code in the following manner (only did parent containers):
<body>
<main>
<article class="card-container”>
</article>
</main>
</body>
The Main Element identifies the main content of the document.
While the Article Element will serve as the card’s container, because the card represents a complete, or self-contained, section of content that is, in principle, independently reusable.
More info:
https://web.dev/learn/html/headings-and-sections/
-
The Alt Tag description for the QR image needs to be improved upon. Its needs to tell screen reader users what it is and where it will take them to when they scan it.
-
The following will reduce the amount of code needed and make your content responsive:
body {
background-color: hsl(212, 45%, 89%);
font-family: 'Outfit', sans-serif;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.container {
max-width: 320px;
margin: auto;
padding: 16px;
border-radius: 20px;
background-color: hsl(0, 0%, 100%);
text-align: center;
}
.card--image {
width: 100%;
margin-bottom: 15px;
border-radius: 15px;
}
.card--title {
color: hsl(218, 44%, 22%);
font-weight: 700;
font-size: 22px;
margin-bottom: 15px;
}
.card--paragraph {
font-weight: 400;
font-size: 16px;
color: hsl(214, 3%, 55%);
}
Happy Coding! 👻🎃
Marked as helpful