I want slider text on overlap my image

i am trying to overlap my text on image but its not working on Google Chrome & Opera. And its working in Safari, Firefox & IE. I upload both browsers screenshot, Waiting for your helpful answers.

Hi, Waqar_Butt. Welcome to the forums.

I gather that you want help with the way your page renders in different browsers, in which case we need to see the code. Perhaps you could post a link to your web site. The screen shots are helpful, but the code is the key.

Here is a link of current website please check it on different browsers.

http://110.37.221.139/vanguard/vanguardmatrixnew/

I can’t seem to access that site.

This site can’t be reached

110.37.221.139 took too long to respond.

The URL, http://110.37.221.139/vanguard/vanguardmatrixnew/, is still taking too long to respond.

1 Like

Now its working please check.

The problem is that you are layering three items from different stacking contexts and while this is fine where no local context exists the problem arises when you use transforms because in webkit transforms create new stacking contexts and there will be no way for you to layer the black diagonal image between the text and the sliding image.

You can check this is true by adding the following code and you will see that the text appears but of course you lose the sliding effect on the text.

.my_slider .item{
-webkit-transform:none!important;
-webkit-perspective:none!important;
}

Your choices are to animate the text with js instead or to animate the text separately from a new container outside the container than animates the image. If you have three separate contexts then you can layer them ok even if transforms are applied to each. What you can’t do is have two items in the same container and then try to intermingle that with anything else.

It is an annoying webkit behaviour but there is probably no way around it I’m afraid other than to rethink certain elements…

1 Like

Will you please show me one example of a (new container outside the container).

Very roughly like this (although the logic of that top section really needs re-thinking).

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>VanguardMatrix</title>
<link rel="stylesheet" href="http://110.37.221.139/vanguard/vanguardmatrixnew/css/style.css" type="text/css">
<link rel="stylesheet" href="http://110.37.221.139/vanguard/vanguardmatrixnew/css/hover.css" type="text/css">
<link rel="stylesheet" href="http://110.37.221.139/vanguard/vanguardmatrixnew/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="http://110.37.221.139/vanguard/vanguardmatrixnew/font-awesome-4.6.2/css/font-awesome.css" type="text/css">
<link rel="stylesheet" href="http://110.37.221.139/vanguard/vanguardmatrixnew/font-awesome-4.6.2/css/font-awesome.min.css" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<style>
.text-overlay{
	position:absolute;
	left:36%;
	right:0;
	top:170px;
	z-index:99;
	text-align:center;	
}
.text-overlay .slider_text{
	display:inline-block;
	max-width:600px;
}
.slider_text h2,
.slider_text p,
.slider_text a{
	position:static !important;
	width:auto;
	height:auto;
	margin:0 0 20px!important;
}
.slider_text a{display:inline-block;width:157px;}
@media screen and (max-width:1200px){
	.text-overlay{left:0}
	.slider_text h2 br,.slider_text p,.slider_text a{ display:none;}
	.text-overlay .slider_text{display:block;margin:0 100px;background:rgba(0,0,0,0.5);padding:20px;max-width:none;}	
}
@media screen and (max-width:768px){
	.text-overlay{display:none}	
}
</style>
</head>

<body>
<div id="main_wrapper">
  <header>
    <div class="top_area_main">
      <div class="container">
        <div class="top_area_sub">
          <div class="col-xs-4 padding_right">
            <div class="logo_bg"> <a href="http://110.37.221.139/vanguard/vanguardmatrixnew/"><img src="http://110.37.221.139/vanguard/vanguardmatrixnew/images/vanguard_logo.png" alt="VanguardMatrix"></a> </div>
            <!--logo_bg--> 
          </div>
          <div class="col-xs-8 pull-right padding_left">
            <div class="social_wrapper"> <img src="http://110.37.221.139/vanguard/vanguardmatrixnew/images/connect_top.png" alt="Connect with us">
              <ul>
                <li><a target="_blank" href="https://www.facebook.com/ImageTechSolution"><i class="fa fa-facebook"></i></a></li>
                <li><a target="_blank" href="https://twitter.com/ImageTechSol"><i class="fa fa-twitter"></i></a></li>
                <li><a target="_blank" href="https://plus.google.com/102265589369839570973/about"><i class="fa fa-google-plus"></i></a></li>
                <li><a target="_blank" href="https://www.linkedin.com/company/imagetech-solution"><i class="fa fa-linkedin f_in_icon"></i></a></li>
                <li><a target="_blank" href="#"><i class="fa fa-instagram"></i></a></li>
              </ul>
            </div>
            <!--social_wrapper--> 
          </div>
          <div class="col-sm-8 col-xs-12 pull-right padding_left">
            <nav id="menu">
              <label for="tm" id="toggle-menu">Menu <span class="drop-icon">▾</span></label>
              <input type="checkbox" id="tm">
              <ul class="main-menu clearfix">
                <li><a href="#">Home</a></li>
                <li><a href="#">Products</a></li>
                <li> <a href="#">Services <span class="drop-icon caret"></span>
                  <label title="Toggle Drop-down" class="drop-icon" for="sm1">▾</label>
                  </a>
                  <input type="checkbox" id="sm1">
                  <ul class="sub-menu">
                    <li><a href="#">Software Development</a></li>
                    <li> <a href="#">Web Development <span class="drop-icon caret"></span>
                      <label title="Toggle Drop-down" class="drop-icon" for="sm2">▾</label>
                      </a>
                      <input type="checkbox" id="sm2">
                      <ul class="sub-menu">
                        <li><a href="#">Item 2.2.1</a></li>
                        <li><a href="#">Item 2.2.2</a></li>
                        <li><a href="#">Item 2.2.3</a></li>
                      </ul>
                    </li>
                    <li><a href="#">App Development</a></li>
                    <li><a href="#">Game Development</a></li>
                    <li><a href="#">Design & Animation</a></li>
                  </ul>
                </li>
                <li><a href="#">Enterprise Solutions</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Insights</a></li>
                <li><a href="#">Career</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
            </nav>
          </div>
        </div>
        <!--top_area_sub--> 
      </div>
      <!--container--> 
    </div>
    <!--top_area_main--> 
  </header>
  <div class="my_slider">
    <div id="hero-wrapper">
      <div class="carousel-wrapper">
        <div id="hero-carousel" class="carousel slide carousel-fade">
          <div class="carousel-inner">
            <div class="item active"> <img src="http://110.37.221.139/vanguard/vanguardmatrixnew/images/slide1.jpg"> </div>
            <div class="item"> <img src="http://110.37.221.139/vanguard/vanguardmatrixnew/images/slide2.jpg"> </div>
            <div class="item"> <img src="http://110.37.221.139/vanguard/vanguardmatrixnew/images/slide3.jpg"> </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--hero-wrapper-->
  
  <div class="text-overlay">
    <div class="slider_text">
      <h2>Technology Consulting<br>
        & Solution Design</h2>
      <p>Vanguard Matrix designs and builds custom software systems. We partner with clients to create and support innovative solutions that help businesses become a lasting success in the marketplace.</p>
      <a href="#">Read more</a> </div>
  </div>
  <!--my_slider-->
  <div class="slider_front"> <img src="http://110.37.221.139/vanguard/vanguardmatrixnew/images/slider_back1.png" alt=""> </div>
  <!--slider_front-->
  
  <section class="brands_bg_frame"> 
    <!--<img src="http://110.37.221.139/vanguard/vanguardmatrixnew/images/brands_bg2.jpg" >-->
    <div class="container">
      <div class="brands_area">
        <h2>We Build Brands</h2>
        <div class="ba_text">A full-service digital agency approach to grow your brand online</div>
        <div class="col-sm-6 col-md-3">
          <div class="brand_box">
            <div class="icon_box"><img src="http://110.37.221.139/vanguard/vanguardmatrixnew/images/software_icn.png" alt="Software Development"></div>
            <!--icon_box-->
            <h4>Software Development</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor </p>
          </div>
          <!--brand_box--> 
        </div>
        <div class="col-sm-6 col-md-3">
          <div class="brand_box">
            <div class="icon_box"><img src="http://110.37.221.139/vanguard/vanguardmatrixnew/images/web_icon.png" alt="Web Development"></div>
            <!--icon_box-->
            <h4>Web Development</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor </p>
          </div>
          <!--brand_box--> 
        </div>
        <div class="col-sm-6 col-md-3">
          <div class="brand_box">
            <div class="icon_box"><img src="http://110.37.221.139/vanguard/vanguardmatrixnew/images/app_icon.png" alt="App Development"></div>
            <!--icon_box-->
            <h4>App Development</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor </p>
          </div>
          <!--brand_box--> 
        </div>
        <div class="col-sm-6 col-md-3">
          <div class="brand_box">
            <div class="icon_box"><img src="http://110.37.221.139/vanguard/vanguardmatrixnew/images/design_icon.png" alt="Design & Animation"></div>
            <!--icon_box-->
            <h4>Design & Animation</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor </p>
          </div>
          <!--brand_box--> 
        </div>
      </div>
      <!--brands_area--> 
    </div>
    <!--container--> 
  </section>
  <section class="white_main">
    <div class="container">
      <h3>About Us</h3>
      <p>We are a global software development company based in Canada. We use advanced IT technologies and take an innovative approach to help businesses worldwide. Our team works alongside customers to ensure that 100% of the projects are done in an effective manner. Moreover, we provide a clear breakdown of the costs with no additional and hidden charges. With a wealth of experience in product development and application services we are committed to bringing continued success to your organization.</p>
      <div class="about_boxes">
        <div class="col-sm-4">
          <div class="about_box"> <a href="#" class="hexagon ribbon-outset border"><img src="http://110.37.221.139/vanguard/vanguardmatrixnew/images/about_icon1.png" alt="WHO WE ARE"></a>
            <h2>WHO WE ARE</h2>
            <p><strong>VANGUARD MATRIX, INC.</strong> was formed in 2014, founded by group of young, brilliant and certified <strong>IT professionals.</strong> Our headquarters are located in Mississauga, Ontario, Canada. Our strategy is to strengthen our position as a leader in <strong>software development industry</strong>, while helping to meet the dynamic and complex IT environments in a secure and responsible way.</p>
            <a class="rm_about hvr-shutter-out-horizontal" href="#">Read more</a> </div>
          <!--about_box--> 
        </div>
        <div class="col-sm-4">
          <div class="about_box"> <a href="#" class="hexagon ribbon-outset border"><img src="http://110.37.221.139/vanguard/vanguardmatrixnew/images/about_icon2.png" alt="WHAT WE DO"></a>
            <h2>WHAT WE DO</h2>
            <p><strong>VANGUARD MATRIX, INC.</strong> was formed in 2014, founded by group of young, brilliant and certified <strong>IT professionals.</strong> Our headquarters are located in Mississauga, Ontario, Canada. Our strategy is to strengthen our position as a leader in <strong>software development industry</strong>, while helping to meet the dynamic and complex IT environments in a secure and responsible way.</p>
            <a class="rm_about hvr-shutter-out-horizontal" href="#">Read more</a> </div>
          <!--about_box--> 
        </div>
        <div class="col-sm-4">
          <div class="about_box"> <a href="#" class="hexagon ribbon-outset border"><img src="http://110.37.221.139/vanguard/vanguardmatrixnew/images/about_icon3.png" alt="SPECIALTIES"></a>
            <h2>SPECIALTIES</h2>
            <p><strong>VANGUARD MATRIX, INC.</strong> was formed in 2014, founded by group of young, brilliant and certified <strong>IT professionals.</strong> Our headquarters are located in Mississauga, Ontario, Canada. Our strategy is to strengthen our position as a leader in <strong>software development industry</strong>, while helping to meet the dynamic and complex IT environments in a secure and responsible way.</p>
            <a class="rm_about hvr-shutter-out-horizontal" href="#">Read more</a> </div>
          <!--about_box--> 
        </div>
      </div>
      <!--about_boxes--> 
    </div>
    <!--container--> 
  </section>
  <section class="black_main">
    <div class="container">
      <div class="es_main">
        <h3>ENTERPRISE SOLUTIONS</h3>
        <div class="col-md-6 padding_right">
          <div class="col-sm-12 padding_none">
            <div class="col-sm-6 padding_right">
              <div class="es_box">
                <h3>ECommerce <span>Solutions</span></h3>
                <p>We work hand in hand with retailers, brands and branded manufacturers across diverse industries to successfully integrate digital and physical shopping experiences.<br>
                  <br>
                  Grow your business with <strong>VANGUARD MATRIX, INC.</strong> today!</p>
              </div>
              <!--es_box--> 
            </div>
            <div class="col-sm-6 padding_left">
              <div class="es_box">
                <h3>m<span>Wallet</span></h3>
                <p><strong>MWallet</strong> is a secure and convenient storage to store your confidential and sensitive information related to Bank Accounts, Credit Cards, Insurance Policies developed by <strong>VANGUARD MATRIX</strong> team of experts.</p>
              </div>
              <!--es_box--> 
            </div>
          </div>
          <div class="col-sm-12 padding_none">
            <div class="col-sm-6 padding_right">
              <div class="es_box">
                <h3>m<span>Pos</span></h3>
                <p><strong>VANGUARD MATRIX, INC.</strong> creates <strong>Mobile POS solutions</strong> according to World Industry Standards. We will help you implement <strong>mPOS</strong> for your businesses to further increase your sales and expand your customer base.</p>
              </div>
              <!--es_box--> 
            </div>
            <div class="col-sm-6 padding_left">
              <div class="es_box">
                <h3>Payment <span>Gateway</span></h3>
                <p>We offer different <strong>gateway solutions</strong> for payment service provider and acquirers. Choose which one suits you best. <strong>VANGUARD MATRIX</strong> offers different gateway solutions for payment service provider and acquirers. Choose which one suits you best.</p>
              </div>
              <!--es_box--> 
            </div>
          </div>
        </div>
        <div class="col-md-6 padding_left">
          <div class="es_boxes_area">
            <div class="es_box1"> <img alt="ECommerce Solutions" src="http://110.37.221.139/vanguard/vanguardmatrixnew/images/es_icon1.png"> </div>
            <!--es_box1-->
            <div class="es_box2"> <img alt="mWallet" src="http://110.37.221.139/vanguard/vanguardmatrixnew/images/es_icon2.png"> </div>
            <!--es_box2-->
            <div class="es_box3"> <img alt="mPos" src="http://110.37.221.139/vanguard/vanguardmatrixnew/images/es_icon3.png"> </div>
            <!--es_box3-->
            <div class="es_box4"> <img alt="Payment Gateway" src="http://110.37.221.139/vanguard/vanguardmatrixnew/images/es_icon4.png"> </div>
            <!--es_box4--> 
          </div>
          <!--es_boxes_area--> 
        </div>
      </div>
      <!--es_main--> 
    </div>
    <!--container--> 
  </section>
  <section class="vg_service_area">
    <div class="container">
      <div class="col-md-4"> <img src="http://110.37.221.139/vanguard/vanguardmatrixnew/images/vanguard_services.png" alt="Vanguard Services Difference"> </div>
      <div class="col-sm-6 col-md-4">
        <h3>Vanguard Services Difference</h3>
        <ul>
          <li>Happy customers and 95% repeat business</li>
          <li>Less than 5% staff turnover for the last three years</li>
          <li>International and Vietnamese management</li>
          <li>Professional work environment</li>
          <li>Transparent and honest business practices</li>
          <li>Seamless communication</li>
        </ul>
      </div>
      <div class="col-sm-6 col-md-4">
        <h3>Dedicated Team</h3>
        <p>Looking to increase the bandwidth of your team? Or are you looking to set up your own development team? Hire dedicated resources from the leading software outsourcing company in Vietnam. We provide a pool of highly skilled and talented professionals working just for you.</p>
      </div>
    </div>
    <!--container--> 
  </section>
  <section class="award_main">
    <div class="container">
      <div class="es_main">
        <h3>our award winning projects</h3>
        <!--<ul id="filter-list" class="clearfix">
                        <li class="filter" data-filter="all">All</li>
                        <li class="filter" data-filter="webdesign">Web Design</li>
                        <li class="filter" data-filter="appicon">App Icons</li>
                        <li class="filter" data-filter="iosappui">iOS App UI</li>
                        <li class="filter" data-filter="illustration">Illustration</li>
                    </ul>-->
        
        <ul id="categories">
          <li class="item webdesign">
            <div> <img src="https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg" alt=""/>
              <h1>This is a title a bit longer</h1>
              <a href="#">Read more</a> </div>
          </li>
          <li class="item illustration">
            <div> <img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt=""/>
              <h1>This is a title</h1>
              <a href="#">Read more</a> </div>
          </li>
          <li class="item appicon">
            <div> <img src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" alt=""/>
              <h1>This is a title</h1>
              <a href="#">Read more</a> </div>
          </li>
          <li class="item iosappui">
            <div> <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt=""/>
              <h1>This is a title</h1>
              <a href="#">Read more</a> </div>
          </li>
          <li class="item iosappui">
            <div> <img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg" alt=""/>
              <h1>This is a title</h1>
              <a href="#">Read more</a> </div>
          </li>
          <li class="item illustration">
            <div> <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt=""/>
              <h1>This is a title</h1>
              <a href="#">Read more</a> </div>
          </li>
          <li class="item webdesign">
            <div> <img src="https://farm7.staticflickr.com/6092/6227418584_d5883b0948.jpg" alt=""/>
              <h1>This is a title</h1>
              <a href="#">Read more</a> </div>
          </li>
          <li class="item iosappui">
            <div> <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt=""/>
              <h1>This is a title</h1>
              <a href="#">Read more</a> </div>
          </li>
          <li class="item webdesign">
            <div> <img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" alt=""/>
              <h1>This is a title</h1>
              <a href="#">Read more</a> </div>
          </li>
        </ul>
      </div>
      <!--es_main--> 
    </div>
    <!--container--> 
  </section>
  <section class="reviews_main">
    <div class="container">
      <h3>Reviews</h3>
      <h4>Our happy customer says about us</h4>
      <div class="reviews_area">
        <div class="col-md-3 col-sm-6 padding_none">
          <div class="r_box_main1"> <svg viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <defs>
              <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
                <image xlink:href="images/person1.jpg" x="-25" width="150" height="100" />
              </pattern>
            </defs>
            <polygon id="hex_shadow" points="50 1 95 25 95 80 50 104 5 80 5 25" fill="#d3dadd"/>
            <polygon id="hex1" points="50 1 95 25 95 75 50 99 5 75 5 25" fill="url(#img1)"/>
            </svg>
            <div class="r_box1">
              <p>“ Looking to increase the bandwidth of your team? Or are you looking to set up your own development team? Hire dedicated ”</p>
              <a href="#">Charlie Waite</a> </div>
            <!--r_box1--> 
          </div>
          <!--r_box_main1-->
          
          <div class="r_box_main2"> <svg viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <defs>
              <pattern id="img2" patternUnits="userSpaceOnUse" width="100" height="100">
                <image xlink:href="images/person2.jpg" x="-25" width="150" height="100" />
              </pattern>
            </defs>
            <polygon id="hex_shadow" points="50 1 95 25 95 80 50 104 5 80 5 25" fill="#d3dadd"/>
            <polygon id="hex2" points="50 1 95 25 95 75 50 99 5 75 5 25" fill="url(#img2)"/>
            </svg>
            <div class="r_box2">
              <p>“ Looking to increase the bandwidth of your team? Or are you looking to set up your own development team? Hire dedicated ”</p>
              <a href="#">Sara James</a> </div>
            <!--r_box2--> 
          </div>
          <!--r_box_main2--> 
        </div>
        <div class="col-md-6 padding_none">
          <div class="vg_logo_box"> <img src="http://110.37.221.139/vanguard/vanguardmatrixnew/images/vanguard_reviews.png" alt="VanguardMatrix"> </div>
          <!--vg_logo_box--> 
        </div>
        <div class="col-md-3 col-sm-6 padding_none">
          <div class="r_box_main3"> <svg viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <defs>
              <pattern id="img3" patternUnits="userSpaceOnUse" width="100" height="100">
                <image xlink:href="images/person3.jpg" x="-25" width="150" height="100" />
              </pattern>
            </defs>
            <polygon id="hex_shadow" points="50 1 95 25 95 80 50 104 5 80 5 25" fill="#d3dadd"/>
            <polygon id="hex3" points="50 1 95 25 95 75 50 99 5 75 5 25" fill="url(#img3)"/>
            </svg>
            <div class="r_box3">
              <p>“ Looking to increase the bandwidth of your team? Or are you looking to set up your own development team? Hire dedicated ”</p>
              <a href="#">Jessica Luice</a> </div>
            <!--r_box3--> 
          </div>
          <!--r_box_main3-->
          
          <div class="r_box_main4"> <svg viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <defs>
              <pattern id="img4" patternUnits="userSpaceOnUse" width="100" height="100">
                <image xlink:href="images/person4.jpg" x="-25" width="150" height="100" />
              </pattern>
            </defs>
            <polygon id="hex_shadow" points="50 1 95 25 95 80 50 104 5 80 5 25" fill="#d3dadd"/>
            <polygon id="hex4" points="50 1 95 25 95 75 50 99 5 75 5 25" fill="url(#img4)"/>
            </svg>
            <div class="r_box4">
              <p>“ Looking to increase the bandwidth of your team? Or are you looking to set up your own development team? Hire dedicated ”</p>
              <a href="#">Joshua Smith</a> </div>
            <!--r_box4--> 
          </div>
          <!--r_box_main4--> 
        </div>
      </div>
      <!--reviews_area--> 
      
    </div>
    <!--container--> 
  </section>
  <section class="contact_main">
    <h3>Contact</h3>
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2888.154131008399!2d-79.67346268420702!3d43.624150862326225!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882b40a1f2b5bad9%3A0x4874780491ea7763!2s5805+Whittle+Rd%2C+Mississauga%2C+ON+L4Z+1P2%2C+Canada!5e0!3m2!1sen!2s!4v1463142680249" width="100%" height="390px" frameborder="0" style="border:0" allowfullscreen></iframe>
    <div class="container">
      <div class="col-sm-5">
        <form id="contact" class="form" method="post" action="sendEmail.php">
          <fieldset>
            <input type="text" id="name" name="name" class="input-block-level" placeholder="Name" required >
            <input type="email" id="email" name="email" class="input-block-level" placeholder="Email" required >
            <input type="tel" id="phone" name="phone" class="input-block-level" placeholder="Phone" required >
            <textarea rows="3" id="message" name="message" class="input-block-level" placeholder="Message"></textarea>
            <button type="submit" class="btn btn-warning">Submit</button>
          </fieldset>
        </form>
      </div>
    </div>
    <!--container--> 
  </section>
  <footer class="footer_bg">
    <div class="container">
      <div class="col-md-4 col-sm-5 padding_right">
        <div class="footer_box">
          <h3>Products</h3>
          <div class="col-sm-6 padding_right">
            <div class="footer_middle_nav">
              <ul>
                <li><a href="#">City Voice</a></li>
                <li><a href="#">Events</a></li>
                <li><a href="#">Competitions</a></li>
                <li><a href="#">Family Locator</a></li>
                <li><a href="#">Friends Locator</a></li>
                <li><a href="#">Rescue</a></li>
              </ul>
            </div>
            <!--footer_middle_nav--> 
          </div>
          <div class="col-sm-6 padding_left">
            <div class="footer_middle_nav">
              <ul>
                <li><a href="#">Directory</a></li>
                <li><a href="#">Chats</a></li>
                <li><a href="#">AVTS</a></li>
                <li><a href="#">Zaair Guide</a></li>
                <li><a href="#">Financial Desk 360</a></li>
                <li><a href="#">Spotlight</a></li>
              </ul>
            </div>
            <!--footer_middle_nav--> 
          </div>
        </div>
        <!--footer_box--> 
      </div>
      <div class="col-md-2 col-sm-3">
        <div class="footer_box">
          <h3>App Services</h3>
          <div class="footer_middle_nav">
            <ul>
              <li><a href="#">Software Development</a></li>
              <li><a href="#">Web Development</a></li>
              <li><a href="#">App Development</a></li>
              <li><a href="#">Design & Animation</a></li>
            </ul>
          </div>
          <!--footer_middle_nav--> 
        </div>
        <!--footer_box--> 
      </div>
      <div class="col-md-3 col-sm-4">
        <div class="footer_box">
          <h3>Vanguard Matrix</h3>
          <div class="footer_middle_nav">
            <ul>
              <li><a href="#">About Us</a></li>
              <li><a href="#">Portfolio</a></li>
              <li><a href="#">How it Works</a></li>
              <li><a href="#">Tesimonials</a></li>
              <li><a href="#">Career</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </div>
          <!--footer_middle_nav--> 
        </div>
        <!--footer_box--> 
      </div>
      <div class="col-md-3 col-sm-6 padding_left">
        <div class="footer_box">
          <h3>Sign Up for Newsletter</h3>
          <p>Get the latest report about the project and company profile.</p>
          <form action="" method="post">
            <div class="input-prepend">
              <input type="email" id="email" name="email" placeholder="Enter email">
              <button type="submit" class="btn">Subscribe</button>
            </div>
          </form>
        </div>
        <!--footer_box--> 
      </div>
    </div>
    <!--container-->
    
    <div class="container">
      <div class="col-md-6 col-md-offset-6">
        <div class="f_social_wrapper"> <img alt="Connect with us" src="http://110.37.221.139/vanguard/vanguardmatrixnew/images/connect_top.png">
          <ul>
            <li><a href="https://www.facebook.com/ImageTechSolution" target="_blank"><i class="fa fa-facebook"></i></a></li>
            <li><a href="https://twitter.com/ImageTechSol" target="_blank"><i class="fa fa-twitter"></i></a></li>
            <li><a href="https://plus.google.com/102265589369839570973/about" target="_blank"><i class="fa fa-google-plus"></i></a></li>
            <li><a href="https://www.linkedin.com/company/imagetech-solution" target="_blank"><i class="fa fa-linkedin f_in_icon"></i></a></li>
            <li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
          </ul>
        </div>
        <!--f_social_wrapper--> 
      </div>
    </div>
    <div class="bottom_bar">
      <div class="col-md-3 bottom_left text-right">
        <div class="bottom_logo"> <img src="http://110.37.221.139/vanguard/vanguardmatrixnew/images/v_icon.png" alt="VanguardMatrix"> </div>
        <!--bottom_logo--> 
        
      </div>
      <div class="col-md-2"> </div>
      <div class="col-md-7 text-left bottom_right">
        <p>Copyright © 2016 | www.vanguardmatrix.com | All rights reserved</p>
        <span class="bottom_links"><a href="#">Privacy Policy</a> | <a href="#">Terms & Conditions</a></span> </div>
    </div>
    <!--bottom_bar--> 
    
  </footer>
</div>
<script src="http://110.37.221.139/vanguard/vanguardmatrixnew/js/jquery-1.12.0.min.js"></script> 
<script src="http://110.37.221.139/vanguard/vanguardmatrixnew/js/bootstrap.min.js"></script> 
<script src="http://110.37.221.139/vanguard/vanguardmatrixnew/js/jquery.mixitup.min.js"></script> 
<!--<script src="js/pie-chart.js"></script>--> 
<script src="http://110.37.221.139/vanguard/vanguardmatrixnew/js/functions.js"></script> 
<script src="http://110.37.221.139/vanguard/vanguardmatrixnew/js/progress_bar.js"></script>
</body>
</html>

Hey Paul thanks for this! But if use this code so how I change text with every single slide.

It’s still not working properly. I applied the css property which you gave earlier.

The code I gave above is a fully working example so you need to cross check your code with it.

Unfortunately I am away on holiday for another 2 weeks and don’t have the resources here to debug code so someone else will have to jump in for now.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.