mirror of
https://github.com/webslides/WebSlides.git
synced 2025-08-22 12:53:23 +02:00
Merge branch 'master' of https://github.com/jlantunez/webslides
This commit is contained in:
Luis
@@ -319,11 +319,7 @@
|
||||
<section>
|
||||
<div class="wrap">
|
||||
<h1>Navigation</h1>
|
||||
<ul class="tabs">
|
||||
<li class="tab current" data-tab="tab-1">ul.tabs</li>
|
||||
<li class="tab" data-tab="tab-2">columns</li>
|
||||
</ul>
|
||||
<div id="tab-1" class="tab-content current">
|
||||
|
||||
<nav role="navigation">
|
||||
<ul>
|
||||
<li><a href="">About</a></li>
|
||||
@@ -372,9 +368,8 @@
|
||||
</ul>
|
||||
</nav>
|
||||
<p>nav.navbar</p>
|
||||
</div>
|
||||
<!-- end .tab-content -->
|
||||
<div id="tab-2" class="tab-content">
|
||||
|
||||
<hr>
|
||||
<div class="grid">
|
||||
<div class="column">
|
||||
<h3>Company</h3>
|
||||
@@ -436,8 +431,6 @@
|
||||
</div>
|
||||
<!-- .end .grid -->
|
||||
</div>
|
||||
<!-- end .tab-content -->
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
@@ -1803,50 +1796,9 @@
|
||||
<section class="aligncenter">
|
||||
<!--.wrap = container 1200px -->
|
||||
<div class="wrap">
|
||||
<div id="tab-3" class="tab-content current">
|
||||
<h1 class="text-landing">Tell a Story</h1>
|
||||
<p class="text-intro"><strong>Hi, this is WebSlides</strong>. HTML presentations made simple. <br>I'm a cute solution with clean markup and <strong>lovely CSS</strong>.</p>
|
||||
</div>
|
||||
<div id="tab-4" class="tab-content">
|
||||
<ul class="flexblock features">
|
||||
<li>
|
||||
<div>
|
||||
<svg class="fa-heart-o">
|
||||
<use xlink:href="#fa-heart-o"></use>
|
||||
</svg>
|
||||
<h2>Indexed content</h2>
|
||||
Sharing is caring.
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<h2>
|
||||
<svg class="fa-magic">
|
||||
<use xlink:href="#fa-magic"></use>
|
||||
</svg>
|
||||
Just essential features
|
||||
</h2>
|
||||
Keyboard navigation...
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<svg class="fa-bolt">
|
||||
<use xlink:href="#fa-bolt"></use>
|
||||
</svg>
|
||||
<h2>
|
||||
Prototype faster
|
||||
</h2>
|
||||
with clean code
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="tabs">
|
||||
<li class="tab current" data-tab="tab-3">Purpose</li>
|
||||
<li class="tab" data-tab="tab-4">Benefits</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<section class="bg-black aligncenter">
|
||||
<!-- Overlay/Opacity: [class*="bg-"] > .background.dark or .light -->
|
||||
@@ -3134,25 +3086,6 @@
|
||||
<script defer src="../static/js/svg-icons.js"></script>
|
||||
<script type="text/javascript">
|
||||
var slide = jQuery('#webslides').webslides();
|
||||
|
||||
jQuery(document).ready(function($){
|
||||
// Tabs
|
||||
jQuery('ul.tabs li').click(function(){
|
||||
var $this = jQuery(this);
|
||||
var tab_id = $this.attr('data-tab');
|
||||
jQuery('ul.tabs li').removeClass('current');
|
||||
jQuery('.tab-content').removeClass('current');
|
||||
$this.addClass('current');
|
||||
jQuery("#"+tab_id).addClass('current');
|
||||
});
|
||||
});
|
||||
|
||||
// Prototype better, faster. To show the grid/baseline.png, press Enter on keyboard
|
||||
jQuery(document).keypress(function(e) {
|
||||
if(e.which == 13) {
|
||||
jQuery('body').toggleClass('baseline').css('height', $(document).height());
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
@@ -25,7 +25,6 @@
|
||||
3.1 Logo
|
||||
4. Navigation
|
||||
4.1 Navbars
|
||||
4.2 Tabs
|
||||
5. SLIDES (vertically and horizontally centered)
|
||||
5.1 Mini container & Alignment
|
||||
5.2 Counter / Navigation Slides
|
||||
@@ -303,8 +302,7 @@ body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* == Prototype faster - Vertical rhythm
|
||||
To show the grid/baseline.png, press ENTER key on keyboard == */
|
||||
/* == Prototype faster - Vertical rhythm == */
|
||||
|
||||
body.baseline {
|
||||
background: url(../images/baseline.png) left top .8rem/.8rem;
|
||||
@@ -1314,77 +1312,6 @@ nav.navbar li a{justify-content:flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
/*=== 4.2. Tabs === */
|
||||
|
||||
ul.tabs {
|
||||
display: inline-block;
|
||||
margin-bottom: 3.2rem;
|
||||
}
|
||||
|
||||
ul.tabs li {
|
||||
position: relative;
|
||||
display: table-cell;
|
||||
/*ftext-transform: uppercase;
|
||||
letter-spacing: .1rem;*/
|
||||
padding: .8rem 2.4rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tabs li:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 3px;
|
||||
-webkit-transition: width 200ms ease, opacity 200ms ease;
|
||||
transition: width 200ms ease, opacity 200ms ease;
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.tabs li.current:before {
|
||||
opacity: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
ul.tabs li.current {
|
||||
font-weight: 600;
|
||||
}
|
||||
/*.tabs li:after{
|
||||
position: relative;
|
||||
right: -2.8rem;
|
||||
font-size:1.6rem;
|
||||
font-weight:300;
|
||||
content: "*";
|
||||
|
||||
}
|
||||
.tabs li:last-child:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
*/
|
||||
|
||||
.tab-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-content.current {
|
||||
display: inherit;
|
||||
-webkit-animation: fadeIn ease-in 1;
|
||||
animation: fadeIn ease-in 1;
|
||||
-webkit-animation-duration: .3s;
|
||||
animation-duration: .3s;
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.tabs li {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/*============================================
|
||||
5. SLIDES (Full Screen)
|
||||
Vertically and horizontally centered
|
||||
|
||||
@@ -363,31 +363,6 @@ nav li.email a:hover {
|
||||
background: #dd4b39;
|
||||
}
|
||||
|
||||
|
||||
/*=========================================
|
||||
Tabs
|
||||
=========================================== */
|
||||
|
||||
|
||||
ul.tabs li {
|
||||
border: 1px solid rgba(0, 20, 80, 0.1);
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
ul.tabs li:last-child {
|
||||
border-right: 1px solid rgba(0, 20, 80, 0.1);
|
||||
}
|
||||
|
||||
ul.tabs li.current {
|
||||
background: rgba(255, 255, 255, 0.09);
|
||||
}
|
||||
|
||||
ul.tabs li:before {
|
||||
background-color: #44d;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*===================================================
|
||||
.flexblock li hover/active
|
||||
===================================================== */
|
||||
|
||||
Reference in New Issue
Block a user