CSS Demo | The Scientist

Hoppla

Sieht aus, als kämen Sie aus den USA

Zugang biencesusa.com

SCSS Variables

Colors

$mainColor var(--primary-color)
$brown var(--secondary-color)
$lightColor #7A6D64
$light-gray #82766D
$backgroundGray #FBF8F6
$backgroundFidelityOffer #F1E8DE
$error-color #A94442
$success-color #008000
$warning-color $error-color
$green-yuka-color #137B36
$mainColorDarker #c65500

Breakpoints

$uHd 2560px
$hd 1920px
$desktop 1600px
$laptop 1366px
$computer 1024px
$tablet 768px
$smartphone 510px

Global

$global-font-size 1.6rem
$body-font-color $brown
$selection-color $mainColor
$selection-font-color white

Styles

main-color
Utility example — hover / active / transform
light-gray
Utility example — hover / active / transform
text-uppercase
Utility example — hover / active / transform
text-none
Utility example — hover / active / transform
text-muted
Utility example — hover / active / transform
font-SouvenirITCbyBT
Utility example — hover / active / transform
mc-hover
Utility example — hover / active / transform
mc-active-style
Utility example — hover / active / transform
default-style
Example text — The quick brown fox jumps over the lazy dog.
h1-style
Example text — The quick brown fox jumps over the lazy dog.
h2-style
Example text — The quick brown fox jumps over the lazy dog.
no-h-title-style
Example text — The quick brown fox jumps over the lazy dog.
light-subtitle-style
Example text — The quick brown fox jumps over the lazy dog.
heavy-subtitle-style
Example text — The quick brown fox jumps over the lazy dog.
heavy-subtitle-uppercase-style
Example text — The quick brown fox jumps over the lazy dog.
form-label-style
Example text — The quick brown fox jumps over the lazy dog.
form-label-checkbox-style
Example text — The quick brown fox jumps over the lazy dog.
product-name-style
Example text — The quick brown fox jumps over the lazy dog.
promoted-product-name-style
price-style
Example text — The quick brown fox jumps over the lazy dog.
instead-price-style
Example text — The quick brown fox jumps over the lazy dog.
menu-label-style
Example text — The quick brown fox jumps over the lazy dog.
menu-suisse-style
Example text — The quick brown fox jumps over the lazy dog.
select-style
Example text — The quick brown fox jumps over the lazy dog.
small-text-style
Example text — The quick brown fox jumps over the lazy dog.
text-style
Example text — The quick brown fox jumps over the lazy dog.
text-bold-style
Example text — The quick brown fox jumps over the lazy dog.
menu-post-title-style
Example text — The quick brown fox jumps over the lazy dog.
product-step-style
Example text — The quick brown fox jumps over the lazy dog.
product-step-mc-style
Example text — The quick brown fox jumps over the lazy dog.
ppp-style
Example text — The quick brown fox jumps over the lazy dog.
product-page-h3-style
Example text — The quick brown fox jumps over the lazy dog.
lato-medium-title-style
Example text — The quick brown fox jumps over the lazy dog.
lato-bold-title-style
Example text — The quick brown fox jumps over the lazy dog.
lato-bold-slogan-style
Example text — The quick brown fox jumps over the lazy dog.
lato-medium-slogan-style
Example text — The quick brown fox jumps over the lazy dog.
sherborne-small-smaller-title-style
Example text — The quick brown fox jumps over the lazy dog.
sherborne-small-title-style
Example text — The quick brown fox jumps over the lazy dog.
sherborne-small-italic-title-style
Example text — The quick brown fox jumps over the lazy dog.
sherborne-title-style
Example text — The quick brown fox jumps over the lazy dog.
sherborne-title-italic-style
Example text — The quick brown fox jumps over the lazy dog.
sherborne-text-italic-style
Example text — The quick brown fox jumps over the lazy dog.
sherborne-slideshow-slogan-style
Example text — The quick brown fox jumps over the lazy dog.
sherborne-cta-slogan-style
Example text — The quick brown fox jumps over the lazy dog.
sherborne-big-title-style
Example text — The quick brown fox jumps over the lazy dog.
footer-links-title-style
Example text — The quick brown fox jumps over the lazy dog.
footer-copyright-style
Example text — The quick brown fox jumps over the lazy dog.
footer-address-style
Example text — The quick brown fox jumps over the lazy dog.
fidelity-offer-title-style
Example text — The quick brown fox jumps over the lazy dog.
shop-product-title-style
Example text — The quick brown fox jumps over the lazy dog.
shop-product-description-style
Example text — The quick brown fox jumps over the lazy dog.
shop-product-fake-discount-style
Example text — The quick brown fox jumps over the lazy dog.
shop-product-discount-style
Example text — The quick brown fox jumps over the lazy dog.
shop-product-base-price-style
Example text — The quick brown fox jumps over the lazy dog.
shop-product-price-style
Example text — The quick brown fox jumps over the lazy dog.
product-instead-style
Example text — The quick brown fox jumps over the lazy dog.
product-score-style
Example text — The quick brown fox jumps over the lazy dog.
link-mc-style
Link example
menu-top-link-style
Link example
menu-bottom-link-style
Link example
menu-link-style
Link example
menu-link-hover-style
Link example
menu-link-mc-style
Link example
menu-sub-link-style
Link example
menu-responsive-link-style
Link example
menu-responsive-lang-link-style
Link example
footer-link-hover-style
Link example
cta-slogan-style
CTA example
bottom-menu-bar-button-style
CTA example
bottom-menu-bar-link-style
CTA example
multi-cta-style
CTA example
add-to-cart-style
CTA example
add-to-cart-11-style
CTA example
add-to-cart-12-style
CTA example
add-to-cart-2-style
CTA example
fake-cta-style
CTA example
cta-1-style
CTA example
cta-2-style
CTA example
cta-3-style
CTA example
cta-4-style
CTA example
cta-important-style
CTA example
unavailable-style
CTA example
unavailable-2-style
CTA example