Clipboard landing page with basic CSS

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hey, great work on this one. Though I need to zoom out to view the desktop layout. Are you working on a large screen?

  The desktop layout is fine, the text are bit stretch don't you think. It will be awesome if you made the text have the same length like the original. The mobile layout on the other is great.

  For your query.

  Since you are transition the box-shadow right. To make it smooth you need to declare something like transition: box-shadow 0.3s ease, something like that in the element. But that won't work alone, why? Well in your css, you declare a box-shadow on the buttons right, to achieve those drop shadow effect, but in your :hover state, you are only hovering 1 box-shadow which is the black line. What you should add in the hover state, is the box-shadow that you want to show, then add also the box-shadow that you declared initially.

  So your transition would like this .

  .btn:hover {
      box-shadow: inset 0px 0px 2px 1px #000,
                              2px 3px 0px 0px hsl(171deg 66% 38%);
  }
  

  This way, you are transitioning both of them and not only one.

  My suggestions on this would be:

  1. Make the width of the text capped. In the original, the text are wrapped right, so it would be better if your text are wrapped as well. Referring to the text below the headings tags.

  2. On your footer links, you are transitioning the font-weight. But this creates some push effect as you can see. Instead of transitioning font-weight, you can transition like the text-shadow on it. Making an illusion that the text is getting bolder, by adding some shadow on both sides of it. Adding 1px both to positive and negative of both x and y axis. (Sorry if you are confused on this)

  But still, good work on this one. If you need more help, especially on that suggestion of mine, just drop it here okay^

  1

  ---

  

  Suleyman•360

  @SuleeymanPosted over 3 years ago

  First of all, thank you for taking time for me. According to me, I don't need to zoom out to view the desktop layout with my laptop ( I also inspected with different sizes, I never had this issue ).

  I didn't know about those tips with box-shadow and text-shadow. So I corrected now. I will for sure put them in practice from now on.

  0