It all begins with a Domain
Check out all the places where you can check out. If you already accept credit and debit cards, simply contact your payment provider to start accepting Apple Pay:
Don't have an account? Sign up!
Optional · 500+ icons
Font Awesome as SVG icons
<svg class="fa-flag"> <use xlink:href="#fa-flag"></use> </svg>
How to change icons?
- Go to fontastic.me.
- Create a free account.
- Select new icons.
- Publish as SVG sprite.
- Edit svg-icons.css and svg.icons.js.
Transparent Logos
Change the color of a .svg/.png image using CSS. Images are property of their respective owners.
-
Height recommended: 48px
-
img.blacklogo
-
img.graylogo
-
img.whitelogo
CSS Animations
Fadein transition to all slides.
<article id="webslides"> <section> <div class="wrap fadeInUp"> <h1>Slide</h1> </div> </section> </article>
Just 5 basic animations: .fadeIn, .fadeInUp, .zoomIn, .slideInLeft, and .slideInRight.
The little things mean the most
.fadeInUp
![Pixel Phone](../static/images/android.png)
.zoomIn
.slow (animation duration)
<section> <div class="wrap"> <h2 class="fadeIn slow">Slide 1</h2> </div> </section>
h2.fadeIn.slow
Embedding Media
Images, videos, maps, charts...
Unsplash = Fullscreen Backgrounds
How to embed Unsplash photos? →
<section> <span class="background" style="background-image:url('https://source.unsplash.com/LcDPAqX8dt8/')"></span> <div class="wrap"> <h1>Slide</h1> </div> </section>
Position .background outside of .wrap container.
YouTube API
Embed videos with loop, autoplay, and muted attributes.
<div class="embed"> <iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"> </iframe> </div>
.embed
(responsive)
Every end is a new beginning
Overlay
section.fullscreen.bg-blue > .embed.dark
or .light
Status of Net Neutrality around the world.