Solar System timeline

Buy on codecanyon
1. Mercury Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias facere in ipsum iusto modi. Accusamus aliquam dolores error in iste quae quidem repellendus? Doloremque in mollitia reiciendis! Beatae, ipsum, nulla!
2. Venus Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias facere in ipsum iusto modi. Accusamus aliquam dolores error in iste quae quidem repellendus? Doloremque in mollitia reiciendis! Beatae, ipsum, nulla!
3. Earth Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias facere in ipsum iusto modi. Accusamus aliquam dolores error in iste quae quidem repellendus? Doloremque in mollitia reiciendis! Beatae, ipsum, nulla!
4. Mars Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias facere in ipsum iusto modi. Accusamus aliquam dolores error in iste quae quidem repellendus? Doloremque in mollitia reiciendis! Beatae, ipsum, nulla!
5. Jupiter Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias facere in ipsum iusto modi. Accusamus aliquam dolores error in iste quae quidem repellendus? Doloremque in mollitia reiciendis! Beatae, ipsum, nulla!
6. Saturn Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias facere in ipsum iusto modi. Accusamus aliquam dolores error in iste quae quidem repellendus? Doloremque in mollitia reiciendis! Beatae, ipsum, nulla!
7. Uranus Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias facere in ipsum iusto modi. Accusamus aliquam dolores error in iste quae quidem repellendus? Doloremque in mollitia reiciendis! Beatae, ipsum, nulla!
8. Neptune Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias facere in ipsum iusto modi. Accusamus aliquam dolores error in iste quae quidem repellendus? Doloremque in mollitia reiciendis! Beatae, ipsum, nulla!

Features

Usage

CSS Installation

Copy and paste the file 'solar-system-timeline.min.css' into your website's folder, then copy and paste the following code on your website's template code between the tags <head> and </head>

<link href="css/solar-system-timeline.min.css"
        rel="stylesheet">

Copy file dot.svg from folder "img" to yoursite/img/

HTML Markup

<!-- start Solar System timeline -->
<div class="ss-timeline">
        <!-- timeline blocks -->
</div>
<!-- end Solar System timeline -->

Element markup

<div class="timeline-block">
    <div class="timeline-planet-wrap">
        <!-- planet icon -->
    </div>
    <div class="timeline-content left">
        <span>
            <!-- date -->
        </span>
        <!-- text -->
    </div>
</div>

For left element use class "left", for right element use "right"

Included Icons

Animation

If you dont want animated icons just add class "dontanimate"

<div id="mercury-wrap" class="planet dontanimate"></div>

Lazy way to change colors

If you want to change colors but dont want to open all svg files and change them, you can use lazy way. Just uncomment this lines in the botton of css file and change colors. This will affect all icons.

/* Lazy color change */

/*.ss-timeline .timeline-block:before{
    background-color: deeppink !important;
}

.ss-change-fill{
    fill: pink !important;
    stroke: deeppink !important;
}

.ss-change-stroke{
    stroke: deeppink !important;
}*/

Buy it

Buy on codecanyon