Commit 26d09346 authored by Jonas Heinrich's avatar Jonas Heinrich

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

parent ada49df3
<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>
......@@ -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;
}
......@@ -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>
......
......@@ -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,
......
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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment