[www-doc] [Git][VideoLAN.org/websites][master] vdd18: redesign
Jean-Baptiste Kempf
gitlab at videolan.org
Wed Aug 22 11:08:54 CEST 2018
Jean-Baptiste Kempf pushed to branch master at VideoLAN organization / websites
Commits:
9e6faf48 by David Loiret at 2018-08-22T11:08:48+02:00
vdd18: redesign
Signed-off-by: Jean-Baptiste Kempf <jb at videolan.org>
- - - - -
5 changed files:
- + www.videolan.org/images/events/vdd18/paris-night.jpg
- + www.videolan.org/images/events/vdd18/paris.jpg
- + www.videolan.org/images/events/vdd18/time.jpg
- www.videolan.org/videolan/events/vdd18/index.php
- www.videolan.org/videolan/events/vdd18/style.css
Changes:
=====================================
www.videolan.org/images/events/vdd18/paris-night.jpg
=====================================
Binary files /dev/null and b/www.videolan.org/images/events/vdd18/paris-night.jpg differ
=====================================
www.videolan.org/images/events/vdd18/paris.jpg
=====================================
Binary files /dev/null and b/www.videolan.org/images/events/vdd18/paris.jpg differ
=====================================
www.videolan.org/images/events/vdd18/time.jpg
=====================================
Binary files /dev/null and b/www.videolan.org/images/events/vdd18/time.jpg differ
=====================================
www.videolan.org/videolan/events/vdd18/index.php
=====================================
--- a/www.videolan.org/videolan/events/vdd18/index.php
+++ b/www.videolan.org/videolan/events/vdd18/index.php
@@ -1,6 +1,6 @@
<?php
$title = "Video Dev Days 2018, September 21 - 23, 2018";
- $body_color = "green";
+ $body_color = "orange";
$new_design = true;
$show_vdd_banner = false;
@@ -11,6 +11,64 @@
$additional_css = array("/js/css/slimbox2.css", "/style/slick.min.css", "/videolan/events/vdd18/style.css");
require($_SERVER["DOCUMENT_ROOT"]."/include/header.php");
?>
+<script>
+ countdownManager = {
+ targetTime: new Date(),
+ element: {
+ day: null,
+ hour: null,
+ min: null,
+ sec: null
+ },
+ interval: null,
+ init: function(targetTime) {
+ this.targetTime = targetTime || new Date();
+ this.element.day = $('#countdown-day');
+ this.element.hour = $('#countdown-hour');
+ this.element.min = $('#countdown-min');
+ this.element.sec = $('#countdown-sec');
+
+ this.tick();
+ this.interval = setInterval('countdownManager.tick();', 1000);
+ },
+
+ tick: function() {
+ var timeNow = new Date();
+ if (timeNow > this.targetTime) {
+ timeNow = this.targetTime;
+ $('#countdown').hide();
+ clearInterval(this.interval);
+ return;
+ }
+
+ var diff = this.dateDiff(timeNow, this.targetTime);
+
+ this.element.day.text(diff.day);
+ this.element.hour.text(diff.hour);
+ this.element.min.text(diff.min);
+ this.element.sec.text(diff.sec);
+ },
+
+ dateDiff: function(date1, date2) {
+ var diff = {};
+ var tmp = date2 - date1;
+
+ tmp = Math.floor(tmp / 1000);
+ diff.sec = tmp % 60;
+ tmp = Math.floor((tmp-diff.sec) / 60);
+ diff.min = tmp % 60;
+ tmp = Math.floor((tmp-diff.min) / 60);
+ diff.hour = tmp % 24;
+ tmp = Math.floor((tmp-diff.hour) / 24);
+ diff.day = tmp;
+ return diff;
+ }
+};
+
+$(function($){
+ countdownManager.init(new Date('2018-09-21 00:00:00'));
+});
+</script>
<header class="header-bg">
<div class="container">
<div class="row">
@@ -19,35 +77,73 @@
<h1>Video Dev Days 2018</h1>
<h3>The Open Multimedia Conference that frees the cone in you!</h3>
<h4>21 - 23 September 2018, Paris</h4>
+ <a href="https://goo.gl/forms/8WGREy2hMxRNfGzv2" class="btn btn-border vbtn-link">Register<span class="arrow right vdd-icon"></span></a>
+ </div>
+ </div>
+ <div class="row">
+ <div id="countdown">
+ <div class="countdown-box">
+ <span id="countdown-day" >--</span>
+ <div class="countdown-unit">Days</div>
+ </div>
+ <div class="countdown-box">
+ <span id="countdown-hour">--</span>
+ <div class="countdown-unit">Hours</div>
+ </div>
+ <div class="countdown-box">
+ <span id="countdown-min" >--</span>
+ <div class="countdown-unit">Minutes</div>
+ </div>
+ <div class="countdown-box">
+ <span id="countdown-sec" >--</span>
+ <div class="countdown-unit">Seconds</div>
+ </div>
</div>
</div>
</div>
- <div class="container">
+ <!-- <div class="container">
<div id="sponsors">
<h5>Sponsors</h5>
<p>We are looking for sponsors</p>
</div>
- </div>
+ </div> -->
</header>
<section id="overview">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
- <h2 class="uppercase">About Video Dev Days 2018</h2>
- <hr class="spacer">
+ <h2 class="uppercase">
+ About
+ <span class="spacer-inline">Video Dev Days 2018</span>
+ </h2>
<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>
<p>For its <b>tenth edition</b>, people from the VideoLAN and open source multimedia communities will meet in <strong>Paris</strong>
to discuss and work on the future of the open-source multimedia community</p>
<p>This is a <strong>technical</strong> conference.</p>
- <br />
- <p>Date: <strong>21st - 23rd of September 2018</strong>, Location: Paris</p>
+ <div class="row">
+ <div class="col-md-6">
+ <div class="text-box when-box">
+ <h4 class="text-box-title">When?</h4>
+ <p class="text-box-content">21st - 23rd of September 2018</p>
+ </div>
+ </div>
+ <div class="col-md-6">
+ <div class="text-box where-box">
+ <h4 class="text-box-title">Where?</h4>
+ <p class="text-box-content">Paris</p>
+ </div>
+ </div>
+ </div>
+
+
+
</div>
</div>
</div>
</section>
-<section id="where" class="bg-gray">
+<!-- <section id="where" class="bg-gray">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
@@ -56,14 +152,14 @@
</div>
</div>
</div>
-</section>
+</section> -->
<section id="schedule">
<div class="container">
<div class="row">
<div class="text-center">
<h2 class="uppercase">Schedule</h2>
- <hr class="spacer">
+ <hr class="spacer-2">
</div>
<div class="col-lg-10 col-lg-offset-1">
<!-- Nav tabs -->
@@ -95,15 +191,76 @@
</div>
</div>
<div role="tabpanel" class="tab-pane fade active in" id="saturday">
- <div class="event event-bg">
+
+ <div class="event event-welcome">
<h4 class="event-time">
- 09:00 - 12:30
+ 09:15 - 09:40
</h4>
+ <p class="event-author">Jean-Baptiste Kempf, VideoLAN</p>
<div class="event-description">
- <h3>Talks</h3>
+ <h3>Welcome</h3>
</div>
</div>
- <div class="event">
+
+
+ <div class="event event-talk">
+ <h4 class="event-time">
+ 09:40 - 10:10
+ </h4>
+ <p class="event-author">Jean-Baptiste Kempf, VideoLAN</p>
+ <div class="event-description">
+ <h3>VLC 4.0</h3>
+ </div>
+ </div>
+
+ <div class="event event-talk">
+ <h4 class="event-time">
+ 10:10 - 10:40
+ </h4>
+ <p class="event-author">Rostislav Pehlivanov, FFmpeg</p>
+ <div class="event-description">
+ <h3>FFv2</h3>
+ </div>
+ </div>
+ <div class="event event-coffee">
+ <h4 class="event-time">
+ 10:40 - 11:00
+ </h4>
+ <div class="event-description">
+ <h3>Coffee Break</h3>
+ </div>
+ </div>
+
+ <div class="event event-talk">
+ <h4 class="event-time">
+ 11:00 - 11:30
+ </h4>
+ <p class="event-author">Ronald & Jean-Baptiste Kempf</p>
+ <div class="event-description">
+ <h3>Dav1d: a fast AV1 decoder</h3>
+ </div>
+ </div>
+
+ <div class="event event-talk">
+ <h4 class="event-time">
+ 11:30 - 12:00
+ </h4>
+ <p class="event-author">Pradeep</p>
+ <div class="event-description">
+ <h3>x265: an update</h3>
+ </div>
+ </div>
+ <div class="event event-talk">
+ <h4 class="event-time">
+ 12:00 - 12:30
+ </h4>
+ <p class="event-author">Thomas Daede</p>
+ <div class="event-description">
+ <h3>AV1: the final talk</h3>
+ </div>
+ </div>
+
+ <div class="event event-lunch">
<h4 class="event-time">
12:30 - 14:00
</h4>
@@ -111,7 +268,7 @@
<h3>Lunch Break</h3>
</div>
</div>
- <div class="event">
+ <div class="event event-meetups">
<h4 class="event-time">
14:00 - 18:00
</h4>
@@ -130,7 +287,7 @@
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="sunday">
- <div class="event event-bg">
+ <div class="event event-welcome">
<h4 class="event-time">
09:00 - 09:30
</h4>
@@ -138,16 +295,25 @@
<h3>Welcome</h3>
</div>
</div>
- <div class="event">
+
+ <div class="event event-talk">
<h4 class="event-time">
09:30 - 12:00
</h4>
<div class="event-description">
<h3>Lightning talks</h3>
- <p>Welcoming talks!</p>
+ <ul>
+ <li>An update about LLVM + Mingw (<i>Martin Storsjo</i>)</li>
+ <li>Rust & Multimedia (<i>Luca Barbato</i>)</li>
+ <li>TTML subtitles (<i>Stefan Pöschel</i>)</li>
+ <li>HDR & placebo (<i>Hanna</i>)</li>
+ <li>FFv1 update (<i>Dave Rice</i>)</li>
+ <li>GSoC report: VLMC web (<i>Derek</i>)</li>
+ </ul>
</div>
</div>
- <div class="event event-bg">
+
+ <div class="event event-bg event-lunch">
<h4 class="event-time">
12:00 - 14:00
</h4>
@@ -177,55 +343,70 @@
</div>
</section>
-<section class="bg-gray">
+<section id="who-come">
<div class="container">
<div class="row">
- <div class="col-md-6">
- <h2 class="uppercase">Who can come?</h2>
+ <div class="col-md-8 col-md-offset-2 text-box" id="who-come-box">
+ <h2 class="uppercase">Who can come?
+ </h2>
<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>
</div>
- <div class="col-md-6 ">
- <h2 class="uppercase">Register!</h2>
- <p><b>Register <a href="https://goo.gl/forms/8WGREy2hMxRNfGzv2">HERE!</a></b></p>
- <p>Also, consider sponsoring!</p>
- </div>
+
</div>
</div>
</section>
-<section>
+<section id="register-section">
<div class="container">
- <div class="row">
- <div class="col-md-6">
- <h2 class="uppercase">Cost and sponsorship </h2>
- <p>The cost for attendance is <b>free</b>.</p>
- <p>Like previous years, active developers can get a full sponsorship covering travel costs. We will also provide accomodation.</p>
- </div>
- <div class="col-md-6">
- <h2 class="uppercase">Accommodation </h2>
- <p>For active members of the open-source multimedia communities who registered until August 25 and got a confirmation, your hotel will be:</p>
- </b></p>
+ <h2 class="uppercase">Register</h2>
+ <div class="row">
+ <div class="col-md-6">
+ <div class="text-box register-box">
+ <h3 class="text-box-title">
+ COST AND SPONSORSHIP
+ </h3>
+ <h3>FREE</h3>
+ <p class="text-box-content">
+ The cost for attendance is free.
+
+ Like previous years, active developers can get a full sponsorship covering travel costs. We will also provide accomodation.
+ </p>
+ <div class="ticket">
+ Register <a href="https://goo.gl/forms/8WGREy2hMxRNfGzv2">HERE!</a>
+ </div>
+ </div>
+ </div>
+ <div class="col-md-6">
+ <div class="text-box register-box">
+ <h3 class="text-box-title">Accommodation</h3>
+ <p>For active members of the open-source multimedia communities who registered until August 25 and got a confirmation, your hotel will be:</p>
+ </b></p>
+ </div>
+ </div>
</div>
- </div>
</div>
</section>
-
-<section class="bg-gray">
+<section>
<div class="container">
- <div class="row">
- <div class="col-lg-10 col-lg-offset-1 text-center">
- <h2 class="uppercase">Code of Conduct </h2>
- <p>This community activity is running under the <a href="https://wiki.videolan.org/CoC/">VideoLAN Code of Conduct</a>. We expect all attendees to respect our <a href="https://wiki.videolan.org/VideoLAN_Values/">Shared Values</a>.</p>
- </div>
- </div>
+ <h2 class="text-center uppercase">Sponsors</h2>
+ <hr class="spacer-2">
+
+ <p class="big-p text-center">
+ We are looking for sponsors
+ </p>
</div>
</section>
+
<section>
<div class="container">
<div class="row">
- <div class="col-lg-10 col-lg-offset-1 text-center">
+ <div class="col-md-6">
+ <h2 class="uppercase">Code of Conduct </h2>
+ <p>This community activity is running under the <a href="https://wiki.videolan.org/CoC/">VideoLAN Code of Conduct</a>. We expect all attendees to respect our <a href="https://wiki.videolan.org/VideoLAN_Values/">Shared Values</a>.</p>
+ </div>
+ <div class="col-md-6">
<h2 class="uppercase">Contact </h2>
<p>The VideoLAN Dev Days are organized by the board members of the VideoLAN non-profit organization, Jean-Baptiste Kempf, Felix Paul Kühne and Hugo Beauzée-Luyssen. You can reach us at <span style="color: #39b549">board at videolan.org</span>.</p>
</div>
@@ -234,4 +415,5 @@
</section>
+
<?php footer('$Id: index.php 5400 2009-07-19 15:37:21Z jb $'); ?>
=====================================
www.videolan.org/videolan/events/vdd18/style.css
=====================================
--- a/www.videolan.org/videolan/events/vdd18/style.css
+++ b/www.videolan.org/videolan/events/vdd18/style.css
@@ -1,12 +1,183 @@
.header-bg {
- background: url('/images/events/vdd17/vdd17-blurred.jpg') center no-repeat;
+ background: url('/images/events/vdd18/paris-night.jpg') center no-repeat;
padding: 180px 0;
margin-top: -91px;
background-size: cover;
}
+#nonprofitOrganizationDiv2 {
+ display: none;
+}
+p {
+ text-align: left;
+}
+.spacer-inline::before {
+ content: "";
+ display: inline-block;
+ vertical-align: middle;
+ width: 50px;
+ height: 2px;
+ background-color: #e7e7e7;
+ margin-right: 10px;
+}
+
+.text-box {
+ margin-bottom: 10px;
+ color: white;
+ background-color: white;
+ border-radius: 4px;
+ box-shadow: 0 0 6px rgba(25,25,34,.16);
+ transition: all 0.3s linear;
+ -webkit-transition: all 0.3s linear;
+ -moz-transition: all 0.3s linear;
+ padding: 30px;
+ text-shadow: 0 2px 2px rgba(0,0,0,0.5), -1px -1px 0 rgba(0,0,0,0.15), 1px -1px 0 rgba(0,0,0,0.15), -1px 1px 0 rgba(0,0,0,0.15), 1px 1px 0 rgba(0,0,0,0.15);
+}
+
+.vbtn-link {
+ color: white;
+ background-color: transparent;
+ background: rgba(0,0,0,0.3) !important;
+}
+.vbtn-link:hover,
+.vbtn-link:focus,
+.vbtn-link:active {
+ color: white;
+}
+
+.vdd-icon {
+ border: solid white;
+ border-width: 0 3px 3px 0;
+ display: inline-block;
+ padding: 3px;
+ margin-left: 3px;
+}
+
+.right {
+ transform: rotate(-45deg);
+ -webkit-transform: rotate(-45deg);
+}
+
+
+.text-box-title {
+ font-weight: bold;
+ text-transform: uppercase;
+ font-size: 22px;
+}
+
+.text-box-content {
+ text-align: center;
+ color: white;
+ font-size: 20px;
+}
+
+.spacer-inline {
+ color: #7d7d7d;
+ font-size: 16px;
+ display: block;
+ margin-left: 130px;
+ margin-top: 10px;
+}
+
+h2 {
+ font-size: 28px;
+ margin-bottom: 20px !important;
+}
+
+h3 {
+ margin-bottom: 10px !important;
+ color: #4D4D4D;
+}
+
.header-bg {
+ clip-path: polygon(0 0, 102% 0, 100% 90%, 0% 112%);
color: white !important;
+ text-shadow: 0 2px 2px rgba(0,0,0,0.5), -1px -1px 0 rgba(0,0,0,0.15), 1px -1px 0 rgba(0,0,0,0.15), -1px 1px 0 rgba(0,0,0,0.15), 1px 1px 0 rgba(0,0,0,0.15);
+}
+
+#register {
+ margin-top:-40px;
+}
+#who-come {
+ background: url('/images/events/vdd16/crowd-of-people.jpg') center no-repeat;
+ background-size: cover;
+}
+
+.ticket {
+ display: inline-block;
+ box-sizing: content-box;
+ filter: drop-shadow(0 2px 5px rgba(black,.5));
+ position: relative;
+ height: 1em;
+ padding: 1em;
+ color: black;
+ font-size: 16px;
+ background-size: 51% 100%;
+ background-repeat: no-repeat;
+ background-image: radial-gradient(circle at 0 50%, rgba(255,255,224,0) 0.4em, #ffffe0 0.5em), radial-gradient(circle at 100% 50%, rgba(255,255,224,0) 0.4em, #ffffe0 0.5em);
+ background-position: top left, top right;
+}
+
+#register-section {
+ background: #f7f7f7;
+ clip-path: polygon(0 0, 102% 0, 100% 90%, 0% 112%);
+}
+
+ at media (max-width: 992px) {
+ #register-section {
+ clip-path: none;
+ }
+}
+
+.spacer-2 {
+ width: 100px;
+ border-top: 2px solid #e7e7e7;
+ margin: 24px auto;
+}
+
+.register-box {
+ text-align: center;
+ text-shadow: none;
+}
+
+.register-box .text-box-content {
+ color: #4D4D4D;
+ font-size: 14px;
+ border-bottom: 1px solid #e7e7e7;
+ padding-bottom: 10px;
+}
+
+#register-2 {
+ margin-top: 30px;
+}
+
+#register-2 h2 {
+ text-transform: uppercase;
+}
+
+#register-2 h2,
+#register-2 p {
+ color: white !important;
+}
+
+#who-come-box {
+ background: rgba(0,0,0,0.3) !important;
+}
+
+#who-come-box p,
+#who-come-box h2,
+#who-come-box .spacer-inline {
+ color: white !important;
+}
+
+.when-box {
+ background: url('/images/events/vdd18/time.jpg') center no-repeat;
+ background-size: cover;
+}
+
+.where-box {
+ background: url('/images/events/vdd18/paris.jpg') center no-repeat;
+ background-size: cover;
}
.header-bg h1 {
@@ -34,7 +205,7 @@
}
section {
- padding: 35px 0;
+ padding: 30px 0;
}
p {
@@ -67,11 +238,47 @@ h2 {
}
.event {
+ border-left: 2px solid #E47B00;
color: #4d4d4d;
margin-top: 6px;
- border-radius: 6px;
+ border-radius: 3px;
padding: 1.8em 1.6em;
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;
+ -moz-transition: all 0.3s linear;
+}
+
+.event-description > ul > li {
+ margin: 8px 0;
+}
+
+.event-talk {
+ border-left-color: #39b549;
+}
+
+.event-coffee {
+ border-left-color: black;
+}
+
+.event-meetups {
+ border-left-color: red;
+}
+
+.event-welcome {
+ border-left-color: orange;
+}
+
+.event-lunch {
+ border-left-color: #4D4D4D;
+}
+
+.big-p {
+ font-size: 26px;
+}
+
+.event:hover {
+ opacity: 0.8;
}
.event h3 {
@@ -205,12 +412,27 @@ h2 {
padding:20px
}
-.event-bg {
- background-color: #fbfbfb;
-}
-
p {
line-height: 22px;
margin: 0 0 10px;
padding: 0;
}
+
+#countdown {
+ margin-top: 20px;
+ text-align: center;
+}
+
+.countdown-box {
+ background: rgba(0,0,0,0.3) !important;
+ border: 1px solid white;
+ display: inline-block;
+ padding: 10px 20px;
+ border-radius: 3px;
+ text-align: center;
+}
+
+.countdown-unit {
+ font-size: 12px;
+ text-transform: uppercase;
+}
View it on GitLab: https://code.videolan.org/VideoLAN.org/websites/commit/9e6faf485f36178822ac488ad096a1700124e564
--
View it on GitLab: https://code.videolan.org/VideoLAN.org/websites/commit/9e6faf485f36178822ac488ad096a1700124e564
You're receiving this email because of your account on code.videolan.org.
More information about the www-doc
mailing list