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

Community feedback

• 

  hitmorecode•6,680

  @hitmorecodePosted over 1 year 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

  Marked as helpful

  1

  ---

  

  KONY05•140

  @KONY05Posted over 1 year ago

  Thanks a lot, I think this little code has just boosted my coding skills, you've given me a piece of a puzzle, thanks a lot man. @hitmorecode

  0