Untitled

$(document).ready(function(){

    $('#myCarousel, #myCarousel2').carousel();
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Custom styles for this template -->

<link rel="stylesheet" type="text/css" href="style.css">
<title>Yorker Strategy</title>
</head>
<body>
<nav class="navbar navbar-fixed">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="index.html">
        <img alt="Yorker Strategy Logo" src="img/Logo.png">
      </a>
    </div>
    <div>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="about.html" class="gisha">About</a></li>
            <li><a href="services.html" class="gisha">Services</a></li>
            <li><a href="portfolio.html" class="gisha">Portfolio</a></li>
            <li><a href="contact.html" class="gisha">Contact Us</a></li>
        </ul>
    </div>
  </div>
</nav>

<!-- Separator -->
<div class='col-md-12 separator'>

</div>

<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="10000">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="img/1-3-slide.png" alt="First slide">
      <div class="container">
          <div class="row">
            <div class="col-md-6">
                <div class='slide-image-left'>
                    <img src='img/Design.png'>
                </div>
            </div>
              <div class="col-md-6">
                <div class="carousel-caption rightPosition">
                    <h1>Design</h1>
                    <p>Creating Designs that speaks about<br> your brand from the<br> ‘heart’</p>
                  </div>
              </div>
          </div>
      </div>
    </div>

    <div class="item">
      <img src="img/2-slide.png" alt="Second slide">
      <div class="container">
          <div class="row">
            <div class="col-lg-6">
                <div class="carousel-caption leftPosition">
                    <h1>Communication</h1>
                    <p>We hit the right note for making a suitable<br> Communication Strategy<br> for your brand</p>
                </div>
            </div>
            <div class="col-lg-6">
                <div class='text-center'>
                    <img src='img/Communication.png'>
                </div>
            </div>
          </div>
      </div>
    </div>

    <div class="item">
      <img src="img/1-3-slide.png" alt="Third slide">
      <div class="container">
          <div class="row">
            <div class="col-lg-6 text-center">
               <div class="slide-image-left">
                    <img src='img/Consulting.png'>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="carousel-caption">
                    <h1>Consulting</h1>
                    <p>Helping your brand survive & beat<br> the competition by innovation through our<br> Consulting Service</p>
                </div>
            </div>
          </div>
      </div>
    </div>


</div><!-- /.carousel -->

<!-- Separator -->
<div class='col-md-12 separator'>

</div>

<div class='divHeader'><!-- What & Why YS with clickable slider -->

    <div class="container"><!--container-->

        <div class="row"><!-- What & Why YS Title -->

            <div class='col-lg-4'></div>

            <div class='col-lg-4 divHeaderContent text-center'>
                <h1><br>What is & Why Yorker Strategy?</h1>
            </div>

            <div class='col-lg-4'></div>

        </div><!-- End of What & Why YS Title -->

        <div class='row'><!-- What & Why YS Para -->

            <div class='col-lg-12'>

                <p class='text-center'>
                    <br>
                    In simple words Yorker Strategy is all about Design,<br>
                    Communication & Consultancy for brands.<br>
                    <br>
                    But then we are often asked, Why Yorker Strategy?<br>
                    It’s very simple...
                    <br>
                </p>

            </div>

        </div><!-- End of What & Why YS Para -->

        <div class='row'><!-- Yellow Line behind Navigation dots -->

            <div class='col-lg-12'>

               <div class='separator1'></div>

            </div>

        </div><!--End of Yellow Line behind Navigation dots -->

        <div class='row'><!-- 7 Navigation Dots-->

            <div class='col-lg-12'>

                <div class='manualSlideNavigators'>

                    <ul>

                            <li><a id='one' class='yellowCircle' href='#imageOne'>&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                            <li><a id='two' class='blackCircle' href='#imageTwo'>&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                            <li><a id='three' class='blackCircle' href='#imageThree'>&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                            <li><a id='four' class='blackCircle' href='#imageFour'>&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                            <li><a id='five' class='blackCircle' href='#imageFive'>&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                            <li><a id='six' class='blackCircle' href='#imageSix'>&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                            <li><a id='seven' class='blackCircle' href='#imageSeven'>&nbsp;&nbsp;&nbsp;&nbsp;</a></li>

                    </ul>

                </div>

           </div>

        </div><!--End of 7 Navigation Dots-->

        <div class='row'><!--Navigation Images -->

            <div class='col-lg-12'>

                <br><br>
                <div class='yellowRoundedRect'>

                    <div class='manualSlides'>

                        <img id='imageOne' class='active' src='img/manualSlider.png'>
                        <img id='imageTwo' class='nonActive' src='img/manualSlider1.png'>
                        <img id='imageThree' class='nonActive' src='img/manualSlider2.png'>
                        <img id='imageFour' class='nonActive' src='img/manualSlider3.png'>
                        <img id='imageFive' class='nonActive' src='img/manualSlider4.png'>
                        <img id='imageSix' class='nonActive' src='img/manualSlider5.png'>
                        <img id='imageSeven' class='nonActive' src='img/manualSlider6.png'>


                    </div>

                </div>
                <br><br><br><br>
           </div>

        </div><!--End of Navigation Images -->

    </div><!--End of container-->

</div><!-- End of What & Why YS with clickable slider -->

<div class='divHeader2'>

    <div class="container"><!--container-->

        <div class="row"><!-- Why ‘choose’ Yorker Strategy? Title -->

            <div class='col-lg-4'></div>

            <div class='col-lg-4 divHeaderContent text-center'>
                <h1><br>Why ‘choose’ Yorker Strategy?</h1>
            </div>

            <div class='col-lg-4'></div>

        </div><!-- End of Why ‘choose’ Yorker Strategy? Title -->
        <br><br><br><br>
        <div class='row'>

            <div class='yellowRoundedRect2'>

                <!-- Carousel
                ================================================== -->
                <div id="myCarousel2" class="carousel slide" data-ride="carousel" data-interval="10000">
                  <div class="carousel-inner" role="listbox">
                    <div class="item active">

                      <div class="container">
                          <div class="row">
                            <div class="col-lg-3">
                                <div class='myCarousel2SlideImgs'>
                                    <img src='img/mycarousel2-img1.png'>
                                </div>
                            </div>
                              <div class="col-lg-9">
                                <div class="myCarousel2Caption1 text-center">
                                    <h1>The Connect</h1>
                                    <p>We strike the right chord with our client,<br>
                                       so as to make our client speak from the heart<br>
                                        about his brand, the problem areas & the way ahead
                                    </p>
                                  </div>
                              </div>
                          </div>
                      </div>

                    </div>

                    <div class="item">

                      <div class="container">
                          <div class="row">
                            <div class="col-lg-3">
                                <div class='myCarousel2SlideImgs'>
                                    <img src='img/mycarousel2-img2.png'>
                                </div>
                            </div>
                              <div class="col-lg-9">
                                <div class="myCarousel2Caption2 text-center">
                                    <h1>The Thought Process</h1>
                                    <p>Here we use brightest corner of our 'out-of-box'<br>
                                        styled minds to bringout the best possible<br>
                                        path-breaking set of ideas needed for<br>
                                        our client's work
                                    </p>
                                  </div>
                              </div>
                          </div>
                      </div>

                    </div>

                    <div class="item">

                      <div class="container">
                          <div class="row">
                            <div class="container">
                              <div class="row">
                                <div class="col-lg-3">
                                    <div class='myCarousel2SlideImgs'>
                                        <img src='img/mycarousel2-img3.png'>
                                    </div>
                                </div>
                                  <div class="col-lg-9">
                                    <div class="myCarousel2Caption3 text-center">
                                        <h1>The Execution</h1>
                                        <p>Just like those rare blacksmiths of medieval ages<br>
                                            who used to create complex set of weapons with precision,<br>
                                            we deliver our work for the clients without any compromise in quality of ideas.<br>
                                            <br>
                                            Hence, the end-result, is the right balance of<br>
                                            confluence of ideas & design that justifies our<br>
                                            client’s vision.
                                        </p>
                                      </div>
                                  </div>
                              </div>
                            </div>
                          </div>
                      </div>
                    </div>


                    </div><!-- /.carousel -->

                </div>

            </div>
            <br><br><br><br><br><br>
        </div>

    </div>
</div>

<div class='divHeader3'>

    <div class="container"><!--container-->

        <div class="row"><!-- Client Speak Title -->

            <div class='col-lg-4'></div>

            <div class='col-lg-4 divHeaderContent text-center'>
                <h1><br>Client Speak</h1>
            </div>

            <div class='col-lg-4'></div>

        </div><!-- End of Client Speak Title -->
        <br><br><br><br>

    </div><!--end of container-->

</div><!--end of divHeader3-->

<div class='clientSpeakSection'>

    <div class="container-fluid">

        <div class='row'>

        </div>

    </div>

</div>

<div class='footer'>

    <div class="container">

        <div class='row'>

            <div class='col-lg-12 smIcons text-center'>

                <ul>

                    <li><img src='img/fb.png'</li>
                    <li><img src='img/tw.png'</li>
                    <li><img src='img/ig.png'</li>
                    <li><img src='img/in.png'</li>

                </ul>

            </div>

        </div>

        <div class="row">

            <div class='col-lg-12 text-center gisha copyrightText'>

                <p>Copyright Yorker Strategy, 2016</p>

            </div>

        </div>

    </div>

</div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src='js/script.js'></script>

</body>
</html>