The Schubert GmbH
Basic Styles

Die Liste mit den wichtigen Basic Styles. Falls etwas fehlt, bitte Bescheid geben.
Bei den Code-Tags handelt es sich ausschließlich um Beispiel. Manche Elemente,
wie z. B. Browser-Prefixes, sind nicht mit dabei.

Body

Normal basics für die font und background-color.

font-family: "BMW Type Global Pro", sans-serif;
background-color: rgba (249, 249, 249, 1);
font-size: 16px;

Logo

Die vier Schubert-Logos. Alle zusätzlichen Marken für die Navigation lagen mir nicht als SVG vor.
Bitte beim Kunden anfragen.


Schubert-Logo für Header und Footer (SVG)

Mobicenter24 und Schubert Motorsport für Footer (SVG)

ZIP Download

Colors

Die drei Farbgrundwerte in RGBA.

Blau: rgba(33, 58, 143, 1);
Dunkel: rgba(45,45,45,1);
Weiss: rgba(255,255,255,1);

Gradients

Farbverlauf und Schatten für z. B. Filterauswahl und Service-Cards.

background: linear-gradient(to bottom right, #e0e0e0 0%, #fcfcfc 100%);
opacity: 0.4;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);

Typography

Als Schriftpaket wird die BMW Type Global Pro vewendet mit den Schriftschnitten Bold und Regular. Beispiele können aus lizensrechtlichen Gründen nicht angezeigt werden.

H-Tags

H1

H2

H3

H4

H5
H6
h1 { font-size: 3.5rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1rem; }
h5 { font-size: 0.875rem; }
h6 { font-size: 0.75rem; }
P-Tags

Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque velit esse labore sit, delectus quia minus! Repudiandae, voluptates laudantium fugiat quae, sunt, quisquam earum assumenda ipsam est libero voluptate neque hic voluptas sapiente cupiditate eveniet esse nostrum laboriosam maxime. Porro.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque velit esse labore sit, delectus quia minus! Repudiandae, voluptates laudantium fugiat quae, sunt, quisquam earum assumenda ipsam est libero voluptate neque hic voluptas sapiente cupiditate eveniet esse nostrum laboriosam maxime. Porro.

font-size: 1rem;
line-height: 1.8125rem;
color: #4a4a4a;

Icons

Daten im SVG-Format.

ZIP Download

Schatten

Schatten für die einzelnen Module/Bilder.

Marken-Navigation
BMW
BMW
BMW
BMW
BMW
BMW
BMW
BMW
filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.15));
New & Events

Service
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.4);

Tabellen

Normale Tabelle

# Modell Getriebe Kraftstoff
1 M850i xDrive 730Ld Limousine 520i Touring
2 Schaltgetriebe Automatic Schaltgetriebe
3 Benzin Diesel Hybrid

Listen

Ordered und Unordered Lists

  1. First is first
  2. Second is second
  3. Third is third
  • First is first
  • Second is second
  • Third is third

Hover-Effects

Text-Links

Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque velit esse labore sit, delectus quia minus! Repudiandae, voluptates laudantium fugiat quae, sunt, quisquam earum assumenda ipsam est libero voluptate neque hic voluptas sapiente cupiditate eveniet esse nostrum laboriosam maxime. Porro.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque velit esse labore sit, delectus quia minus! Repudiandae, voluptates laudantium fugiat quae, sunt, quisquam earum assumenda ipsam est libero voluptate neque hic voluptas sapiente cupiditate eveniet esse nostrum laboriosam maxime. Porro.

:hover {
color: rgb(49, 89, 219);
}
Images
// normal image
transform: scale(1);
transition: .3s ease-in-out;

// hover image
transform: scale(1.1);
Button
.button {
background: rgba(33, 58, 143, 1);
border-radius: 0px;
border: 0px;
color: white;
font-weight: 600;
padding: 0.7rem 1.85rem;
font-size: 14px;
letter-spacing: 0.02rem;
transition: all 0.6s;
border-radius: 0px;
  &:hover {
   border-radius: 6px;
   background: rgb(49, 89, 219);
  }
}

Grid

In Adobe XD wurde das Bootstrap 4 Grid verwendet.

– ENDE –