@VCarames
Posted
Hey, 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 your code and make it responsive:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
min-height: 100vh;
font-family: 'Outfit', sans-serif;
display: grid;
place-content: center ;
background-color: var(--Light-Gray);
}
.card{
max-width: 320px;
padding: 15px;
background-color: var(--White);
border-radius: 15px;
margin: 25px;
box-shadow: 1px 2px 30px 1px var(--Grayis-Blue)
}
.card-img img{
display: block;
border-radius: 15px;
max-width: 100%;
}
.card-text{
padding: 25px;
color: var(--Dark-Blue);
text-align: center;
}
.card-text__title{
font-size: 20px;
}
.card-text__details{
color: var(--Grayis-Blue);
}
Happy Coding! 👻🎃
Marked as helpful