added own, custom style. added team, people list to about page

26d09346 · Jonas Heinrich · ada49df3 · 26d09346 · 26d09346 · 26d09346
Commit 26d09346 authored Dec 25, 2017 by Jonas Heinrich
--- a/about.html
+++ b/about.html
+<html>
+  <body>
+    <div class="description">
+      <h2>Herzlich Willkommen zu Ausstellung-Virtuell</h2>
+      <p class="prose-big">Bla bla</p>
+
+      <section class="grid">
+            <span class="grid__item">
+            <div class="profile-img clip" style="background-image: url('images/avatar.jpg'); background-size: cover; background-position: 50% 0;"></div>
+              <div class="meta center">
+                <h3 class="meta__title">Dr. Alice Anna Klaassen</h3>
+                <span class="quiet small">Seminarleitung, Organisation</span>
+              </div>
+            </span>
+            <span class="grid__item">
+            <div class="profile-img clip" style="background-image: url('images/avatar.jpg'); background-size: cover; background-position: 50% 0;"></div>
+              <div class="meta center">
+                <h3 class="meta__title">Dr. Jesús Muñoz Morcillo</h3>
+                <span class="quiet small">Seminarleitung, Regie</span>
+              </div>
+            </span>
+             <span class="grid__item">
+             <div class="profile-img clip" style="background-image: url('images/avatar.jpg'); background-size: cover; background-position: 50% 0;"></div>
+               <div class="meta center">
+                 <h3 class="meta__title">Anke Leiber</h3>
+                 <span class="quiet small">Kamera, Video-Schnitt, Storyboard</span>
+               </div>
+             </span>
+             <span class="grid__item">
+             <div class="profile-img clip" style="background-image: url('images/avatar.jpg'); background-size: cover; background-position: 50% 0;"></div>
+               <div class="meta center">
+                 <h3 class="meta__title">Jonas Mangler</h3>
+                 <span class="quiet small">Autor</span>
+               </div>
+             </span>
+             <span class="grid__item">
+             <div class="profile-img clip" style="background-image: url('images/avatar.jpg'); background-size: cover; background-position: 50% 0;"></div>
+               <div class="meta center">
+                 <h3 class="meta__title">Insa Müller-Quade</h3>
+                 <span class="quiet small">Moderation</span>
+               </div>
+             </span>
+             <span class="grid__item">
+             <div class="profile-img clip" style="background-image: url('images/avatar.jpg'); background-size: cover; background-position: 50% 0;"></div>
+               <div class="meta center">
+                 <h3 class="meta__title">Timo Sannwald</h3>
+                 <span class="quiet small">Kamera, Video-Schnitt, Storyboard</span>
+               </div>
+             </span>
+             <span class="grid__item">
+             <div class="profile-img clip" style="background-image: url('images/avatar.jpg'); background-size: cover; background-position: 50% 0;"></div>
+               <div class="meta center">
+                 <h3 class="meta__title">Natalija Traboulsi-Wegner</h3>
+                 <span class="quiet small">Autor, Webseite</span>
+               </div>
+             </span>
+             <span class="grid__item">
+             <div class="profile-img clip" style="background-image: url('images/avatar.jpg'); background-size: cover; background-position: 50% 0;"></div>
+               <div class="meta center">
+                 <h3 class="meta__title">Hannah Luise Stetter</h3>
+                 <span class="quiet small">Moderation</span>
+               </div>
+             </span>
+             <span class="grid__item">
+             <div class="profile-img clip" style="background-image: url('images/avatar.jpg'); background-size: cover; background-position: 50% 0;"></div>
+               <div class="meta center">
+                 <h3 class="meta__title">Hannah Eßer</h3>
+                 <span class="quiet small">Autor</span>
+               </div>
+             </span>
+             <span class="grid__item">
+             <div class="profile-img clip" style="background-image: url('images/avatar.jpg'); background-size: cover; background-position: 50% 0;"></div>
+               <div class="meta center">
+                 <h3 class="meta__title">Jonas Heinrich</h3>
+                 <span class="quiet small">Webseite</span>
+               </div>
+             </span>
+             <span class="grid__item">
+             <div class="profile-img clip" style="background-image: url('images/avatar.jpg'); background-size: cover; background-position: 50% 0;"></div>
+               <div class="meta center">
+                 <h3 class="meta__title">Oleksander</h3>
+                 <span class="quiet small">-</span>
+               </div>
+             </span>
+             <span class="grid__item">
+             <div class="profile-img clip" style="background-image: url('images/avatar.jpg'); background-size: cover; background-position: 50% 0;"></div>
+               <div class="meta center">
+                 <h3 class="meta__title">Lukas</h3>
+                 <span class="quiet small">Moderation</span>
+               </div>
+             </span>
+      </section>
+
+    </div>
+  </body>
+</html>
--- a/css/main.css
+++ b/css/main.css
@@ -61,7 +61,7 @@ map {
 }

 .description {
-  padding: 15px 80px 15px 80px;
+  padding: 15px 60px 15px 60px;
 }

 h2 {
@@ -101,3 +101,67 @@ h2 {
  }

 }
+
+
+/* .avatar-frame,.avatar-frame img{
+	width: 100px;
+	height: 100px;
+	border-radius: 60px;
+} */
+
+.grid__item {
+    position: relative;
+    width: 25%;
+    padding-left: 1em;
+    padding-right: 1em;
+    padding-top: 0;
+    padding-bottom: 2em;
+}
+
+.grid {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: stretch;
+    position: relative;
+    overflow: hidden;
+    padding: 1.5em 0 1em;
+    text-align: center;
+    user-select: none;
+}
+
+.profile-img {
+    border-radius: 50%;
+    height: 0;
+    padding-bottom: 100%;
+}
+.clip {
+    overflow: hidden;
+}
+
+.meta {
+    position: relative;
+    margin: 10px 0 0;
+    padding: 0 0px 0 0;
+    text-align: center;
+}
+.center {
+    text-align: center;
+}
+
+.meta__title {
+  font-size: .95em;
+  font-weight: bold;
+  margin: 0;
+  padding: .4em 0 .1em;
+}
+
+h3 {
+  font-size: 15px;
+  line-height: 20px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'Open Sans Bold', sans-serif;
+    font-weight: normal;
+    margin: 0;
+}
--- a/index.html
+++ b/index.html
@@ -14,7 +14,7 @@

    <div class="container">
      <logo>
-        <img class="logo" id="overview" src=images/logo.png>
+        <img class="logo" src=images/logo.png>
        <img class="burger_menu" id="burger_menu" src=images/menu.png>
      </logo>
      <navigation>

--- a/js/map.js
+++ b/js/map.js
@@ -8,7 +8,8 @@ var bounds = [
 mapboxgl.accessToken = 'pk.eyJ1Ijoib25ueSIsImEiOiJjajhvdnc1eTgwOTM3MnFudG81MXlpZGJrIn0.lDC0PwJDf704okmeI6w61g';
 var map = new mapboxgl.Map({
  container: 'map',
-  style: 'mapbox://styles/mapbox/light-v9',
+  //style: 'mapbox://styles/mapbox/light-v9',
+  style: 'mapbox://styles/onny/cjbgb2xyfbqwt2sp6qm2vu3yi',
  center: [8.404, 49.0150],
  zoom: 14,
  pitch: 0,

--- a/overview.html
+++ b/overview.html
-Hallo Test
+<html>
+  <body>
+    <div class="description">
+      <h2>Herzlich Willkommen zu Ausstellung-Virtuell</h2>
+      <p class="prose-big">Bla bla</p>
+      Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
+      Bla bla bla Bla bla bla Bla bla bla
+      Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
+      Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
+      Bla bla bla Bla bla bla Bla bla bla
+      Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
+      Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
+      Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
+    </div>
+  </body>
+</html>