Skip to content
OverviewSolutions
11
Comments
23

Aatypic

@AatypicFrance490 points

Hello, everything I learned is self-taught, so I'm here to learn and acquire more knowledge.

Latest solutions

View more solutions

Latest comments

  • Aatypic•490
    @AatypicPosted over 2 years ago

    Hello and congratulations on your solution !

    I don't understand what you're trying to achieve with your 1st question. Sorry ^^

    For the 2nd question, you need to add a layer inside your <div class="image">, you could create an empty <div class="layer"> and then play with it to match the original. There is a guide on https://www.w3schools.com/howto/howto_css_image_overlay.asp.

    Be careful with the semantic, others here would also say that you should respect the semantic tags. In your case only ONE <section> would be good. Knowing that what we are building is ONE component.

    Oh and also you have a little scroll issue ;)

    Hope it helped, good luck ✌️

    Marked as helpful
    0
  • Aatypic•490
    @AatypicPosted over 2 years ago

    Hello and congratulations on your solution!

    Concerning your question, yes the color for the effect is not in the style guide. But from what I understand is that it's the same color with less opacity something like .7 hsl(245deg 75% 52% / 70%)

    Yes the shadow of the button is maybe too big but that's personal preference. Or if you space it out more and give more size to the price/plan bubble to make it stand out better 🤷‍♂️

    Anyway this is great stuff.

    Good luck ✌️

    1
  • Aatypic•490
    @AatypicPosted over 2 years ago

    Hello and congratulations on your solution !

    Concerning your problem, you are right it is because of flexbox ;) Is is actually the flex-flow: column wrap you have in this case the wrap saying if you have enough space be in one line if not wrap it. To fix it you could instead remove le line and do a flex-direction: column.

    Again some devices are weird, I never tried any of my design on a Nest hub haha.

    I think your design looks good.

    Good luck ✌️

    Marked as helpful
    0
  • Aatypic•490
    @AatypicPosted over 2 years ago

    Salut et félicitations pour ta première solution ! Je me permets en francais c'est rare :)

    Pour ta question concernant le responsive, tu devrais mettre un break-point plus large actuellement tu es a 376px c'est assez bas sachant que toute la partie tablette est du coup ecrasé.

    Tu peux donc dire que la partie tablette, elle aussi aurait le même design que en mobile pour te faciliter le tout (genre 768px).

    Ensuite tu pourrais avoir les mêmes résultats visuelles avec un nombre moindre de <div> container. En effet les 2 divs parents de <main> pourrait être enlevées. Suffit ensuite de mettre display: flex sur le <body> pour centrer ta carte.

    Aussi je vois que tu charges l'image avec le css et surtout tu utilises une <section> uniquement pour l'image, c'est pas idéal. Il est conseillé de le faire via le html avec le tag <picture> pour un resultat comme ceci:

    <picture>
  <source media="(max-width: 768px)" srcset="images/image-product-mobile.jpg" >
  <img src="images/image-product-desktop.jpg" alt="..." >
</picture>

    Plus d'infos ici > https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

    Bonne chance à toi ✌️

    Marked as helpful
    0
  • Aatypic•490
    @AatypicPosted over 2 years ago

    Hello and congratulations on your solution !

    Concerning your question it is best practice to use a <picture> tag especially when using multiple images depending on the devices width thanks to the <source> tag. You may seem to have forgotten about the 2 images changing if on desktop or mobile view, I can see only one being used ;)

    You can learn more about this here > https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

    You could do something like this:

    <picture>
  <source media="(max-width: 768px)" srcset="images/image-product-mobile.jpg" >
  <img src="images/image-product-desktop.jpg" alt="..." >
</picture>

    So now the image will be the mobile one until 768px wide. If bigger it will use the default <img>

    Oh and on mobile view there is a little gap between your image and the text. Don't forget a display: block in your img css reset. That should fix it.

    Good luck ✌️

    Marked as helpful
    1
  • Aatypic•490
    @AatypicPosted over 2 years ago

    Hello and congratulations on your solution !

    On this project maybe the easier approach was to use Grid instead of flexbox for the <main>. There is some weird behavior between the cards, when shrinking the devices width e.g. on tablet the 2 cards in the .container are not responding the same way as the 2 on the sides.

    And if you noticed on the design, the spacing between the cards is like an H and the spacing is equal.

    I know everyone's site doesn't need to match the exact design but I don't think you did this on purpose.

    For the grid you could do something with 3 columns, and not forget that you have to remove the <div class="container" >. Now your 4 different cards are direct children of <main> and you can place them individually on the grid.

    main {
display: grid;
grid-template-columns: repeat(3, 1fr);
}

    Here is help to place the cards > https://css-tricks.com/snippets/css/complete-guide-grid/

    Nice hover effect on cards !

    Good luck ✌️

    Marked as helpful
    0
View more comments