Craig
@cchiversAll comments
- @Ynotlocin1@cchivers
Just a quick answer to your questions would be yes there is an easy way to do the transition. for example: (pulling from stack flow)
@media screen and (max-width: 400px) { div { background: navy; } } @media screen and (min-width: 400px) { div { background: green; } } div { transition: background 2s linear; width: 400px; text-align: center; color: white; }
The transition does not go into the @media query but instead into the element that is going to be changing via the media query.
If you have any further questions please let me know and I can try and help
Marked as helpful - P@Chenxi96@cchivers
This looks really good, just some user experience ideas that you could maybe implement.
clicking the @(username) could take you to the GitHub user GitHub page. The four prompts at the bottoms could take you to different fields, you could take user to GitHub page, or to location using an api location or just post request to google maps and sending the user to the google page that returns.
Looks really good and appeared to be very good when it comes to responsiveness.
- @alegratis@cchivers
Looks really good...good job with everything. I would drop the weight down a little bit for the font but everything looked really good
- P@gab-holik@cchivers
Looks really good, I would drop the
font-weight
of the heading. Other than that it looks amazing. Keep up the great work!Marked as helpful - @upovibe
- @danielnunes13@cchivers
Awesome job, I would say with the code: Something this small does not need to be broken down into different files. You had 2 css files for the project that are involved in this project/challenge. The reset css file is ok and I think you should slowly get away from using to help teach about how to manipulate different CSS and how they interact together.
Marked as helpful - @eeakpan@cchivers
One of the best ways to center a card would be.
(html parent element) { display: flex; align-items: center; justify-contents: center; }
For the justify-contents you need to make sure you have a height set for your parent container. This will center an item.
Another pointer if you want to move your tag to the bottom is:
.attributes { position: absolute; bottom: 0; width: 100%; }
I do this just to move the attributes tag to the bottom of the page and out of my way.
- P@evengene@cchivers
Awesome job and looks amazing. My only feedback is against the design but would be that you could click anywhere in the starting circle to start and stop. That was the first I did was click in the middle on the time with no changes and it was not till later that I noticed the Start button.
It would also be cool if the color of the time ring changed depending on factors, whether that be on a break, or what not.
Another thing about the responsive to your site was that if viewing on a tablet or wide screen but not much height the page kind of breaks a little and I had to find the settings button by scrolling down. I think a single page site with one function like this should have everything viewable at all times, no matter the size of the screen.
Over all it was a great looking site.
Marked as helpful - @obinysol@cchivers
@obinysol
First things first your colors look really good. I would say that your line spacing looks a little off. I don't remember what the size is off the top of my head but I can look it up for you if you really want it.
When it comes to screen size I would keep it as small as can be and then grow it from there. Remember that you want to accommodate as many screen sizes as possible and as such go low then work you way larger.
For example I set my smallest at like 350px and then made sure that everything grew until I got to a max size that I wanted. Planning for all cases is the smallest option, is what I was taught, and then realize that you can always go bigger, but never smaller.
Marked as helpful - @NataMellado@cchivers
Awesome job, I actually learned something reading your code as I just did this challenge as well. I forgot about the
:marker
and did not use it and ended up doing it a very crude way.