Skip to content
OverviewSolutions
7
Comments
5

Danilo Arcidiacono

@daniloarcidiaconoMilan, Italy120 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

I’m currently learning...

CSS, Figma

Latest solutions

View more solutions

Latest comments

  • Danilo Arcidiacono•120
    @daniloarcidiacono

    If you have only a single tag inside body, you can try to use flexbox:

    html, body {
height: 100%;
}

body {
display: flex;
justify-content: center;
align-items: center;
}
  • Danilo Arcidiacono•120
    @daniloarcidiacono

    You can try the before selector like this:

    <your-selector>::before {
   content: "$";
}
  • Danilo Arcidiacono•120
    @daniloarcidiacono

    Hello, I would start by adding this:

    .shopping-item-details {
   ...
   flex: 1 1 auto;
}

    which is a short form for:

    .shopping-item-details {
   ...
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: auto;
}

    That makes the 'Annual Plan' grow and take the available space.

    Finally, add the following:

    .shopping-item {
 ....
  gap: 1rem;
}

    gap adds a margin between flex items.

    Marked as helpful
  • Danilo Arcidiacono•120
    @daniloarcidiacono

    Didn't try this challenge yet, but I can think of two ways to tint the image with CSS:

    1. Using a suitable combination of filters (see https://codepen.io/sosuke/pen/Pjoqqp);

    2. Applying an overlay (with position absolute/relative) with a semi-transparent background color;

  • Danilo Arcidiacono•120
    @daniloarcidiacono

    Hello, here are some things that come to mind:

    1. Use BEM notation consistently to name your CSS classes (block__element--modifier);

    2. The font is imported in HTML but it's not used in CSS;

    3. Do not select h1, h4, p tags directly. Either add a class to such tags or use a CSS combinator to target them;

    4. Use max-width for the card. Also don't set a fixed height.

    5. Use CSS custom properties to centralize constants, like colors;

    6. Put your CSS files in a dedicated folder;