mirror of
https://github.com/webslides/WebSlides.git
synced 2025-08-20 20:02:07 +02:00
Initialize webslide in index.html
This commit is contained in:
Luis
59
index.html
59
index.html
@@ -3,39 +3,39 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
|
||||
<!-- CLEAN MARKUP = GOOD KARMA.
|
||||
Hi source code lover,
|
||||
|
||||
|
||||
you're a curious person and a fast learner ;)
|
||||
Let's make something beautiful together. Contribute on Github:
|
||||
https://github.com/jlantunez/webslides
|
||||
|
||||
|
||||
Thanks,
|
||||
@jlantunez.
|
||||
-->
|
||||
|
||||
<!-- SEO -->
|
||||
|
||||
<!-- SEO -->
|
||||
<title>WebSlides: Making HTML presentations easy</title>
|
||||
<meta name="description" content="WebSlides is the easiest way to make HTML presentations, portfolios, and landings. Just essential features.">
|
||||
|
||||
|
||||
<!-- URL CANONICAL -->
|
||||
<!-- <link rel="canonical" href="http://your-url.com/"> -->
|
||||
|
||||
|
||||
<!-- Google Fonts -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&subset=latin-ext" rel="stylesheet">
|
||||
|
||||
|
||||
<!-- CSS Base -->
|
||||
<link rel="stylesheet" type='text/css' media='all' href="static/css/base.css">
|
||||
|
||||
|
||||
<!-- CSS Colors -->
|
||||
<link rel="stylesheet" type='text/css' media='all' href="static/css/colors.css">
|
||||
|
||||
|
||||
<!-- Optional - CSS SVG Icons (Font Awesome) -->
|
||||
<link rel="stylesheet" type='text/css' media='all' href="static/css/svg-icons.css">
|
||||
|
||||
|
||||
<!-- SOCIAL CARDS (ADD YOUR INFO) -->
|
||||
|
||||
|
||||
<!-- FACEBOOK -->
|
||||
<meta property="og:url" content="http://your-url.com/"> <!-- YOUR URL -->
|
||||
<meta property="og:type" content="article">
|
||||
@@ -43,7 +43,7 @@
|
||||
<meta property="og:description" content="WebSlides is about telling stories beautifully. Just the essential features. Good karma."> <!-- EDIT -->
|
||||
<meta property="og:updated_time" content="2017-01-04T17:20:50"> <!-- EDIT -->
|
||||
<meta property="og:image" content="static/images/share-webslides.jpg"> <!-- EDIT -->
|
||||
|
||||
|
||||
<!-- TWITTER -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@webslides"> <!-- EDIT -->
|
||||
@@ -51,7 +51,7 @@
|
||||
<meta name="twitter:title" content="WebSlides — Making HTML Presentations Easy"> <!-- EDIT -->
|
||||
<meta name="twitter:description" content="WebSlides is about good karma. Just essential features. 120+ free slides ready to use."> <!-- EDIT -->
|
||||
<meta name="twitter:image" content="static/images/share-webslides.jpg"> <!-- EDIT -->
|
||||
|
||||
|
||||
<!-- FAVICONS -->
|
||||
<link rel="shortcut icon" sizes="16x16" href="static/images/favicons/favicon.png">
|
||||
<link rel="shortcut icon" sizes="32x32" href="static/images/favicons/favicon-32.png">
|
||||
@@ -60,11 +60,11 @@
|
||||
<link rel="apple-touch-icon icon" sizes="152x152" href="static/images/favicons/favicon-152.png">
|
||||
<link rel="apple-touch-icon icon" sizes="180x180" href="static/images/favicons/favicon-180.png">
|
||||
<link rel="apple-touch-icon icon" sizes="192x192" href="static/images/favicons/favicon-192.png">
|
||||
|
||||
|
||||
<!-- Android -->
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="theme-color" content="#333333">
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<header role="banner">
|
||||
@@ -91,16 +91,16 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
||||
<main role="main">
|
||||
<article id="webslides" class="vertical">
|
||||
|
||||
|
||||
<!-- Quick Guide
|
||||
- Each parent <section> in the <article id="webslides"> element is an individual slide.
|
||||
- Vertical sliding = <article id="webslides" class="vertical">
|
||||
- <div class="wrap"> = container 1200px / <div class="wrap size-50"> = 600px;
|
||||
- <div class="wrap"> = container 1200px / <div class="wrap size-50"> = 600px;
|
||||
-->
|
||||
|
||||
|
||||
<section>
|
||||
<span class="background" style="background-image:url('https://webslides.tv/static/images/nature.jpg')"></span>
|
||||
<!--.wrap = container 1200px -->
|
||||
@@ -118,7 +118,7 @@
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
<!--.wrap = container 1200px -->
|
||||
@@ -370,26 +370,29 @@
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
|
||||
|
||||
</article>
|
||||
<!-- end article -->
|
||||
</main>
|
||||
<!-- end main -->
|
||||
|
||||
<!-- end main -->
|
||||
|
||||
<!-- Remove #webslides element :)
|
||||
|
||||
|
||||
<footer role="contentinfo">
|
||||
<div class="wrap">
|
||||
<p>An <a href="https://github.com/jlantunez/webslides">open source solution</a>, by <a href="https://twitter.com/jlantunez">@jlantunez</a>.</p>
|
||||
</div>
|
||||
</footer> -->
|
||||
|
||||
</footer> -->
|
||||
|
||||
<!-- jQuery (required for slides to work) -->
|
||||
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
|
||||
<script src="static/js/webslides.js"></script>
|
||||
|
||||
|
||||
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
|
||||
<script defer src="static/js/svg-icons.js"></script>
|
||||
<script type="text/javascript">
|
||||
var slide = jQuery('#webslides').webslides();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -495,7 +495,6 @@ jQuery.fn.webslides = function(options) {
|
||||
}
|
||||
|
||||
|
||||
// I don't know what it does
|
||||
jQuery(document).ready(function($){
|
||||
// Tabs
|
||||
jQuery('ul.tabs li').click(function(){
|
||||
@@ -508,7 +507,6 @@ jQuery(document).ready(function($){
|
||||
});
|
||||
});
|
||||
|
||||
// I don't know what it does
|
||||
// Prototype better, faster. To show the grid/baseline.png, press Enter on keyboard
|
||||
jQuery(document).keypress(function(e) {
|
||||
if(e.which == 13) {
|
||||
|
||||
Reference in New Issue
Block a user