@aymanelaminSubmitted about 1 year ago
Latest comments
- @JexintePosted about 1 year ago
Hello @aymanelamin,
It's a good idea to do a left container for the text part and you should done the same for the banner on the right allowing you to use the display flex on the body and do crazy things : Flexbox
For the images as they are inline elements you should put them on a div apart the main one for the left container. For example you have an <img> tag with the id"logo" put it in a div. Or you have another the solution but I can't say if it's good to do it I hope someone that have more experienced will answer to it is to change the display from inline to block then you won't have to put it on a div.
The banner is not responsive from tablet size to desktop.
They're is some other things but I'm not well experienced to comment it.
Other than that it's a good job.
PS: I think that for the img tag you can even use the align-self property when flexbox is use to do good things with it.
1 - @AttramsSubmitted over 2 years ago@JexintePosted over 2 years ago
Hello @Attrams ,
Good job !
To reduce the space between the name and status you can use the gap property , more details here :
https://developer.mozilla.org/en-US/docs/Web/CSS/gap
In hope it helps !
Marked as helpful0 - @gonerengSubmitted over 2 years ago@JexintePosted over 2 years ago
Hey @gonereng ,
Good job.
Sometimes you need to specifie a fix height and width towards the design. Imagine not using fix values ? Your work is gonna strech again and again and it's not great especially on desktop.
I think you've done a good appreciation of it and if sometimes you need more questions about how approach the design just ask ! We don't have all answers so it's good .
Keep it up !
0 - @marijahavaicSubmitted over 2 years ago@JexintePosted over 2 years ago
Hello @marijahavaic ,
There is convention use with SASS Pre-processor called BEM , more details here :
https://en.bem.info/methodology/
In hope it helps !
Marked as helpful0 - @maaghiaSubmitted over 2 years ago@JexintePosted over 2 years ago
Hey @maaghia,
To do style the progress bar you can set a parent div which contains ::after pseudo elements it's very useful to style those kind of things.
The parent div will be set on relative position and ::after on absolute position then you can style it like the design.
The white circle is very easy to do I'll let you think about it you've done a good job I'm sure you will find the solution for it .
More details here :
:: AFTER https://developer.mozilla.org/en-US/docs/Web/CSS/::after
POSITION ABSOLUTE , RELATIVE https://developer.mozilla.org/en-US/docs/Web/CSS/position
In hope it helps !
1 - P@ov3rstSubmitted over 2 years ago@JexintePosted over 2 years ago
Hey @ov3rst,
Good job .
A tips that someone give me few weeks before you can use native html tag call <details> and <summary> that give you the naturel effect that the challenge ask. Then on css you can use his selectors to do what you need when a question is open.
More details here :
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
In hope it helps !
Marked as helpful1
