Latest solutions
- Submitted 3 days ago
blog-preview-card
- HTML
- CSS
I tried mobile-first workflow but I didn't have the same result as the design.
So I did the desktop-first workflow to have the same result. I tried clamp function but I don't understant the viewport width.
So I used rem units.
Latest comments
- @av109Submitted 3 days agoP@CodeNautiquePosted 2 days ago
Hi,
If you want to stick to the design, you should use flexbox to center the card in the middle of the page.
In the main element :
display: flex; justify-content: center; align-items: center;
Marked as helpful0 - @Til-daSubmitted 14 days agoWhat are you most proud of, and what would you do differently next time?
I am proud of the fact that i could figure out the size of the QR-code picture and also place it in the right place. Also glad i wrote the code by myself.
What i would do differently:
- To list out the elements
- Write the whole HTML out before i start designing
- Pick the fonts and colors.
The challenges i encountered are: Sizing of the card div, sizing of the QR-code picture, placing the card div at the center.
How i went about it:
- Tried using Justify-content, Justify-items, Justify-self
- Asked ChatGPT for help at some point.
- The placing of a div
- Website transitioning
P@CodeNautiquePosted 6 days agoHi,
Here a tips for sizing the QR-code picture :
First: Create the content like you did in the HTML file. Second: Add the width and the height of you content in the CSS file. Third: Add a display: flex; and a flex-direction: column; the QR-code picture will be in the content because you did a div who is a parent.
You don't need to add a class to your images here because you don't have lot of picture.
Marked as helpful0 - @aagah20Submitted 9 days agoWhat are you most proud of, and what would you do differently next time?
I am proud of making it all my myself and using Flexbox. Next time i would focus on making it using more Flexbox.
What challenges did you encounter, and how did you overcome them?I had a problem making the main container in the center so used margin auto on left and right and some on top. But later i remebered about flexbox justify and align so i would use it the next time.
What specific areas of your project would you like help with?I had a problem with responsiveness so would like to learn more about it.
P@CodeNautiquePosted 6 days agoHello,
For responsiveness, try to start with the mobile-first development. The main tag is a semantic element, it's better to use a div tag because is used as a container for HTML elements.
0 - @RianzzzSubmitted 16 days agoP@CodeNautiquePosted 16 days ago
Hello,
I think you should do add in your HTML File :
<div class="card"> <main> <div class="qrcode"> <img src="/images/image-qr-code.png" alt="QR Code"> </div> <div class="text"> <h1>Improve your front-end skills by building projects</h1> <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p> </div> </main> </div>Like that you can have your big card. You can remove main element but I think is better to use for SEO.
0