Wrapkit

Banner 1 View Code 
                                                    
                                                        <div class="static-slider1">
                                                            <div class="container">
                                                                <!-- Row  -->
                                                                <div class="row">
                                                                    <!-- Column -->
                                                                    <div class="col-md-7 align-self-center" data-aos="fade-right" data-aos-duration="1200">
                                                                        <h1 class="title">I’m Angelina Doe, Web Designer & Good at <span class="text-success-gradiant typewrite" data-period="2000" data-type='[ "Photoshop", "HTML", "CSS3", "Angular CLI" ]'></span></h1>
                                                                        <a class="btn btn-success-gradiant btn-md btn-arrow m-t-20" data-toggle="collapse" href=""><span>Checkout My Work <i class="ti-arrow-right"></i></span></a>
                                                                    </div>
                                                                    <!-- Column -->
                                                                    <div class="col-md-5 img-anim m-t-40" data-aos="fade-up" data-aos-duration="2200">
                                                                        <img src="../assets/images/sliders/static-slider/slider1/img1.png" alt="wrapkit" class="img-fluid"/>
                                                                    </div>    
                                                                </div>
                                                            </div>
                                                        </div>                                                       
                                                    
                                                
                                                    
                                                        .static-slider1{
                                                            h1{
                                                                font-weight: 700;
                                                                line-height: 56px;
                                                                span{
                                                                    border-bottom:3px solid $success;
                                                                }
                                                            }

                                                        }
                                                        @media(max-width:767px) {
                                                        .static-slider1{    
                                                                h1{
                                                                    font-weight: 700;
                                                                    line-height: 36px;
                                                                    font-size:24px;
                                                                } 
                                                            }
                                                        }

I’m Angelina Doe, Web Designer & Good at

Checkout My Work
wrapkit
Banner 2 View Code 
                                                    
                                                        <div class="static-slider2 spacer">
                                                            <div class="container">
                                                                <!-- Row  -->
                                                                <div class="row">
                                                                    <!-- Column -->
                                                                    <div class="col-md-5 align-self-center" data-aos="fade-right" data-aos-duration="1200">
                                                                        <h1 class="title"><span class="typewrite" data-period="2000" data-type='[ "Creative", "Jquery", "Design", "Angular" ]'></span><br/>Done<span class="text-megna">.</span></h1>
                                                                        <h6 class="subtitle">I’m John Doe, a Web & Mobile App Designer,Specialize in Website Design, Illustration& Mobile Application Work.</h6>
                                                                        <a class="btn btn-success-gradiant btn-md btn-arrow m-t-20 m-b-10" data-toggle="collapse" href=""><span>Hire Me <i class="ti-arrow-right"></i></span></a>
                                                                        <a class="btn btn-link btn-md btn-arrow m-t-20 m-b-10 font-medium" data-toggle="collapse" href=""><span class="underline">Check my work <i class="ti-arrow-right"></i></span></a>
                                                                    </div>
                                                                    <!-- Column -->
                                                                    <div class="col-md-7 img-anim" data-aos="fade-up" data-aos-duration="2200">
                                                                        <img src="../assets/images/sliders/static-slider/slider2/img1.jpg" alt="wrapkit" class="img-fluid m-t-20"/>
                                                                    </div>    
                                                                </div>
                                                            </div>
                                                        </div>                                                       
                                                    
                                                
                                                    
                                                        .static-slider2{
                                                            h1{
                                                                font-size:90px;
                                                                font-weight: 800;
                                                                line-height: 90px;
                                                            }
                                                        }

                                                        @media(max-width:767px) {
                                                        .static-slider2{    
                                                                h1{
                                                                    font-weight: 700;
                                                                    line-height: 50px;
                                                                    font-size:50px;
                                                                } 
                                                            }
                                                        }


Done.

I’m John Doe, a Web & Mobile App Designer,Specialize in Website Design, Illustration & Mobile Application Work.
Hire Me Check my work
wrapkit
Banner 3 View Code 
                                                    
                                                        <div class="static-slider3">
                                                            <div class="container">
                                                                <!-- Row  -->
                                                                <div class="row justify-content-center ">
                                                                    <!-- Column -->
                                                                    <div class="col-md-8 align-self-center text-center" data-aos="fade-right" data-aos-duration="1200">
                                                                        <h1 class="title">I’m Johanthan Doe, an <b class="font-bold">Entreprenuer, Designer & Front-end Developer</b>, Making <span class="text-success-gradiant font-bold typewrite" data-period="2000" data-type='[ "Photoshop", "Web Application", "Web Designing", "Web Development" ]'></span></h1>
                                                                        <a class="btn btn-success-gradiant btn-md btn-arrow m-t-20" data-toggle="collapse" href=""><span>Checkout My Work <i class="ti-arrow-right"></i></span></a>
                                                                    </div>
                                                                    <!-- Column -->    
                                                                </div>
                                                            </div>
                                                        </div>                                                       
                                                    
                                                
                                                    
                                                        .static-slider3{
                                                            padding: 10% 0;
                                                            h1{
                                                                font-weight: 300;
                                                                line-height: 50px;
                                                                span{
                                                                    border-bottom:3px solid $success;
                                                                }
                                                            }

                                                        }
                                                        @media(max-width:767px) {
                                                        .static-slider3{    
                                                                h1{
                                                                    line-height: 30px;
                                                                    font-size:24px;
                                                                } 
                                                            }
                                                        }

I’m Johanthan Doe, an Entreprenuer, Designer & Front-end Developer, Making

Checkout My Work
Banner 4 View Code 
                                                    
                                                        <div class="static-slider4">
                                                            <div class="container">
                                                                <!-- Row  -->
                                                                <div class="row">
                                                                    <div class="col-md-5 img-anim" data-aos="fade-up" data-aos-duration="2200">
                                                                        <img src="../assets/images/sliders/static-slider/slider4/img1.png" alt="wrapkit" class="img-fluid"/>
                                                                    </div> 
                                                                    <!-- Column -->
                                                                    <div class="col-md-6 ml-auto align-self-center" data-aos="fade-right" data-aos-duration="1200">
                                                                        <h1 class="title">I’m Angelina Flintoff <b class="font-bold">Marketing & <span class="text-info-gradiant typewrite" data-period="2000" data-type='[ "SEO Expert", "HTML Expert", "CSS3 Expert"]'></span></b></h1>
                                                                        <a class="btn btn-outline-info btn-md btn-arrow m-t-20" data-toggle="collapse" href=""><span>Checkout My Work <i class="ti-arrow-right"></i></span></a>
                                                                    </div>
                                                                    <!-- Column -->

                                                                </div>
                                                            </div>
                                                            <div class="bg-info-gradiant">
                                                                <div class="container">
                                                                    <div class="row">
                                                                        <div class="col-lg-6 ml-auto info-box">
                                                                            <div class="d-flex">
                                                                                <div class="display-4 text-white m-r-20"><i class="fa fa-play-circle"></i></div>
                                                                                <div class="align-self-center"><h4 class="font-light m-b-0"><a href="#" data-toggle="modal" data-target="#static-slide3" class="text-white"><b class="font-bold">10 Marketing Tips for your Project </b><br/>05:30 By Angelina Flintoff</a></h4></div>
                                                                                <div class="modal fade" id="static-slide3">
                                                                                    <div class="modal-dialog" role="document">
                                                                                        <div class="modal-content">
                                                                                            <div class="modal-header">
                                                                                                <h5 class="modal-title">Watch video</h5>
                                                                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                                                                    <span aria-hidden="true">×</span>
                                                                                                </button>
                                                                                            </div>
                                                                                            <div class="modal-body" id="yt-player">
                                                                                                <iframe width="100%" height="315" src="https://www.youtube.com/embed/DDwbjWCgxVM?" frameborder="0" allowfullscreen></iframe>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>                                                       
                                                    
                                                
                                                    
                                                        .static-slider4{
                                                            h1{
                                                                font-weight: 100;
                                                                line-height: 50px;
                                                                span{
                                                                    border-bottom:3px solid $info;
                                                                }
                                                            }
                                                            .info-box{
                                                                padding: 25px 15px;
                                                            }
                                                            .img-anim{
                                                                position: relative;
                                                                top:110px;
                                                            }
                                                        }
                                                        @media(max-width:767px) {
                                                        .static-slider4{    
                                                                h1{
                                                                    line-height: 36px;
                                                                    font-size:24px;
                                                                } 
                                                                .img-anim{
                                                                    position: relative;
                                                                    top:0px;
                                                                }
                                                                .bg-info-gradiant{
                                                                    margin-top: 40px;
                                                                }
                                                            }
                                                        }
wrapkit

I’m Angelina Flintoff Marketing &

Checkout My Work

10 Marketing Tips for your Project
05:30 By Angelina Flintoff

Banner 5 View Code 
                                                    
                                                        <div class="static-slider5 bg-success-gradiant">
                                                            <div class="left-right-bg" style="background-image:url(../assets/images/sliders/static-slider/slider5/img1.png), url(../assets/images/sliders/static-slider/slider5/img2.png)">
                                                                <div class="container">
                                                                    <!-- Row  -->
                                                                    <div class="row justify-content-center ">
                                                                        <!-- Column -->
                                                                        <div class="col-md-8 align-self-center text-center" data-aos="fade-right" data-aos-duration="1200">
                                                                            <h1 class="title text-white">Your Sales and Expenses at One Place</h1>
                                                                            <p class="text-white op-8">Best Partner to Track your Daily Expenses and Earnings, Very Easy to Install & Use. Grab It Now as its FREE for 2 Months.</p>
                                                                            <a class="btn btn-rounded btn-light btn-md btn-arrow m-t-20 m-r-10" href="">Request a Demo</a> <a class="btn btn-rounded btn-outline-light btn-md btn-arrow m-t-20" href="">Take a Tour</a>
                                                                        </div>
                                                                        <!-- Column -->
                                                                        <div class="col-md-12 text-center m-t-40 middle-image">
                                                                            <img src="../assets/images/sliders/static-slider/slider5/img3.png" class="img-fluid" alt="wrapkit" />
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="bg-white p-40"></div>
                                                            </div>    
                                                        </div>                                                       
                                                    
                                                
                                                    
                                                        .static-slider5{
                                                            padding-top: 80px;
                                                            .middle-image{
                                                                margin-top: 80px;
                                                                margin-bottom: -100px;
                                                            }
                                                            .left-right-bg{
                                                                background-repeat: no-repeat;
                                                                background-position: left center, right center;
                                                            }
                                                        }
                                                        @media(max-width:767px) {
                                                            .static-slider5 .left-right-bg{
                                                                background-image: none!important;
                                                            }
                                                        }

Your Sales and Expenses at One Place

Best Partner to Track your Daily Expenses and Earnings, Very Easy to Install & Use. Grab It Now as its FREE for 2 Months.

Request a Demo Take a Tour
wrapkit
Banner 6 View Code 
                                                    
                                                        <div class="static-slider6 bg-danger-gradiant">
                                                            <div class="left-right-bg" style="background-image:url(../assets/images/sliders/static-slider/slider6/img2.png)">
                                                                <div class="container">
                                                                    <!-- Row  -->
                                                                    <div class="row justify-content-center">
                                                                        <!-- Column -->
                                                                        <div class="col-md-8 align-self-center" data-aos="fade-right" data-aos-duration="1200">
                                                                            <span class="badge badge-warning p-10">Money Making</span>
                                                                            <h1 class="title text-white">Powerful Solution for People who believe in Quality and Ready to Rock!</h1>
                                                                            <a class="btn btn-rounded btn-light btn-md btn-arrow m-t-20 m-r-10" href="">Request a Demo</a> <a class="btn btn-rounded btn-outline-light btn-md btn-arrow m-t-20" href="">Take a Tour</a>
                                                                        </div>
                                                                        <!-- Column -->
                                                                        <div class="col-md-8 text-center m-t-40 middle-image" data-aos="fade-up" data-aos-duration="1200">
                                                                            <img src="../assets/images/sliders/static-slider/slider6/img1.jpg" class="video-img img-fluid rounded" alt="wrapkit" />
                                                                            <div class="embed-responsive hide embed-responsive-16by9" data-animation="animated fadeIn">
                                                                                <video class="video" controls>
                                                                                    <source src="../assets/videos/running.mp4" type="video/mp4">
                                                                                    Your browser does not support HTML5 video.
                                                                                </video>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                            </div>    
                                                        </div>                                                       
                                                    
                                                
                                                    
                                                        .static-slider6{
                                                            padding-top: 80px;
                                                            .left-right-bg{
                                                                background-repeat: no-repeat;
                                                                background-position: bottom center;
                                                            }
                                                            .video-img{
                                                                cursor: pointer;
                                                            }
                                                        }
                                                    
                                                
                                                    
                                                        // This is for the static slider 6
                                                        $('.video-img').on('click', function() {
                                                            $(this).addClass('hide');
                                                            $('.embed-responsive').show()
                                                            .removeClass('hide');
                                                            $("video").each(function () { this.play() });
                                                        });
Money Making

Powerful Solution for People who believe in Quality and Ready to Rock!

wrapkit
Banner 7 View Code 
                                                    
                                                        <div class="static-slider7" style="background-image:url(../assets/images/sliders/static-slider/slider7/img1.jpg)">
                                                            <div class="container">
                                                                <!-- Row  -->
                                                                <div class="row justify-content-center ">
                                                                    <!-- Column -->
                                                                    <div class="col-md-8 align-self-center text-center" data-aos="fade-right" data-aos-duration="1200">
                                                                        <h1 class="title text-white typewrite" data-period="2000" data-type='[ "Colour", "Wrapkit" ]'></h1>
                                                                        <h4 class="text-white">Awesome Extra Ordinary Flexibility</h4>
                                                                        <a class="btn btn-danger-gradiant btn-rounded btn-md btn-arrow m-t-20" data-toggle="collapse" href=""><span>Products <i class="ti-arrow-right"></i></span></a>
                                                                        <a class="btn btn-outline-light btn-rounded btn-md m-t-20" data-toggle="modal" data-target="#static-slide7"  href=""><i class="fa fa-play m-r-10"></i> Intro </a>
                                                                    </div>
                                                                    <!-- Column -->
                                                                    <div class="modal fade" id="static-slide7">
                                                                        <div class="modal-dialog" role="document">
                                                                            <div class="modal-content">
                                                                                <div class="modal-header">
                                                                                    <h5 class="modal-title">Watch video</h5>
                                                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                                                        <span aria-hidden="true">×</span>
                                                                                    </button>
                                                                                </div>
                                                                                <div class="modal-body" id="yt-player">
                                                                                    <iframe width="100%" height="315" src="https://www.youtube.com/embed/DDwbjWCgxVM?" frameborder="0" allowfullscreen></iframe>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>   
                                                                </div>
                                                            </div>
                                                        </div>                                                       
                                                    
                                                
                                                    
                                                        .static-slider7{
                                                            background-repeat: no-repeat;
                                                            background-size: cover;
                                                            background-position: bottom center;
                                                            padding: 12% 0;
                                                            h1.title{
                                                                font-size:122px;
                                                                font-weight: 700;
                                                                text-transform: uppercase;
                                                                line-height: 130px;
                                                            }
                                                        }
                                                        @media(max-width:767px) {
                                                            .static-slider7 h1.title{
                                                                font-size:60px;
                                                                line-height: 70px;
                                                            }
                                                        }

Awesome Extra Ordinary Flexibility

Products Intro
Banner 8 View Code 
                                                    
                                                        <div class="static-slider8" style="background-image:url(../assets/images/sliders/static-slider/slider8/img1.jpg)">
                                                            <div class="container">
                                                                <!-- Row  -->
                                                                <div class="row justify-content-center ">
                                                                    <!-- Column -->
                                                                    <div class="col-md-8 align-self-center text-center">
                                                                        <h1 class="title text-white typewrite" data-period="2000" data-type='[ "Because", "Wrapkit" ]'></h1>
                                                                        <h4 class="text-white font-light">Awesome Extra Ordinary Flexibility</h4>
                                                                        <a class="btn btn-danger-gradiant btn-rounded btn-md btn-arrow m-t-20 m-b-40" data-toggle="collapse" href=""><span>Features <i class="ti-arrow-right"></i></span></a><br/>
                                                                        <img src="../assets/images/sliders/static-slider/slider8/img2.png" alt="wrapkit" class="showcase-img"  data-aos="fade-up" data-aos-duration="2200"/>
                                                                    </div>
                                                                    <!-- Column -->

                                                                </div>
                                                            </div>
                                                        </div>                                                       
                                                    
                                                
                                                    
                                                        .static-slider8{
                                                            padding: 80px 0 0;
                                                            overflow: hidden;
                                                            background-repeat: no-repeat;
                                                            background-size: cover;
                                                            background-position: bottom center;
                                                            h1.title{
                                                                font-size:65px;
                                                                font-weight: 700;

                                                            }
                                                            .showcase-img{
                                                                position: relative;
                                                                margin-bottom: -300px;
                                                            }
                                                        }

Awesome Extra Ordinary Flexibility

Features
wrapkit
Banner 9 View Code 
                                                    
                                                        <div class="static-slider9 po-relative">
                                                            <!-- Row  -->
                                                            <div class="row">
                                                                <div class="container">
                                                                    <!-- Column -->
                                                                    <div class="col-md-5 info-detail align-self-center">
                                                                        <h1 class="title">Don't see neighborhood?</h1>
                                                                        <h6 class="subtitle">To accomplish great things, we must not only act, but also dream; not only plan, but also believe.</h6>
                                                                        <p class="text-dark font-medium">Enter email address to get the app</p>
                                                                        <form class="form-inline">
                                                                          <div class="form-group m-r-10">
                                                                            <label for="inputPassword2" class="sr-only">Email</label>
                                                                            <input type="email" class="form-control form-control-lg" id="inputPassword2" placeholder="email address">
                                                                          </div>
                                                                          <button type="submit" class="btn btn-md btn-success-gradiant">GET</button>
                                                                        </form>

                                                                    <!-- Column -->
                                                                    </div>    
                                                                </div>    
                                                                <!-- Column -->
                                                                <div class="col-md-5 bg-img" style="background-image:url(../assets/images/sliders/static-slider/slider9/img1.jpg)">
                                                                    <img src="../assets/images/sliders/static-slider/slider9/img2.png" class="img-fluid" data-aos="fade-up" data-aos-duration="2200"/>
                                                                </div>
                                                                <!-- Column -->
                                                            </div>
                                                        </div>                                                       
                                                    
                                                
                                                    
                                                        .static-slider9{
                                                            overflow: hidden;
                                                            .bg-img{
                                                                background-size:cover;
                                                                background-position: center center;
                                                                position: absolute;
                                                                right:0px;
                                                                height: 100%;
                                                                img{
                                                                    margin-left: -200px;
                                                                    padding-top: 100px;
                                                                }
                                                            }
                                                            .container{
                                                                z-index: 1;
                                                            }
                                                            .info-detail{
                                                                padding: 15% 15px;
                                                                .title{
                                                                    font-size: 48px;
                                                                    font-weight: 700;
                                                                    line-height: 50px;
                                                                }
                                                                .subtitle{
                                                                    margin: 50px 0;
                                                                }
                                                            }
                                                            .adv-img{
                                                                padding-top: 100px;
                                                            }
                                                        }
                                                        @media(max-width:900px) {
                                                            .static-slider9{
                                                                .bg-img{
                                                                    position: relative;
                                                                    img{
                                                                        margin-left: 0px;
                                                                        padding: 20px;
                                                                    }
                                                                }
                                                                .info-detail{
                                                                    .title{
                                                                        font-size:40px;
                                                                    }
                                                                }
                                                            }
                                                        }

Don't see neighborhood?

To accomplish great things, we must not only act, but also dream; not only plan, but also believe.

Enter email address to get the app

wrapkit
Banner 10 View Code 
                                                    
                                                        <div class="static-slider10" style="background-image:url(../assets/images/sliders/static-slider/slider10/img1.jpg)">
                                                            <div class="container">
                                                                <!-- Row  -->
                                                                <div class="row justify-content-center ">
                                                                    <!-- Column -->
                                                                    <div class="col-md-6 align-self-center text-center" data-aos="fade-down" data-aos-duration="1200">
                                                                        <span class="label label-rounded label-inverse">Creating Brands</span>
                                                                        <h1 class="title">ONE BILLON People Use Facebook</h1>
                                                                        <h6 class="subtitle op-8">Pellentesque vehicula eros a dui pretium ornare. Phasellus congue vel quam nec luctus.In accumsan at eros in dignissim. Cras sodales nisi nonn accumsan.</h6>
                                                                        <a class="btn btn-outline-light btn-rounded btn-md btn-arrow m-t-20" data-toggle="collapse" href=""><span>Do you Need Help? <i class="ti-arrow-right"></i></span></a>
                                                                    </div>
                                                                    <!-- Column -->

                                                                </div>
                                                            </div>
                                                        </div>                                                       
                                                    
                                                
                                                    
                                                        .static-slider10{
                                                            padding: 10% 0;
                                                            background-size:cover;
                                                            background-position: center center;
                                                            .title{
                                                                color:$white;
                                                                text-transform: uppercase;
                                                                font-weight: 700;
                                                                font-size: 48px;
                                                                line-height: 50px;
                                                            }
                                                            .subtitle{
                                                                color:$white;
                                                            }
                                                        }
                                                        @media(max-width:900px) {
                                                            .static-slider10{
                                                                .title{
                                                                        font-size:40px;
                                                                        line-height: 45px;
                                                                    }
                                                            }
                                                        }
Creating Brands

ONE BILLON People Use Facebook

Pellentesque vehicula eros a dui pretium ornare. Phasellus congue vel quam nec luctus.In accumsan at eros in dignissim. Cras sodales nisi nonn accumsan.
Do you Need Help?
Address

71 Amsteroum Avenue Cronish Night, NY 35098

Phone

Reception : +205 123 4567
Office : +207 235 7890

Email

Office : info@wrappixel.com
Site : wrapkit@wrappixel.com

Social
All Rights Reserved by WrapPixel.
Terms of Use Legal Disclaimer Privacy Policy