svilayphiou/relearn-curved-slider-webpage
1
0
Fork 0
forked from varia/relearn-curved-slider-webpage
Code Issues Pull Requests Releases Wiki Activity

controlpoints next to the curve

Browse Source
This commit is contained in:
Stephanie Vilayphiou 2019-05-31 20:05:44 +02:00
parent 57b97edccc
commit f202fe2c06
3 changed files with 43 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
css/stylesheet.css
View File

@ -29,6 +29,7 @@ body{
color:purple;
background-color:#ff4d4d33;
font-family: 'AvaraBold';
overflow: hidden;
}
hr{
border:0;
@ -118,6 +119,26 @@ div#slider{
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 {
font-weight: bold;
position: absolute;
@ -318,4 +339,17 @@ and (max-width : 1024px) {
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:
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:
rotate(-7.39rad);-ms-transform: rotate(-7.39rad); transform: rotate(-7.39rad);

11
index.html
View File

@ -13,9 +13,14 @@
<body>
<!-- The curved slider -->
<div id="sliders">
<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>
<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, 07→09/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="slider2"></div>-->
</div>