@dcuevasdev
Posted
Thanks
What are you most proud of, and what would you do differently next time?
- Proudest Moment
display: flex
and display: grid
?- What would I do differently
At the moment, I'm not sure. Could you suggest how this part of questions help me in my future learning?
What challenges did you encounter, and how did you overcome them?
Making a text center of the page - Ask for help from AI in process.
Making a responsive page - Search for the CSS rule in google.
What specific areas of your project would you like help with?
html, body {
background-color: rgba(213,225,239,255);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
div {
text-align: center;
}
img {
max-width: 100%; /* Ensures the image will never be wider than the div */
height: auto; /* Maintains the aspect ratio of the image */
display: block; /* Removes any extra space under the image */
margin: 0 auto;
border-radius: 16px;
}
.card-container {
padding: 1em;
border-radius: 16px;
background-color: hsl(0, 0%, 100%);
max-width: 50%;
margin-bottom: 2rem;
}
.card-desc {
color: hsl(218, 44%, 22%);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
h2 {
font-size: 18px;
}
p {
font-size: 15px;
}
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
@media screen and (max-width: 616px) {
.card-container {
max-width: 60%;
}
}
@media screen and (max-width: 416px) {
.card-container {
max-width: 65%;
}
}
Could you suggest my css selector so it will improve in my future project. Such
@dcuevasdev
Posted
Thanks
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord