<!doctype html>
<html lang="en"><head>
  <meta charset="utf-8">
  <title>Sport Tracker</title>
  <meta name="description" content="description coming soon">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <link rel="stylesheet" href="//http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <link href="css/Styles.css" rel="stylesheet" type="text/css">
  <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="Scripts/Test.js"></script>
  <script src="Scripts/jquery.timepicker.min.js"></script>
  <link href="css/jquery.timepicker.min.css" rel="stylesheet" type="text/css">
 </head>
<body>
  <header id="Site-header"> 
    <div class="topbar">
	  <p>Welcome</p>
	</div>
    <div class="topnav">
	  <div class="navbar" id="nav">
        <a href="#home" class="active">HOME</a>
        <a href="#CAPABILITIES">CAPABILITIES</a>
        <a href="#ABOUT">ABOUT US</a>
        <a href="#RFQ">RFQ</a>

        <a href="#CONTACT">CONTACT US</a>
		<a href="javascript:void(0);" class="icon" onclick="myFunction()">
		  <i class="fa fa-bars"></i>
		</a>
	  </div>
    </div>
  </header>
  <div class="About">
    <div class="w3-content w3-display-container" style="max-width:1000px">
      <div class="w3-display-container mySlides w3-animate-opacity">
        <img src="https://lh4.googleusercontent.com/1PPNLhxcFoKeHXpziMzn8-5UOMWK6DgkQdpxqqswkgxRyqa00IDdS2YwdZ_uSsiPITx8Fpb_nCblRRbUGqvFb5Oni_JRodLy2byd4Frt8bpc6o59NX0e6AqrTno_XhA6CzFUZ32M" class="img-diplay" style="width:100%">
        <div class="w3-display-right w3-large w3-container w3-padding-16 w3-custom">
          <h1> Lorem ipsum dolor sit amet</h1>
		  <p>  Lorem ipsum dolor sit amet, nostro facilisi similique his ei. Eos et iusto scripserit...</p>
		  <button class="ReadMore">Continue Reading</button>
        </div>
      </div>

      <div class="w3-display-container mySlides w3-animate-opacity">
        <img src="https://lh4.googleusercontent.com/1PPNLhxcFoKeHXpziMzn8-5UOMWK6DgkQdpxqqswkgxRyqa00IDdS2YwdZ_uSsiPITx8Fpb_nCblRRbUGqvFb5Oni_JRodLy2byd4Frt8bpc6o59NX0e6AqrTno_XhA6CzFUZ32M" class="img-diplay" style="width:100%">
        <div class="w3-display-bottomright w3-large w3-container w3-padding-16 w3-black">
          Lorem ipsum
        </div>
      </div>

      <div class="w3-display-container mySlides w3-animate-opacity">
        <img src="https://lh4.googleusercontent.com/1PPNLhxcFoKeHXpziMzn8-5UOMWK6DgkQdpxqqswkgxRyqa00IDdS2YwdZ_uSsiPITx8Fpb_nCblRRbUGqvFb5Oni_JRodLy2byd4Frt8bpc6o59NX0e6AqrTno_XhA6CzFUZ32M" class="img-diplay" style="width:100%">
        <div class="w3-display-topleft w3-large w3-container w3-padding-16 w3-black">
          Lorem ipsum
        </div>
      </div>
	  
      <div class="w3-center w3-display-bottommiddle" style="width:100%">
        <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
        <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
        <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
      </div>
	</div>
  </div>
  <div class="Middlesplitter">
    <h2>Lorem ipsum dolor sit amet, nostro facilisi similique his ei. </h2>
  </div>
  <main>
   <h3 class="ribbon">Explore</h3>  
    <div class="col-container">
	  <div class="col col1">
	    <div class="col-logo-wrapper">
		  <div class="glyphicon-ring">
		    <span class="glyphicon glyphicon-blackboard"></span>
		  </div>
		</div>
		<div class="col-header">
	      <h3>Lorem Ipsum</h3>
		  <h4> Second header test here.</h4>
	    </div>
	    <p>
          Lorem ipsum dolor sit amet, nostro facilisi similique his ei. Eos et iusto scripserit, 
		  dignissim argumentum eam at. No partiendo vulputate suscipiantur pro. Id quot nemore adipiscing vel.
	      <a href="https://www.smashingmagazine.com/events/san-francisco-2018a/">Read More</a>
        </p>
      </div>
	  <div class="col col2">
	    <div class="col-logo-wrapper">
		  <div class="glyphicon-ring">
		    <span class="glyphicon glyphicon-blackboard"></span>
		  </div>
		</div>
		<div class="col-header">
	      <h3>Lorem Ipsum</h3>
		  <h4> Second header test here.</h4>
	    </div>
	    <p>
          Lorem ipsum dolor sit amet, nostro facilisi similique his ei. Eos et iusto scripserit, 
		  dignissim argumentum eam at. No partiendo vulputate suscipiantur pro. Id quot nemore adipiscing vel.
	      <a href="https://www.smashingmagazine.com/events/san-francisco-2018/">Read More</a>
        </p>
      </div>
	  <div class="col col3">
	    <div class="col-logo-wrapper">
		  <div class="glyphicon-ring">
		    <span class="glyphicon glyphicon-blackboard"></span>
		  </div>
		</div>
		<div class="col-header">
	      <h3>Lorem Ipsum</h3>
		  <h4> Second header test here.</h4>
	    </div>
	    <p>
          Lorem ipsum dolor sit amet, nostro facilisi similique his ei. Eos et iusto scripserit, 
		  dignissim argumentum eam at. No partiendo vulputate suscipiantur pro. Id quot nemore adipiscing vel.
	      <a href="https://www.smashingmagazine.com/events/san-francisco-2018/">Read More</a>
        </p>
      </div>
    </div>
  </main>
<script>
function myFunction() {
    var x = document.getElementById("nav");
    if (x.className === "navbar") {
        x.className += " responsive";
    } else {
        x.className = "navbar";
    }
}
</script>
<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
     dots[i].className = dots[i].className.replace(" w3-white", "");
  }
  x[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " w3-white";
}
</script>
</body>
</html>
@charset "utf-8";
/* CSS Document */

html, body {
  padding: 0;
  margin: 0;
}
.topnav {
	position: relative;
	top: 0px;
	height: 180px;
    background: linear-gradient(to bottom, rgba(78,109,156,1) 1%,rgba(51,84,133,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	
    border-bottom: 1px solid rgba(245,246,246,0.8);
    box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.45);
	
}
#nav {
  overflow: hidden;
  position: relative;
  z-index: 1;
  top: 10em; /* Push nav out of the header */
  height:4em;
  width:898px;
  list-style:none;
  margin: auto;
  border: 1px solid #e3e3e3;
  box-shadow: 0px 1px 0px 0px rgba(160,160,160,1),
              1px 0px 0px 0px rgba(160,160,160,1),
			  0px -1px 0px 0px rgba(160,160,160,1),
			  -1px 0px 0px 0px rgba(160,160,160,1),
              0px 0px 0px 1px rgba(160,160,160,1),
			   0px 20px 15px -10px rgba(1,1,1,0.4);
  background: -webkit-linear-gradient(top, rgba(232,232,232,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
  border-radius: 5px;
  transition: height 2s;
}
#nav a {
  float:left;
  text-decoration: none;
  text-align: center;
  display:block;
  color:#26364f;
  height:3.9em;
  padding: 0px 56px;
  line-height:4em;
  font-weight:bold;
  border-right: 1px solid rgba(160,160,160,0.4);
  box-shadow: 2px 0px 10px 0px rgba(232,232,232,1);
  
}

#nav a:hover, #nav a:focus {
  background:#7691B9;
  color:#000; 
}
#nav a:last-child {
	border-right: none;

}
#nav a:nth-last-child(2) {
    border-right: none;
	box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.25);
} 
#nav a.icon {
    display: none;
  }
  
#nav a:focus {
  background-color: #AABDDA;
  color: black;
}
/* Responsive Design */
@media screen and (max-width: 800px) {
  #nav {
  width: 98%
  }
  .w3-content {
	  width: 98%;
  }
  .About {
	  margin-top: -20px;
  }
  #nav a {
    float: none;
    display: block;
    text-align: left;
	padding-left: 20px;

	box-shadow: none;
	border: none;
  }
  #nav a:not(:first-child) {
	display: none;
	
  }
  #nav a:last-child {
	border-right: none;
	background-color: #AABDDA;
  }
  #nav a:last-child {
    width: 50px;
	border-radius: 0px;
	color: FFF;
  }
  #nav li {
    float: none;
  }
  #nav a.icon {
    position: relative;
    float: right;
    display: block;
	top: -55px;
	text-align: center;
	text-indent: 5px;
  }
}
.LinkContainer { /* Set width for nav and content */

	width: 90%;
    margin: 0 auto;
} 
.responsive {
	
}
@media screen and (max-width: 800px) {
  #nav.responsive {position: relative;}
  #nav.responsive .icon {
    position: absolute;
	text-align: center;
    right: 0;
    top: 0;
  }
  #nav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  #nav.responsive a:first-child {
	  background-color: #ddd;
	  background-color: #AABDDA;
  }
  #nav.responsive {
	height: 275px;
  }
  
}
.topbar {
	position: relative;
	z-index: 2;
	height: 30px;
	background: #1E406E;
	margin: 0 auto;
	text-align: center;
	padding: 5px;
	color: #AABDDA;
}
.About {
	position: relative;
	background: #1E406E ;
	padding-top: 60px;
	padding-bottom: 70px;
	background: repeating-linear-gradient(transparent, #1E406E 2px),
                repeating-linear-gradient(0.25turn, transparent, #1E406E 2px),   
				
			    linear-gradient(to right, #1E406E 0%,#7994B8 45%,#7994B8 70%,#1E406E 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    
}

.img-diplay {
	height: 320px;
}
.w3-content {
	position: relative;
    border: 10px solid #e3e3e3;
	border-radius: 2px;
	box-shadow: 0px 20px 15px -10px rgba(1,1,1,0.5);
}
.w3-custom {
	background-color: rgba(1,1,1,0.6);
	color: white;
}
.w3-custom h1 {
	font-family: 'Lobster', Georgia, Times, serif;
	text-transform: uppercase;
	line-height: 22px;
	letter-spacing: 1px;
    font-weight: normal;
	font-size: 1.3em;
	margin-bottom: 30px;
	margin-left: 10px;
}
.w3-custom p {
	margin-left: 10px;
}
.w3-display-right  {
	height: 90%;
	width: 300px;
	right: 13px;

}
.w3-left, .w3-right, .w3-badge {
	cursor:pointer;
}
.w3-badge {
	position: relative;
	top: 65px;
	height:17px;
	width:17px;

	background: grey;
	margin: 1px 1px;
}
.ReadMore {
    background: linear-gradient(to bottom, #f7eb0e 0%,#e08f0d 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	border-radius: 10px;
    border: none;
    color: #1E406E;
    padding: 4px 35px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    margin: 10px 10px;
    cursor: pointer;
}
.Middlesplitter {
	height: 80px;
	background: -webkit-linear-gradient(top, rgba(232,232,232,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
	border-bottom: 5px solid rgba(0,0,0,0.15);
}
.Middlesplitter h2 {
	text-align: center;
	margin-top: 0;
	padding-top: 25px;
	font-size: 1.6em;
	color: grey;
}
main {
	position: relative;
	background-color: #f6f6ee;
	background: -webkit-linear-gradient(top, rgba(232,232,232,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
    height: 600px;
}
.col-container {
	position: relative;
        display: flex;
    max-width: 1200px;
	margin: auto;
	
}
.col {
	
	position: relative;
    flex: 1;
    padding: 20px;
   
	border: 2px dashed rgba(160,160,160,0.8);
	margin-top: 50px;
	background-color: #fff;
	box-shadow: 0 0 0 4px #fff, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
	border-radius: 5px;
}
.col2 {
    margin-left:36px;
	margin-right: 36px;
}
.glyphicon-ring {
  height: 42px;
  width: 42px;
  background-color: #4e6d9c;
  border-radius: 50%;
  text-align: center;
}
.glyphicon-ring span {
	line-height: 42px;
    color: #fff;
	font-size: 25px;
}
.col-logo-wrapper {
   width: 50px;
   height: 50px;
   float:left; /* add this */
}
.col-header h3 {
	  margin-top: 0px;
	  margin-bottom: 0px;
	  color: #393b3a;
	  font-family: 'Enriqueta', arial, serif;
	  font-size: 22px;
}
.col-header h4 {
	margin-top: 0px;
    margin-bottom: 0px;
	color: #393b3a;
	font-family: 'Enriqueta', arial, serif;
	font-size: 20px;
	font-weight: italic;
	color: #5a7f8f;
	font-family: "Helvetica Neue",Arial,sans-serif; 
	font-size: 18px; 
	font-weight: 300;  
}
.col p {
	  margin-top: 20px;
}
.col-header {
	 
	 overflow: hidden;
}
.dot {
  position: absolute;
  top: 15px;
  height: 42px;
  width: 42px;
  background-color: #4e6d9c;
  border-radius: 50%;
  text-align: center;
}
.dot span {
	line-height: 42px;
    color: #fff;
	font-size: 25px;
}

@media only screen and (max-width: 800px) {
	.col-container {
      width: 97%;
	  display: block;
	}
    .col { 
        display: block;
        width: 100%;
	}
	 .col2 { 
       margin-left: 0px;
	   margin-right: 0px;
	   margin-top: 20px;
	   margin-bottom: -30px;
    }
	.col p{ 
	  text-align: center;
	  }
}
.ribbon {
  margin: auto;
  position: relative;
  top: 20px;
  padding: 15px;
  height: 40px;
  background: repeating-linear-gradient(transparent, #1E406E 2px),
                repeating-linear-gradient(0.25turn, transparent, #1E406E 2px),   
				
			    linear-gradient(to right, #1E406E 0%,#7994B8 45%,#7994B8 70%,#1E406E 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  clip-path: polygon(100% 0, 95% 50%, 100% 100%, 0% 100%, 5% 50%, 0% 0%);
  font-family: "font_condensed";
  text-transform: uppercase;
  color: #dddeda;
  letter-spacing: 0.18em;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 400px;
  
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.