Javascript not working in Internet Explorer 11 - html

We're having an issue with our page not working on Internet Explorer 11. However, it works fine on other browsers with no issues.
We don't know how to solve this and we've been researching on the internet on how to fix this issue however, cannot find anything which can help.
We were wondering if anyone could assist us with this.
<!DOCTYPE html>
<head>
<title>Canon UST Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script> -->
<!-- Add jQuery library -->
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script src="./jquery.reel.js" type="text/javascript"></script>
<script src="raphael.min.js" type="text/javascript"></script>
<script type="text/javascript" src="mainJ.js"></script>
<script src="jquery.event.move.js"></script>
<script src="jquery.twentytwenty.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<link rel="stylesheet" href="default.css">
<link href="jquery-ui.css" rel="stylesheet">
<link rel="stylesheet" href="twentytwenty.css">
<style type="text/css">
.forMidSec{width:100%; float: left; text-align: center;}
.marked {
background: red; width: 20px;height: 20px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
#openDiv
{
z-index:99;
}
.AF
{
display:none;
}
.innerPages .inFP
{
display:none;
}
.commonHeader
{
visibility:hidden;
}
</style>
</head>
<body>
<!---->
<div class="imainint">
<div id = "imgwrap" class="imgwrapint">
<div id="introimg" style="width:800px;height:670px;">
</div>
</div>
</div>
<!---->
<div class="progressBar">
<div class="progressImg"></div>
</div>
<div class="mainWrap">
<header class="mainHead">
<div class="wrapper clearfix modelName">
<div class="col1">
<ul class="top">
<li id ="mainli"><img src="buynow.png" alt="Buy Now" /></li>
</ul>
</div>
<div class="col3"><img src="logo_canon.png" width="70" height="15" alt="Canon"></div>
</div>
</header>
<div class="forMidSec">
<section class="wrapper clearfix h600">
<!--<span class="dtext">HTYU</span>-->
<div id="showImages">
<div id="view360wrapper">
<!-- Image 360 Deg to show here -->
<img src="360/1-1.jpg" name="view360" id="view360"/>
</div></div>
<div id="openDiv" style="display:none">
<ul class="sub-menu">
</ul>
</div>
<div id ="omni_arrow"><img src="omni-arrow.png" alt="omni-arrow" style="text-align:center"></div>
</div>
</section>
</div>
<div class="commonHeader">
<header>
<div class="wrapper clearfix modelName">
<div class="col1">
<ul class="top">
<li><img src="back.gif" alt="Back"></li>
<li id = "buyLi"><img src="buynow.png" alt="Buy Now"></li>
<li class="compareBtn">Compare</li>
</ul>
</div>
<div class="col2">
<ul class="top">
<li></li>
<li><img class="featureImg" src="" alt=""> <img src="specifications.gif" alt="Specifications" class="featureSpecs"></li>
</ul>
</div>
<div class="col3"><img src="logo_canon.png" width="70" height="15" alt="Canon"></div>
</div>
</header>
</div>
<div class="innerPages">
<div id="openCompare" class="compare-overlay">
<div class="compare-open">
<div class="compare-arrow"></div>
<a title="Close" href="javascript:void(0)" class="compare-close"></a>
<div class="compare-inner">
<div class="compare-innerTop">
</div>
<div class="compare-innerBottom">
</div>
</div>
</div>
</div>
<div id="openFeatures" class="features-overlay">
<div class="features-open">
<div class="features-arrow"></div>
<a title="Close" href="javascript:void(0)" class="features-close"></a>
<div class="features-inner">
<p>Language Text</p>
</div>
</div>
</div>
<!-- Start of auto focus Images -->
<div class="AF inFP">
<section class="wrapper clearfix bgcol3 h600">
<div class="wrapper clearfix bgcol1">
<div class="hotspot-gallery">
<div class="big-image"></div>
<div class="hotSpotImg"></div>
</div>
</div>
</section>
</div>
<!-- End of auto focus Images -->
<!-- Start of video Page -->
<div class="videoContainer inFP">
<section class="wrapper clearfix bgcol1 h600">
<div class="progressBar">
<div class="progressImg"></div>
</div>
<div class="vid">
<video width="640" id="eosVid" height="360" controls>
<source src="" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</section>
</div>
<!-- End Of Video page -->
<!-- Start of Overlap feature -->
<div class="overlapContainer inFP">
<section class="wrapper clearfix h600">
<div class="overlapCont"></div>
</section>
</div>
<!-- End of Overlap feature -->
<!-- Start of HDR Gallery feature -->
<div class="hdrGalCont inFP">
<section class="wrapper clearfix bgcol3 h600">
<div id="openEnlargeImg" class="EnlargeImg-overlay">
<div class="EnlargeImg-open">
<a title="Close" href="javascript:void(0)" onclick="document.getElementById('openEnlargeImg').style.display='none'" class="EnlargeImg-close"></a>
<div class="EnlargeImg-inner">
<img src="EOS 70D - HDR - Normal Exposure.jpg" /> </div>
</div>
</div>
<div class="image-gallery">
<div class="enlargeIcon filterImg"><img src="fullbutton.png"></div>
<div class="big-image">
</div>
<div class="captionTxt"></div>
<div class="thumbs">
<ul>
</ul>
</div>
</div>
</section>
</div>
<!-- End of Hdr Gallery feature -->
<!-- Start of Filter Gallery feature -->
<div class="filterGal inFP">
<div id="openEnlargeImg1" class="EnlargeImg-overlay">
<div class="EnlargeImg-open">
<a title="Close" href="javascript:void(0)" onclick="document.getElementById('openEnlargeImg1').style.display='none'" class="EnlargeImg-close"></a>
<div class="EnlargeImg-inner">
<img src="EOS 70D - HDR - Normal Exposure.jpg" /> </div>
</div>
</div>
<section class="wrapper clearfix bgcol1">
<div class="imgWrapper filterGalFlow"></div>
</section>
</div>
<!-- End of Filter Gallery feature -->
<!-- Start of MultiExpo feature -->
<div class="MultiExposure inFP">
<section class="wrapper clearfix h600">
<div class="multipleExpo"><img src="" alt="Multiple Exposure" style="max-width:800px; height:auto"></div>
</section>
</div>
<!-- End of MultiExpo feature -->
<div class="frameSlier inFP">
<div class="slide-img">
<div id="cycler" class="eagleSlide">
<!--<img class="active" src="" alt="My image" />
<img src="" alt="My image" />
<img src="" alt="My image" />
<img src="" alt="My image" />
<img src="" alt="My image" />
<img src="" alt="My image" />
<img src="" alt="My image" />
<img src="" alt="My image" />
<img src="" alt="My image" />
<img src="" alt="My image" /> -->
</div>
<div class="sliderBg">
<div id="slider">
</div>
</div>
</div>
</div><!-- End of Frame Slider-->
<!-- Start of HdrSlider -->
<div class="hdrSlider inFP">
<div class="slide-img">
<div id="cycler2">
<img class="active" src="" alt="My image" />
<img src="" alt="My image" />
<img src="" alt="My image" />
</div>
<div id="slider2Up">
<div id="slider2">
</div>
</div>
</div>
</div><!-- End Of hdr Slider-->
<!-- Start of zoom slider -->
<div class="zoomSlider inFP">
<div class="slide-img">
<div id="cycler3">
</div>
<div id="slider3Up">
<div id="slider3">
</div>
</div>
</div>
</div>
<!-- End of zoom slider -->
<!-- Start of Dual Slider -->
<div class="dualSlid inFP">
<div class="slide-img dualSlideImg">
</div>
<div style="width:800px; height:auto; display:table; margin:-80px auto 0; padding:0; position:relative">
<div style="width:49%; display:table-cell">
<div id="slider5Up">
<div id="slider5"></div>
</div>
</div>
<div style="width:49%; display:table-cell">
<div id="slider4Up">
<div id="slider4">
</div>
</div>
</div>
</div>
</div>
<!-- End of dual Slider-->
</div>
<div id="clickLinks"></div>
<div id="videoPlayer"></div>
<div id="staticImageViewer"></div>
</body>
</html>

Related

Horizontal align inside col using many tag Bootstrap4

I have an issue with < a > < finger > < img > < figcaption > ...!
Whey I use only tag < a > and < img > in loop of :::
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 view-waid">
<a href="#">
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
</a>
<a href="#">
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
</a>
Its just work fine view
But when I just insert this
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 view-waid">
<a href="#">
<figure>
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
<figcaption>
<h4>MYMYMY</h4>
</figcaption>
</figure>
</a>
<a href="#">
<figure>
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
<figcaption>
<h4>MYMYMY</h4>
</figcaption>
</figure>
</a>
</div>
It just broke off into vertical. Look Here
I need this to horizontal like a image gallery.
Where is the problem???
I am not using extra CSS.
Here is my full code
<!DOCTYPE html>
<html lang="en">
<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 -->
<title><tag:main_title /></title>
<!-- Bootstrap 4 CSS. This is for the alpha 3 release of Bootstrap 4. This should be updated when Bootstrap 4 is officially released. -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
<!-- Custom CSS: You can use this stylesheet to override any Bootstrap styles and/or apply your own styles -->
<link href="http://192.168.0.103/style/mynew_1.0/css/custom.css" rel="stylesheet">
<!-- For icons -->
<link href="http://192.168.0.103/style/mynew_1.0/css/font-awesome-4.6.3/css/font-awesome.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Navigation -->
<nav id="topNav" class="navbar navbar-full navbar-fixed-top navbar-dark bg-inverse m-b-1">
<button class="navbar-toggler hidden-md-up pull-right" type="button" data-toggle="collapse" data-target="#navbar">
☰
</button>
<a class="navbar-brand" href="#"><tag:site_name /></a>
<div class="collapse navbar-toggleable-sm" id="navbar">
<tag:main_dropdown />
<!-- Search -->
<form class="form-inline pull-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-secondary" type="submit">Search</button>
</form>
</ul>
</div>
</nav>
<header>
<div class="header-blurb">
<div class="container">
<div class="row">
<tag:main_header />
</div>
<div class="row">
<div class="col-sm-12 header-blurb-ads">
<h6>ads</h6>
</div>
</div>
<div class="row">
<div class="col-sm-12 header-blurb-ssmenu">
<h6>sub-menu</h6>
</div>
</div>
<div class="row">
<div class="col-sm-12 header-blurb-slideshow">
<h6>slide-show</h6>
</div>
</div>
</div>
</div>
</header>
<div class="container-fluid">
<div class="row">
<!-- Left Column -->
<div class="col-sm-1 view-waid">
<tag:main_left />
</div>
<!-- /Left Column -->
<!-- Center Column -->
<div class="col-sm-8 view-waid">
<!-- Articles -->
<tag:main_content />
<!-- Img test 2 -->
<!-- Img test 2 -->
</div>
<!-- /Center Column-->
<!-- Right Column -->
<div class="col-sm-3 view-waid">
<tag:main_right />
</div> <!-- /Right Column -->
</div>
</div>
<!--/container-fluid-->
<!-- Image box testing -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 d-flex view-waid">
<a href="#">
<figure>
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
<figcaption>
<h4>MYMYMY</h4>
</figcaption>
</figure>
</a>
<a href="#">
<figure>
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
<figcaption>
<h4>MYMYMY</h4>
</figcaption>
</figure>
</a>
</div>
</div>
</div>
<!-- /Image box testing -->
<footer>
<div class="footer-blurb">
<div class="container">
<div class="row">
<div class="col-sm-3 footer-blurb-item">
<h3><i class="fa fa-text-height" aria-hidden="true"></i> ADS-1</h3>
<p>PLEASE GIVE ADS</p>
<p><a class="btn btn-primary" href="#">FOR SHOW</a></p>
</div>
<div class="col-sm-3 footer-blurb-item">
<h3><i class="fa fa-wrench" aria-hidden="true"></i> ADS-2</h3>
<p>PLEASE GIVE ADS -- 2 </p>
<p><a class="btn btn-success" href="#">FOR SHOW - 2</a></p>
</div>
<div class="col-sm-3 footer-blurb-item">
<h3><i class="fa fa-paperclip" aria-hidden="true"></i> ADS-3</h3>
<p>PLEASE GIVE ADS -- 3</p>
<p><a class="btn btn-primary" href="#">FOR SHOW - 3</a></p>
</div>
<div class="col-sm-3 footer-blurb-item">
<!-- Thumbnails -->
<h3><i class="fa fa-camera" aria-hidden="true"></i> ADS-4</h3>
<div class="row">
<div class="col-xs-6">
<a href="#" class="img-fluid">
<img src="holder.js/110x80?theme=vine" alt="">
</a>
</div>
<div class="col-xs-6">
<a href="#" class="img-fluid">
<img src="holder.js/110x80?theme=sky" alt=""></a>
</div>
<div class="col-xs-6">
<a href="#" class="img-fluid">
<img src="holder.js/110x80?theme=sky" alt="">
</a>
</div>
<div class="col-xs-6">
<a href="#" class="img-fluid">
<img src="holder.js/110x80?theme=vine" alt="">
</a>
</div>
</div>
</div>
</div>
<!-- /.row -->
<h4>MY-Test_IS NOT GOOD</h4>
</div>
</div>
<div class="small-print">
<div class="container">
<p>Terms & Conditions | Privacy Policy | Contact</p>
<p>Copyright © Example.com 2015 </p>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
<!-- Tether -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
<!-- Bootstrap 4 JavaScript. This is for the alpha 3 release of Bootstrap 4. This should be updated when Bootstrap 4 is officially released. -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>
<!-- Initialize Bootstrap functionality -->
<script>
// Initialize tooltip component
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
// Initialize popover component
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
<!-- Placeholder Images -->
<script src="js/holder.min.js"></script>
</body>
</html>

Based on your code, just add class row or d-flex next to col-sm-12.
Based on your BS link, just add CSS like:
.row{
display:flex;
flex-wrap:wrap;
}
DEMO
.row{
display:flex;
flex-wrap:wrap;
}
<link rel="stylesheet" href="maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/…" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 row view-waid">
<a href="#">
<figure>
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
<figcaption>
<h4>MYMYMY</h4>
</figcaption>
</figure>
</a>
<a href="#">
<figure>
<img src="https://www.chd4.com/uni-thumbs/c1abc5891b5ba4dde2431d3730a95ffea9cc3f66.jpg" width="200" height="252" />
<figcaption>
<h4>MYMYMY</h4>
</figcaption>
</figure>
</a>
</div>
</div>
</div>

Container's auto margin using Bulma

Explanation
I'm using Bulma to create a divided page with a fixed Navbar, but as you can see below, Title 1 and Title 2 won't line up with Navbar and Title 3, since the container left/right margin is set to auto and, therefore, goes to 0 in this first section configuration. Is there any way to achieve this using Bulma?
The problem starts happening in 1024px or higher.
Code
I've changed the container background color to yellow so it's easier to see the issue.
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.0/css/bulma.min.css" />
</head>
<style>
.container {
background-color: yellow;
}
</style>
<body>
<nav class="navbar is-fixed-top" role="navigation" style="background-color: transparent;">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item">
<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28" />
</a>
</div>
</div>
</nav>
<section class="columns is-vcentered is-gapless mb-0">
<div class="column">
<div class="hero is-fullheight is-info">
<div class="hero-body">
<div class="container">
<h1 class="title has-text-dark">
Title 1
</h1>
</div>
</div>
</div>
</div>
<div class="column">
<div class="hero is-fullheight is-primary">
<div class="hero-body">
<div class="container">
<h1 class="title has-text-dark">
Title 2
</h1>
</div>
</div>
</div>
</div>
</section>
<section class="hero is-fullheight is-success">
<div class="hero-body">
<div class="container">
<h1 class="title has-text-dark">
Title 3
</h1>
</div>
</div>
</section>
</body>

Background Video NOT working on Sharepoint

I am trying to put a background video on my SharePoint but instead of setting it as a background video it starts playing it and does not work. It works perfectly out of SharePoint (in browser) Need Help Please
Evidently there isn't something fundamentally wrong with my html since it renders in the browser. Are there any sharepoint html5 wizards out there who can help?
<!DOCTYPE html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Oryx Technologies</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<link rel="stylesheet" href="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/normalize.css">
<link rel="stylesheet" href="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/bootstrap.min.css">
<link rel="stylesheet" href="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/owl.carousel.css">
<link rel="stylesheet" href="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/owl.theme.css">
<link rel="stylesheet" href="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/animate.css">
<link rel="stylesheet" href="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/slicknav.min.css">
<link rel="stylesheet" href="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/responsive.css">
<link rel="stylesheet" href="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<video poster="" id="bgvid" autoplay muted loop>
<source src="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/Jon%20Hopkins%20-%20Immunity%20(Rowbyte%20Plexus).mp4.webm" type="video/webm">
<source src="https://oryxtech.sharepoint.com/sites/newsite/Shared%20Documents/Jon%20Hopkins%20-%20Immunity%20(Rowbyte%20Plexus).mp4" type="video/mp4">
</video>
<section class="intro" id="home">
<div class="menu-bar menu">
<div class="container">
<div class="row">
<div class="col-md-4">
<div id="logo">
<im src="images/logo.png" alt="" title="" height="40px" style="float: left;"/>
</div>
</div>
<div class="col-md-8">
<ul class="list-unstyled" id="main-menu">
<li><a class="active" href="#home">Home</a></li>
<li>Facebook</li>
<li>Twitter</li>
<li>LinkedIn</li>
<li>Website</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Menu Ends here -->
<div class="intro-content">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12 intro-image">
<img src="images/logo.png" alt="" />
</div>
<div class="col-md-8 col-sm-6 col-xs-12 intro-texts">
<h1>Welcome to Oryx Technologies Intranet Portal</h1>
<p>Explore Your Posibilities | Run With Oryx</p>
<p>Collabrative | Intelligent | Secure</p>
<ul class="list-unstyled">
<li>Human Resources</li>
<li>Finance</li>
<li>Sales </li>
<li>Technology </li>
<li>Operations </li>
<li>Marketing </li>
<li>Projects </li>
<li>Investors </li>
<li>Business Partners </li>
<li>Technology Partners</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Intro Section Ends -->
<section class="features" id="features">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 wow fadeIn">
<h2>Employee Self Services</h2>
</div>
<div class="col-md-3 col-sm-6 wow fadeInLeft">
<div class="single-service">
<p style="background:#EE3867;"><i class="fa fa-pencil"></i></p>
<h3>Submit a Leave Application</h3>
<p>Click Me</p>
</div>
</div>
<div class="col-md-3 col-sm-6 wow fadeInLeft">
<div class="single-service">
<p style="background:#3DB39D;"><i class="fa fa-pencil"></i></p>
<h3>Claim an Expense</h3>
<p>Click Me</p>
</div>
</div>
<div class="col-md-3 col-sm-6 wow fadeInRight">
<div class="single-service">
<p style="background:#57C7ED;"><i class="fa fa-pencil"></i></p>
<h3>Follow a Request</h3>
<p>Click Me</p>
</div>
</div>
<div class="col-md-3 col-sm-6 wow fadeInRight">
<div class="single-service">
<p style="background:#324E5C;"><i class="fa fa-pencil"></i></p>
<h3>Submit a Petty Cash Request</h3>
<p>Click Me</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features Section Ends Here -->
<section class="app-screenshot">
<div class="container" id="screenshots">
<div class="row">
<div class="col-md-12 wow fadeInUp">
<h2>Case Studies</h2>
</div>
<div id="owl-example" class="owl-carousel col-md-12 wow fadeInUp">
<div><img src="images/casesstdtg.png" alt="" /></div>
<div><img src="images/ateis.png" alt="" /></div>
<div><img src="images/wadi.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
<div><img src="images/aggerko.png" alt="" /></div>
</div>
</div>
</div>
</section>
<!--Other Features Ends Here-->
<!-- App Screenshot Ends Here-->
<!--Testimonial Section Ends Here-->
<section class="clients-logo" id="clients">
<div class="container">
<div class="row">
<div id="clients-logo" class="owl-carousel col-md-12 wow slideInRight">
<div><img src="images/linkedin.png" alt="" /></div>
<div><img src="images/twitter.png" alt="" /></div>
<div><img src="images/facebook.png" alt="" /></div>
<div><img src="images/facebook.png" alt="" /></div>
<div><img src="images/skype.png" alt="" /></div>
<div><img src="images/google-plus.png" alt="" /></div>
</div>
</div>
</div>
</section>
<!-- Clients Logo Section Ends Here -->
<!-- Price List Section Ends Here -->
<!-- About App Section Ends Here -->
<!-- Get App Section Ends Here -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#owl-example").owlCarousel({
items : 4,
navigation : false,
navigationText : ["prev","next"],
paginationNumbers: true
});
$("#testimonial-carousel").owlCarousel({
items : 1,
itemsCustom : true,
itemsDesktop : [1199,1],
itemsDesktopSmall : [980,1],
itemsTablet: [768,1],
itemsTabletSmall: true,
itemsMobile : [479,1],
singleItem : true,
itemsScaleUp : true,
responsive : true
});
$("#clients-logo").owlCarousel({
items : 6,
paginationNumbers : false,
navigation : false,
});
});
</script>
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script type="text/javascript">
// handle links with #href started with '#' only
$(document).on('click', 'a[href^="#"]', function(e) {
// target element id
var id = $(this).attr('href');
// target element
var $id = $(id);
if ($id.length === 0) {
return;
}
// prevent standard hash navigation (avoid blinking in IE)
e.preventDefault();
// top position relative to the document
var pos = $(id).offset().top;
// animated top scrolling
$('body, html').animate({scrollTop: pos}, 1000);
});
</script>
<script type="text/javascript">
// Create a clone of the menu, right next to original.
$('.menu').addClass('original').clone().insertAfter('.menu').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').css('background','#000').removeClass('original').hide();
scrollIntervalID = setInterval(stickIt, 10);
function stickIt() {
var orgElementPos = $('.original').offset();
orgElementTop = orgElementPos.top;
if ($(window).scrollTop() >= (orgElementTop)) {
// scrolled past the original position; now only show the cloned, sticky element.
// Cloned element should always have same left position and width as original element.
orgElement = $('.original');
coordsOrgElement = orgElement.offset();
leftOrgElement = coordsOrgElement.left;
widthOrgElement = orgElement.css('width');
$('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement).show();
$('.original').css('visibility','hidden');
} else {
// not scrolled past the menu; only show the original menu.
$('.cloned').hide();
$('.original').css('visibility','visible');
}
}
</script>
<script src="js/jquery.slicknav.min.js"></script>
<script>
$(function(){
$('#main-menu').slicknav();
});
</script>
</body>
</html>

how do I turn the 2 grids around on their side?

Need the Portfolio and Services buttons turned around to lie horizontally and in line with the About Us and Contacts buttons.
I can provide the CSS if needed.
Preview of what the website looks now:
very confusing
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="utf-8">
<link rel="icon" href="images/favicon.ico">
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery.js"></script>
<script src="js/jquery-migrate-1.1.1.js"></script>
<script src="js/superfish.js"></script>
<script src="js/jquery.equalheights.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script>
</script>
<!--[if lt IE 8]>
<div style=' clear: both; text-align:center; position: relative;'>
<a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home? strong textocid=ie6_countdown_bannercode">
<img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
</a>
</div>
<![endif]-->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<link rel="stylesheet" media="screen" href="css/ie.css">
<![endif]-->
</head>
<body class="page1">
<!--==============================header=================================-->
<header>
<div class="container_12">
<div class="grid_12">
</div>
<div class="grid_4">
<div class="port"><div>
<a class="link_img" href="index-2.html"><img src="images/page1_img1.jpg" alt="">
<span></span></a>
About Us
</div>
</div></div>
<div class="grid_4"><h1><a href="index.html"><img src="images/logo.png" alt="Brand
Identity"></a></h1></div>
<div class="grid_4 fright">
<div class="port">
<a class="link_img " href="index-2.html"> <img src="images/page1_img2.jpg" alt="">
<span></span></a>
Contacts
</div>
</div>
<div class="clear"></div>
<div class="port1">
<div class="grid_12">
<div class="port">
<a class="link_img " href="index-2.html"><img src="images/page1_img3.jpg" alt="">
<span></span></a>
Portfolio
</div>
<div class="port">
<a class="link_img " href="index-2.html"><img src="images/page1_img4.jpg" alt="">
<span></span></a>
Services</div>
</div>
</div>
<div class="port2">
<div class="grid_12">
<div class="port">
<a class="link_img " href="index-2.html"><img src="images/page1_img5.jpg" alt="">
<span></span></a>
Work for PixelMi<sup>2</sup>
</div>
<div class="port">
<a class="link_img " href="index-2.html"><img src="images/page1_img6.jpg" alt="">
<span></span></a>
Blog</div>
</div>
</div>
</div>
<div class="ic"></div>
</header>
<footer>
<div class="container_12">
<div class="grid_12">
<div class="socials">
</div>
<div class="copy">
</div>
</div>
</div>
</footer>
</body>
</html>

Twitter Bootstrap- Can't get Carousel to change image

I have copied the HTML below- I do not know why, but when i open this in a browser it is stuck on the first image and wont transition... I have included all the code below of my html. The CSS and JS files are the generic bootstrap files provided.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap test site</title>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script>
$(document).ready(function(){
$('.carousel').carousel();
});
</script>
</head>
<body>
<div class="container">
<div class="span8"> <img src="img/logo_title.png"> </div>
<div>
<div id="this-carousel-id" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here1</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here2</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here3</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here4</p>
</div>
</div>
</div><!-- /.carousel-inner -->
<!-- Next and Previous controls below
href values must reference the id for this carousel -->
<a class="carousel-control left" href="#this-carousel-id" data-slide="prev">‹</a>
<a class="carousel-control right" href="#this-carousel-id" data-slide="next">›</a>
</div><!-- /.carousel -->
</div>
</div>
<script src="js/bootstrap.js"></script>
</body>
</html>

For any of the JS libraries in bootstrap, make sure that you include the actual library. In your case, you left out the carousel library. Other Bootstrap add-ons that require separate js files include modals, dropdowns, and tooltips.
Add it in:
<script src="/js/bootstrap-carousel.js"></script>
<script src="/js/jquery.js"></script>
You also included bootstrap.js twice.