Skip to content
OverviewSolutions
18
Comments
5

Shubham Das

@ShubhamDRaj270 points

Building websites.🧑‍💻

Latest solutions

View more solutions

Latest comments

  • Shubham Das•270
    @ShubhamDRajPosted 2 days ago

    Just a thing try setting the witdth of the container to 634px instead of 800px, it'll look perfect.

    Also add shadow around container as well as button.

    Marked as helpful
    0
  • Marvin•80
    @elMarMarSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    What I would do differently is organize my screen-sizes better. I should have prioritized mobile-first or desktop-first designs so that I could better understand how changing certain properties would interact with the media queries.

    What challenges did you encounter, and how did you overcome them?

    Apart from the media queries, this project was not too difficult. Through mostly trial and error, I feel that I learned a lot during this process of building this site.

    What specific areas of your project would you like help with?

    My code is messy. I'm hoping that someone could point me to resources that teach you how to organize your code. I'd also like to see the thought process of someone building a website so I could compare it to my own.

    Simple Recipe Page Solution

    1
    Shubham Das•270
    @ShubhamDRajPosted 2 months ago

    Looks good.

    The borders in sections should be less thick.

    0
  • Shubham Das•270
    @ShubhamDRajPosted 2 months ago

    The link texts should be in bold.

    And the max-width of the card should be less.

    0
  • Juanka•80
    @icyjkkSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    The ease that I have had when creating HTML, I have also been quite good with CSS, since it was something that cost me a lot in the previous challenge.

    What challenges did you encounter, and how did you overcome them?

    Problem with the Black Shadow:

    One of the problems I have had has been with the black shadow that the card has. It made a shadow, but it came out like a normal shadow. To fix this, I had to look at another colleague's solution. Finally, I used:

    filter: drop-shadow(8px 8px 0px rgba(0, 0, 0, 1));

    Problem with author picture and text:

    I had trouble trying to align the author's image with the text. Finally I tried to make a fix with margin-top

    What specific areas of your project would you like help with?

    How could I align the text with the author's image?

    How could I align the text with the author's image without having to resort to margin-top:-25px?

    .card-author {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 14px; /* Espaciado uniforme entre la imagen y el texto */
    margin-top: 25px;
    margin-bottom: -20px;
}

.card-author img {
    width: 35px;
    height: 35px; 
}

.card-author span{
    font-size: 15px; /* Tamaño del texto */
    font-weight: 800; /* Peso del texto */
    margin-top: -25px; /* Elimina márgenes predeterminados del texto */  
}
```css

# & design
I don't know why '&' it's cut

    Blog preview card using HTML & CSS

    2
    Shubham Das•270
    @ShubhamDRajPosted 2 months ago

    To answer your question "How could I align the text with the author's image without having to resort to margin-top:-25px?"

    First as you set margin-bottom: 27px to every img {}, that's causing the abnormal behavior of the .card-author. For the main card image, use different class name or id and then set margin-bottom to only that image. For example: .card-main-img {margin-bottom: 27px}

    Second remove margin-top: -25px from .card-author-span.

    Now remove both margin-top: 25px and margin-bottom: -20px from .card-author.

    Your problem would be solved then.

    Happy Coding!

    Marked as helpful
    0
  • Shubham Das•270
    @ShubhamDRajPosted 2 months ago

    Looks good.

    0