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

controlpoints next to the curve

master
Stephanie Vilayphiou 6 years ago
parent
57b97edccc
commit
f202fe2c06
3 changed files with 43 additions and 4 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 Download Patch File Download Diff File
  1. 34
      css/stylesheet.css
  2. 2
      css/warped.css
  3. 11
      index.html

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>

Write Preview
Loading…
Cancel
Save