07 Elements and components - pimmey/axala-docs GitHub Wiki
This type takes advantage of parallax yet again and Materialize slider, which follows this structure:
<div class="slider">
<ul class="slides">
<li>
<img src="./assets/images/work/bottle-detail/bottle-3.jpg" alt="Bottle III" />
</li>
<li>
<img src="./assets/images/work/bottle-detail/bottle-4.jpg" alt="Bottle IV" />
</li>
<li>
<img src="./assets/images/work/bottle-gradient-2.jpg" alt="Bottle Concept II" />
</li>
</ul>
</div>
It also needs to be initialised via Javascript. We also define a small check in order to set the slider's height:
var height = window.innerWidth < 600 ? 350 : 650;
$('.slider').slider({height: height});
Using animated icons is really simple, you're just gonna need to paste the SVG code of the icon on your page. To accomplish that, go a head and download the needed icon pack from linea.io and open the downloaded pack. You're gonna need to find the icon in .svg format and open that with a text/code editor of your choice, then just paste the code in the .services-section
element.
An example of how it might look:
<svg id="Layer_1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="150px" height="150px" viewbox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
<path fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M32.001,0.887c17.184,0,31.113,13.929,31.112,31.113 C63.114,49.185,49.184,63.115,32,63.113C14.815,63.114,0.887,49.185,0.888,32.001C0.885,14.816,14.815,0.887,32.001,0.887z"></path>
<path fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M10,32c0-5.63,2.148-11.26,6.444-15.556 c8.591-8.593,22.521-8.593,31.112,0C51.852,20.74,54,26.37,54,32"></path>
<line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="24" y1="26" x2="30.333" y2="33.333"></line>
<circle fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" cx="32" cy="35" r="2"></circle>
</svg>
We've created a useful mapping for the Linea icons.
<div class="price-box">
<h4><sup>$</sup><span class="price">19</span></h4>
<ul class="flow-text">
<li>5 users<span class="info tooltipped" data-position="top" data-delay="50" data-tooltip="The number of allowed users">?</span></li>
<li>Automation<span class="info tooltipped" data-position="top" data-delay="50" data-tooltip="Involves Gulp commands">?</span></li>
<li>Validation</li>
<li>Linting</li>
</ul>
</div>
FAQ accordion
<ul data-collapsible="accordion" class="collapsible flow-text">
<li>
<div class="collapsible-header active">— Is the starter pack really free?</div>
<div class="collapsible-body">
<p>A cattle she’d creepeth. That light make. Void two they’re, can’t us don’t creepeth. Fruitful there herb from signs she’d created whales them. Lights which face. Divided they’re first. Dry wherein own itself green it.</p>
</div>
</li>
...
</ul>