@Da7ySubmitted over 4 years ago
how do i get the right box-shadow color?
Lailton Batista
@lailton-bAll comments
- @lailton-bPosted over 4 years ago
Hey, Da7y!!
Great job, I loved the result.
To pick the right box-shadow color you can use the color picker tool of some image editor, such as GIMP, Photoshop, etc. I personally like to use Figma to see the layouts.
1 - @isy-createsSubmitted over 4 years ago
Is it okay to use animation on the status bar?
@lailton-bPosted over 4 years agoHello, Isy!
For sure. I really liked the result, congratulations!
3 - @itkhanzSubmitted over 4 years ago
Hi, I attempted this challenge using mobile first approach and designed it using CSS Grid and Flexbox. Please feel free to checkout the design, and I would be happy to receive your feedback. Thanks.
@lailton-bPosted over 4 years agoHey, Ibtisam!
You did a great job, congratulations!
Just a tip: put the title "Stay productive, wherever you are" aligned to the left and it will be perfect!
0 - @dzm11Submitted over 4 years ago
Is it better to code mobile view or desktop?
@lailton-bPosted over 4 years agoHello, Piotr!
I personally prefer to do mobile first, I think it’s easier. Increasing the size seems easier to me than decreasing to fit the screen.
And great job, I loved your solution!
0 - @gulayyolcuSubmitted over 4 years ago
feedback is always welcome..
@lailton-bPosted over 4 years agoHello, Gülay Yolcu!
One problem I saw was the @media (max-width: 1440px) and (min-width: 961px)
When the screen goes over 1440px the layout breaks completely. Try removing (max-width: 1440px) and leaving only (min-width: 961px), this will prevent the site from breaking on larger screens.
Ex: @media (min-width: 961px) { content }
0 - @nabil-eeSubmitted almost 5 years ago
I'm pretty sure there are better ways than the way I did it, so pleas point my weaknesses out so that I can work on them.
@lailton-bPosted almost 5 years agoGreat job, Nabil, I really enjoyed it!! Just a tip: you could make the content occupy 100% of the screen on the desktop by adding height: 100vh in the html. This property will always calculate the maximum height of the screen and distribute correctly, it gives a better appearance!
2 - @archdronSubmitted almost 5 years ago
Hi, so this is my take on the challenge as a first-timer in HTML + CSS. Can't say if it is elegant or whatever, but there surely are some points for improvement. Could you, please, point them out for me?
@lailton-bPosted almost 5 years agoOMG, you sent it very well, wow!! The only thing I would say that you can improve is the shadows, do some research on material design and see how to make the shadows more real, it's really cool!
3 - @DangerCat88Submitted almost 5 years ago
This is only the second website I've made without having my hand held by a tutorial. I struggled with the responsiveness at first but then scrapped all of that and went with a mobile-first way of thinking. Learned a lot along the way. Let me know if you see anything that could be better. Thanks!
@lailton-bPosted almost 5 years agoCongratulations, it was very good!
To be more like the original you could wrap all the content inside two div's.
In the first div you would put width and height 100%, in the second you would measure exactly the size of the content given in the original design and assign it to it.
Returning to the first div you would put the same background color as the original design and assign the following properties: display: flex; justify-content: center; align-items: center;
That way the content would be aligned to the center and not occupying the entire screen, giving more comfort to the eyes. But there is a problem, if you do this it will probably break the website, so if you don't want to fix it, leave it at that, hahah!
1 - @vanribeiroSubmitted almost 5 years ago
The validation e-mail feature is working! But for some reason the
icon-error.svgdoesn't appear when the validation isfalse. Could you help me to fix this? 😁@lailton-bPosted almost 5 years agoFirst you need to add the error image to HTML, place it in the desired location with CSS and assign display: none to the element. After that you create in CSS an active class that assigns display: block to the element, finally add in the javascript code a function that adds the active class to the element of the error image whenever the email is invalid and remove that class whenever the email is valid.
If you want you can take a look at the code of my solution for this exercise, there I did this same procedure. Hope this helps (:
2 - @jakesingSubmitted almost 5 years ago
- I didn't figure out how to add the squigly graphics. Any tips on how to position them correctly?
- I didn't do the mobile designs. Are these supposed to be a separate file, or just a responsive addition to the same file?
@lailton-bPosted almost 5 years agoIf you want to take a look at my resolution to this challenge with google developer tools. I recommend that you do this in other resolutions whenever you don't know how to do something.
0 - @jakesingSubmitted almost 5 years ago
- I didn't figure out how to add the squigly graphics. Any tips on how to position them correctly?
- I didn't do the mobile designs. Are these supposed to be a separate file, or just a responsive addition to the same file?
@lailton-bPosted almost 5 years ago- You can add the images by placing position: relative in the parent element and positioning the images with position: absolute.
- Just a responsive addition.
0 - @maquindeSubmitted almost 5 years ago
Hello all!!
Any feedback would be much appreciated. Let me know your thoughts on what you would do different with the HTML or CSS. Any tricks you can fill me in on would be awesome :)
@lailton-bPosted almost 5 years agoYou could soften the shadows, to learn more about shadows I recommend that you search for Material Design. The rest was excellent, the only addendum I would make (if you try to make it as similar as possible) would be the colors of the titles and the font size.
2
