Commit 92bc6370 authored by Jonas Heinrich's avatar Jonas Heinrich

redesign object overview page

parent 91e647d8
......@@ -2,7 +2,6 @@ body {
margin: 0;
font-family: 'Open Sans Bold', sans-serif;
font-size: 14px;
line-height: 25px;
color: white;
background: #142736;
}
......@@ -66,15 +65,17 @@ map {
}
.description {
padding: 15px 60px;
padding: 20px 0px;
width: 85%;
margin: auto;
font-family: 'Montserrat', sans-serif;
font-size: 0.9em;
}
h2 {
font-weight: normal;
font-size: 22px;
line-height: 30px;
padding-top: 5px;
padding-bottom: 5px;
line-height: 60px;
}
.grid {
......
#video_item {
width: 100%;
display: inline-block;
position: relative;
margin: 10px 0px 0px 0px;
border: 1px solid rgba(255,255,255,0.25);
}
#video_item .video_thumb {
width: 70px;
.video-grid {
display: flex;
flex-direction: column;
padding: 0 7% 0 8%;
margin: auto;
}
.video-item {
color: white;
padding: 12px 30px 12px 0px;
border-bottom: 1px solid rgba(255,255,255,0.25);
}
.video-item:after { content: ''; clear: both; visibility: hidden; }
.video-img {
height: 70px;
width: 120px;
background-size: cover;
float: left;
position: relative;
margin-right: 10px;
}
#video_item .video_overlay {
visibility: visible;
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
opacity: 0.7;
background-image: url('../images/controller-play.svg');
background-repeat: no-repeat;
background-position: 15px;
background-size: 50px;
}
#video_item:hover {
background: rgba(255,255,255,0.10);
}
#video_item .video_title {
padding: 5px;
font-size: 18px;
line-height: 20px;
}
#video_item .video_description {
}
.small {
color: rgba(255,255,255,.5);
font-size: 12px;
}
#video_item .video_duration {
float: right;
margin-right: 5px;
margin-right: 15px;
}
span.video-title{
font-family: 'Open Sans', sans-serif;
font-weight: bold;
font-size: 1em;
display: block;
margin-top: -0.15em;
letter-spacing: -.01em;
}
p.video-description{
font-family: 'Montserrat', sans-serif;
margin-top: 0.2em;
font-size: 0.9em;
overflow: hidden;
}
.video-item:hover {
background-color: rgba(255,255,255,0.25);
cursor: pointer;
}
......@@ -11,6 +11,7 @@
<link rel="stylesheet" type="text/css" href="css/videre.css">
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/fonts/ionicons.eot">
<link href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans" rel="stylesheet">
</head>
<body>
......@@ -29,6 +30,7 @@
<map>
<div id='map' style='width: 100%; height: 100%;'></div>
</map>
<content>
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
......
......@@ -67,7 +67,7 @@ map.on('load', function() {
"source": 'museum',
"paint": {
"circle-radius": 6,
"circle-color": "#B42222"
"circle-color": "blue"
},
"filter": ["==", "$type", "Point"],
});
......
<html>
<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
<h2>Werkübersicht</h2>
Unsere Virtuelle-Ausstellung beginnt mit velit magni aliquid minus. Repellendus et harum consectetur alias ad. Suscipit vel assumenda quia similique et quia doloribus. Maiores sed animi voluptate et perferendis eum quia. Et est veniam temporibus quia ipsa repudiandae autem quo. Sed harum assumenda accusantium mollitia.
</div>
<br><br>
<section class="video-grid">
<div class="video-item">
<div class="video-img" style="background-image: url('video/video1.png');"></div>
<span class="video-title">Ehrung des Quadrats: Gelbes Zentrum</span>
<p class="video-description">ein Werk von von Josef Albers (1954), Orangerie. Consectetur veritatis dolor eveniet.</span>
</div>
<div class="video-item">
<div class="video-img" style="background-image: url('video/video1.png');"></div>
<span class="video-title">Dynamische Struktur</span>
<p class="video-description">Molestiae odio amet iste recusandae voluptate officia magni. Sed totam fugit repellat rerum. Consectetur veritatis dolor eveniet.</span>
</div>
<div class="video-item">
<div class="video-img" style="background-image: url('video/video1.png');"></div>
<span class="video-title">Überfall auf einen Geleitzug</span>
<p class="video-description">Molestiae odio amet iste recusandae voluptate officia magni. Sed totam fugit repellat rerum. Consectetur veritatis dolor eveniet.</span>
</div>
<div class="video-item">
<div class="video-img" style="background-image: url('video/video1.png');"></div>
<span class="video-title">Abendessen in der Scheune</span>
<p class="video-description">Molestiae odio amet iste recusandae voluptate officia magni. Sed totam fugit repellat rerum. Consectetur veritatis dolor eveniet.</span>
</div>
<div class="video-item">
<div class="video-img" style="background-image: url('video/video1.png');"></div>
<span class="video-title"> Take a long break I, II</span>
<p class="video-description">Molestiae odio amet iste recusandae voluptate officia magni. Sed totam fugit repellat rerum. Consectetur veritatis dolor eveniet.</span>
</div>
<div class="video-item">
<div class="video-img" style="background-image: url('video/video1.png');"></div>
<span class="video-title">Chapter 28</span>
<p class="video-description">Molestiae odio amet iste recusandae voluptate officia magni. Sed totam fugit repellat rerum. Consectetur veritatis dolor eveniet.</span>
</div>
<div class="video-item">
<div class="video-img" style="background-image: url('video/video1.png');"></div>
<span class="video-title">Chapter 28</span>
<p class="video-description">Molestiae odio amet iste recusandae voluptate officia magni. Sed totam fugit repellat rerum. Consectetur veritatis dolor eveniet.</span>
</div>
</section>
<div id="video_item">
<div class="video_overlay"></div>
<div class="video_thumb" style="background-image: url('images/video1_poster.png'); background-size: cover;"></div>
<p class="video_title">Take a long break I, II</p>
<p class="video_description small">von Marijke van Warmerdam (2006), ZKM</p>
<p class="video_duration small">00:31:00</p>
</div>
<div id="video_item">
<div class="video_overlay"></div>
<div class="video_thumb" style="background-image: url('images/video1_poster.png'); background-size: cover;"></div>
<p class="video_title">Großes Stillleben mit Kerzen und Spiegel</p>
<p class="video_description small">von Max Beckmann (1930), Orangerie</p>
<p class="video_duration small">00:31:00</p>
</div>
<div id="video_item">
<div class="video_overlay"></div>
<div class="video_thumb" style="background-image: url('images/video1_poster.png'); background-size: cover;"></div>
<p class="video_title">Ehrung des Quadrats: Gelbes Zentrum</p>
<p class="video_description small">von Josef Albers (1954), Orangerie</p>
<p class="video_duration small">00:31:00</p>
</div>
<div id="video_item">
<div class="video_overlay"></div>
<div class="video_thumb" style="background-image: url('images/video1_poster.png'); background-size: cover;"></div>
<p class="video_title">Überfall auf einen Geleitzug</p>
<p class="video_description small">von Sebastian Vrancx (1618), Kunsthalle</p>
<p class="video_duration small">00:31:00</p>
</div>
<div id="video_item">
<div class="video_overlay"></div>
<div class="video_thumb" style="background-image: url('images/video1_poster.png'); background-size: cover;"></div>
<p class="video_title">Abendessen in der Scheune & In der Schenke</p>
<p class="video_description small">von David Teniers d. J. (1634, 1648), Kunsthalle</p>
<p class="video_duration small">00:31:00</p>
</div>
<div id="video_item">
<div class="video_overlay"></div>
<div class="video_thumb" style="background-image: url('images/video1_poster.png'); background-size: cover;"></div>
<p class="video_title">Die heilige Elisabeth von Thüringen<, Heilige Märtyrerin</p>
<p class="video_description small">von Matthias Grünewald (1511/12), Kunsthalle</p>
<p class="video_duration small">00:31:00</p>
</div>
<div id="video_item">
<div class="video_overlay"></div>
<div class="video_thumb" style="background-image: url('images/video1_poster.png'); background-size: cover;"></div>
<p class="video_title">Bubbles</p>
<p class="video_description small">von W. Münch, K. Furukawa (2000), ZKM</p>
<p class="video_duration small">00:31:00</p>
</div>
<div id="video_item">
<div class="video_overlay"></div>
<div class="video_thumb" style="background-image: url('images/video1_poster.png'); background-size: cover;"></div>
<p class="video_title">Dynamische Struktur</p>
<p class="video_description small">von Heinz Mack (1959), Orangerie</p>
<p class="video_duration small">00:31:00</p>
</div>
<div id="video_item">
<div class="video_overlay"></div>
<div class="video_thumb" style="background-image: url('images/video1_poster.png'); background-size: cover;"></div>
<p class="video_title">Van Gogh als verkannter Hochstapler / im schwarzen Schein</p>
<p class="video_description small">von Arnulf Rainer (1977-79), ZKM</p>
<p class="video_duration small">00:31:00</p>
</div>
</div>
<script src="js/main.js"></script>
</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