mirror/webslides
1
0
Fork 0
mirror of https://github.com/webslides/WebSlides.git synced 2025-08-31 08:45:21 +02:00
Code Issues Releases Wiki Activity

Updating templates and releasing the dist

Browse Source
This commit is contained in:
Antonio Laguna
2017-01-30 15:59:20 +01:00
parent 62ffaf95d6
commit 585ab60b43
14 changed files with 4651 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
demos/portfolios.html
View File

@@ -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 -->
<title>WebSlides Portfolios: Showcase your work</title>
<meta name="description" content="WebSlides is the easiest way to make HTML presentations and portfolios. It's simple, fast, and free.">
<!-- URL CANONICAL -->
<!-- <link rel="canonical" href="http://your-url.com/permalink"> -->
<!-- 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&amp;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/permalink"> <!-- EDIT -->
<meta property="og:type" content="article">
@@ -43,7 +43,7 @@
<meta property="og:description" content="The easiest way to create a portfolio website. It is free, fast, and fun."> <!-- EDIT -->
<meta property="og:updated_time" content="2017-01-04T17:26: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,16 +51,16 @@
<meta name="twitter:title" content="Create your portfolio with WebSlides"> <!-- EDIT -->
<meta name="twitter:description" content="WebSlides is the easiest way to create a portfolio website. 120+ 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="16x16" href="../static/images/favicons/favicon.png">
<link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png">
<link rel="apple-touch-icon icon" sizes="76x76" href="../static/images/favicons/favicon-76.png">
<link rel="apple-touch-icon icon" sizes="120x120" href="../static/images/favicons/favicon-120.png">
<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">
@@ -90,16 +90,16 @@
</ul>
</nav>
</header>
<main role="main">
<article id="webslides">
<!-- 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
- Vertical sliding = <article id="webslides" class="vertical">
- <div class="wrap"> = container 1200px
-->
<section class="bg-primary">
<span class="background dark" style="background-image:url('https://source.unsplash.com/oHrodCLNnU8/')"></span>
<div class="wrap aligncenter">
@@ -358,7 +358,7 @@
<div class="wrap">
<div class="content-right">
<h2>
Redesigning
Redesigning
<svg class="fa-apple">
<use xlink:href="#fa-apple"></use>
</svg>
@@ -458,7 +458,7 @@
<li> Founded
<span>1976</span>
</li>
<li>
<li>
<span>120+</span>
Prebuilt Slides
</li>
@@ -1051,7 +1051,7 @@
</h2>
<p>.card-50.bg-white</p>
<p>
Travis is the most popular travel app in the world. It collects reviews from travellers about hotels, restaurants and attractions. We partnered with various divisions to create a campaign for Travis Pro.
Travis is the most popular travel app in the world. It collects reviews from travellers about hotels, restaurants and attractions. We partnered with various divisions to create a campaign for Travis Pro.
</p>
<ul class="description">
<li>
@@ -1192,7 +1192,7 @@
<use xlink:href="#fa-globe"></use>
</svg>
<h2>Works with all major banks</h2>
Apple Pay is accepted in restaurants, hotels...
Apple Pay is accepted in restaurants, hotels...
</div>
</li>
<li>
@@ -1451,7 +1451,7 @@
<div class="wrap">
<h2>Transparent Logos</h2>
<p>
Change the color of a .svg/.png image using CSS. Images are property of their respective owners.
Change the color of a .svg/.png image using CSS. Images are property of their respective owners.
</p>
<hr>
<ul class="flexblock">
@@ -1475,8 +1475,8 @@
</li>
<li class="bg-green">
<div>
<img class="whitelogo" src="../static/images/logos/google.svg" alt="Google">
<code>img.whitelogo</code>
<img class="whitelogo" src="../static/images/logos/google.svg" alt="Google">
<code>img.whitelogo</code>
</div>
</li>
</ul>
@@ -1722,7 +1722,7 @@
<div class="content-left">
<h3>Responsive Videos</h3>
<pre>&lt;div class="embed"&gt;
&lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt;
&lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt;
&lt;/iframe&gt;
&lt;/div&gt;</pre>
<p><code>.embed</code></p>
@@ -1747,7 +1747,7 @@
</div>
<!-- .end .embed -->
</div>
<!-- .end .wrap -->
<!-- .end .wrap -->
</section>
<section class="fullscreen">
<!-- Fullscreen Video -->
@@ -1857,13 +1857,14 @@
</article>
</main>
<!--main-->
<!-- 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>
<script src="../dist/webslides.js"></script>
<script>
window.ws = new WebSlides();
</script>
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
<script defer src="../static/js/svg-icons.js"></script>
</body>
</html>