Commit be76e942 authored by Michael Iseard's avatar Michael Iseard
Browse files

rewrite Installation, change font

parent d53491d6
......@@ -14,11 +14,26 @@
<link rel="stylesheet" type="text/css" href="css/citrus-slider.min.css?v=1.0.31">
<!-- highlightjs -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<link rel="stylesheet" href="css/highlightjs.css">
<title>Citrus-Slider Demo</title>
<!-- favicon -->
<link rel="icon" type="image/png" sizes="32x32" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<title>Citrus Slider - A modern JavaScript carousel.</title>
<style>
body {
font-family: 'Open Sans', sans-serif;
}
.btn-primary,
.btn-primary:hover,
.btn-primary:active,
......@@ -28,6 +43,13 @@
border-color: #F28A27;
}
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
background-color: #F49E4C;
border-color: #F28A27;
}
#intro {
background-color: #59acff;
color: #fff;
......@@ -37,8 +59,11 @@
border-top: 1px solid rgba(255, 255, 255, 0.53);
}
#slider-demo-1 {
border-radius: 5px;
#site-footer {
background-color: #59acff;
color: #fff;
text-align: center;
padding: 2em;
}
</style>
</head>
......@@ -47,16 +72,10 @@
<nav id="main-nav" class="navbar navbar-expand-lg navbar-light rounded">
<div class="container">
<img src="img/logo-final.svg" width="30" height="30" class="d-inline-block align-top" alt="">
<!-- <img src="img/logo-final.svg" width="30" height="30" class="d-inline-block align-top" alt=""> -->
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-item nav-link" href="#demo">Demo</a>
</li>
<li class="nav-item">
<a class="nav-item nav-link" href="#usage">Usage</a>
</li>
<li class="nav-item">
<a class="nav-item nav-link" href="#">Settings</a>
<a class="nav-item nav-link" href="#installation">Installation</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
......@@ -71,7 +90,7 @@
</nav>
<div id="intro" class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-3">Citrus Slider</h1>
<h1 class="display-3"><img src="img/logo-final.svg" width="86" height="86" class="d-inline-block align-top" alt="">Citrus Slider</h1>
<p class="lead">A modern JavaScript carousel with no third party requirements.</p>
<hr class="my-4">
<p class="lead">
......@@ -83,8 +102,7 @@
</div>
<section>
<div class="container">
<h2 id="demo" class="display-4">Demo</h2>
<div id="slider-demo-1" class="citrus-slider" style="width:100%; height: 400px;">
<div id="slider-demo-1" class="citrus-slider" style="height: 400px;">
<div>
<img src="img/1.png?v=1.0.0">
<h2>Light, fast and free</h2>
......@@ -106,27 +124,35 @@
</div>
</section>
<br/>
<section class="bg-light">
<section>
<div class="container">
<h2 id="usage" class="display-4">Usage</h2>
<h2 id="installation" class="display-4">Installation</h2>
<br/>
<h3>Basic</h3>
<h3>Include required files</h3>
<p>Include citrus-slider in your project by adding these two lines before the end of the <code>head</code> tag.</p>
<pre>
<code class="html">
&lt;link rel="stylesheet" href="css/citrus-slider.min.css"&gt;
&lt;script src="js/citrus-slider.min.js?v=1.0.31"&gt; &lt;/script&gt;
</code>
</pre>
<h3>Add markup</h3>
<pre>
<code class="html">
&lt;div class="citrus-slider"&gt;
&lt;div&gt;&lt;img src="img/1.jpg"&gt;&lt;/div&gt;
&lt;div&gt;&lt;img src="img/2.jpg"&gt;&lt;/div&gt;
&lt;div&gt;&lt;img src="img/3.jpg"&gt;&lt;/div&gt;
&lt;div&gt;&lt;img src="img/slide-1.jpg"&gt;&lt;/div&gt;
&lt;div&gt;&lt;img src="img/slide-2.jpg"&gt;&lt;/div&gt;
&lt;div&gt;&lt;img src="img/slide-3.jpg"&gt;&lt;/div&gt;
&lt;/div&gt;
</code>
</pre>
<h3>With text</h3>
<h3>Add desired text</h3>
<pre>
<code class="html">
&lt;div class="citrus-slider"&gt;
&lt;div&gt;&lt;img src="img/1.jpg"&gt;&lt;h2&gt;Slide 1&lt;/h2&gt;&lt;/div&gt;
&lt;div&gt;&lt;img src="img/2.jpg"&gt;&lt;h2&gt;Slide 2&lt;/h2&gt;&lt;/div&gt;
&lt;div&gt;&lt;img src="img/3.jpg"&gt;&lt;h2&gt;Slide 3&lt;/h2&gt;&lt;/div&gt;
&lt;div&gt;&lt;img src="img/slide-1.jpg"&gt;&lt;h2&gt;Slide 1&lt;/h2&gt;&lt;/div&gt;
&lt;div&gt;&lt;img src="img/slide-2.jpg"&gt;&lt;h2&gt;Slide 2&lt;/h2&gt;&lt;/div&gt;
&lt;div&gt;&lt;img src="img/slide-3.jpg"&gt;&lt;h2&gt;Slide 3&lt;/h2&gt;&lt;/div&gt;
&lt;/div&gt;
</code>
</pre>
......@@ -134,18 +160,18 @@
<pre>
<code class="html">
&lt;div class="citrus-slider" data-citrus='{"duration" : 4000, "transition" : "pan"}'&gt;
&lt;div&gt;&lt;img src="img/1.jpg"&gt;&lt;/div&gt;
&lt;div&gt;&lt;img src="img/2.jpg"&gt;&lt;/div&gt;
&lt;div&gt;&lt;img src="img/3.jpg"&gt;&lt;/div&gt;
&lt;div&gt;&lt;img src="img/slide-1.jpg"&gt;&lt;/div&gt;
&lt;div&gt;&lt;img src="img/slide-2.jpg"&gt;&lt;/div&gt;
&lt;div&gt;&lt;img src="img/slide-3.jpg"&gt;&lt;/div&gt;
&lt;/div&gt;
</code>
</pre>
</div>
</section>
<footer class="footer">
<footer id="site-footer" class="footer">
<div class="container">
<span class="text-muted">&copy; 2018 Iseard Media</span>
<span>&copy; Copyright 2018 Iseard Media - All rights reserved</span>
</div>
</footer>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment