Commit 2130e1f0 authored by David Loiret's avatar David Loiret Committed by Jean-Baptiste Kempf

vdd17: update design

Signed-off-by: Jean-Baptiste Kempf's avatarJean-Baptiste Kempf <jb@videolan.org>
parent 29436299
...@@ -34,6 +34,7 @@ ...@@ -34,6 +34,7 @@
<div class="row"> <div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center"> <div class="col-lg-10 col-lg-offset-1 text-center">
<h2 class="uppercase">About VideoLAN Dev Days 2017</h2> <h2 class="uppercase">About VideoLAN Dev Days 2017</h2>
<hr class="spacer">
<p>The <a href="/videolan/">VideoLAN non-profit organisation</a> is happy to <p>The <a href="/videolan/">VideoLAN non-profit organisation</a> is happy to
invite you to the multimedia open-source event of the summer!</p> invite you to the multimedia open-source event of the summer!</p>
<p>For its <b>ninth edition</b>, people from the VideoLAN and open source multimedia communities will meet in <strong>Paris</strong> <p>For its <b>ninth edition</b>, people from the VideoLAN and open source multimedia communities will meet in <strong>Paris</strong>
...@@ -61,203 +62,170 @@ ...@@ -61,203 +62,170 @@
<div class="row"> <div class="row">
<div class="text-center"> <div class="text-center">
<h2 class="uppercase">Schedule</h2> <h2 class="uppercase">Schedule</h2>
<hr class="spacer">
</div> </div>
<div class="col-lg-10 col-lg-offset-1"> <div class="col-lg-10 col-lg-offset-1">
<!-- Nav tabs --> <!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist"> <ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#friday" aria-controls="friday" role="tab" data-toggle="tab">Friday 22</a></li> <li role="presentation"><a href="#friday" aria-controls="friday" role="tab" data-toggle="tab">Friday 22</a></li>
<li role="presentation"><a href="#saturday" aria-controls="saturday" role="tab" data-toggle="tab">Saturday 23</a></li> <li role="presentation" class="active"><a href="#saturday" aria-controls="saturday" role="tab" data-toggle="tab">Saturday 23</a></li>
<li role="presentation"><a href="#sunday" aria-controls="sunday" role="tab" data-toggle="tab">Sunday 24</a></li> <li role="presentation"><a href="#sunday" aria-controls="sunday" role="tab" data-toggle="tab">Sunday 24</a></li>
</ul> </ul>
<!-- Tab panes --> <!-- Tab panes -->
<div class="tab-content"> <div class="tab-content">
<div role="tabpanel" class="tab-pane active fade in" id="friday"> <div role="tabpanel" class="tab-pane fade" id="friday">
<div class="event"> <div class="event">
<div class="event-inner"> <h4 class="event-time">09:30 - 18:30</h4>
<div class="event-time"> <div class="event-description">
09:30 - 18:30 <h3>Community Bonding Day</h3>
</div> <p>This year we'll do a <b>tbd...</b>!<br/>
<div class="event-description"> The VideoLAN organization will pay for the entrance tickets, or whatever costs associated with the event.<br/></p>
<h3>Community Bonding Day</h3>
<p>This year we'll do a <b>tbd...</b>!<br/>
The VideoLAN organization will pay for the entrance tickets, or whatever costs associated with the event.<br/></p>
</div>
</div> </div>
</div> </div>
<div class="event"> <div class="event">
<div class="event-inner"> <h4 class="event-time">19:00</h4>
<div class="event-time"> <div class="event-description">
19:00 <h3>Evening reception</h3>
</div> <p>On <strong>Friday at 19h00</strong>, people are welcome to come and
<div class="event-description"> share a few good drinks, with all attendees, somewhere near the Hotel.</p>
<h3>Evening reception</h3>
<p>On <strong>Friday at 19h00</strong>, people are welcome to come and
share a few good drinks, with all attendees, somewhere near the Hotel.</p>
</div>
</div> </div>
</div> </div>
</div> </div>
<div role="tabpanel" class="tab-pane fade" id="saturday"> <div role="tabpanel" class="tab-pane fade active in" id="saturday">
<div class="event"> <div class="event event-bg">
<div class="event-inner"> <h4 class="event-time">
<div class="event-time"> 08:45 - 09:15
08:45 - 09:15 </h4>
</div> <div class="event-description">
<div class="event-description"> <h3>Welcome & Breakfast</h3>
<h3>Welcome & Breakfast</h3>
</div>
</div> </div>
</div> </div>
<div class="event"> <div class="event">
<div class="event-inner"> <h4 class="event-time">
<div class="event-time"> 09:15 - 09:45
09:15 - 09:45 </h4>
</div> <p class="event-author">Jean-Baptiste Kempf, VideoLAN</p>
<div class="event-description"> <div class="event-description">
<h3>VLC 3.0</h3> <h3>VLC 3.0</h3>
<p>Jean-Baptiste Kempf, VideoLAN</p>
</div>
</div> </div>
</div> </div>
<div class="event"> <div class="event">
<div class="event-inner"> <h4 class="event-time">
<div class="event-time"> 09:45 - 10:20
09:45 - 10:20 </h4>
</div> <p class="event-author">Rostislav Pehlivanov, FFmpeg</p>
<div class="event-description"> <div class="event-description">
<h3>A new Opus Encoder</h3> <h3>A new Opus Encoder</h3>
<p>Rostislav Pehlivanov, FFmpeg</p>
</div>
</div> </div>
</div> </div>
<div class="event"> <div class="event">
<div class="event-inner"> <h4 class="event-time">
<div class="event-time"> 10:40 - 11:15
10:40 - 11:15 </h4>
</div> <p class="event-author">Steve Lhomme, Matroska</p>
<div class="event-description"> <div class="event-description">
<h3>MKV IETF Update</h3> <h3>MKV IETF Update</h3>
<p>Steve Lhomme, Matroska</p>
</div>
</div> </div>
</div> </div>
<div class="event"> <div class="event">
<div class="event-inner"> <h4 class="event-time">
<div class="event-time"> 11:15 - 11:45
11:15 - 11:45 </h4>
</div> <p class="event-author">Timothy B. Terriberry, Mozilla</p>
<div class="event-description"> <div class="event-description">
<h3>AV1 Update</h3> <h3>AV1 Update</h3>
<p>Timothy B. Terriberry, Mozilla</p>
</div>
</div> </div>
</div> </div>
<div class="event"> <div class="event">
<div class="event-inner"> <h4 class="event-time">
<div class="event-time"> 11:45 - 12:15
11:45 - 12:15 </h4>
</div> <p class="event-author">Damien Kelly, Youtube</p>
<div class="event-description"> <div class="event-description">
<h3>Spatial audio formats</h3> <h3>Spatial audio formats</h3>
<p>Damien Kelly, Youtube</p>
</div>
</div> </div>
</div> </div>
<div class="event"> <div class="event event-bg">
<div class="event-inner"> <h4 class="event-time">
<div class="event-time"> 12:15 - 14:00
12:15 - 14:00 </h4>
</div> <div class="event-description">
<div class="event-description"> <h3>Lunch Break</h3>
<h3>Lunch Break</h3>
</div>
</div> </div>
</div> </div>
<div class="event"> <div class="event">
<div class="event-inner"> <h4 class="event-time">
<div class="event-time"> 14:00 - 16:00
14:00 - 16:00 </h4>
<div class="event-description event-row">
<div class="event-col">
<div class="header">
Salle 1
</div>
<div class="body">
<h3>AV1 Technical Meeting</h3>
</div>
</div> </div>
<div class="event-description event-row"> <div class="event-col">
<div class="event-col"> <div class="header">
<div class="header"> Salle 2
Salle 1
</div>
<div class="body">
<h3>AV1 Technical Meeting</h3>
</div>
</div> </div>
<div class="event-col"> <div class="body">
<div class="header"> <h3>libav Technical Meeting</h3>
Salle 2
</div>
<div class="body">
<h3>libav Technical Meeting</h3>
</div>
</div> </div>
<div class="event-col"> </div>
<div class="header"> <div class="event-col">
Salle 3 <div class="header">
</div> Salle 3
<div class="body"> </div>
<h3>VLC Technical Meeting</h3> <div class="body">
</div> <h3>VLC Technical Meeting</h3>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="event"> <div class="event">
<div class="event-inner"> <h4 class="event-time">
<div class="event-time"> 16:00 - 18:00
16:00 - 18:00 </h4>
</div> <div class="event-description">
<div class="event-description"> <h3>VideoLAN asso meeting</h3>
<h3>VideoLAN asso meeting</h3> <h5>For non-profit members only</h5>
<h5>For non-profit members only</h5>
</div>
</div> </div>
</div> </div>
</div> </div>
<div role="tabpanel" class="tab-pane fade" id="sunday"> <div role="tabpanel" class="tab-pane fade" id="sunday">
<div class="event"> <div class="event event-bg">
<div class="event-inner"> <h4 class="event-time">
<div class="event-time"> 09:00 - 09:30
09:00 - 09:30 </h4>
</div> <div class="event-description">
<div class="event-description"> <h3>Breakfast</h3>
<h3>Breakfast</h3>
</div>
</div> </div>
</div> </div>
<div class="event"> <div class="event">
<div class="event-inner"> <h4 class="event-time">
<div class="event-time"> 09:30 - 12:00
09:30 - 12:00 </h4>
</div> <div class="event-description">
<div class="event-description"> <h3>Lightning talks</h3>
<h3>Lightning talks</h3>
</div>
</div> </div>
</div> </div>
<div class="event"> <div class="event event-bg">
<div class="event-inner"> <h4 class="event-time">
<div class="event-time"> 12:00 - 14:00
12:00 - 14:00 </h4>
</div> <div class="event-description">
<div class="event-description"> <h3>Lunch</h3>
<h3>Lunch</h3>
</div>
</div> </div>
</div> </div>
<div class="event"> <div class="event">
<div class="event-inner"> <h4 class="event-time">
<div class="event-time"> 14:00 - 18:00
14:00 - 18:00 </h4>
</div> <div class="event-description">
<div class="event-description"> <h3>Unconferences</h3>
<h3>Unconferences</h3>
</div>
</div> </div>
</div> </div>
<div class="event"> <div class="event">
...@@ -282,9 +250,10 @@ ...@@ -282,9 +250,10 @@
<p><strong>Anyone</strong> who cares about open source multimedia technologies and development. Remember that it targets a technical crowd!</p> <p><strong>Anyone</strong> who cares about open source multimedia technologies and development. Remember that it targets a technical crowd!</p>
<p>If you are representing a <b>company</b> caring about open-source multimedia software, we would be <b>very interested</b> if you could co-sponsor the event.</p> <p>If you are representing a <b>company</b> caring about open-source multimedia software, we would be <b>very interested</b> if you could co-sponsor the event.</p>
</div> </div>
<div class="col-md-6 "> <div class="col-md-6 ">
<h2 class="uppercase">Register!</h2> <h2 class="uppercase">Register!</h2>
<p><b><a href="https://goo.gl/forms/YJ0IakCQ7WLyUYgr1">Register <strong>now!</strong></a></b></p> <p><b>Registration are closed.</b></p>
<p>If you are a member of the community and forgot to register, please email <a href="mailto:hugo@videolan.org">hugo@videolan.org</a></p>
</div> </div>
</div> </div>
</div> </div>
......
...@@ -62,45 +62,21 @@ h2 { ...@@ -62,45 +62,21 @@ h2 {
border: 1px solid #fff; border: 1px solid #fff;
} }
.event-inner {
display: table-row;
}
.tab-content { .tab-content {
margin-left: 1px; margin-left: 1px;
} }
.event { .event {
color: #4d4d4d; color: #4d4d4d;
margin-top: 10px; margin-top: 6px;
display: table; border-radius: 6px;
width: 100%; padding: 1.8em 1.6em;
/*height: 110px;*/ 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);
} }
.event h3 { .event h3 {
color: #4d4d4d; color: #4d4d4d;
}
.event-time, .event-description {
display: table-cell;
vertical-align: middle;
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);
}
.event-time {
min-width: 100px;
font-weight: bold; font-weight: bold;
text-transform: uppercase;
background-color: #f7f7f7;
width: 16%;
padding: 5px;
text-align: center;
}
.event-description {
background-color: #fff;
padding: 15px;
} }
#sponsors { #sponsors {
...@@ -143,3 +119,84 @@ h2 { ...@@ -143,3 +119,84 @@ h2 {
.event-col .header { .event-col .header {
font-weight: bold; font-weight: bold;
} }
.event-time {
color: #39b549;
display: inline-block;
}
.event-author {
float: right;
font-style: italic;
}
.spacer {
width: 200px;
border-top: 3px solid #e7e7e7;
margin: 24px auto;
}
.nav-tabs > li {
float:none;
display:inline-block;
zoom:1;
}
.nav-tabs {
text-align:center;
}
.nav-tabs {
border-bottom: none !important;
}
.nav-tabs {
border-bottom: 2px solid #DDD;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
border-width: 0;
}
.nav-tabs > li > a {
border: none;
color: #666;
}
.nav-tabs > li.active > a, .nav-tabs > li > a:hover {
border: none;
color: #39b549 !important;
background: transparent;
}
.nav-tabs > li > a::after {
content: "";
background: #39b549;
height: 2px;
position: absolute;
width: 100%;
left: 0px;
bottom: -1px;
transition: all 250ms ease 0s;
transform: scale(0);
}
.nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after {
transform: scale(1);
}
.tab-nav > li > a::after {
background: #21527d none repeat scroll 0% 0%; color: #fff;
}
.tab-pane {
padding: 15px 0;
}
.tab-content {
padding:20px
}
.event-bg {
background-color: #fbfbfb;
}
\ No newline at end of file
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