innerhome.html

<!DOCTYPE html>
<html>
<head>
	<title>Team Unfit</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/list.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
	<!-- Glyphicon bootstrap link -->
	 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	 <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link href="css/slider-pro.min.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="js/jquery.sliderPro.min.js"></script>
</head>
<body>

<div class="innermainContainer">

<div class="w3-container">

<div id="profile">	
<br>
<div id="contain">
<div id="slidefeatures" class="slider-pro" style="max-width: 50px;">
        <div class="sp-slides">
            <div class="sp-slide">
                <img class="sp-image" src="image/cycling.jpg"/>

                <h3 class="sp-layer sp-black sp-padding"
                    data-horizontal="40" data-vertical="10%"
                    data-show-transition="left" data-hide-transition="left">
                    New Challenge
                </h3>

                <h3 class="sp-layer sp-black sp-padding" data-horizontal="40" data-vertical="10%" data-show-transition="left" data-hide-transition="left" data-layer-init="true" style="visibility: visible; left: 40px; width:147px; top: 33%; transform-origin: left top 0px; transform: scale(1) translate3d(0px, 0px, 0px); opacity: 1;">
                    @namarasinghe has challenge everyone around the St Lucia area for a 3km cycling the quickest time gets the money.
                </h3>
            </div>
            <div class="sp-slide">
                <img class="sp-image" src="image/jogging.jpg"/>

                <h3 class="sp-layer sp-black sp-padding"
                    data-horizontal="40" data-vertical="10%"
                    data-show-transition="left" data-hide-transition="left">
                    Popular Workout
                </h3>

                <h3 class="sp-layer sp-black sp-padding" data-horizontal="40" data-vertical="10%" data-show-transition="left" data-hide-transition="left" data-layer-init="true" style="visibility: visible; left: 40px; width:147px; top: 33%; transform-origin: left top 0px; transform: scale(1) translate3d(0px, 0px, 0px); opacity: 1;">
                    There's 25 persons attending the South Bank joggin session today at 5pm do not miss it.
                </h3>
            </div>
             <div class="sp-slide">
                <img class="sp-image" src="image/friends.png"/>

                <h3 class="sp-layer sp-black sp-padding"
                    data-horizontal="40" data-vertical="10%"
                    data-show-transition="left" data-hide-transition="left">
                    Recommended Friends
                </h3>

                <h3 class="sp-layer sp-black sp-padding" data-horizontal="40" data-vertical="10%" data-show-transition="left" data-hide-transition="left" data-layer-init="true" style="visibility: visible; left: 40px; width:147px; top: 33%; transform-origin: left top 0px; transform: scale(1) translate3d(0px, 0px, 0px); opacity: 1;">
                    Mack and Kate are perfect matches to exercise with you based on your interests.
                </h3>
            </div>
             <div class="sp-slide">
                <img class="sp-image" src="image/run.jpg"/>

                <h3 class="sp-layer sp-black sp-padding"
                    data-horizontal="40" data-vertical="10%"
                    data-show-transition="left" data-hide-transition="left">
                    New Challenge
                </h3>

                <h3 class="sp-layer sp-black sp-padding" data-horizontal="40" data-vertical="10%" data-show-transition="left" data-hide-transition="left" data-layer-init="true" style="visibility: visible; left: 40px; width:147px; top: 33%; transform-origin: left top 0px; transform: scale(1) translate3d(0px, 0px, 0px); opacity: 1;">
                    @Andresito has chanllenge everyone around South Bank to a 5km run in less than 40 minutes.
                </h3>
            </div>
             <div class="sp-slide">
                <img class="sp-image" src="image/runG.jpg"/>

                <h3 class="sp-layer sp-black sp-padding"
                    data-horizontal="40" data-vertical="10%"
                    data-show-transition="left" data-hide-transition="left">
                    Recommended Friends
                </h3>

                <h3 class="sp-layer sp-black sp-padding" data-horizontal="40" data-vertical="10%" data-show-transition="left" data-hide-transition="left" data-layer-init="true" style="visibility: visible; left: 40px; width:147px; top: 33%; transform-origin: left top 0px; transform: scale(1) translate3d(0px, 0px, 0px); opacity: 1;">
                    There's 3 new possible friends around your location that have assisted to similar workout sessions as you.
                </h3>
            </div>

            
        </div>

        <div class="sp-thumbnails" >

            <a href="innerHomeTraining.html"><div class="sp-thumbnail">
                <div class="sp-thumbnail-title">Challenge</div>
            </div>
       		</a>

             <a href="innerHomeWorkout.html"><div class="sp-thumbnail">
                <div class="sp-thumbnail-title">Workout</div>
            </div>
			</a>
             <a href="sampledatas.html"><div class="sp-thumbnail">
                <div class="sp-thumbnail-title">Friends</div>
            </div>
			</a>
            <a href="innerHomeTraining.html"><div class="sp-thumbnail">
               <div class="sp-thumbnail-title">Challenge</div>
            </div>
        	</a>
            <a href="mapview.html"><div class="sp-thumbnail">
                <div class="sp-thumbnail-title">Friends</div>
            </div>
       		 </a>
        </div>
    </div>
</div>

				<ul id="myUL3">
					</br>
					<li><a href="chating.html"><center><i class="fa fa-comments fa-2x" aria-hidden="true"></i></center><center>Connect with Friends</center></a></li>
				</ul>
				<ul id="myUL2">
					<li><a href="mapview.html"><center><i class="fa fa-users fa-2x" aria-hidden="true"></i></center><center>Find Friends Near You</center></a></li>
				</ul>
				<ul id="myUL4">
					<li><a href="innerHomeTraining.html"><center><i class="fa fa-trophy fa-2x" aria-hidden="true"></i></center><center>Challenge People</center></a></li>
				</ul>
				<ul id="myUL5">
					<li><a href="innerHomeWorkout.html"><center><i class="fa fa-bicycle fa-2x" aria-hidden="true"></i></center><center>Find a Workout</center></a></li>
				</ul>
				<br>
				<br>
							
  
</div>
</div>


</body>

<script type="text/javascript" src="js/home.js"></script>
<script type="text/javascript">
    $( document ).ready(function( $ ) {
        $( '#slidefeatures' ).sliderPro({
            width: 960,
            height: 500,
            arrows: true,
            buttons: false,
            waitForLayers: true,
            thumbnailWidth: 200,
            thumbnailHeight: 250,
            thumbnailPointer: true,
            autoplay: true,
            autoScaleLayers: false,
            breakpoints: {
                500: {
                    thumbnailWidth: 120,
                    thumbnailHeight: 50
                }
            }
        });
    });
</script>
   
   
</html>