Shawn• 20
@skscjoyner
Submitted
I had fun with this project. I did find the overlay a little challenging...and a learning experience. Please offer any related feedback for improvement.
Liam R
@Cooly-o-Cats
All comments
- Liam R• 425
@Cooly-o-Cats
Posted
This is great! It seems that the card doesn't shrink on mobile. Anything under 375px. It would be great if you solved this, probably easiest using media queries.
1 - Kamasah-Dickson• 5,610
@Kamasah-Dickson
Submitted
Hello frontendmentors. It has been a while now but am here with another solution, It may not be pixel perfect but what do you think about this solution. I really had a tough time with positioning the background svgs.
Liam R• 425@Cooly-o-Cats
Posted
This solution looks great! Make sure to use the font provided in the design file to keep the site looking as close to the design as possible. Also, I noticed your spacing seems a little off especially at the "We're Different" section. Finally, make sure to put your HTML in either
<header>,<main>or<footer>tags. That will fix your accessibility issues.0 - Rony• 420
@romzc
Submitted
i would like tips to improve responsive part, thanks
Liam R• 425@Cooly-o-Cats
Posted
Personally, I think that the site looks great and is very responsive. Be sure to keep all HTML elements inside either
<header>,<main>or<footer>tags. That will fix your accessibility issues.Marked as helpful
0 - Adam Elitzur• 110
@AdamElitzur
Submitted
Is there anything I should be doing differently? I use flexbox a lot, is there a better way I should be centering things? (Like the eye icon when you hover over the image, and the price and ETH icon and time and clock icon) Thanks!
Liam R• 425@Cooly-o-Cats
Posted
This solution is great! Flexbox seems to be the right way to go in most of these situations for the design. The only thing I would change is giving the card a margin between the top and bottom of the screen!
Marked as helpful
1 - Matheus Santos• 50
@matheussantosws
Submitted
Muito legal esse desafio. Bem basico de se fazer usando margin e padding da para fazer tranquilo
Liam R• 425@Cooly-o-Cats
Posted
! Traduzido pelo google |! Parece ótimo, e a capacidade de resposta também é ótima. Eu sugiro colocar uma largura máxima no texto do tablet. Isso só vai fazer com que pareça mais limpo!
0 - Sebastian• 770
@Sebastian-1406
Submitted
Cualquier comentario para construir bienvenido sea ... :)
Liam R• 425@Cooly-o-Cats
Posted
! | Este mensaje es traducido por google | ! ¡Gran trabajo! Parece increíble. ¿Quizás intentar arreglar un poco más tu logo? Se coloca en posiciones extrañas con demasiada frecuencia.
Marked as helpful
0 - Progress Aienobe• 565
@Paienobe
Submitted
Feedback please
Liam R• 425@Cooly-o-Cats
Posted
Nice! Seems like some of the styles are off. Check the design and try a little bit harder! Mainly some fonts and sizes are off.
Marked as helpful
1 - VladimirBrscic• 775
@VladimirBrscic
Submitted
Hello, I did not try to do layout using flex as much as possible. For such a simple page I found it easier to just use some margins here and there. Hope it's alright done this way. Any opinions appreciated! Thanks.
Liam R• 425@Cooly-o-Cats
Posted
Great Job on Responsiveness!
Marked as helpful
0 - Mitchell Gould• 250
@helphop
Submitted
I tried to make the code as clear as possible. I also went through many iterations and refactoring to use components to reduce the amount of code I wrote.
If you know of some tricks or better ways of coding things I would be very appreciative of your feedback.
Liam R• 425@Cooly-o-Cats
Posted
Awesome Job! One critique I have is that when I hover over the team's photos, the gray overlay tends to flicker. Not sure how to fix it, but just saw it as a bug. Anyways great work!
0 - Darren Bawag• 115
@darrenbawag
Submitted
Done with this challenge ^^ Yay! Leave a comment/feedback. ty
Liam R• 425@Cooly-o-Cats
Posted
Great Work! Few Suggestions: 1 - Reduce the white space at the top to allow it to be close to the design. 2 - In the design, there is a state and a message when input fields are blank, Could you do this?
1 - Abhinav Maurya• 65
@abno-24
Submitted
This Project was great to work with grid and flexbox. I have tried my best to look exact like design and also tried my best to make it responsive. I hope you will like it. Please have a look on it and please let me know how can make it better and how can I improve my CSS. Thank you.
Liam R• 425@Cooly-o-Cats
Posted
Awesome Job! I have a few suggestions: First make the cards smaller so they all fit on one page, also on mobile make sure that the cards are centered.
Marked as helpful
1 - PEtienne L.• 95
@etnlmy
Submitted
Hello Everybody
This was a fun challenge and it took me longer than expected, as usual, lol. I went for a Vanilla JS/HTML solution.
I ran into some issues when deploying, as one of the API (worldtimeapi) does not support HTTPS. Since the calls have to be made directly from the client, and therefore cannot be proxied, I used another API instead (TimezoneAPI.io).
If you give it a try and notice some issues with the location and/or time data, please let me know.
Any other more general feedback is greatly appreciated 😀
Thanks!
Liam R• 425@Cooly-o-Cats
Posted
Nice! The only thing I would suggest is to update the timezone label, when it shows the time. So 8:30 AM bst or 8:30 AM cst or even 8:30 AM AKDT.
Marked as helpful
1 - Łukasz Kiełbasa• 80
@arctindev
Submitted
First shot in react and Styled Components. Feedback would be great Frontend folks!
Liam R• 425@Cooly-o-Cats
Posted
Looks great! And very responsive! Just be sure to pay attention to the fonts in the project. Remember to goal, match it exactly.
0 - zebra not donkey• 145
@zebra-not-donkey
Submitted
when I lost my internet connection I made two projects This is the second one, It takes me just an hour and a half-hour, I hope to know is that normal or I am a Hero ^_^? feedback is the (DEV) oxygen!
Liam R• 425@Cooly-o-Cats
Posted
Great Job! Now try to make it more of a "modal" than an actual page.
Marked as helpful
0 - Aleksa Mitrović• 150
@1aleksa
Submitted
-
How do you color the image in purple? (I was trying with filter & overlay, however it gives me the same color)
-
When I resize the desktop view of the website, class="description" starts changing the width and it messes up the visual presentation of the divs. How do I keep them in the same ratio?
Liam R• 425@Cooly-o-Cats
Posted
For the image overlay, this is what I did:
HTML:
<div class="image"> <div class="img-cover"></div>CSS:
.image{ background-image: url(https://github.com/Cooly-o-Cats/StatsPreviewCard/blob/main/Stats%20Preview%20Card/Assets/img/Assets/image-header-desktop.jpg?raw=true); width: 100%; height: 100%; } .img-cover{ width: 100%; height: 100%; background-color: hsla(277, 69%, 35%, 0.73); }1 -
- Aleksa Mitrović• 150
@1aleksa
Submitted
-
How do you color the image in purple? (I was trying with filter & overlay, however it gives me the same color)
-
When I resize the desktop view of the website, class="description" starts changing the width and it messes up the visual presentation of the divs. How do I keep them in the same ratio?
Liam R• 425@Cooly-o-Cats
Posted
Like it, but did you do the mobile version? It doesn't seem very responsive.
1 -
