Skip to content
OverviewSolutions
16
Comments
3
Samoina
@samoina

All comments

  • Stefan•90
    @SaitenhexerSubmitted about 1 year ago

    I found this one pretty difficult.

    The whole layout and the spaces between things gave me some problems.

    For the Statistics I used Grid. It seemed pretty logical to me. So i learned a lot about that.

    Also the two background images and the positioning of those was a bit tricky. I found a very good solution which used the background-position property. I liked that solution very much. Unfortunately i could not find the link where i got it from.

    Any comments on the solution?

    Profile Card - With CSS Grid

    1
    Samoina•240
    @samoinaPosted about 1 year ago

    Hi @saitenhexer,

    I checked your code and noticed you used the background position for the circles on the page, at the top and bottom.

    Just sharing that you might also consider using the z-index. So, essentially, the z-index allows us to place items 'in front' of each other. This way, an item with a higher z-index will stack in front of another with a lower z-index.

    In my code, I placed the circle images directly in the body, and then everything else in the profile under 'main'. I then styled the 'main' section to give it a higher z-index so that it'd appear stacked infront of the circles.

    .main {
	width: 20rem;
	text-align: center;
	border-radius: 10px;
	z-index: 1;
}

    Hope this is insightful.

    Happy coding!

    Marked as helpful
    0
  • Samoina•240
    @samoinaPosted over 1 year ago

    The Purple color over the image is called an overlay. Here's how I went about it.

    1. Place the image in a parent container, say class main__picture. PS: I used the <picture> element to show different images depending on the screen size.
    2. We get to use the ::before pseudoselector. This allows us to create an 'extra layer' on top of the existing image to give it that purple color, hence why it is called an overlay. Using ::before means this 'layer' is added as though it was a child of the parent container, but just before my picture element.
    3. We position the parent container relative, and the overlay absolute so that it covers the image entirely.
    4. We then add the background color provided for this challenge (hsl(277, 64%, 61%)) .
    5. There's a blend mode that CSS allows to combine the colors of the overlay with the white of the image. so we use the property mix-blend-mode and set it to multiply..
    6. Lastly we set opacity to determine how much of the white shows through the overlay. Here's a code snippet to illustrate this:
    <picture class="main__picture">
<source media="(min-width: 375px)" srcset="images/image-header-desktop.jpg" sizes="">
<img src="images/image-header-mobile.jpg" alt="background image">
</picture>

    /* Create the purple overlay on CSS*/
.main__picture {
position: relative;
}

.main__picture ::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--soft-violet);
mix-blend-mode: multiply;
opacity: 0.5;
}

    This worked for me and I hope you find it helpful. All the best Vivek! Happy Coding

    Marked as helpful
    1
  • Samoina•240
    @samoinaPosted over 1 year ago

    Hi @anuraggcoder,

    I fumbled a little with the font as well and finally figured out to import it into my style sheet from Google Fonts: I included the regular style in the body styling, and created two extra classes for the bold and extra bold styles (which i used for the '76' value in the circle on the results side. )

    @import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@500;700;800&display=swap');

body {
font-family: 'Hanken Grotesk', sans-serif;
font-weight: 500;
}

.bold {
font-weight: 700;
}

.extra-bold {
font-weight: 800;
}

    I hope this is helpful for you as well. All the best and Happy Coding!

    Marked as helpful
    1