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; 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;
@ -318,4 +339,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);

11
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, 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="slider"></div>
<!--<div id="slider2"></div>--> <!--<div id="slider2"></div>-->
</div> </div>