varia/relearn-curved-slider-webpage
14
0
Fork 3
Code Issues Pull Requests Releases Wiki Activity

Compare commits

merge into: varia:master
Branches Tags
varia:master
svilayphiou:master
...
pull from: svilayphiou:master
Branches Tags
svilayphiou:master
varia:master

10 Commits
master ... master

Author SHA1 Message Date
Stephanie Vilayphiou
9e5917d097 fix bxl address 2019-06-18 12:14:53 +02:00
Stephanie Vilayphiou
2654ebe419 changed bxl date for applications 2019-06-11 15:35:55 +02:00
Stephanie Vilayphiou
1af19df336 fixinf paris dates 2019-06-04 15:26:58 +02:00
Stephanie Vilayphiou
0b659f3a04 changing registration email 2019-06-03 16:05:34 +02:00
Stephanie Vilayphiou
5109e61b0d fixing total height 2019-06-01 13:14:55 +02:00
Stephanie Vilayphiou
8ad9d675fa paris contact 2019-06-01 12:14:16 +02:00
Stephanie Vilayphiou
2b60ebae0f paris instance 2019-06-01 12:11:06 +02:00
Stephanie Vilayphiou
f3e9e2205b Merge branch 'master' of ssh://vvvvvvaria.org:12345/svilayphiou/relearn-curved-slider-webpage 2019-05-31 20:06:30 +02:00
Stephanie Vilayphiou
f202fe2c06 controlpoints next to the curve 2019-05-31 20:05:44 +02:00
Stephanie Vilayphiou
57b97edccc nicer curve 2019-05-31 19:42:30 +02:00
3 changed files with 65 additions and 9 deletions
Show Stats Expand all files Collapse all files

40
css/stylesheet.css
View File

@ -29,6 +29,7 @@ body{
color:purple; color:purple;
background-color:#ff4d4d33; background-color:#ff4d4d33;
font-family: 'AvaraBold'; font-family: 'AvaraBold';
overflow: hidden;
} }
hr{ hr{
border:0; border:0;
@ -118,6 +119,26 @@ div#slider{
background: transparent; background: transparent;
} }
#controlpoints li {
position: absolute;
z-index: 10000;
list-style-type: none;
width: 10em;
line-height: 1.3em;
}
#controlpoints li#cp-paris {
top: 220px;
left: 20px;
}
#controlpoints li#cp-brussels {
top: 0px;
left: 220px;
}
#controlpoints li#cp-rotterdam {
top: 140px;
right: 20px;
}
#warped { #warped {
font-weight: bold; font-weight: bold;
position: absolute; position: absolute;
@ -140,7 +161,7 @@ div#relearn-infos ul {
#curve { #curve {
width: 55%; width: 55%;
padding : 1em 2em; padding : 1em 2em;
height: 100vh; height: 87vh;
overflow: auto; overflow: auto;
padding-bottom: 4em; padding-bottom: 4em;
} }
@ -262,6 +283,10 @@ div.controlpoint .programme ul {
color: teal; color: teal;
} }
/*--- PARIS ---*/
#paris {
color: tomato;
}
/*--- MOBILE ---*/ /*--- MOBILE ---*/
@media only screen @media only screen
@ -318,4 +343,17 @@ and (max-width : 1024px) {
margin-top: 1em; margin-top: 1em;
} }
#controlpoints li#cp-paris {
top: 120px;
left: 40px;
}
#controlpoints li#cp-brussels {
top: 10px;
left: 20px;
}
#controlpoints li#cp-rotterdam {
top: 10px;
right: -40px;
}
} }

2
css/warped.css
View File

@ -54,7 +54,7 @@
#warped .w11 {-moz-transform: rotate(-7.1rad);-webkit-transform: rotate(-7.1rad);-o-transform: #warped .w11 {-moz-transform: rotate(-7.1rad);-webkit-transform: rotate(-7.1rad);-o-transform:
rotate(-7.1rad);-ms-transform: rotate(-7.1rad); transform: rotate(-7.1rad); rotate(-7.1rad);-ms-transform: rotate(-7.1rad); transform: rotate(-7.1rad);
width: 23px; height: 43px; left: 501.17px; top: 120.42px;} width: 23px; height: 43px; left: 506.17px; top: 115.42px;}
#warped .w12 {-moz-transform: rotate(-7.39rad);-webkit-transform: rotate(-7.39rad);-o-transform: #warped .w12 {-moz-transform: rotate(-7.39rad);-webkit-transform: rotate(-7.39rad);-o-transform:
rotate(-7.39rad);-ms-transform: rotate(-7.39rad); transform: rotate(-7.39rad); rotate(-7.39rad);-ms-transform: rotate(-7.39rad); transform: rotate(-7.39rad);

26
index.html
View File

@ -13,6 +13,11 @@
<body> <body>
<!-- The curved slider --> <!-- The curved slider -->
<div id="sliders"> <div id="sliders">
<ul id='controlpoints'>
<li id="cp-rotterdam">Rotterdam, 07→09/06</li>
<li id="cp-brussels">Brussels, 21→22/06</li>
<li id="cp-paris">Paris, 06→08/09</li>
</ul>
<div id='warped'> <div id='warped'>
<span class='w0'>R</span><span class='w1'>e</span><span class='w2'>l</span><span class='w3'>e</span><span class='w4'>a</span><span class='w5'>r</span><span class='w6'>n</span><span class='w7'> </span><span class='w8'> </span><span class='w9'>2</span><span class='w10'>0</span><span class='w11'>1</span><span class='w12'>9</span> <span class='w0'>R</span><span class='w1'>e</span><span class='w2'>l</span><span class='w3'>e</span><span class='w4'>a</span><span class='w5'>r</span><span class='w6'>n</span><span class='w7'> </span><span class='w8'> </span><span class='w9'>2</span><span class='w10'>0</span><span class='w11'>1</span><span class='w12'>9</span>
</div> </div>
@ -158,9 +163,9 @@ We will take care of a <em>daily vegetarian lunch</em> (please let us know about
<dl class='summary'> <dl class='summary'>
<dt>Date</dt> <dd>21<sup>st</sup>–22<sup>nd</sup> June 2019</dd> <dt>Date</dt> <dd>21<sup>st</sup>–22<sup>nd</sup> June 2019</dd>
<dt>Location</dt> <dd>Hacktiris - Rue Paul Devauxstraat 5, Brussels, Belgium</dd> <dt>Location</dt> <dd>Hacktiris - Rue Paul Devauxstraat 3, Brussels, Belgium</dd>
<dt>Initiator</dt> <dd><a href="http://osp.kitchen/" target='_blank'>OSP</a></dd> <dt>Initiator</dt> <dd><a href="http://osp.kitchen/" target='_blank'>OSP</a></dd>
<dt>Contact</dt> <dd><a href="mailto:&#109;&#105;&#097;&#109;&#064;&#111;&#115;&#112;&#046;&#107;&#105;&#116;&#099;&#104;&#101;&#110;">&#109;&#105;&#097;&#109;&#064;&#111;&#115;&#112;&#046;&#107;&#105;&#116;&#099;&#104;&#101;&#110;</a></dd> <dt>Contact</dt> <dd><a href="mailto:&#114;&#101;&#103;&#105;&#115;&#116;&#114;&#097;&#116;&#105;&#111;&#110;&#064;&#114;&#101;&#108;&#101;&#097;&#114;&#110;&#046;&#098;&#101;&subject=[BXL] ">&#114;&#101;&#103;&#105;&#115;&#116;&#114;&#097;&#116;&#105;&#111;&#110;&#064;&#114;&#101;&#108;&#101;&#097;&#114;&#110;&#046;&#098;&#101;</a></dd>
</dl> </dl>
<hr /> <hr />
@ -210,7 +215,7 @@ We will take care of a <em>daily vegetarian lunch</em> (please let us know about
<div class='participation'> <div class='participation'>
<h3>Participation</h3> <h3>Participation</h3>
<p>Participation is free of charge. If you would like to join this Relearn session, please send an email to <a href="mailto:&#109;&#105;&#097;&#109;&#064;&#111;&#115;&#112;&#046;&#107;&#105;&#116;&#099;&#104;&#101;&#110;">&#109;&#105;&#097;&#109;&#064;&#111;&#115;&#112;&#046;&#107;&#105;&#116;&#099;&#104;&#101;&#110;</a> with a short motivation of your interest. We will reply to subscriptions on a regular basis, up to the <strong>10<sup>th</sup> of June</strong>.</p> <p>Participation is free of charge. If you would like to join this Relearn session, please send an email to <a href="mailto:&#109;&#105;&#097;&#109;&#064;&#111;&#115;&#112;&#046;&#107;&#105;&#116;&#099;&#104;&#101;&#110;">&#109;&#105;&#097;&#109;&#064;&#111;&#115;&#112;&#046;&#107;&#105;&#116;&#099;&#104;&#101;&#110;</a> with a short motivation of your interest. We will reply to subscriptions on a regular basis, up to the <strong>15<sup>th</sup> of June</strong>.</p>
<p>Our <em>capacities</em> allow us to have a group of 12 relearners. Our preference goes out to people that can join the whole session (Friday, Saturday). <p>Our <em>capacities</em> allow us to have a group of 12 relearners. Our preference goes out to people that can join the whole session (Friday, Saturday).
</p> </p>
</div> </div>
@ -224,6 +229,18 @@ We will take care of a <em>daily vegetarian lunch</em> (please let us know about
</div> </div>
</div> <!-- END BRUSSELS CONTROL POINT --> </div> <!-- END BRUSSELS CONTROL POINT -->
<div id="paris" class="controlpoint">
<h2>·Paris</h2>
<dl class='summary'>
<dt>Date</dt> <dd>06–08 September 2019</dd>
<dt>Location</dt> <dd>La Générale - 14 Avenue Parmentier, 75011 Paris, France</dd>
<dt>Initiators</dt> <dd><a href="http://www.sakasama.net/" target='_blank'>Anne Laforet</a> and <a href="https://juhel-quentin.fr/" target='_blank'>Quentin Juhel</a></dd>
<dt>Contact</dt> <dd><a href="mailto:&#114;&#101;&#103;&#105;&#115;&#116;&#114;&#097;&#116;&#105;&#111;&#110;&#064;&#114;&#101;&#108;&#101;&#097;&#114;&#110;&#046;&#098;&#101;&subject=[PARIS] ">&#114;&#101;&#103;&#105;&#115;&#116;&#114;&#097;&#116;&#105;&#111;&#110;&#064;&#114;&#101;&#108;&#101;&#097;&#114;&#110;&#046;&#098;&#101;</a></dd>
</dl>
</div>
<div id="relearn-infos"> <div id="relearn-infos">
<h3>Resources &amp; contact</h3> <h3>Resources &amp; contact</h3>
<ul> <ul>
@ -239,7 +256,8 @@ We will take care of a <em>daily vegetarian lunch</em> (please let us know about
<script> <script>
jQuery(function($){ jQuery(function($){
$("#slider").pathslider({ $("#slider").pathslider({
points : [250,50,-150,100,-50,-400,250,250], //points : [250,50,-150,100,-50,-400,250,250],
points : [350,100,-750,350,400,-500,150,200],
value : 0, value : 0,
rotateGrip : true, rotateGrip : true,
tolerance : 3, tolerance : 3,