Frontend Development

# Section Work

Als nächstes erstellst du die “Work”-section für dein Portfolio. Diese gibt Besuchern deiner Website einen Einblick in deine Arbeiten. Falls du noch nicht so viel zu präsentieren hast oder keine entsprechenden Daten auf deinem Laptop hast, kannst du in diesem Bereich auch über deine Interessen und Inspirationsquellen berichten.

Pro Arbeit/Interesse benötigst du ein Vorschaubild und einen passenden Titel. Später wirst du für jeden dieser Einträge eine Detailseite mit zusätzlichen Informationen und Medien erstellen.

# Work Markup Aufgabe

Gehe nun wieder in deine index.html-Datei und füge folgenden Code nach dem schliessenden </section>-Tag der “Expertise”-section ein.

<!-- Nach der Expertise section, innerhalb von <main> einfügen -->
<!-- Work section -->
<section id="work">
  <div class="section_title">
    <h3>Work</h3>
    <p class="section_subtitle">So arbeite ich</p>
  </div>
  <div class="work_group">
    <a href="#" class="work_item is-darken">
      <img src="img/work/screens.jpg" alt="screens">
      <div class="work_text">
        <span class="work_label">Design</span>
        <h4>Grafiken & Websites</h4>
      </div>
    </a>
    <a href="#" class="work_item">
      <div class="work_text">
        <span class="work_label">Development</span>
        <h4>Frontend Portfolio</h4>
      </div>
    </a>
    <a href="#" class="work_item">
      <img src="img/work/dude.jpg" alt="dude">
      <div class="work_text">
        <span class="work_label">Fotografie</span>
        <h4>Meine besten Bilder</h4>
      </div>
    </a>
    <a href="#" class="work_item">
      <img src="img/work/drawing.png" alt="drawing">
      <div class="work_text">
        <span class="work_label">Inspiration</span>
        <h4>Ideen, Skizzen und mehr</h4>
      </div>
    </a>
  </div>
</section>

Wie du siehst, verwenden wir keinerlei neue oder andere HTML-Tags. Das zeigt, dass du bereits mit einer kleinen Auswahl an Tags komplexe Layouts strukturell aufbauen kannst.

Texte und Bilder ersetzen

Achte darauf, dass du die Dateipfade zu den Bildern in deinem Code überprüfst. Diese werden nicht mit unserem Beispiel übereinstimmen, da du eigene Bilder mit eigenen Namen verwendest. Auch die Titel und Labels solltest du passend zu deinen Inhalten ändern. Sobald du Detailseiten erstellt hast, musst du die Pfade im href-Attribut mit dem Namen deiner Dateien ersetzen. Du wirst im Kapitel Absolute & Relative daran erinnert.

# Work Styles Aufgabe

Auch für diese section benötigst du wieder CSS/Styles, damit alles wie gewünscht aussieht. Öffne dazu deine style.css-Datei und füge folgenden Code am Ende hinzu.

/* 
--------------------------------
Work section
--------------------------------
*/

.work_group {
  /* All properties in dieser stylerule haben wir bereits im Kapitel CSS Layout angeschaut. */
  display: flex; 
  justify-content: space-between;
  flex-wrap: wrap;
  margin: -1% 0;
}

.work_item {
  position: relative; /* Zwingt absolute childs sich an diesem Koordinatensystem auszurichten */
  flex-basis: 32.5%; /* 1/3 der Breite - 0.8% margin */
  overflow: hidden; /* Alles maskieren was sich ausserhalb der Dimensionen dieser Box befindet. */
  border-radius: 2vw; /* Abgerundete Ecken */
  margin: 1% 0;
  height: 0; /* Höhe zurücksetzen */
  padding-bottom: 32.5%; /* Höhe auf 32.5% von der Breite setzen. Dadurch erreichen wir immer ein Quadrat weil flex-basis den selben Wert hat.*/
  background: linear-gradient(to bottom right, rgba(231, 142, 146, 1) 0%, rgba(182, 38, 79, 1) 40%, rgba(2, 67, 108, 1) 100%); 
  /* Verlauf als Hintergrund von Nullpunkt aus "to bottom right" also nach unten rechts. 
  Mit rgba(rot,grün,blau,alpha) kannst du Farben in RGB Werten, plus Transparenz (Alpha) definieren. Die Transparenz kann zwischen 0 (durchsichtig) und 1 (undurchsichtig) geregelt werden. z.B. 0.5 */
}

.work_item:nth-child(3n+1) {
  /* Jedes zweite Element soll 2/3 der Breite einnehmen können - 0.8% margin. Später, im Kapitel Pseudoklassen, mehr dazu */
  flex-basis: 65.5%;
}

.work_item img {
  position: absolute; /* Bild absolute innerhalb von relativem work_item neu ausrichten */
  width: 100%; /* Bild auf volle verfügbare Breite aufspannen */
  height: 100%; /* Bild auf volle verfügbare Höhe aufspannen */
  object-fit: cover; /* Verhindert verzerren des Bildes */
}

.work_item.is-darken:before {
  /* Damit dein Titel immer lesbar bleibt, legen wir einen dunklen Verlauf zwischen Schrift und Bild. Später, im Kapitel Pseudoelemente mehr dazu */
  content: " ";
  position: absolute;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  height: 100%;
  width: 100%;
  z-index: 1; /* Stellt sicher, dass dieser Verlauf über dem Bild liegt (Z-Achse) */
}

.work_text {
  position: absolute; /* Text absolut innerhalb von relativem work_item neu ausrichten */
  bottom: 0;
  margin: 2vw;
  z-index: 2; /* Stellt sicher, dass der Text über Bild und dunklem Verlauf liegt. */
}

.work_label {
  text-transform: uppercase; /* Labels immer automatisch gross schreiben */
  color: white; /* Weisse Schriftfarbe */
}

.work_item h4 {
  letter-spacing: 0.025em; /* Zeichenabstand leicht erhöhen,relativ zur aktuellen Schriftgrösse */
  color: white;
}

# Überprüfen im Browser Aufgabe

Überprüfe nun im Browser, ob alles wie gewünscht dargestellt wird. Wenn du alles richtig gemacht hast, sollte die “Work”-section nun etwa so aussehen:

Work mit Styles

Passende Challenges

← Grafiken, Bilder & Videos →