Introduction :

-Intro text :

We are glad to introduce to you our new HTML template which is specially designed for agency , photographer , graphics designer and web developer portfolio. It's an single page application template which is feel like multipage website driven through multi section. Self Revolution is a treat for your eyes with it's artistic and aesthetic design along with very simple and clean layout. Hope you will enjoy it's beauty as well as it's functional interface.

-Description :

Self Revolution is a smooth animated portfolio layout for agencies and freelancers. Fully animated and unique sections make item more attractive. Self Revolution is the best way to create agency or portfolio website. It is easy to customize codes, based on Bootstrap

Features

Animated Preloader Section Particle effects on home screen Creative Interaction UI Fully Responsive Soft Page Transition Ajax PHP Contact Form Animated Portfolio Thumbs Scroll Animations Awesome Hamburger Menu Portfolio Boxes HTML5 Validation Based on Bootstrap 4.x Flowless CSS transition Fanxybox Litebox Cross browsers support SVG + Image icons Google Fonts Free quick support

HTML Structure

<section id="home"> <h2> Hi, I am <span class="name-span">Musfiq Rubel</span> </h2> <h1> <span class="txt-type" data-wait="3000" data-words='["Web Designer","Web Developer","Wordpress Developer"]'> </span> </h1> <button class="cta-btn">Contact Me</button> <div class="overlay"> <div id="particles-js"> </div> </div> </section>

CSS Structure

                
                        #home{
                            background: repeat linear-gradient(90deg , black 50% , #112 50%);
                            background-repeat: no-repeat;
                            background-size: cover; 
                            position: relative;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                          }
                
            

Javascript Structure

                    
                            var nav = document.querySelector('nav');
                            var a = document.querySelectorAll('nav ul li a');
                            document.addEventListener('scroll', navBgChange);
                            function navBgChange() {
                              if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
                                nav.className = "navbarChange";
                            
                                a.forEach(function (link) {
                                  link.className = "navColChange";
                                });
                              } else {
                                nav.className = "";
                                a.forEach(function (link) {
                                  link.className = "";
                                });
                              }
                            }
                    
                

Font used

Poppins(google fonts)

How to change logo

Go to 595 number line and change logo <img src="assets/img/logo.svg" alt="logo"> , here is used svg image, you can use any image type (jpg,png,gif or svg)whatever you want. Put your image in img folder which lives in assets folder. Set your image name and make sure your image extension(jpg , png , gif , svg) .

How to change copyright text

Go to 578 number line and change copyright text <a href="#" target="_blank">Musfiq Rubel</a>

Source & Credit

• Bootstrap 4
• Font Awesome
• jQuery
• GSAP
• ScrollReveal.js

FAQ

Feel Free to query via emai - samin.rubel@gmail.com