volti42
@volti42All comments
- @mustafasen97@volti42
eline sağlık :)
- @Paulgulti@volti42
great
- @godsiduxWhat are you most proud of, and what would you do differently next time?
I’m most proud of how I used Flexbox to create a clean and responsive layout for the blog preview card, ensuring it looks great on different screen sizes. Next time, I’d focus more on adding subtle animations or hover effects to make the design more interactive and visually engaging.
What challenges did you encounter, and how did you overcome them?One challenge I faced was aligning elements properly within the card, especially when ensuring responsiveness across different screen sizes. I overcame this by experimenting with Flexbox properties like justify-content and align-items for adjustments. Testing frequently on mobile device also helped me fine-tune the design.
What specific areas of your project would you like help with?I would like help with improving the overall visual appeal of the blog preview card, especially in terms of adding creative hover effects and transitions. Feedback on making the design more engaging and professional while maintaining responsiveness would also be appreciated.
@volti42To center the blog card, use the following code for the body: body{ background-color: hsl(47, 88%, 63%); display: grid; align-items: center; place-items: center; min-height: 100vh; text-align: center; justify-content: center; font-family: "Outfit", serif; }
Marked as helpful - @Dhiman-Chandra-Ray@volti42
Hello! To create a similar project, adapt the background color to match the specified color.
Create a box element by adding a <div> tag in the HTML and using the following CSS:
.c { height: 500px; width: 315px; background-color: white; border-radius: 20px; box-shadow: 0px 4px hsl(216, 15%, 48%); }
If you'd like additional assistance, feel free to ask! 😊