@beowulf1958
Posted
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!
