Untitled

From Walloping Octupus, 5 Years ago, written in HTML5.

Embed

Download Paste or View Raw
Hits: 232

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<link rel="stylesheet" href="vendor/normalize.css">

<link rel="stylesheet" href="vendor/flickity.min.css">

<link rel="stylesheet" href="css/style.css">

</head>

<body>

<div class="main-carousel">

<div id="page-wrapper" class="container">

<h2>carousel</h2>

<div id="results"></div>

</div>

<div class="carousel-cell" style="background-image:url('https://images.unsplash.com/photo-1489186397658-228f2a7ac8ee?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f07f91379421cc817cec6cc9549095fb&auto=format&fit=crop&w=500&q=60');">

<div class="container">

<button class="reset_button">Reset</button>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet lacus eget rhoncus sagittis. Vivamus tellus elit, dapibus vitae leo a, lobortis eleifend augue.

</div>

</div>

<div class="carousel-cell" style="background-image:url('https://images.unsplash.com/photo-1531819177115-428566ccfb50?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c1be2bfaa2785263750283980fe57e79&auto=format&fit=crop&w=500&q=60');">

<div class="container">

<button class="reset_button">Reset</button>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet lacus eget rhoncus sagittis. Vivamus tellus elit, dapibus vitae leo a, lobortis eleifend augue.

</div>

</div>

<div class="carousel-cell" style="background-image:url('https://images.unsplash.com/photo-1531830852055-5104a06e3806?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e51ecfded5496e33eefb6e8c365456aa&auto=format&fit=crop&w=500&q=60');">

<div class="container">

<button class="reset_button">Reset</button>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet lacus eget rhoncus sagittis. Vivamus tellus elit, dapibus vitae leo a, lobortis eleifend augue.

</div>

</div>

<div class="carousel-cell" style="background-image:url('https://images.unsplash.com/photo-1471347219181-ea568f4ef9a3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c49631166110b896075927b7534895fa&auto=format&fit=crop&w=500&q=60');">

<div class="container">

<button class="reset_button">Reset</button>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet lacus eget rhoncus sagittis. Vivamus tellus elit, dapibus vitae leo a, lobortis eleifend augue.

</div>

</div>

<div class="carousel-cell" style="background-image:url('https://images.unsplash.com/photo-1519222588400-47f6bea38294?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=dc0077daebb63d648cc5bdf8b314f4d5&auto=format&fit=crop&w=500&q=60');">

<div class="container">

<button class="reset_button">Reset</button>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet lacus eget rhoncus sagittis. Vivamus tellus elit, dapibus vitae leo a, lobortis eleifend augue.

</div>

</div>

</div>

<div class= "pbcontainer">

<div class="pb"></div>

</div>

<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

<script src="js/script.js"></script>

</body>

</html>

Author

Title

Language

Your paste - Paste your paste here

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;vendor/normalize.css&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;vendor/flickity.min.css&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot;  href=&quot;css/style.css&quot;&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class=&quot;main-carousel&quot;&gt;
&lt;div id=&quot;page-wrapper&quot; class=&quot;container&quot;&gt;
	&lt;h2&gt;carousel&lt;/h2&gt;
	&lt;div id=&quot;results&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
  &lt;div class=&quot;carousel-cell&quot; style=&quot;background-image:url('https://images.unsplash.com/photo-1489186397658-228f2a7ac8ee?ixlib=rb-0.3.5&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;s=f07f91379421cc817cec6cc9549095fb&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60');&quot;&gt;
	&lt;div class=&quot;container&quot;&gt;
		
	&lt;button class=&quot;reset_button&quot;&gt;Reset&lt;/button&gt;
	 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet lacus eget rhoncus sagittis. Vivamus tellus elit, dapibus vitae leo a, lobortis eleifend augue.
  &lt;/div&gt;
  	&lt;/div&gt;
  &lt;div class=&quot;carousel-cell&quot; style=&quot;background-image:url('https://images.unsplash.com/photo-1531819177115-428566ccfb50?ixlib=rb-0.3.5&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;s=c1be2bfaa2785263750283980fe57e79&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60');&quot;&gt;
  	&lt;div class=&quot;container&quot;&gt;
  		
	&lt;button class=&quot;reset_button&quot;&gt;Reset&lt;/button&gt;
	 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet lacus eget rhoncus sagittis. Vivamus tellus elit, dapibus vitae leo a, lobortis eleifend augue.
  
  &lt;/div&gt;
&lt;/div&gt;
  &lt;div class=&quot;carousel-cell&quot; style=&quot;background-image:url('https://images.unsplash.com/photo-1531830852055-5104a06e3806?ixlib=rb-0.3.5&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;s=e51ecfded5496e33eefb6e8c365456aa&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60');&quot;&gt;
  &lt;div class=&quot;container&quot;&gt;
  	
	 &lt;button class=&quot;reset_button&quot;&gt;Reset&lt;/button&gt;
	 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet lacus eget rhoncus sagittis. Vivamus tellus elit, dapibus vitae leo a, lobortis eleifend augue.

&lt;/div&gt;
  	&lt;/div&gt;
  &lt;div class=&quot;carousel-cell&quot; style=&quot;background-image:url('https://images.unsplash.com/photo-1471347219181-ea568f4ef9a3?ixlib=rb-0.3.5&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;s=c49631166110b896075927b7534895fa&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60');&quot;&gt;
	&lt;div class=&quot;container&quot;&gt;
		
		&lt;button class=&quot;reset_button&quot;&gt;Reset&lt;/button&gt;
	 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet lacus eget rhoncus sagittis. Vivamus tellus elit, dapibus vitae leo a, lobortis eleifend augue.
&lt;/div&gt;
  &lt;/div&gt;
  	
  &lt;div class=&quot;carousel-cell&quot; style=&quot;background-image:url('https://images.unsplash.com/photo-1519222588400-47f6bea38294?ixlib=rb-0.3.5&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;s=dc0077daebb63d648cc5bdf8b314f4d5&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60');&quot;&gt;

&lt;div class=&quot;container&quot;&gt;
	
	&lt;button class=&quot;reset_button&quot;&gt;Reset&lt;/button&gt;
	 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet lacus eget rhoncus sagittis. Vivamus tellus elit, dapibus vitae leo a, lobortis eleifend augue.
&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class= &quot;pbcontainer&quot;&gt;
	&lt;div class=&quot;pb&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
   &lt;script src=&quot;https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js&quot;&gt;&lt;/script&gt;

&lt;script src=&quot;js/script.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Private - Private paste aren't shown in recent listings.

Delete After - When should we delete your paste?

Spam protection -

{"html5":"htmlmixed","css":"css","javascript":"javascript","php":"php","python":"python","ruby":"ruby","lua":"text\/x-lua","bash":"text\/x-sh","go":"go","c":"text\/x-csrc","cpp":"text\/x-c++src","diff":"diff","latex":"stex","sql":"sql","xml":"xml","apl":"apl","asterisk":"asterisk","c_loadrunner":"text\/x-csrc","c_mac":"text\/x-csrc","coffeescript":"text\/x-coffeescript","csharp":"text\/x-csharp","d":"d","ecmascript":"javascript","erlang":"erlang","groovy":"text\/x-groovy","haskell":"text\/x-haskell","haxe":"text\/x-haxe","html4strict":"htmlmixed","java":"text\/x-java","java5":"text\/x-java","jquery":"javascript","mirc":"mirc","mysql":"sql","ocaml":"text\/x-ocaml","pascal":"text\/x-pascal","perl":"perl","perl6":"perl","plsql":"sql","properties":"text\/x-properties","q":"text\/x-q","scala":"scala","scheme":"text\/x-scheme","tcl":"text\/x-tcl","vb":"text\/x-vb","verilog":"text\/x-verilog","yaml":"text\/x-yaml","z80":"text\/x-z80"}

Reply to "Untitled"