From ea0c950ef6cd89d5a72baca9f07972a57f8e060c Mon Sep 17 00:00:00 2001
From: "Strittmatter, Stephan" <Stephan.Strittmatter@sybit.de>
Date: Fri, 2 Aug 2024 08:21:46 +0200
Subject: [PATCH] fix: mobile layout corrected

---
 .../features/about-us/about-us.component.html | 72 +++++++++----------
 .../features/about-us/about-us.component.scss | 18 -----
 2 files changed, 36 insertions(+), 54 deletions(-)

diff --git a/src/app/features/about-us/about-us.component.html b/src/app/features/about-us/about-us.component.html
index a49dc07..2bd50c8 100644
--- a/src/app/features/about-us/about-us.component.html
+++ b/src/app/features/about-us/about-us.component.html
@@ -1,54 +1,54 @@
-<div class = "left" > 
-<h1>Über die Sytivities-App</h1>
-<br>
-<img style="float:left;margin-right: 15px;" src="/images/logo.png" 
+<h1 class="h1 mt-3">Über die Sytivities-App</h1>
+
+<img class="img-thumbnail mr-3" style="float:left;" src="/images/logo.png" 
 alt="Logo" 
 width="20%" 
 eight="auto"> 
 
-
+<p>
 In der Sytivities-App findest du viele verschiedene Freizeitaktivitäten in deiner Umgebung. Die dazugehörigen wichtigen Details wie zum Beispiel Altersempfehlungen, 
 findest du bei dem jeweiligen Vorschlag. Außerdem kann sie basierend auf deinen Interessen personalisierte 
 Voschläge geben. Eine Kartefunktion in der App zeigt dir auch, wo die Aktivitäten stattfinden, sodass du leicht dorthin navigieren kannst. Diese App ist ideal, 
 um immer wieder neue spannende Ideen zu finden und deine Freizeit optimal zu gestalten.
-<br>
-<br>
+</p>
+<p>
 Technisch wurde das Projekt initial im Sybit Coding Camp 2024 entwickelt und vorgestellt. Danach haben die Auszubildenden der Firma Sybit 
 die technische Wartung und Erweiterung der App übernommen. 
-<br>
-<br>
-<br>
-<h2>Sybit Coding-Camp</h2>
-Das Sybit Coding-Camp findet jährlich statt und bietet Jugendlichen die Chance, einen Einblick in den Beruf von Softwareentwicklerinnen und Softwareentwicklern, sowie die Ausbildung als Fachinformatiker:in (Anwendungsentwicklung) zu erhalten. 
+</p>
+
+<h2 class="h2 mt-3">Sybit Coding-Camp</h2>
+<p>
+    Das Sybit Coding-Camp findet jährlich statt und bietet Jugendlichen die Chance, einen Einblick in den Beruf von Softwareentwicklerinnen und Softwareentwicklern, sowie die Ausbildung als Fachinformatiker:in (Anwendungsentwicklung) zu erhalten. 
 Die Auszubildenden des Unternehmens bereiten hierfür im Vorfeld ein Projekt vor und coachen die Jugendlichen während des Coding-Camps.
+</p>
 
-<br>
-<br>
-<br>
-<h2>Das haben wir während des Coding-Camps gemacht</h2>
-Während des Coding-Camps haben wir die App Sytivities gecodet. Wir sind insgesamt elf Schüler*innen und sechs Auszubildende gewesen. 
+
+<h2 class="h2 mt-3">Das haben wir während des Coding-Camps gemacht</h2>
+<p>
+    Während des Coding-Camps haben wir die App Sytivities gecodet. Wir sind insgesamt elf Schüler*innen und sechs Auszubildende gewesen. 
 Die Auszubildenden haben uns vieles über das Programmieren mit  HTML und CSS beigebracht und wie diese in Firmen wie Sybit benutzt werden. 
 Gegen Ende unserer Vorbereitung haben wir fünf Personas erstellt und jeweils User Storys 
 für diese erstellt. Um die zuvor besprochenen Aufgaben zu bearbeiten, haben wir uns in mehrere Gruppen aufgeteilt.
-<br>
-<br>
-<br>
-<h2>Unser Coding-Team</h2>
-<img style="float:center; margin-top: 15px;" src="/images/Gruppenbild.JPG" 
-alt="Gruppenbild" 
-width="70%" 
-eight="auto"> 
-<p>Während ihrer Arbeit beim Coding-Camp -  (v.l.n.r): Jimmy Bergstaedt, Alexander Kugler, Felix Klein, Felix Luckow, 
-Constatin von Fragstein, Jonas Nebel, 
-<br>
+</p>
+
+<h2 class="h2 mt-3">Unser Coding-Team</h2>
+
+<img class="img-fluid" src="/images/Gruppenbild.JPG" alt="Gruppenbild Sybit Coding camp 2024" > 
+
+<p><small>
+    Während ihrer Arbeit beim Coding-Camp -  (v.l.n.r): Jimmy Bergstaedt, Alexander Kugler, Felix Klein, Felix Luckow, 
+Constatin von Fragstein, Jonas Nebel,
 Max Aichelmann, Raphael Schuller, Maksym Kuzmenko, Domenik Smyczkowski, Lotte Veit, Louis Knauss, Lena Schirmer, Thiara Adrian, Isabell Perz, 
-<br>Fiona Krause und der Projekt-Leiter: Stephan Strittmatter</p>
+Fiona Krause und der Projekt-Leiter: Stephan Strittmatter
+<br>(nicht auf dem Bild: André Sommer)
+</small>
+</p>
 
 <br>
-<br>
-Die Sytivities-App ist eine Open-Source Software. Der <a href="https://github.com/Sybit-Education/Coding-Camp-2024"><u>Quellcode</u></a>  
-ist somit öffentlich verfügbar und kann frei genutzt, vervielfältigt und verändert werden.
-<br>
-<br>
-Es gelten die Bedingungen der <a href="https://github.com/Sybit-Education/Coding-Camp-2024?tab=MIT-1-ov-file#readme"><u>MIT-Lizenz</u>.</a> 
-</div> 
\ No newline at end of file
+<p>
+    Die Sytivities-App ist eine Open-Source Software. Der <a href="https://github.com/Sybit-Education/Coding-Camp-2024"><u>Quellcode</u></a>  
+    ist somit öffentlich verfügbar und kann frei genutzt, vervielfältigt und verändert werden.
+</p>
+<p>
+    Es gelten die Bedingungen der <a href="https://github.com/Sybit-Education/Coding-Camp-2024?tab=MIT-1-ov-file#readme"><u>MIT-Lizenz</u>.</a> 
+</p>
diff --git a/src/app/features/about-us/about-us.component.scss b/src/app/features/about-us/about-us.component.scss
index c15697d..4899798 100644
--- a/src/app/features/about-us/about-us.component.scss
+++ b/src/app/features/about-us/about-us.component.scss
@@ -1,19 +1 @@
-h1{
-text-align: left;
-font-size: 47px;
-font-weight: 600;
-margin-top: 15px;
-}
-
-.left {margin-left: 150px;
-margin-right: 150px;
-font-size: larger;
-margin-bottom: 15px;}
-
-h2 {text-align: left;
-    font-size: 35px;
-    font-weight: 600;}
-
 a {color: #6bc4f6;}
-
-p {font-size: 13px;}
\ No newline at end of file