diff --git a/static/onboardingCss/Card.css b/static/onboardingCss/Card.css index 4c2b29a..780fb55 100644 --- a/static/onboardingCss/Card.css +++ b/static/onboardingCss/Card.css @@ -1,58 +1,59 @@ -/* h1, h2, h3, h5 { - margin: 0; - } */ - - .cards-onboard { - align-items: flex-start; - justify-content: center; - } - - .card-onboard { - background: #fff; - width: 24em; - border-radius: 0.6em; - margin: 1em; - overflow: hidden; - cursor: pointer; - box-shadow: 0 13px 27px -5px hsla(240, 30.1%, 28%, 0.25), 0 8px 16px -8px hsla(0, 0%, 0%, 0.3), 0 -6px 16px -6px hsla(0, 0%, 0%, 0.03); - transition: all ease 200ms; - } - - .card-onboard:hover { - transform: scale(1.03); - box-shadow: 0 13px 40px -5px hsla(240, 30.1%, 28%, 0.12), 0 8px 32px -8px hsla(0, 0%, 0%, 0.14), 0 -6px 32px -6px hsla(0, 0%, 0%, 0.02); - } - - .card-onboard img { - width: 200px; - height: 200px; - /* object-fit: ; */ - } - - .card-onboard h2 { - color: #222; - margin-top: -0.2em; - line-height: 1.4; - font-size: 1.3em; - font-weight: 500; - font-family: 'Montserrat', sans-serif; - transition: all ease-in 100ms; - } - - .card-onboard p { - color: #777; - } - - .card-onboard h5 { - color: #bbb; - font-weight: 700; - font-size: 0.7em; - letter-spacing: 0.04em; - margin: 1.4em 0 0 0; - text-transform: uppercase; - } - - .card-body-onboard { - padding: 1.2em; - } - \ No newline at end of file +/* Remove margin from all heading tags */ +h1, h2, h3, h4, h5, h6 { + margin: 0; +} + +.cards-onboard { + align-items: flex-start; + justify-content: center; +} + +.card-onboard { + background: #fff; + width: 24em; + border-radius: 0.6em; + margin: 1em; + overflow: hidden; + cursor: pointer; + box-shadow: 0 13px 27px -5px hsla(240, 30.1%, 28%, 0.25), 0 8px 16px -8px hsla(0, 0%, 0%, 0.3), 0 -6px 16px -6px hsla(0, 0%, 0%, 0.03); + transition: all ease 200ms; +} + +.card-onboard:hover { + transform: scale(1.03); + box-shadow: 0 13px 40px -5px hsla(240, 30.1%, 28%, 0.12), 0 8px 32px -8px hsla(0, 0%, 0%, 0.14), 0 -6px 32px -6px hsla(0, 0%, 0%, 0.02); +} + +.card-onboard img { + width: 200px; + height: 200px; + /* Use "cover" to make sure the image fills the container without distortion */ + object-fit: cover; +} + +.card-onboard h2 { + color: #222; + margin-top: -0.2em; + line-height: 1.4; + font-size: 1.3em; + font-weight: 500; + font-family: 'Montserrat', sans-serif; + transition: all ease-in 100ms; +} + +.card-onboard p { + color: #777; +} + +.card-onboard h5 { + color: #bbb; + font-weight: 700; + font-size: 0.7em; + letter-spacing: 0.04em; + margin: 1.4em 0 0 0; + text-transform: uppercase; +} + +.card-body-onboard { + padding: 1.2em; +}