Michaela Kleer• 60
@michaelakleer
Submitted
Any feedback is 100% welcome!
Alex G
@AlexGDevPro
All comments
- Alex G• 315
@AlexGDevPro
Posted
Hello
Nice work !
Really nice work. I'm learning from you right now. I'd just saw bootstrap 2 days ago and doesn't had time to practice. I'll keep your code in bookmarks.
Keep coding and have a nice day.
0 - Nick Tesh• 40
@nicktesh
Submitted
Hey everyone! This is my very first challenge here on Frontend Mentor. I utilized Flexbox and SCSS for this challenge. I typically use Bootstrap for most of my projects but would like to master Flexbox alone. Side note: This is my second week of using SCSS and I am loving it. Let me know what you think!
Alex G• 315@AlexGDevPro
Posted
Hello,
Like Matt says before, it looks good.
But in HTML i think you made a semantic mistake. You should invert h3 and p, because the title is the categories' name of stats not its value.
Hope that will help you. Keep coding and have a nice day.
Marked as helpful
1 - Jeongsu• 50
@hosu9466
Submitted
I don't know how can I change the color of img only using CSS.
Alex G• 315@AlexGDevPro
Posted
Hello,
Nice work !
You can add border-radius for corners. And check font, because it's not the same font for Stats.
You could try to do a mobil version like in picture in the challenge's folder.
For the overlay you've many way to obtain it. Like say Vanza you could use Background-blender-mode. You could add a div with a rgba() over the image. You can add an ::after on the img too with a rgba().
For the HTML, be careful you've got a lot of errors. Using div inline isn't possible, you better use span for inline content. Div is a block, span is inline. Same for using span instead of div it isn't good. You've put the img in html and out of boxes, but img default display is inline so you need to put it in a block content, even if you can modify display it's better to put it in a box.
For the font-weight, you have to use only one value, in letter like 'normal' or in number like '400', but only one.
Check the Stats font, it's not the same as the rest.
Hope that will help you. Keep coding and have a nice day
1 @Shekharpawar1
Submitted
feedback on how to improve more
Alex G• 315@AlexGDevPro
Posted
Hello,
Nice work !
But there's some things to say ;)
For the HTML, you don't need to use severals class name for similare content. Look the stats part, you've put 'first-element', 'second-element', etc. It's the same thing, so use the same class. It's better to work in CSS.
Using of title. Is it really a title in stats? Maybe you could use a title for the category of the stats but not for the value, you should use a 'p'.
If image wasn't here, you can understand the content, then it's background-image and a background-image shouldn't be paint in html but in css.
For the CSS i notice that you used a lot of poisition property. It's not needed here, you could look around Flex-box, it's more aproriate.
Hope that will help you. Keep coding and have a nice day.
Marked as helpful
0- Bruno• 10
@bmikolajczak
Submitted
Is there any way of locking the image when it's used as a background? When you scale the card the image gets cropped and on a certain resolution it looks awkwardly I suppose.
Alex G• 315@AlexGDevPro
Posted
Hello,
Nice work !
You can increase your breakpoint because when that changes everything is crushed.
And we can see stats out of the box on the right. You could use 'overflow: hidden'.
Hope that will help you. Keep coding and have a nice day.
Marked as helpful
0 - Anthony Máximo• 40
@a-maximo
Submitted
Alex G• 315@AlexGDevPro
Posted
Hello,
Nice work !
Your solution match the design, except that you can adjust margin between element.
But it's nice enough from my beginner point of view.
Hope that will help you. Keep coding and have a nice day.
Marked as helpful
1 @DanielRR10
Submitted
Alex G• 315@AlexGDevPro
Posted
Hello,
Nice work !
First of all, it's better to use background image with css and not in html. In this challenge its a background image I think so you shouldn't put img mark but only load it in css.
And maybe you can adjust the size of the background-image or with the css property object-fit for a better image size.
Hope that will help you. Keep coding and have a nice day.
Marked as helpful
1- Lenfumé Julien• 350
@julabina
Submitted
Alex G• 315@AlexGDevPro
Posted
Hello,
Nice work !
The first thing I notice is that you are using a level 3 title when you did not use a level 2 title. You must respect the order of the titles from level 1 to 6.
The second thing I noticed is that the statistics text is not in capital letters. You can use text-transform: uppercase.
Hope that help you.
Keep coding and have a nice day.
Ps : you need to have an alt atribute for img mark, it's a W3C error.
0 - Esmith Sánchez• 30
@EsmithAS
Submitted
Hola a todos, si usted tiene algún comentario sobre mi solución, por favor deje un comentario. Muchas gracias!!🙌
Alex G• 315@AlexGDevPro
Posted
Hola @EsmithAS
Nice work !
You use the article tag, but semantically the article is used for content related to the main content but completely independent.
Here it would be better to use a semantic tag other than article.
Have a nice day, keep coding :)
Marked as helpful
1 - mohamed• 620
@mohamed7799
Submitted
Hi, i would like your feedback about how close is my work to the original design and on how my scss code is written. thanks.
Alex G• 315@AlexGDevPro
Posted
Hello Mohamed
I just add one things to your feedback.
Over 1600px the space between stats and description is too big and continue to grow.
You could add a max-width ot prevent this problem.
Have a nice day and keep coding :)
0 - Aldrich C• 30
@drichcodes
Submitted
Requesting feedbacks. Thanks!
Alex G• 315@AlexGDevPro
Posted
Hello
I'll tell you the same thing reviewers told me.
You shouldn't use 'br' instead of margin/padding for the text.
And in mobil view you could make your 'h1' bigger.
Have a nice day ad keep coding :)
Marked as helpful
0 - Sravan• 220
@SravanSTG
Submitted
Hey everyone!
Couldn't replicate the exact violet color from the design. Would like to know how to do it. Any feedback will be appreciated. Thanks!
Alex G• 315@AlexGDevPro
Posted
Hello my friend,
First of all i'm a beginner then don't take what i say for 100% best things.
So first thing i saw when we resize nearly 1088px the stats' text broke. You could change your breakpoint for prevent this effect.
Second thing nearly 900px the top image move to the bottom and the stats are align to the left untill we reach nearly 500px.
I saw you used 'br' after the 'p.description', you should better use margin to make space between element.
Have a good day and keep coding :)
Marked as helpful
0
