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
6 years ago
Stephanie Vilayphiou 2654ebe419 changed bxl date for applications
6 years ago
Stephanie Vilayphiou 1af19df336 fixinf paris dates
6 years ago
Stephanie Vilayphiou 0b659f3a04 changing registration email
6 years ago
Stephanie Vilayphiou 5109e61b0d fixing total height
6 years ago
Stephanie Vilayphiou 8ad9d675fa paris contact
6 years ago
Stephanie Vilayphiou 2b60ebae0f paris instance
6 years ago
Stephanie Vilayphiou f3e9e2205b Merge branch 'master' of ssh://vvvvvvaria.org:12345/svilayphiou/relearn-curved-slider-webpage
6 years ago
Stephanie Vilayphiou f202fe2c06 controlpoints next to the curve
6 years ago
Stephanie Vilayphiou 57b97edccc nicer curve
6 years ago
3 changed files with 65 additions and 9 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats
  1. 40
      css/stylesheet.css
  2. 2
      css/warped.css
  3. 32
      index.html

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);

32
index.html
View File

@ -13,9 +13,14 @@
<body> <body>
<!-- The curved slider --> <!-- The curved slider -->
<div id="sliders"> <div id="sliders">
<div id='warped'> <ul id='controlpoints'>
<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> <li id="cp-rotterdam">Rotterdam, 07→09/06</li>
</div> <li id="cp-brussels">Brussels, 21→22/06</li>
<li id="cp-paris">Paris, 06→08/09</li>
</ul>
<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>
</div>
<div id="slider"></div> <div id="slider"></div>
<!--<div id="slider2"></div>--> <!--<div id="slider2"></div>-->
</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,

Write Preview
Loading…
Cancel
Save