API tools faq
paste
Advertisement
nintendraw

Carousel for Adaptation to Modal

nintendraw
Nov 10th, 2019
202
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.34 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>Etc</title>
  6. <link rel="shortcut icon" href="{Favicon}">
  7. <link href="http://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css" />
  8. <link rel="stylesheet" href="http://static.tumblr.com/yxfeliq/0gMo0fe39/style.css">
  9. <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,400italic,600italic|Playfair+Display' rel='stylesheet' type='text/css'>
  10. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  11. <link rel="stylesheet" href="http://static.tumblr.com/yxfeliq/0gMo0fe39/style.css">
  12. <script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  13. <style type="text/css">
  14. #tumblr_controls, .tmblr-iframe.tmblr-iframe--desktop-loggedin-controls.iframe-controls--desktop, .tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop {
  15. top: 10px!important;
  16. right: 10px!important;
  17. -webkit-filter: invert(90%);
  18. filter: invert(90%);
  19. position: fixed!important;
  20. opacity: 0.6;
  21. transform: scale(.8, .8);
  22. -webkit-transform: scale(.8, .8);
  23. -moz-transform: scale(.8, .8);
  24. z-index: 999999999999999999!important;
  25. }
  26. ::-webkit-scrollbar {
  27. background-color:#fff;
  28. height: 7px;
  29. width: 7px;
  30. }
  31. ::-webkit-scrollbar-thumb {
  32. background-color:#eee;
  33. border:2px solid #fff;
  34. }
  35. body {
  36. background:#f6f6f6;
  37. }
  38. a {
  39. text-decoration:none;
  40. color:#222;
  41. border-bottom:1px solid #eaeaea;
  42. }
  43. a:hover {
  44. border-color:#222;
  45. }
  46. b, strong {
  47. font-weight:600;
  48. color:#88aaaa;
  49. }
  50. #main {
  51. background:#fff;
  52. border:1px solid #eaeaea;
  53. height:100vw;
  54. width:100vw;
  55. text-align:center;
  56. padding:25px;
  57. font-family:'open sans', sans-serif;
  58. font-size:11px;
  59. overflow:hidden;
  60. }
  61. #main:before {
  62. content:'';
  63. width:calc(100% - 50px);
  64. height:1px;
  65. background:#eaeaea;
  66. position:absolute;
  67. top:35px;
  68. left:25px;
  69. z-index:0;
  70. }
  71. ul#nav {
  72. padding:0;
  73. margin:0;
  74. list-style:none;
  75. width:100vw;
  76. position:absolute;
  77. bottom:0vw;
  78. padding-top:15px;
  79. border-top:1px solid #eaeaea;
  80. color:#222;
  81. display:flex;
  82. }
  83. ul#nav li {
  84. display:inline-block;
  85. width:100px;
  86. overflow:hidden;
  87. line-height:20px;
  88. font-size:11px;
  89. text-transform:uppercase;
  90. letter-spacing:1.1px;
  91. cursor:pointer;
  92. position:relative;
  93. font-weight:bold;
  94. flex:1;
  95. }
  96. ul#nav li span {
  97. position:relative;
  98. }
  99. ul#nav li span:before {
  100. content:'';
  101. width:0;
  102. height:2px;
  103. background:#88aaaa;
  104. bottom:-3px;
  105. left:50%;
  106. position:absolute;
  107. -webkit-transition: all 0.2s ease-in-out;
  108. -moz-transition: all 0.2s ease-in-out;
  109. -o-transition: all 0.2s ease-in-out;
  110. transition: all 0.2s ease-in-out;
  111. }
  112. ul#nav li:hover span:before {
  113. width:100%;
  114. left:0;
  115. -webkit-transition: all 0.2s ease-in-out;
  116. -moz-transition: all 0.2s ease-in-out;
  117. -o-transition: all 0.2s ease-in-out;
  118. transition: all 0.2s ease-in-out;
  119. }
  120. ul#nav li.active span:before {
  121. width:100%;
  122. left:0;
  123. }
  124. #carousel {
  125. width:500vw;
  126. position:absolute;
  127. top:10px;
  128. text-align:left;
  129. }
  130. .slidey1 {
  131. margin-left: 0vw;
  132. -webkit-transition: all 0.3s linear;
  133. -moz-transition: all 0.3s linear;
  134. -o-transition: all 0.3s linear;
  135. transition: all 0.3s linear;
  136. }
  137. .slidey2 {
  138. margin-left: -100vw;
  139. -webkit-transition: all 0.3s linear;
  140. -moz-transition: all 0.3s linear;
  141. -o-transition: all 0.3s linear;
  142. transition: all 0.3s linear;
  143. }
  144. .slidey3 {
  145. margin-left: -200vw;
  146. -webkit-transition: all 0.3s linear;
  147. -moz-transition: all 0.3s linear;
  148. -o-transition: all 0.3s linear;
  149. transition: all 0.3s linear;
  150. }
  151. .slidey4 {
  152. margin-left: -300vw;
  153. -webkit-transition: all 0.3s linear;
  154. -moz-transition: all 0.3s linear;
  155. -o-transition: all 0.3s linear;
  156. transition: all 0.3s linear;
  157. }
  158. .slidey5 {
  159. margin-left: -400vw;
  160. -webkit-transition: all 0.3s linear;
  161. -moz-transition: all 0.3s linear;
  162. -o-transition: all 0.3s linear;
  163. transition: all 0.3s linear;
  164. }
  165. .box {
  166. height:92vh;
  167. padding:0 15px;
  168. display:inline-block;
  169. width:94.5vw;
  170. vertical-align:top;
  171. margin-right:25px;
  172. text-align:center;
  173. }
  174. </style>
  175. </head>
  176. <body>
  177. <div id="main">
  178. <ul id="nav">
  179. <li class="changer changer1 active" data-slidey="1"><span>Mun</span></li><!--
  180. --><li class="changer changer2" data-slidey="2"><span>Muse</span></li><!--
  181. --><li class="changer changer3" data-slidey="3"><span>Tags</span></li><!--
  182. --><li class="changer changer4" data-slidey="4"><span>Supports</span></li>
  183. <li class="changer changer5" data-slidey="5"><span>App</span></li>
  184. </ul>
  185.  
  186. <div id="carousel" class="slidey1"><!--
  187. --><div class="box">
  188. <iframe frameborder="0" id="owl" scrolling="yes" src="https://hotheadhero.tumblr.com/test2" width="100%" height="100%"></iframe>
  189. </div><!--
  190. --><div class="box">
  191. <iframe frameborder="0" id="owl" scrolling="yes" src="https://hotheadhero.tumblr.com/test2" width="100%" height="100%"></iframe>
  192. </div><!--
  193. --><div class="box">
  194. <iframe frameborder="0" id="owl" scrolling="yes" src="https://hotheadhero.tumblr.com/test2" width="100%" height="100%"></iframe>
  195. </div><!--
  196. --><div class="box">
  197. <iframe frameborder="0" id="owl" scrolling="yes" src="https://hotheadhero.tumblr.com/test2" width="100%" height="100%"></iframe>
  198. </div><!--
  199. --><div class="box">
  200. <iframe frameborder="0" id="owl" scrolling="yes" src="https://hotheadhero.tumblr.com/test2" width="100%" height="100%"></iframe>
  201. </div>
  202. </div>
  203. </div>
  204. <div style="display:none;">
  205. <script language="JavaScript">var fhs = document.createElement('script');var fhs_id = "5215379";
  206. var ref = (''+document.referrer+'');var pn = window.location;var w_h = window.screen.width + " x " + window.screen.height;
  207. fhs.src = "//freehostedscripts.net/ocounter.php?site="+fhs_id+"&e1=&e2=&r="+ref+"&wh="+w_h+"&a=1&pn="+pn+"";
  208. document.head.appendChild(fhs);document.write("<span id='o_"+fhs_id+"'></span>");</script>
  209. <script>
  210. (function($){ $(document).ready(function(){ $("[title],a[title],img[title]").style_my_tooltips({ tip_follows_cursor:true, tip_delay_time:100, tip_fade_speed:300, attribute:"title" }); }); })(jQuery);
  211. $(document).ready(function() {
  212. $(".changer").click(function(){
  213. $("#carousel").removeClass();
  214. $("#carousel").addClass("slidey" + $(this).data("slidey"));
  215. $(".changer1, .changer2, .changer3, .changer4, .changer5").removeClass("active");
  216. $(".changer" + $(this).data("slidey")).addClass("active");
  217. return false;
  218. });
  219. $('ul.tags li a').on({
  220. mouseenter: function() {
  221. $(this).parent().addClass('hovered');
  222. },
  223. mouseleave: function() {
  224. $(this).parent().removeClass('hovered');
  225. }
  226. });
  227. })
  228. </script>
  229. </div>
  230. </body>
  231. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!