basic version with html CSS with a little bit of modification

Community feedback

• 

  P

  beowulf1958•1,450

  @beowulf1958Posted about 1 year ago

  I learned a lot from looking at your solution. I really like your box-shadow, as that is something I am learning about.

  A few suggestions: I noticed a lot of repetition in the code--another thing I am working on is keeping my CSS "DRY" (as in, don't repeat yourself.) Simply moving these into .result

  color: var(--color-white);  text-align: center; 
  
  

  will save you half a dozen or more lines of code, and will allow the cascade to do its thing. Also, I notice you didn't use linear-gradients. Try this for .result

  background: linear-gradient(
          to bottom,
          var(--color-bg-grad-1),
          var(--color-bg-grad-2)
          ); 
  
  

  And then the same thing for .result__numbers, with the other two gradient colors ( --color-bg-grad-3 and --color-bg-grad-4. (BTW, was --color-bg-grad-4 supposed to be transparent? the alpha is set to 0).

  Last but not least, the button seems to have some problems. Try this:

        .summary__button {
          width: 100%;
          height: 50px;
          margin-bottom: 0.5rem;
          background-color: var(--color-Dark-gray-blue);
          border-radius: 30px;
          font-size: 1rem;
          font-weight: 700;
          color: var(--color-white);
          cursor: pointer;
        }
        .summary__button:hover {
          background: linear-gradient(
          to bottom,
          var(--color-bg-grad-1),
          var(--color-bg-grad-2)
          );
        }
  

  Your HTML was very clean, easy to read and the CSS was well organized. Hope this helps, and keep coding!

  0

  ---

  

  OLGA•150

  @OLMA08Posted 8 months ago

  @beowulf1958 danke für Ihre Antwort ;-) solche Kommentare helfen mir mich weiter zu entwickeln und besser zu werden.

  0
• 

  OLGA•150

  @OLMA08Posted about 1 year ago

  weiter so ....wird schon

  0