Commit 008abad3 authored by David Loiret's avatar David Loiret Committed by Jean-Baptiste Kempf

vdd18: improve design

Signed-off-by: Jean-Baptiste Kempf's avatarJean-Baptiste Kempf <jb@videolan.org>
parent 9e6faf48
......@@ -196,7 +196,9 @@ $(function($){
<h4 class="event-time">
09:15 - 09:40
</h4>
<p class="event-author">Jean-Baptiste Kempf, VideoLAN</p>
<p class="event-author">
<span class="avatar avatar-jb"></span>Jean-Baptiste Kempf, VideoLAN
</p>
<div class="event-description">
<h3>Welcome</h3>
</div>
......@@ -207,9 +209,10 @@ $(function($){
<h4 class="event-time">
09:40 - 10:10
</h4>
<p class="event-author">Jean-Baptiste Kempf, VideoLAN</p>
<p class="event-author"><span class="avatar avatar-jb"></span>Jean-Baptiste Kempf, VideoLAN</p>
<div class="event-description">
<h3>VLC 4.0</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
......@@ -217,9 +220,10 @@ $(function($){
<h4 class="event-time">
10:10 - 10:40
</h4>
<p class="event-author">Rostislav Pehlivanov, FFmpeg</p>
<p class="event-author"><span class="avatar avatar-rp"></span>Rostislav Pehlivanov, FFmpeg</p>
<div class="event-description">
<h3>FFv2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="event event-coffee">
......@@ -235,9 +239,15 @@ $(function($){
<h4 class="event-time">
11:00 - 11:30
</h4>
<p class="event-author">Ronald & Jean-Baptiste Kempf</p>
<p class="event-author">
<span>
<span class="person-block"><span class="avatar avatar-jb"></span>Jean-Baptiste Kempf</span>
<span class="avatar avatar-rb"></span>Ronald Bultje
</span>
</p>
<div class="event-description">
<h3>Dav1d: a fast AV1 decoder</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
......@@ -245,18 +255,22 @@ $(function($){
<h4 class="event-time">
11:30 - 12:00
</h4>
<p class="event-author">Pradeep</p>
<p class="event-author"><span class="avatar avatar-pr"></span>Pradeep Ramachandran</p>
<div class="event-description">
<h3>x265: an update</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="event event-talk">
<h4 class="event-time">
12:00 - 12:30
</h4>
<p class="event-author">Thomas Daede</p>
<p class="event-author">
<span class="avatar avatar-td"></span>Thomas Daede
</p>
<div class="event-description">
<h3>AV1: the final talk</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
......@@ -398,6 +412,36 @@ $(function($){
</div>
</section>
<section>
<div class="container">
<h2 class="text-center uppercase">Locations</h2>
<hr class="spacer-2">
<div class="row">
<div class="col-md-6">
<div class="text-box conference-box">
<div class="text-box-title">
Conference
</div>
<div class="text-box-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
<div class="col-md-6">
<div class="text-box dinner-box">
<div class="text-box-title">
Dinner
</div>
<div class="text-box-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
......
......@@ -140,6 +140,16 @@ h3 {
text-shadow: none;
}
.dinner-box {
background: url('/images/events/vdd18/dinner.jpg') center no-repeat;
background-size: cover;
}
.conference-box {
background: url('/images/events/vdd18/conference.jpg') center no-repeat;
background-size: cover;
}
.register-box .text-box-content {
color: #4D4D4D;
font-size: 14px;
......@@ -242,7 +252,7 @@ h2 {
color: #4d4d4d;
margin-top: 6px;
border-radius: 3px;
padding: 1.8em 1.6em;
padding: 8px 12px;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
......@@ -345,6 +355,50 @@ h2 {
font-style: italic;
}
@media (max-width: 992px) {
.event-author {
float: none;
}
}
.avatar {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 32px;
height: 32px;
display: inline-block;
vertical-align: middle;
border-radius: 50%;
margin-right: 10px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.5);
}
.avatar-jb {
background-image: url('/images/events/vdd18/jb.jpg')
}
.avatar-rp {
background-image: url('/images/events/vdd18/rostislav-pehlivanov.jpg');
}
.avatar-pr {
background-image: url('/images/events/vdd18/pradeep-ramachandran.jpg');
}
.avatar-td {
background-image: url('/images/events/vdd18/thomas-daede.jpg');
}
.avatar-rb {
background-image: url('/images/events/vdd18/ronald-bultje.jpg');
}
.person-block {
display: block;
margin-bottom: 5px;
}
.spacer {
width: 200px;
border-top: 3px solid #e7e7e7;
......@@ -436,3 +490,7 @@ p {
font-size: 12px;
text-transform: uppercase;
}
#footer p {
text-align: center;
}
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