Result Summary using HTML & CSS (Flexbox) with gradient styling

Community feedback

• 

  hitmorecode•7,540

  @hitmorecode

  Posted almost 2 years ago

  Nice well done. Just a few tips

  • The page is not responsive, you can do this by adding a media query in your css.

  @media only screen and (max-width: 560px) {
      .container {
          flex-direction: column;
          height: auto;
          width: 375px;
      }
  }
  

  This media query will cause an issue when switching to mobile. This issue can be easily solve by removing the width on both .left and .right. If you remove width: 280px; you'll have a nice responsive page.

  As for the background color on .left add this background-image: linear-gradient(to top, hsl(241, 81%, 54%), hsl(252, 100%, 67%));

  As for eye drop tool if you use firefox, firefox has one built in, the only problem is, the eye drop tool only shows #colors. If you are using windows you can install Microsoft Powertoys

  11

  Marked as helpful