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
- Responsive design
- Easy to Customize
- Smooth animation
- Minimalistic icons
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