A Pen by Janis Skarnelis on CodePen.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| Follow me on | |
| Dribbble: https://dribbble.com/supahfunk | |
| Twitter: https://twitter.com/supahfunk | |
| Codepen: https://codepen.io/supah/ | |
| --> | |
| <div class="slideshow"> | |
| <div class="slider slider-1"> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="bg"></bg> | |
| <h1>Slick Testimonial Slider</h1> | |
| <!-- | |
| The mark-up is simple. I did a little reading online about the correct mark-up for citations and the proper use of blockquotes. | |
| From what I gather, the first slider seems to be the more valid mark-up. I simply created sections with the class "quotes" as the | |
| container for the testimanials. Ken's script reads through the list and formats everything for you. Pretty sweet. | |
| In this example I am using the default settings and style sheet. The great thing about Ken's scripts is that you | |
| rotate any kind of content very simply. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="simple" class="simple"> | |
| <span class="char1 vl">S</span><span class="char2 vl">i</span><span class="char3 vl">m</span><span class="char4 vl">p</span><span class="char5 vl">l</span><span class="char6 vl">e</span> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="content"> | |
| <h1 class="sexy">Sexy Lettering</h1> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="content"> | |
| <p>Curabitur <del>blandit tempus porttitor</del>. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod.</p> | |
| <p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis <del>dapibus posuere velit aliquet</del>. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod. Curabitur blandit tempus porttitor.</p> | |
| <p>Morbi leo risus, <del>porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit</del>. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Aenean eu leo quam. Pellentesque ornare sem <del>lacinia quam</del> venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est |
manbearwolf
/ example.html
Created
September 20, 2017 18:45
— forked from evansims/example.html
Embedding or sharing a image or photo uploaded to Google Drive.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <a href="https://drive.google.com/uc?export=view&id=XXX"><img src="https://drive.google.com/uc?export=view&id=XXX" style="width: 500px; max-width: 100%; height: auto" title="Click for the larger version." /></a> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body> | |
| <header> | |
| <h1 style="text-transform: uppercase;">owl carousel 2.2.1</h1> | |
| </header> | |
| <h2>Normal Carousel</h2> | |
| <div class="test owl-carousel"> | |
| <img class="owl-lazy" data-src="https://placehold.it/350x250&text=1" data-src-retina="https://placehold.it/350x250&text=1-retina" alt=""> | |
| <img class="owl-lazy" data-src="https://placehold.it/350x250&text=2" data-src-retina="https://placehold.it/350x250&text=2-retina" alt=""> | |
| <img class="owl-lazy" data-src="https://placehold.it/350x250&text=3" alt=""> | |
| <img class="owl-lazy" data-src="https://placehold.it/350x250&text=4" alt=""> |
manbearwolf
/ carousel-example.css
Created
September 5, 2017 14:31
— forked from Swivelgames/carousel-example.css
Simple JavaScript Carousel
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| div.carousel-container { | |
| } | |
| div.carousel-container > * { | |
| display: inline-block; | |
| vertical-align: middle; | |
| } | |
| div.carousel-container > button { | |
| color: transparent; | |
| border: 0px; |
manbearwolf
/ gist:aa3750aa410afa71dfac9ff85f89eb0c
Created
September 4, 2017 13:34
— forked from kezzbracey/gist:6758471
Aligning images in markdown / Ghost post editor.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!--To center an image--> | |
| <p align="center"> | |
| ![alt]() | |
| </p> | |
| <!--To right align an image--> | |
| <p align="right"> | |
| ![alt]() | |
| </p> |