From 8935ea95ba59e198431d04c387f5275a2f0cdddc Mon Sep 17 00:00:00 2001
From: lukas-heiligenbrunner <lheilige@htl-steyr.ac.at>
Date: Wed, 18 Mar 2020 15:18:32 +0100
Subject: [PATCH] experience page

---
 css/experience.css | 39 ++++++++++++++++++++++++-
 index.html         | 72 ++++++++++++++++++++++++++++++++++++++++++----
 2 files changed, 105 insertions(+), 6 deletions(-)

diff --git a/css/experience.css b/css/experience.css
index e171500..23e0bea 100644
--- a/css/experience.css
+++ b/css/experience.css
@@ -1,3 +1,40 @@
 #section3{
     background-color: #53bf65;
-}
\ No newline at end of file
+}
+
+.content > div {display: none; padding: 20px 25px 5px;}
+
+#tab1:checked ~ .content #content1,
+#tab2:checked ~ .content #content2,
+#tab3:checked ~ .content #content3,
+#tab4:checked ~ .content #content4 {
+    display: block;
+}
+
+.tab{
+    display: block;
+    float: left;
+    clear: left;
+    /*float: left;*/
+    margin-top: 10px;
+    width: 10%;
+    background-color: white;
+    left:0;
+    overflow: hidden;
+    /*border: 10px;*/
+}
+
+.content{
+    position: relative;
+    float: left;
+    width: 80%;
+    top: -140px;
+}
+
+#tab4{
+    float: left;
+}
+
+.ratiobtn{
+    display: none;
+}
diff --git a/index.html b/index.html
index a2db411..651a685 100644
--- a/index.html
+++ b/index.html
@@ -83,7 +83,7 @@
                 that live on the internet.
                 I develop hardware near software exceptional websites and apps that provide intuitive and user friendly
                 interfaces with efficient and modern backends.
-                I'm currently a student of the HTL Steyr and I am in the final year.
+                I'm currently a student of the HTL Steyr and I am in the final year now.
                 <br><br>
 
                 Here are a few technologies I've been working with recently:
@@ -108,10 +108,72 @@
 <div id="section3" class="tile">
     <div class="container">
         <h1>Experience</h1>
-        <p>Todo about me page! Todo about me page! Todo about me page! Todo about me page! Todo about me page!
-            Todo about me page! Todo about me page! Todo about me page! Todo about me page! Todo about me page!
-            Todo about me page! Todo about me page! Todo about me page! Todo about me page! Todo about me page!
-            Todo about me page! Todo about me page! Todo about me page! Todo about me page! Todo about me page! </p>
+        <div id="experiencecontentcontainer">
+
+            <input class="ratiobtn" id="tab1" type="radio" name="tabs" checked="">
+            <label class="tab" for="tab1">Profactor</label>
+
+            <input class="ratiobtn" id="tab2" type="radio" name="tabs">
+            <label class="tab" for="tab2">SPS Technik</label>
+
+            <input class="ratiobtn" id="tab3" type="radio" name="tabs">
+            <label class="tab" for="tab3">Profactor</label>
+
+            <input class="ratiobtn" id="tab4" type="radio" name="tabs">
+            <label class="tab" for="tab4">Klausriegler</label>
+
+
+            <div class="content">
+                <div id="content1">
+                    <div>
+                        Engineer @Profactor
+                    </div>
+                    <div>
+                        research lab
+                    </div>
+                    <div>
+                        07.2019 – 08.2019
+                    </div>
+                    <p>
+                        Development of picture corrections for a surface inspection robot with the help of OpenCV.<br>
+                        außeruniversitäres Forschungsinstitut
+                        ▪ Programmieren von Bildkorrekturen für
+                        Oberflächeninspektionen mithilfe von OpenCV in C++
+                        Diplomarbeit – „Bildkorrektur für Oberflächeninspektion“
+                        ● Entwicklung einer C++ Bibliothek zur Entzerrung
+                        eines von einem Roboterarm aufgenommenen
+                        Oberflächenbildes
+                        ● Bearbeitung mit Hilfe von OpenCV und überwiegend
+                        der Affinen-Transformation
+                    </p>
+                </div>
+
+                <div id="content2">
+                    <p>
+                        todo
+                        Automatisierungsprojekte
+                        ▪ Aufbau einer Dichtprüfanlage für BMW Werk Steyr in
+                        Ellwangen/Deutschland
+                    </p>
+                </div>
+
+                <div id="content3">
+                    <p>
+                        todo außeruniversitäres Forschungsinstitut
+                        ▪ Aufbauen und Programmieren eines
+                        Oberflächeninspektions-Roboters
+                    </p>
+                </div>
+
+                <div id="content4">
+                    <p>
+                        todo Heizung-Lüftung-Klima-Sanitär
+                        ▪ Mithilfe bei Ölbrenner- und Gasthermenservice
+                        ▪ Mithilfe bei Badsanierung und -installation
+                    </p>
+                </div>
+            </div>
+        </div>
     </div>
 </div>