Hiding Text - Teil 1

Hiding Text - Teil 1

Willkommen auf unserer einzigartigen Reise durch Innovation und Kreativität! Tauchen Sie ein und entdecken Sie, was hinter den Kulissen verborgen liegt. Doch Vorsicht: Nicht alles ist auf den ersten Blick sichtbar. Verborgene Schätze warten darauf, von Ihnen entdeckt zu werden. Sind Sie bereit, die Geheimnisse zu enthüllen?
Willkommen auf unserer Vorbereitungsseite für den bevorstehenden Onepager! Hier sammeln wir die besten visuellen Elemente, um Ihre Aufmerksamkeit zu fesseln und Ihre Website zum Leben zu erwecken. Tauchen Sie ein und lassen Sie sich von den ersten Schritten auf unserer Reise zur Erstellung eines faszinierenden Onepagers inspirieren.

Vorbereitung

Als erstes holen wir uns zwei Bilder und ein Video, z.B. von pixabay , kann natürlich von jeder Seite deiner Wahl geladen werden.
ich hab mich entschieden für diese Bilder/Video:

tropfen.mp4 7.21 MB


work.jpg 209 KB


banner-bottom.jpg 264 KB

Ein Logo brauchen wir noch und wir sind schonmal gut vorbereitet.
$ mkdir OnePager
$ cd OnePager
$ mkdir assets
$ cd assets
$ mkdir images
$ mkdir videos
In die entsprechenden Ordner bewegen oder kopieren wir jetzt die Bilder, das Video und das Logo. In dem editor der eigenen Wahl erstellen wir in dem OnePager Ordner eine index.html, in dem assets Ordner eine styles.css.

HTML-Grundgerüst

Nun erstellen wir das Grundgerüst in der html und binden unsere styles.css mit ein:
// index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>One Pager</title>
  <link rel="stylesheet" href="assets/styles.css" />
</head>
<body>
  
</body>
</html>
Als nächstes erstellen wir den header.
// index.html

<header>
      <div class="logo magnetic">
        <img src="assets/images/logo-white.webp" alt="b4um" />
      </div>
      <nav>
        <div class="hidden-link">
          <a
            class="nav-link hidden-link"
            href="#About"
            data-scroll="About"
            data-hover="About"
            ><span>About</span></a
          >
          <a
            class="nav-link hidden-link"
            href="#Work"
            data-scroll="Work"
            data-hover="Work"
            ><span>Work</span></a
          >
          <a
            class="nav-link hidden-link"
            href="#Contact"
            data-scroll="Contact"
            data-hover="Contact"
            ><span>Contact</span></a
          >
        </div>
      </nav>
    </header>
Dies ist ein HTML-Code für den Kopfbereich der Webseite. Er enthält ein Logo und eine Navigationsleiste. Das Logo ist in einem Container mit der Klasse "logo magnetic" enthalten, während die Navigationsleiste in einem Container mit der Klasse "hidden-link" enthalten ist. Die Navigationsleiste enthält Links zu den Abschnitten "About", "Work" und "Contact". Jeder Link hat eine Klasse "nav-link hidden-link" und enthält zusätzliche Datenattribute für Scroll- und Hover-Effekte.

Basis-Style

Nun erstellen wir einen basis style:
// assets/styles.css

:root {
  --bg: #272c3b;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

*,
::after,
::before {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
  margin: 0;
  background-color: var(--bg);
  color: #b7ab98;
}
body {
  margin-left: 1rem;
  margin-right: 1rem;
  font-family: var(--bs-font-sans-serif);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

@media (min-width: 768px) {
  body {
    margin: 0;
  }
}

a {
  color: #b7ab98;
  text-decoration: none;
}

a:hover {
  color: #b7ab98;
}

.bg {
  background-color: var(--bg) !important;
  position: relative;
  padding-bottom: 5rem;
}

p {
  text-transform: uppercase;
  font-weight: bold;
}

.align-items-center {
  align-items: center !important;
}

.justify-content-center {
  justify-content: center !important;
}
.min-vh-100 {
  min-height: 100vh !important;
}

.justify-content-start {
  justify-content: flex-start !important;
}

.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--bs-gutter-y) * -1);
  margin-right: calc(var(--bs-gutter-x) * -0.5);
  margin-left: calc(var(--bs-gutter-x) * -0.5);
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}
  • :root: Definiert globale CSS-Variablen, die im gesamten Dokument verwendet werden können.
  • *, ::after, ::before: Legt das Box-Modell für alle Elemente, Pseudo-Elemente und Pseudo-Klassen fest.
  • html: Definiert das Scrollverhalten der Webseite als sanftes Scrollen.
  • html, body: Legt die maximale Breite auf 100% der Ansichtsgröße fest, verhindert das seitliche Scrollen und setzt den Hintergrund auf eine benutzerdefinierte Farbe. Der Text wird in einer Sans-Serif-Schriftart dargestellt.
  • body: Setzt den linken und rechten Seitenabstand auf 1rem und definiert weitere Stileigenschaften wie Schriftgröße und Zeilenhöhe.
  • @media (min-width: 768px): Legt spezifische Stile für Bildschirme mit einer Mindestbreite von 768px fest.
  • a: Definiert die Farbe und die Textdekoration für Links.
  • .bg: Definiert eine Hintergrundfarbe und zusätzliche Layout-Stile für Elemente mit der Klasse "bg".
  • .row: Stellt ein Rasterlayout mit angegebenem Gutter (Abstand zwischen Spalten) her.
  • .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6: Definiert die Formatierung für Überschriften unterschiedlicher Hierarchieebenen.

Header-Navigation 

// assets/styles.css

header {
  background-color: transparent;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  color: #b7ab98;
  z-index: 100;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 1rem;
}
header .logo {
  padding: 1rem;
  color: #b7ab98;
}
header .hidden-content {
  width: 10rem;
}
header .logo img {
  height: 3rem;
  width: 3rem;
}
header nav div {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  right: 0;
  justify-content: end;
  text-align: end;
  align-items: end;
}
header nav a.nav-link,
header nav a {
  color: rgb(183, 171, 152, 0.5);
  text-decoration: none;
}
header nav a.nav-link,
header nav a {
  position: relative;
  overflow: hidden;
  display: block;
  text-align: center;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  padding: 0;
}
header nav a span {
  display: block;
  -webkit-transition: -webkit-transform 500ms
    cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: -webkit-transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
    -webkit-transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
header nav a:after {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  content: attr(data-hover);
  display: inline;
  text-align: center;
  -webkit-transition: top 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: top 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
header nav a.nav-link:hover,
header nav a.is-active,
header nav a:hover {
  color: #b7ab98;
  font-weight: bold;
}
header nav a:hover span {
  color: #b7ab98;
  font-weight: bold;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}
header nav a:hover:after {
  top: 0;
}
header nav a:active {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}
@media (min-width: 1248px) {
  header .logo {
    padding: 4rem;
  }
  header nav div {
    padding: 4rem;
  }
}
  • header: Definiert den Header-Bereich der Webseite. Er wird oben auf der Seite platziert und bleibt beim Scrollen fixiert.
  • .logo: Stildefinitionen für das Logo innerhalb des Headers.
  • .hidden-content: Stildefinitionen für versteckte Inhalte im Header.
  • nav div: Stildefinitionen für den Navigationsbereich im Header.
  • nav a.nav-link: Stildefinitionen für die Navigationslinks im Header.
  • nav a: Weitere Stildefinitionen für Navigationslinks.
  • nav a span: Stildefinitionen für den Text innerhalb der Navigationslinks.
  • nav a:after: Definiert den Pseudo-Element-Stil für den Hover-Effekt der Navigationslinks.
  • Medienabfragen (@media (min-width: 1248px)): Definiert spezifische Stiländerungen für Bildschirme mit einer Mindestbreite von 1248px.

1.mp4 107 KB

Hero-Abschnitt

Den Header incl. Logo und eine nice Navigation haben wir jetzt. Jetzt folgt der Hero Abschnitt.
// index.html
 
   <main class="bg">
      <div class="content">
        <!-- -------------------------------- hero --------------------------------- -->
        <div
          id="About"
          class="row justify-content-center align-items-center min-vh-100"
        >
          <div class="bg-video">
            <div class="bg-parallax video">
              <video
                data-parallax="0.5"
                id="bg-video"
                class="parallax-img"
                autoplay=""
                muted=""
                playsinline=""
                loop=""
                preload="auto"
                src="assets/videos/tropfen.mp4"
              ></video>
              <div class="parallax-overlay"></div>
            </div>
          </div>
          <div class="display">
            <p class="about_content_label text-align-center text-color">b4um</p>
            <div class="text-center">Making</div>
            <div class="text-center"><strong>good</strong></div>
            <div class="text-center"><strong>shit</strong></div>
            <div class="text-center">since</div>
            <div class="text-center">2023</div>
          </div>
        </div>
        <!-- ------------------------------ hero ende ------------------------------ -->
      </div>
    </main>
  • <main class="bg">: Definiert den Hauptbereich der Webseite mit einem Hintergrund.
  • <div class="content">: Ein Container für den Inhalt des Hauptbereichs.
  • <div id="About" class="row justify-content-center align-items-center min-vh-100">: Ein Abschnitt mit der ID "About", der eine Zeile mit zentrierten Inhalten und einer Mindesthöhe von 100% des sichtbaren Bereichs enthält.
  • <div class="bg-video">: Ein Container für das Hintergrundvideo.
  • <video>: Das Videoelement mit verschiedenen Attributen wie Autoplay, Muted, Loop und Quelle (src).
  • <div class="display">: Ein Container für den Textinhalt des Abschnitts.
  • <p class="about_content_label text-align-center text-color">b4um</p>: Ein Absatz mit einem Label.
  • Weitere <div>-Elemente mit Textinhalten.
// assets/styles.css

.bg-img,
.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  margin: auto;
  right: 0;
  height: 100vh;
}
.bg-img .bg-parallax,
.bg-video .bg-parallax {
  display: block;
  -webkit-transform: translate3d(0, var(--offset-parallax), 0) rotate(0);
  transform: translate3d(0, var(--offset-parallax), 0) rotate(0);
  will-change: transform;
  justify-content: center;
  align-items: center;
}
.bg-img .img img.parallax-img,
.bg-video .video video {
  height: 100vh;
  object-fit: cover;
  width: 100vw;
  position: relative;
}
.bg-img .img .parallax-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg);
  opacity: 0.5;
  z-index: 100;
}
#Contact,
#Work,
#About {
  position: relative;
  overflow: hidden;
}
.parallax-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: -1;
  transform: translateZ(0);
}
.parallax-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}
@media (min-width: 1248px) {
  .bg-img,
  .bg-video {
    max-height: 100vh;
  }
  .bg-img .img img.parallax-img,
  .bg-video .video video {
    max-height: 100vh;
  }
}
  • .bg-img, .bg-video: Definiert die Stilattribute für den Hauptcontainer von Hintergrundbildern und -videos.
  • .bg-img .bg-parallax, .bg-video .bg-parallax: Stilattribute für den Parallaxeneffekt von Hintergrundbildern und -videos.
  • .bg-img .img img.parallax-img, .bg-video .video video: Definiert die Stilattribute für die Hintergrundbilder und -videos selbst.
  • .bg-img .img .parallax-overlay: Stilattribute für ein Überlagerungselement über dem Hintergrundbild.
  • #Contact, #Work, #About: Definiert die Positionierung und das Überlaufverhalten für bestimmte Abschnitte der Webseite.
  • .parallax-img, .parallax-overlay: Zusätzliche Stilattribute für den Parallaxeneffekt und das Überlagerungselement.
  • Medienabfrage (@media (min-width: 1248px)): Definiert spezifische Stiländerungen für Bildschirme mit einer Mindestbreite von 1248px, um sicherzustellen, dass die Hintergrundbilder und -videos nicht über die Höhe des sichtbaren Bereichs hinausragen.
Das Video haben wir jetzt schonmal drin incl. der Vorbereitung von den images. Unser Hero text ist allerdings verschwunden was wir jetzt beheben.
// assets/styles.css

.about_content_label {
  text-transform: uppercase;
  font-size: 0.875rem;
  line-height: 180%;
  letter-spacing: 0.5em;
  display: block;
  font-family: Avant Garde, sans-serif;
  font-style: normal;
  font-weight: 700;
  z-index: 0;
  position: relative;
  padding-left: 1rem;
  max-width: 1248px;
  margin: auto;
  margin-bottom: 1.875rem;
  text-align: left;
}
.text-align-center {
  text-align: center;
}
.text-color {
  color: rgb(183, 171, 152, 1);
}
.text-center {
  font-size: 4rem;
  font-weight: 600;
  line-height: 100%;
  width: 100%;
  color: rgb(183, 171, 152, 1);
  background: linear-gradient(to right, #b6b6b6, #b6b6b6) no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 0%;
  transition: background-size cubic-bezier(0.1, 0.5, 0.5, 1) 0.5s;
  display: block;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: relative;
  max-width: 1248px;
  margin: auto;
  text-align: center;
  text-transform: uppercase;
}
strong {
  color: #eb5939;
}
@media (min-width: 1248px) {
  .about_content_label {
    padding-left: 0;
  }
  .text-center {
    font-size: 5vw;
  }
}
  • .about_content_label: Definiert Stile für das Etikett "about_content_label", einschließlich Texttransformation, Schriftgröße, Zeilenhöhe, Buchstabenabstand, Schriftart und Positionierung.
  • .text-align-center: Legt die Textausrichtung auf zentriert fest.
  • .text-color: Definiert die Textfarbe.
  • .text-center: Definiert Stile für zentrierten Text, einschließlich Schriftgröße, Schriftgewicht, Farbverlauf und Übergangseffekte. Der Text wird zentriert ausgerichtet und durch einen Farbverlauf stilisiert, der beim Hover-Effekt animiert wird.
  • strong: Definiert Stile für fettgedruckten Text.
  • Medienabfrage (@media (min-width: 1248px)): Definiert spezifische Stiländerungen für Bildschirme mit einer Mindestbreite von 1248px.

1.png 3.31 MB

About me 

// index.html

<div class="row justify-content-center align-items-center min-vh-100">
  <div class="display">
    <p class="about_content_label text-color">About me</p>
    <div class="text no-padding no-border text-align-left text-row">
      <span
        >Ich bin ein <strong>selektiv</strong>
        <strong>qualifizierter</strong> Produkt</span
      >
    </div>
    <div class="text no-padding no-border text-align-left text-row">
      <span>Designer mit starkem Fokus auf</span>
    </div>
    <div class="text no-padding no-border text-align-left text-row">
      <span>der Erstellung von hochwertigen &amp;</span>
    </div>
    <div class="text no-padding no-border text-align-left text-row">
      <span>wirkungsvollen digitalen Erlebnissen.</span>
    </div>
  </div>
</div>
Dieser HTML-Code definiert einen Abschnitt ("row") auf einer Webseite, der vertikal und horizontal zentriert ist und eine Mindesthöhe von 100% des sichtbaren Bereichs einnimmt. Innerhalb dieses Abschnitts befindet sich ein Container ("display"), der den Textinhalt für den Abschnitt enthält. Der Text beginnt mit einem Absatz ("about_content_label"), der den Titel "About me" enthält.
// assets/styles.css

.text {
  font-size: 2rem;
  font-weight: 700;
  line-height: 100%;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  width: 100%;
  color: rgb(183, 171, 152, 0.2) !important;
  background: linear-gradient(to right, #b6b6b6, #b6b6b6) no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 0%;
  transition: background-size cubic-bezier(0.1, 0.5, 0.5, 1) 0.5s;
  border-bottom: 1px solid #2f2b28;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: auto;
  text-align: left;
  text-shadow: 1px 1px 0 rgba(var(--bg), 0.9);
}
.no-padding {
  padding: 0;
}
.no-border {
  border: none;
}
.text-align-left {
  text-align: left;
  justify-content: start;
}
.text-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: auto;
}
@media (min-width: 1248px) {
  .about_content_label {
    padding-left: 0;
  }
  .text-center {
    font-size: 4vw;
  }
  .text {
    font-size: 4vw;
    padding-left: 0rem !important;
    padding-right: 0rem !important;
  }

  .text-row {
    width: 100%;
    max-width: 1248px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: auto;
  }
}
  • .text: Definiert den Stil für Textelemente. Die Schriftgröße ist 2rem mit einem Schriftgewicht von 700. Der Text hat eine Linienhöhe von 100% und wird mit einem linearen Farbverlauf hinterlegt. Der Farbverlauf wird durch den Text durchgeführt, wodurch ein Effekt entsteht, der den Text durchsichtig erscheinen lässt. Es gibt auch einen Übergangseffekt für den Farbverlauf. Zusätzlich hat der Text einen unteren Rand mit einer soliden Linie. Die Ausrichtung des Textes ist links, und es gibt einen leichten Textschatten.
  • .no-padding: Entfernt den Innenabstand für das Element.
  • .no-border: Entfernt den Rahmen für das Element.
  • .text-align-left: Legt die Ausrichtung des Textes auf links fest.
  • .text-row: Definiert einen Textblock, der in einer Zeile platziert ist und den verfügbaren Raum zwischen den Elementen gleichmäßig verteilt.
  • .text: Die Schriftgröße wird auf 4vw (Prozent der Bildschirmbreite) geändert, und der seitliche Innenabstand wird auf 0rem gesetzt.
  • .text-row: Die maximale Breite wird auf 1248px begrenzt, und der verfügbare Raum zwischen den Elementen wird gleichmäßig verteilt. Die Ausrichtung und Ausrichtung bleiben gleich.

2.png 858 KB

Versteckter Text

Jetzt kommt ein Abschnitt mit verstecktem Text den wir durch einfache css erstellen, erst erstellen wir eine html.
// index.html

<div class="row justify-content-center align-items-center min-vh-100">
  <div class="display-row width-100">
    <p class="about_content_label text-color">What i do</p>
    <div class="text uppercase hidden-link">
      <div class="text-row">3D</div>
      <div class="span">
        <div class="text-row">
          <div class="big">3D</div>
          <div class="smal">
            Ich kann alles produzieren, was mein 16-Zoll-Laptop rendern
            kann.
          </div>
        </div>
      </div>
    </div>
    <div class="text uppercase hidden-link">
      <div class="text-row">Visuell</div>
      <div class="span">
        <div class="text-row">
          <div class="big">Visuell</div>
          <div class="smal">
            Ich suche im Internet nach visuellen Referenzen und
            kombiniere sie dann, um meine eigenen Arbeiten zu erstellen.
          </div>
        </div>
      </div>
    </div>
    <div class="text uppercase hidden-link">
      <div class="text-row">Bewegung</div>
      <div class="span">
        <div class="text-row">
          <div class="big">Bewegung</div>
          <div class="smal">
            Ich verwende ausgefallene Bewegungen, die mein Design
            interessanter erscheinen lassen, als es tatsächlich ist.
          </div>
        </div>
      </div>
    </div>
    <div class="text uppercase hidden-link">
      <div class="text-row">Produkt</div>
      <div class="span">
        <div class="text-row">
          <div class="big">Produkt</div>
          <div class="smal">
            Ich nutze gängige Design-Best Practices, teste und
            überarbeite sie, bis es funktioniert (hoffentlich).
          </div>
        </div>
      </div>
    </div>
    <div class="text uppercase hidden-link">
      <div class="text-row">Tutorial</div>
      <div class="span">
        <div class="text-row">
          <div class="big">Tutorial</div>
          <div class="smal">
            Ich dachte, ich würde Millionen von Dollar mit YouTube
            verdienen, aber das habe ich nicht.
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
  • <div class="row justify-content-center align-items-center min-vh-100">: Dies definiert einen Container, der horizontal und vertikal zentriert ist und mindestens die Höhe des sichtbaren Bereichs einnimmt. Dieser Container dient als Hauptbereich für den Inhalt.
  • <div class="display-row width-100">: Dies ist ein weiterer Container, der den gesamten verfügbaren Platz innerhalb des vorherigen Containers einnimmt. In diesem Container werden alle Inhaltsblöcke platziert.
  • <p class="about_content_label text-color">Was ich mache</p>: Dies ist ein Absatz, der als Titel oder Überschrift für den Abschnitt dient. Er beschreibt, was der Benutzer tut.
  • Die nachfolgenden <div class="text uppercase hidden-link">...</div>-Blöcke definieren verschiedene Aspekte dessen, was der Benutzer macht. Jeder Block enthält eine Überschrift (z. B. "3D", "Visuell") und eine Beschreibung, die von einem großen Text (wie "3D") und einem kleineren Text (wie "Ich kann alles produzieren, was mein 16-Zoll-Laptop rendern kann.") begleitet wird.
  • Innerhalb jedes Textblocks gibt es einen <div class="text-row">...</div>, der den Textinhalt enthält und in einer Zeile angezeigt wird.
  • <div class="span">...</div>: Dies ist ein Container für den Textinhalt in jedem Textblock, der den Inhalt organisiert und formatiert, unser versteckter Text.
// assets/styles.css

.row > * {
  width: auto !important;
}
.width-100 {
  width: 100% !important;
}
.uppercase {
  text-transform: uppercase;
}
.span {
  position: absolute;
  width: 100%;
  min-height: 100%;
  background-color: #eb5939;
  color: #0d0d0d;
  clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
  transform-origin: center;
  transition: all cubic-bezier(0.1, 0.5, 0.5, 1) 0.4s;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  /* max-width: 1248px; */
  margin: auto;
  text-align: left;
}
.text-row:hover .span,
.text:hover > .span {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.big {
  font-size: 1.5rem;
  line-height: 100%;
  text-transform: uppercase;
  padding-left: 1rem;
}
.smal {
  font-size: 1rem;
  padding-right: 2rem;
  letter-spacing: 0em;
  width: 60vw;
  height: auto;
  line-height: 1.2rem;
  text-transform: none;
}
.h3 {
  margin-top: -12px !important;
  font-size: 1.5rem !important;
}

.text div.h3 {
  width: 5rem;
  line-height: 1rem;
  margin-top: -26px !important;
}
@media (min-width: 1248px) {
  .big {
    font-size: 4vw;
    padding-left: 0rem;
  }
  .smal {
    width: 30vw;
  }
  .h3 {
    margin-top: -12px !important;
    font-size: 3vw !important;
  }
  .text div.h3 {
    width: 15rem;
    margin-top: -26px !important;
  }
}
  1. .row > * { width: auto !important; }: Diese Regel setzt die Breite aller direkten Nachkommen von Elementen mit der Klasse "row" auf "auto". Das !important-Schlüsselwort überschreibt alle vorherigen Stile, was bedeutet, dass diese Regel Vorrang hat.
  2. .width-100 { width: 100% !important; }: Diese Regel setzt die Breite aller Elemente mit der Klasse "width-100" auf 100%. Auch hier wird das !important-Schlüsselwort verwendet, um sicherzustellen, dass diese Regel Vorrang hat.
  3. .uppercase { text-transform: uppercase; }: Diese Regel wendet die CSS-Eigenschaft text-transform auf die Klasse "uppercase" an, um den Text in Großbuchstaben umzuwandeln.
  4. .span { ... }: Diese Regel definiert Stile für Elemente mit der Klasse "span". Sie legt die Position auf absolut fest und füllt das gesamte verfügbare Platz ein. Der Hintergrund ist rot (#eb5939) und der Text ist schwarz (#0d0d0d). Die Form des Elements wird durch clip-path definiert, was eine diagonal geteilte Form erzeugt. Es verwendet Flexbox für die Ausrichtung des Inhalts.
  5. .text-row:hover .span, .text:hover > .span { ... }: Diese Regel ändert den Ausschnittspfad des Elements mit der Klasse "span", wenn sich der Mauszeiger über dem Text befindet. Dadurch ändert sich die Form des Elements, was eine animierte Effekt erzeugt und unseren unsichtbaren Text sichtbar macht. 
  6. .big { ... }: Diese Regel definiert Stile für Textelemente mit der Klasse "big", einschließlich der Schriftgröße, des Zeilenabstands und der Großschreibung.
  7. .smal { ... }: Diese Regel definiert Stile für Textelemente mit der Klasse "smal", einschließlich der Schriftgröße, des Zeilenabstands, des Abstandes zwischen Buchstaben und der Breite des Elements.
  8. @media (min-width: 1248px) { ... }: Diese Regel definiert Stile, die nur auf Bildschirmen mit einer Breite von mindestens 1248 Pixeln angewendet werden. Es ändert die Schriftgröße und andere Stileigenschaften für Elemente mit den Klassen "big", "smal" und "h3" basierend auf der Bildschirmbreite.

2.mp4 2.78 MB

Work (Experience) 

// index.html

<div
  id="Work"
  class="row justify-content-center align-items-center min-vh-100"
>
  <div class="bg-img">
    <div class="bg-parallax img">
      <img class="parallax-img" src="assets/images/work.jpg" />
      <div class="parallax-overlay"></div>
    </div>
  </div>
  <div class="display text-parallax">
    <p class="about_content_label text-color">Experience</p>
    <div class="text no-padding no-border text-align-left text-row">
      <span>
        Über
        <strong>ein Jahrzehnt</strong>
        an Erfahrung</span
      >
    </div>
    <div class="text no-padding no-border text-align-left text-row">
      in interaktives Design und
    </div>
    <div class="text no-padding no-border text-align-left text-row">
      Zusammenarbeit mit einigen der talentiertesten Personen in der
      Branche
    </div>
  </div>
</div>
  • <div id="Work" class="row justify-content-center align-items-center min-vh-100">: Dies definiert einen Container, der horizontal und vertikal zentriert ist und mindestens die Höhe des sichtbaren Bereichs einnimmt. Dieser Container dient als Hauptbereich für den Inhalt und hat die eindeutige ID "Work".
  • <div class="bg-img">: Dies ist ein Container, der ein Hintergrundbild enthält.
  • <div class="bg-parallax img">: Dies ist ein weiterer Container für das Hintergrundbild, der einen Parallaxeneffekt hat. Das bedeutet, dass sich das Bild langsamer bewegt als der Rest des Inhalts, wenn der Benutzer die Seite scrollt.
  • <img class="parallax-img" src="assets/images/work.jpg" />: Dies ist das eigentliche Bild, das als Hintergrund verwendet wird.
  • <div class="parallax-overlay"></div>: Dies ist eine Überlagerung über dem Hintergrundbild, die den Text besser lesbar machen kann.
  • <div class="display text-parallax">: Dies ist ein Container für den Textinhalt, der auch einen Parallaxeneffekt hat. Der Text bewegt sich beim Scrollen langsamer als der Rest des Inhalts.
  • <p class="about_content_label text-color">Erfahrung</p>: Dies ist ein Absatz, der als Titel oder Überschrift für den Abschnitt dient. Er beschreibt das Thema des folgenden Textinhalts, nämlich die Erfahrung des Benutzers.
  • Die nachfolgenden <div class="text no-padding no-border text-align-left text-row">...</div>-Blöcke definieren verschiedene Aspekte der Erfahrung des Benutzers. Jeder Block enthält eine Beschreibung, die von einem starken Text begleitet wird, um bestimmte Aspekte hervorzuheben.

Globale Einstellungen

Nun haben wir ein kleines problem was wir ohne weiteres beheben können, der text ist fast durchsichtig was wir für ein späteren Augenblick brauchen werden aber nicht in diesem tutorial. Um zu zeigen wie leicht es ist ändere ich es erst jetzt und zeige somit auch en Vorteil von dieser Einstellung.
// assets/styles.css

:root {
  --bg: #272c3b;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --color-body: #b7ab98;
  --color-text: rgb(183, 171, 152, 1);
  --color-text-transparent: rgb(183, 171, 152, 0.2);
  --color-text-navi: rgb(183, 171, 152, 0.5);
}
Jetzt ist es vorbereitet, am besten du suchst nach den Farben und tauschst es durch den Namen aus so brauchst du nur an einer Stelle die Werte zu ändern und hast es global.
Wir ändern den Wert vorübergehend:
// assets/styles.css

--color-text-transparent: rgb(183, 171, 152, 1);

Experience
Experience

History 

// index.html

<div class="row justify-content-center align-items-center min-vh-100">
  <div class="display-row width-100">
    <p class="about_content_label text-color">History</p>
    <div class="text uppercase hidden-link">
      <div class="text-row justify-content-start">
        <div class="h3">Jetzt</div>
        <div class="simple-masking">
          <h3 class="h3">Design-Leiter</h3>
          <div class="font-400">Fantasy Interactive</div>
        </div>
      </div>
      <div class="span">
        <div class="text text-black">
          <div class="text-row justify-content-start">
            <div class="h3">Jetzt</div>
            <div class="simple-masking">
              <h3 class="h3">Selbstständiger Designer</h3>
              <div class="font-400">Fantasy Interactive</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="text uppercase hidden-link">
      <div class="text-row justify-content-start">
        <div class="h3">2016</div>
        <div class="simple-masking">
          <h3 class="h3">Senior Produkt-Designer</h3>
          <div class="font-400">Interactive Labs</div>
        </div>
      </div>
      <div class="span">
        <div class="text text-black">
          <div class="text-row justify-content-start">
            <div class="h3">2016</div>
            <div class="simple-masking">
              <h3 class="h3">Regulärer Webdesigner</h3>
              <div class="font-400">Interactive Labs</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="text uppercase hidden-link">
      <div class="text-row justify-content-start">
        <div class="h3">2012</div>
        <div class="simple-masking">
          <h3 class="h3">Kunstdirektor</h3>
          <div class="font-400">DR Com Group</div>
        </div>
      </div>
      <div class="span">
        <div class="text text-black">
          <div class="text-row justify-content-start">
            <div class="h3">2012</div>
            <div class="simple-masking">
              <h3 class="h3">Photoshop-Zeichner</h3>
              <div class="font-400">DR Com Group</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="text uppercase hidden-link">
      <div class="text-row justify-content-start">
        <div class="h3">2009</div>
        <div class="simple-masking">
          <h3 class="h3">Flash-Designer</h3>
          <div class="font-400">DR Com Group</div>
        </div>
      </div>
      <div class="span">
        <div class="text text-black">
          <div class="text-row justify-content-start">
            <div class="h3">2009</div>
            <div class="simple-masking">
              <h3 class="h3">Jurassic-Designer</h3>
              <div class="font-400">DR Com Group</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
Dieser Code definiert eine Abschnittsseite mit dem Titel "History". Der Abschnitt besteht aus mehreren Teilen, die in vertikaler Ausrichtung zentriert sind und sich auf der ganzen Bildschirmhöhe erstrecken (mindestens 100 % der sichtbaren Höhe). Die Elemente innerhalb des Abschnitts sind in einer Reihe zentriert und vertikal ausgerichtet.

Jeder Abschnitt enthält eine Beschreibung einer vergangenen beruflichen Position oder Rolle. Jede Beschreibung enthält das Jahr, in dem die Rolle begonnen hat, gefolgt von einer Bezeichnung für die Position und dem Unternehmen, für das gearbeitet wurde.

Die Beschreibungen sind in zwei Teile unterteilt: ein Teil mit weißem Text und ein Teil mit schwarzem Text. Der schwarze Text wird angezeigt, wenn der Mauszeiger über den Abschnitt bewegt wird. Die Beschreibungen sind in Großbuchstaben formatiert und enthalten auch eine versteckte Verknüpfung (hidden-link), die bei Interaktion sichtbar wird.

// assets/styles.css

.text-black {
  color: #0d0d0d !important;
}
.simple-masking {
  text-transform: none;
}

.simple-masking .font-400 {
  font-size: 0.85rem;
  line-height: 1rem;
}

4.png 846 KB 

// index.html

<div class="row justify-content-center align-items-center min-vh-100">
  <div class="display">
    <p class="about_content_label text-color">Clients</p>
    <div class="text no-padding no-border text-align-left text-row">
      Ich habe mit einigen der innovativsten Branchenführer
      zusammengearbeitet, um ihre erstklassigen Produkte aufzubauen.
    </div>
    <div class="text no-padding no-border text-align-left text-row">
      <span><strong>innovative</strong> Industrieführer</span>
    </div>
    <div class="text no-padding no-border text-align-left text-row">
      zu helfen, ihre erstklassigen Produkte aufzubauen.
    </div>
  </div>
</div>

Clients

  • <div class="row justify-content-center align-items-center min-vh-100">: Dies ist ein Container, der in der Regel verwendet wird, um Inhalte horizontal auszurichten und vertikal zu zentrieren. Die Klasse min-vh-100 sorgt dafür, dass der Container mindestens die volle Höhe des Viewports einnimmt.
  • <div class="display">: Dies ist ein Container, der den Hauptinhalt des Abschnitts enthält.
  • <p class="about_content_label text-color">Clients</p>: Ein Abschnittsüberschrift, die den Titel "Clients" trägt und in der Regel den Inhalt darunter beschreibt.
  • <div class="text no-padding no-border text-align-left text-row">: Dies sind Absätze oder Textblöcke, die den Kunden oder Klienten beschreiben. Sie haben keine Innenpolsterung (no-padding) und keine Rahmen (no-border) und sind links ausgerichtet.
  • <span><strong>innovative</strong> Industrieführer</span>: Ein Teil des Textes, der besonders hervorgehoben wird, indem er fett gedruckt wird. In diesem Fall wird das Wort "innovative" betont.

5.png 940 KB 

// index.html

<div
  class="row justify-content-center align-items-center min-vh-100"
  style="position: relative"
>
  <div class="display-row width-100">
    <div class="text uppercase hidden-link">
      <div class="text-row">Ford</div>
      <div class="span">
        <div class="text-row">
          <div class="big">Ford</div>
          <div class="smal">
            Arbeit an der nächsten Generation der HMI-Erfahrung ohne Fahrerfahrung.
          </div>
        </div>
      </div>
    </div>
    <div class="text uppercase hidden-link">
      <div class="text-row">Ufc</div>
      <div class="span">
        <div class="text-row">
          <div class="big">Ufc</div>
          <div class="smal">
            Entwicklung der Zukunft des UFC-Sportökosystems, obwohl ich kein Sportfan bin.
          </div>
        </div>
      </div>
    </div>
    <div class="text uppercase hidden-link">
      <div class="text-row">Lincoln</div>
      <div class="span">
        <div class="text-row">
          <div class="big">Lincoln</div>
          <div class="smal">
            Definition des visuellen Konzepts und der Designsprache für den Lincoln Zephyr 2022, obwohl ich ihn nie persönlich gesehen habe.
          </div>
        </div>
      </div>
    </div>
    <div class="text uppercase hidden-link">
      <div class="text-row">Royal caribbean</div>
      <div class="span">
        <div class="text-row">
          <div class="big">Royal caribi</div>
          <div class="smal">
            Ich war nur eine Person in einem riesigen Team, das ein ganzes Royal Caribbean-Ökosystem geschaffen hat.
          </div>
        </div>
      </div>
    </div>
    <div class="text uppercase hidden-link">
      <div class="text-row">SleepiQ</div>
      <div class="span">
        <div class="text-row">
          <div class="big">SleepiQ</div>
          <div class="smal">
            Entwickelte ein Produkt für über 1 Million Benutzer und nutzte dabei meine beste persönliche Erfahrung: das Schlafen.
          </div>
        </div>
      </div>
    </div>
    <div class="text uppercase hidden-link">
      <div class="text-row">NFL</div>
      <div class="span">
        <div class="text-row">
          <div class="big">NFL</div>
          <div class="smal">
            Erforschung der Zukunft des Fantasy-Footballs, während ich mich in einem Land befand, in dem Fußball eine völlig andere Sportart bedeutet.
          </div>
        </div>
      </div>
    </div>

  </div>
</div>
Dieser Code definiert eine HTML-Struktur, die eine Liste von Projekten oder Kunden darstellt, mit denen der Designer zusammengearbeitet hat. Hier ist eine Erklärung der Struktur:

  • Die äußere div hat die Klassen "row", "justify-content-center", "align-items-center", "min-vh-100" und "display-row". Diese Klassen werden normalerweise für das Layout und die Ausrichtungseigenschaften verwendet. Die min-vh-100 Klasse sorgt dafür, dass die Höhe mindestens die volle Bildschirmhöhe beträgt. Die position: relative Inline-Stil definiert die Positionierungseigenschaften.
  • Innerhalb dieser äußeren div befindet sich eine div mit der Klasse "image-3d", die ein Bild des Planeten anzeigt.
  • Anschließend folgt eine div mit der Klasse "display-row width-100". Diese div enthält den eigentlichen Inhalt.
  • Innerhalb dieser div befinden sich mehrere div-Elemente mit den Klassen "text uppercase hidden-link", die jeweils ein Projekt oder einen Kunden repräsentieren.
  • Jede dieser "hidden-link" divs enthält zwei weitere div-Elemente: eine mit der Klasse "text-row", die den Namen des Kunden oder Projekts enthält, und eine andere mit der Klasse "span", die weitere Details enthält.
  • Die "span" div enthält zwei weitere divs: eine mit der Klasse "big", die den Namen des Kunden oder Projekts in Großbuchstaben enthält, und eine mit der Klasse "smal", die zusätzliche Details oder Beschreibungen enthält.

Insgesamt handelt es sich also um eine strukturierte Darstellung von Projekten oder Kunden, wobei der Name jedes Projekts oder Kunden in Großbuchstaben angezeigt wird und weitere Details zu jedem Projekt oder Kunden darunter angezeigt werden.

6.png 810 KB

Contact 

// index.html

<div
  id="Contact"
  class="row justify-content-center align-items-center min-vh-100"
>
  <div class="bg-img">
    <div class="bg-parallax img">
      <img class="parallax-img" src="assets/images/banner-bottom.jpg" />
      <div class="parallax-overlay"></div>
    </div>
  </div>
  <div class="display">
    <p class="about_content_label text-color text-align-center">
      Mein Motto
    </p>
    <div class="text no-padding uppercase text-center no-border">
      Gutes Design
    </div>
    <div class="text no-padding uppercase text-center no-border">
      ist ehrlich
    </div>
    <p class="about_content_label text-color text-align-center">
      Dieter Rams
    </p>
  </div>
</div>
Dieser Code definiert einen Abschnitt mit der ID "Contact", der vertikal zentriert und mindestens 100 % der Bildschirmhöhe einnimmt. Es besteht aus zwei Hauptelementen:

  1. Hintergrundbild: Ein Bild wird als Hintergrund für diesen Abschnitt verwendet. Das Bild wird über ein Parallaxeneffekt gestaltet, um beim Scrollen eine dynamische Bewegung zu erzeugen.
  2. Anzeige (Display): Hier werden die Inhalte des Abschnitts dargestellt. Es gibt drei Abschnitte von Text:
    • Ein Titel "Mein Motto", der zentriert und farblich hervorgehoben ist.
    • Zwei Textblöcke, die jeweils "Gutes Design" und "ist ehrlich" in Großbuchstaben und zentriert anzeigen.
    • Ein weiterer Textabschnitt mit dem Namen "Dieter Rams", der ebenfalls zentriert und farblich hervorgehoben ist.

Motto oder eine Aussage zu präsentieren

Insgesamt wird dieser Abschnitt dazu verwendet, ein Motto oder eine Aussage zu präsentieren, die mit Dieter Rams in Verbindung steht und die Prinzipien guten Designs betont.

Mein Motto
Mein Motto

Aside hinzufügen 

// index.html

<aside>
  <ul>
    <li class="magnetic">
      <a href="#">
        <svg
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          class="svg"
          viewbox_="0 0 NaN NaN"
        >
          <path
            d="M16.5781 12.5693C16.6822 14.7607 17.625 16.7336 19.1013 18.1693C20.415 16.6534 21.2417 14.7057 21.3334 12.5693H16.5781Z"
            fill="#B7AB98"
          ></path>
          <path
            d="M12.5703 11.7719H15.7707C15.8748 9.35122 16.9216 7.17217 18.5523 5.59053C16.989 4.07429 14.8905 3.1084 12.5703 3.0083V11.7719Z"
            fill="#B7AB98"
          ></path>
          <path
            d="M3.00879 12.5693C3.10091 14.7057 3.92723 16.6534 5.24087 18.1693C6.71723 16.734 7.66 14.7607 7.76408 12.5693H3.00879Z"
            fill="#B7AB98"
          ></path>
          <path
            d="M16.5781 11.7723H21.3334C21.2413 9.63594 20.415 7.6882 19.1013 6.17236C17.625 7.60804 16.6818 9.58091 16.5781 11.7723Z"
            fill="#B7AB98"
          ></path>
          <path
            d="M8.57167 11.7719H11.772V3.0083C9.45182 3.1084 7.35334 4.07429 5.79004 5.59053C7.42073 7.17217 8.46758 9.35122 8.57167 11.7719Z"
            fill="#B7AB98"
          ></path>
          <path
            d="M15.7707 12.5693H12.5703V21.333C14.8905 21.2333 16.989 20.267 18.5523 18.7507C16.9216 17.1691 15.8748 14.9901 15.7707 12.5693Z"
            fill="#B7AB98"
          ></path>
          <path
            d="M7.76408 11.7723C7.66 9.58091 6.71723 7.60804 5.24087 6.17236C3.92723 7.6882 3.10091 9.63594 3.00879 11.7723H7.76408Z"
            fill="#B7AB98"
          ></path>
          <path
            d="M11.772 12.5693H8.57167C8.46758 14.9901 7.42073 17.1691 5.79004 18.7507C7.35334 20.267 9.45182 21.2329 11.772 21.333V12.5693Z"
            fill="#B7AB98"
          ></path>
        </svg>
      </a>
    </li>
    <li class="magnetic">
      <a href="#">
        <svg
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          class="svg"
          viewbox_="0 0 NaN NaN"
        >
          <path
            d="M17.0912 2.6665H6.90942C6.35229 2.6665 5.80063 2.77624 5.28591 2.98944C4.7712 3.20264 4.30351 3.51514 3.90957 3.90908C3.11396 4.70469 2.66699 5.78377 2.66699 6.90893V17.0907C2.66699 17.6479 2.77673 18.1995 2.98993 18.7143C3.20313 19.229 3.51562 19.6966 3.90957 20.0906C4.70518 20.8862 5.78426 21.3332 6.90942 21.3332H17.0912C17.6484 21.3332 18.2 21.2234 18.7147 21.0102C19.2295 20.797 19.6971 20.4845 20.0911 20.0906C20.485 19.6966 20.7975 19.229 21.0107 18.7143C21.2239 18.1995 21.3337 17.6479 21.3337 17.0907V6.90893C21.3337 6.3518 21.2239 5.80014 21.0107 5.28542C20.7975 4.77071 20.485 4.30303 20.0911 3.90908C19.6971 3.51514 19.2295 3.20264 18.7147 2.98944C18.2 2.77624 17.6484 2.6665 17.0912 2.6665ZM6.06093 6.90893C5.89312 6.90893 5.72907 6.85917 5.58954 6.76593C5.45001 6.6727 5.34125 6.54018 5.27703 6.38514C5.21281 6.2301 5.19601 6.0595 5.22875 5.89491C5.26149 5.73032 5.3423 5.57914 5.46096 5.46047C5.57962 5.34181 5.73081 5.261 5.8954 5.22826C6.05999 5.19552 6.23059 5.21233 6.38563 5.27655C6.54067 5.34076 6.67319 5.44952 6.76642 5.58905C6.85965 5.72858 6.90942 5.89263 6.90942 6.06044C6.90942 6.28548 6.82002 6.50129 6.6609 6.66041C6.50178 6.81953 6.28596 6.90893 6.06093 6.90893ZM12.0003 17.0907C10.9934 17.0907 10.0092 16.7922 9.17197 16.2328C8.33477 15.6734 7.68226 14.8783 7.29694 13.948C6.91162 13.0178 6.8108 11.9942 7.00724 11.0066C7.20367 10.0191 7.68853 9.112 8.40051 8.40002C9.11249 7.68804 10.0196 7.20318 11.0071 7.00675C11.9947 6.81031 13.0183 6.91113 13.9485 7.29645C14.8788 7.68177 15.6739 8.33428 16.2333 9.17148C16.7927 10.0087 17.0912 10.993 17.0912 11.9998C17.0912 13.35 16.5549 14.6449 15.6001 15.5997C14.6454 16.5544 13.3505 17.0907 12.0003 17.0907Z"
            fill="#B7AB98"
          ></path>
        </svg>
      </a>
    </li>
    <li class="magnetic">
      <a href="#">
        <svg
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          class="svg"
          viewbox_="0 0 NaN NaN"
        >
          <path
            d="M19.2611 11.3279L6.57538 3.39932C6.45536 3.32431 6.31745 3.2828 6.17597 3.27908C6.03449 3.27537 5.8946 3.30959 5.77081 3.3782C5.64702 3.44681 5.54386 3.5473 5.47202 3.66924C5.40019 3.79119 5.3623 3.93014 5.3623 4.07167V19.9288C5.3623 20.0703 5.40019 20.2093 5.47202 20.3312C5.54386 20.4532 5.64702 20.5536 5.77081 20.6223C5.8946 20.6909 6.03449 20.7251 6.17597 20.7214C6.31745 20.7177 6.45536 20.6761 6.57538 20.6011L19.2611 12.6726C19.3758 12.6015 19.4705 12.5022 19.5361 12.3843C19.6018 12.2664 19.6363 12.1336 19.6363 11.9986C19.6363 11.8637 19.6018 11.7309 19.5361 11.613C19.4705 11.495 19.3758 11.3958 19.2611 11.3247V11.3279Z"
            fill="#B7AB98"
          ></path>
        </svg>
      </a>
    </li>
    <li class="magnetic">
      <a href="#">
        <svg
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          class="svg"
          viewbox_="0 0 NaN NaN"
        >
          <path
            d="M7.02814 19.8291H3.44995V8.07215H7.13038V19.8291H7.02814ZM5.18793 6.43641C4.06336 6.43641 3.04102 5.5163 3.04102 4.28949C3.04102 3.16492 3.96112 2.14258 5.18793 2.14258C6.31251 2.14258 7.33485 3.06268 7.33485 4.28949C7.33485 5.5163 6.41474 6.43641 5.18793 6.43641ZM20.7275 19.8291H17.0471V14.104C17.0471 12.7749 17.0471 11.0369 15.2069 11.0369C13.2644 11.0369 13.06 12.4682 13.06 14.0017V19.8291H9.37953V8.07215H12.8555V9.7079C13.3667 8.78779 14.4912 7.86769 16.3314 7.86769C20.0119 7.86769 20.7275 10.3213 20.7275 13.4906V19.8291Z"
            fill="#B7AB98"
          ></path>
        </svg>
      </a>
    </li>
  </ul>
</aside>
Dies ist ein HTML-Code für eine Seitenleiste (<aside>), die eine ungeordnete Liste (<ul>) mit drei Elementen (<li>) enthält. Jedes <li>-Element repräsentiert ein Symbol mit einem Link (<a>), das möglicherweise auf verschiedene Seiten oder Abschnitte der Website verweist. Hier ist eine Beschreibung der Struktur:

  • Symbol 1: Ein SVG-Symbol mit einem Link, das ein bestimmtes Symbol darstellt. Dieses Symbol hat ein bestimmtes Design, das möglicherweise eine spezifische Bedeutung hat.
  • Symbol 2: Ein weiteres SVG-Symbol mit einem Link, das ein anderes Symbol darstellt. Wie beim vorherigen Symbol hat auch dieses eine bestimmte Gestaltung und Funktion.
  • Symbol 3: Ein drittes SVG-Symbol mit einem Link, das wiederum ein anderes Symbol darstellt. Es hat ebenfalls eine spezifische Gestaltung und Funktion.

Jedes Symbol kann unterschiedliche Bedeutungen haben und könnte beispielsweise für verschiedene soziale Medien oder Aktionen auf der Website stehen. Der Code verwendet SVG-Dateien für die Symbole, was eine skalierbare und hochwertige Darstellung ermöglicht.
// assets/styles.css

aside {
  display: none;
  flex-direction: column;
  gap: 3rem;
  position: fixed;
  padding: 2.5rem;
  padding-bottom: 4rem;
  left: 0;
  bottom: 0;
}
aside ul {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  position: sticky;
  list-style: none;
}
aside ul li {
  --x: 0px;
  --y: 0px;
  --size: 20px;
}
a:hover svg path {
  fill: #0d0d0d;
  -webkit-transition: fill 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: fill 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media (min-width: 1248px) {
  aside {
    display: flex;
  }
}
Dieser CSS-Code definiert das Styling für eine Seitenleiste (<aside>), die standardmäßig ausgeblendet ist und nur bei einer Bildschirmbreite von mindestens 1248 Pixeln angezeigt wird. Hier ist eine Erklärung der einzelnen Eigenschaften:

  • aside: Diese Regel definiert das Styling für das <aside>-Element. Es wird zunächst ausgeblendet (display: none;), aber wenn die Bildschirmbreite mindestens 1248 Pixel beträgt, wird es wieder angezeigt (display: flex;). Die Seitenleiste wird in einer Spalte dargestellt (flex-direction: column;), mit einem Abstand von 3 Rem (gap: 3rem;). Sie wird am linken unteren Bildschirmrand fixiert (position: fixed; bottom: 0; left: 0;) und hat einen Innenabstand von 2,5 Rem (padding: 2.5rem;) sowie einen zusätzlichen unteren Innenabstand von 4 Rem (padding-bottom: 4rem;).
  • aside ul: Diese Regel definiert das Styling für die ungeordnete Liste innerhalb der Seitenleiste. Die Liste wird in einer Spalte dargestellt (flex-direction: column;) und hat einen Abstand von 3 Rem zwischen den Elementen (gap: 3rem;). Sie bleibt beim Scrollen des Bildschirms sichtbar, da sie mit position: sticky; fixiert ist, und hat kein Standardlistenstyling (list-style: none;).
  • aside ul li: Diese Regel definiert das Styling für die Listenelemente innerhalb der ungeordneten Liste. Hier werden benutzerdefinierte Eigenschaften für die Verwendung in den SVG-Symbolen festgelegt.
  • a:hover svg path: Diese Regel definiert das Styling für den Pfad innerhalb der SVG-Symbole, wenn der Benutzer mit der Maus über den Link fährt. Die Farbe des Pfads ändert sich zu #0d0d0d, und es wird eine fließende Übergangseigenschaft angewendet.
  • @media (min-width: 1248px): Diese Media-Query stellt sicher, dass die Seitenleiste bei Bildschirmbreiten von mindestens 1248 Pixeln angezeigt wird, indem sie das display-Attribut für die Seitenleiste auf flex setzt.

3.mp4 21 MB

Footer erstellen 

// index.html

<footer>
  <div class="row">
    <div class="display">
      <p class="about_content_label text-color">connect</p>
      <div
        class="text no-padding no-border text-align-left text-row"
      ></div>
    </div>
  </div>
  <div class="row hidden-circle">
    <div class="div-icon"></div>
    <div class="display">
      <ul class="no-padding no-border text-align-left text-column">
        <li class="text uppercase hidden-link">
          <div class="text-row">
            <a href="" class="contact-link">Dribbble</a>
          </div>
          <div class="span">
            <div class="text-row">
              <div class="big">
                <a href="" class="contact-link">Falsche Arbeiten</a>
              </div>
            </div>
          </div>
        </li>
        <li class="text uppercase hidden-link">
          <div class="text-row">
            <a href="https://youtube.com" class="contact-link">Youtube</a>
          </div>
          <div class="span">
            <div class="text-row">
              <div class="big">
                <a href="https://youtube.com" class="contact-link"
                  >Zufällige Tutorials</a
                >
              </div>
            </div>
          </div>
        </li>
        <li class="text uppercase hidden-link">
          <div class="text-row">
            <a href="" class="contact-link">Linkedin</a>
          </div>
          <div class="span">
            <div class="text-row">
              <div class="big">
                <a href="" class="contact-link">Ernsthaft ich</a>
              </div>
            </div>
          </div>
        </li>
      </ul>
      <ul class="no-padding no-border text-align-left text-column">
        <li class="text uppercase hidden-link">
          <div class="text-row">
            <a href="" class="contact-link">Instagram</a>
          </div>
          <div class="span">
            <div class="text-row">
              <div class="big">
                <a href="" class="contact-link">Kein TikTok</a>
              </div>
            </div>
          </div>
        </li>
        <li class="text uppercase hidden-link">
          <div class="text-row">
            <a href="" class="contact-link">Facebook</a>
          </div>
          <div class="span">
            <div class="text-row">
              <div class="big">
                <a href="" class="contact-link"
                  >Hauptsächlich Hundegeschichten</a
                >
              </div>
            </div>
          </div>
        </li>
        <li class="text uppercase hidden-link">
          <div class="text-row">
            <a href="" class="contact-link">Behance</a>
          </div>
          <div class="span">
            <div class="text-row">
              <div class="big">
                <a href="" class="contact-link">Der Jurassic Park</a>
              </div>
            </div>
          </div>
        </li>
      </ul>
      <ul class="no-padding no-border text-align-left text-column">
        <li class="text uppercase hidden-link column">
          <div class="text-row small-height">E-Mail</div>
          <div class="small small-height">bonsai1972@gmail.com</div>
          <div class="span">
            <div class="text-row column">
              <div class="small small-height">
                100%ige Chance, dass ich sie lese
              </div>
              <div class="small small-height">bonsai1972@gmail.com</div>
            </div>
          </div>
        </li>
        <li class="text uppercase hidden-link">
          <div class="text-row small-height">Telefon</div>
          <div class="small small-height">+49 221 2828288</div>
          <div class="span">
            <div class="text-row column">
              <div class="small small-height">
                90%ige Chance, dass ich nicht abhebe
              </div>
              <div class="small small-height">+49 221 2828288</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</footer>
  • Der Footer wird durch das <footer>-Tag eingeleitet und mit </footer> beendet.
  • Innerhalb des Footers gibt es zwei <div>-Elemente mit der Klasse row, die jeweils einen Abschnitt des Footers darstellen.
  • Der erste Abschnitt enthält den Text "connect" und eine leere Textzeile.
  • Der zweite Abschnitt ist als "hidden-circle" klassifiziert und enthält eine Liste von Social-Media-Links.
    • Jeder Link ist als <li>-Element definiert und enthält den Namen des sozialen Netzwerks und einen Link dazu.
    • Darunter befindet sich der Name des sozialen Netzwerks als a-Element mit der Klasse contact-link.
    • In der nächsten Ebene befindet sich ein weiteres a-Element mit der Klasse contact-link, das den Namen des sozialen Netzwerks enthält.
  • Es gibt drei solche Listen, die jeweils verschiedene soziale Netzwerke und Kontaktinformationen enthalten, darunter E-Mail-Adresse und Telefonnummer.

Insgesamt stellt dieser Code den Footer-Bereich der Webseite dar, der Informationen zur Kontaktaufnahme und Links zu verschiedenen sozialen Netzwerken enthält.
// assets/styles.css

footer {
  background: var(--bg);
  color: #b7ab98 !important;
}
footer .row {
  max-width: 1248px;
  margin: auto;
}
footer .row .display {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  justify-content: space-between;
  align-items: center;
  width: 100% !important;
}
footer .row .display .text-column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}
footer .row .display .text-column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
footer .row .display .text-column .text .text-row .big,
footer .row .display .text-column .text .text-row {
  font-size: 2rem;
  text-decoration: none;
  text-transform: none;
}
footer .row .display .text-column .text .text-row,
footer .row .display .text-column .text .text-row + .small {
  color: #b7ab98;
}
footer .row .display .text-column .text .span .text-row {
  color: #0d0d0d;
  padding-left: 0.5rem;
}
footer .row .display .text-column .text {
  display: flex;
  flex-direction: column;
  height: 2rem;
  border-bottom: none;
  padding-left: 1rem;
  margin-left: -1rem;
}
footer .row .display .text-column .text .column {
  display: flex;
  flex-direction: column;
  justify-content: start;
}
footer .row .display .text-column .text .small {
  font-size: 1rem;
  text-decoration: none;
  text-transform: none;
}
footer .row .display .text-column .text .small-height {
  display: flex;
  flex-direction: row;
  height: 1.4rem;
  line-height: 1.4rem;
  font-size: 1rem;
  width: 100%;
}
footer .contact-link {
  text-decoration: none;
  color: var(--color-body);
}
footer .big .contact-link {
  text-decoration: none;
  color: #0d0d0d;
}
footer .contact-link::after {
  background-image: url(assets/images/contact-link.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  content: "";
  display: block;
  height: 0.75rem;
  left: -0.5em;
  position: absolute;
  top: 0.55em;
  width: 0.75rem;
}
@media (min-width: 1248px) {
  footer .row .display {
    flex-direction: row;
  }
}
Dieser CSS-Code definiert das Erscheinungsbild des Footer-Bereichs einer Webseite.

- `footer`: Definiert die Stile für das `<footer>`-Element.
  - `background`: Hintergrundfarbe des Footers, abgeleitet von der benutzerdefinierten CSS-Variablen `--bg`.
  - `color`: Textfarbe des Footers, hier als Grauton definiert.
- `footer .row`: Stile für die `<div>`-Elemente mit der Klasse `.row` innerhalb des Footers.
  - `max-width`: Maximale Breite der `.row`-Elemente auf 1248 Pixel festgelegt.
  - `margin`: Zentriert die `.row`-Elemente horizontal.
- `footer .row .display`: Stile für das `<div>`-Element mit der Klasse `.display` innerhalb der `.row`.
  - `display`: Das Element wird als Flex-Container mit vertikaler Ausrichtung und einem Abstand von 2 Rem zwischen den Elementen dargestellt.
  - `justify-content`: Horizontale Ausrichtung der Elemente wird zwischen den Hauptachsen verteilt.
  - `align-items`: Vertikale Ausrichtung der Elemente wird zentriert.
  - `width`: Die Breite des Elements wird auf 100% des verfügbaren Platzes festgelegt.
- `footer .row .display .text-column`: Stile für die `<ul>`-Elemente mit der Klasse `.text-column` innerhalb der `.display`.
  - `display`: Die Elemente werden als Flex-Container mit vertikaler Ausrichtung dargestellt.
  - `gap`: Abstand zwischen den Elementen beträgt 1 Rem.
- Weitere Stile definieren die Schriftgröße, Textdekoration und Farben für verschiedene Elemente innerhalb des Footers.
- Media Query bei einer Bildschirmbreite von mindestens 1248 Pixeln ändert die Ausrichtung der Elemente von vertikal zu horizontal.

Insgesamt legt dieser Code das Layout, die Schriftarten, die Farben und andere visuelle Aspekte des Footer-Bereichs der Webseite fest.

Nun sind wir mit dem ersten Teil fertig.


4.mp4 44 MB

Meld dich an und schreibe ein Kommentar

Diese Website verwendet Cookies


Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anbieten zu können und die Zugriffe auf unsere Website zu analysieren.

Sie akzeptieren unsere Cookies, wenn Sie fortfahren diese Webseite zu nutzen. Datenschutzerklärung.