Skip to content
OverviewSolutions
2
Comments
2
Elyse Chambers
@Elyseeloo

All comments

  • Elyse Chambers•45
    @ElyseelooPosted over 3 years ago

    You're off to a good start for your first attempt :) You were able to make the card dynamic and move with the webpage, and a responsive webpage is always great. One way you can improve this, though, is by using the @media (max-width: #px) code in your CSS. This allows the card to change from a horizontal alignment in desktop view to a vertical alignment in mobile with the right CSS elements.

    For the stats, what I did was I gave the numbers a header tag, i.e. h2 for example. This way, it forces the rest of the words to be on the line beneath it.

    I also noticed that you have no CSS for your container div. You can put some padding around the sides of that div to center the words so that they won't be right up against the edges.

    You also have no font-size element in your CSS. This would contribute to the visual hierarchy of the page and help guide users' eyes to the most important elements.

    And for the image's purple color, what I did was I created an overlay div with the given purple color as the background color, made the image the parent of the overlay div, (you can do this by creating another div container for the other half of the card) and gave the overlay div a mix-blend-mode: multiply element. You can try this and see how it works, but make sure you give a height and width for the overlay div and change its position to absolute and the parent position to relative. Try this and let me know how it works!

    Other than that, you're off to a solid start! :)

    1
  • Elyse Chambers•45
    @ElyseelooPosted over 3 years ago

    Beautiful design! Looks very similar to the original as well. Just a few pointers:

    1. As for your HTML, might I suggest using Semantic HTML as much as possible--elements such as section, header, main, footer, instead of divs and spans. It allows your page to be more accessible to various users.
    2. Your first-level heading should be an h1 tag. Followed by an h2 tag and so on. You can change the font size to your liking with CSS.
    3. I noticed your borders aren't rounded. This can be fixed with a border-radius: 10px attribute, or a similar value.
    4. For the Why Us section, it seems that the original is written in an <ul> format while yours is in a <p> tag.
    5. The color for "per month" is also a slightly faded color on the original while in your design it's the same color as the rest of the font.
    6. Lastly, if I'm not mistaken, I believe in the original there is a drop-shadow underneath the "Sign Up" button.

    All in all, your finished design is absolutely beautiful. I wish you the best on your coding journey!

    0