<!DOCTYPE html>
<html>

<head>
  <title>My Bad Ass Slider</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="css/main.css">
  <script
  src="http://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
</head>

<body>
<div class="main-slider">
	<div class="t-slide current-t-slide">
			<img src="https://picsum.photos/1800/900?image=868" alt="" />
		</div>
		<div class="t-slide">
			<img src="https://picsum.photos/1800/900?image=838" alt="" />
		</div>
		<div class="t-slide">
			<img src="https://picsum.photos/1800/900?image=841" alt="" />
		</div>
		<div class="t-slide">
			<img src="https://picsum.photos/1800/900?image=839" alt="" />
		</div>
        <div class="t-slide">
			<img src="https://picsum.photos/1800/900?image=821" alt="" />
		</div>

	<div class="t-slider-controls">
		<div class="arrow right-arrow">
			<div class="arrow-container">
				<div class="arrow-icon"><i class="fa fa-chevron-right" aria-hidden="true"></i></div>
			</div>
		</div>
		<div class="arrow left-arrow">
			<div class="arrow-container">
				<div class="arrow-icon"><i class="fa fa-chevron-left" aria-hidden="true"></i></div>
			</div>
		</div>
		<div class="t-load-bar">
			<div class="inner-load-bar"></div>
		</div>
		<div class="t-dots-container">
			<div class="t-slide-dots-wrap">
				<div class="t-slide-dots">

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

<div class="secondary-slider">
	<div class="t-slide current-t-slide">
			<img src="https://picsum.photos/1800/900?image=868" alt="" />
		</div>
		<div class="t-slide">
			<img src="https://picsum.photos/1800/900?image=838" alt="" />
		</div>
		<div class="t-slide">
			<img src="https://picsum.photos/1800/900?image=841" alt="" />
		</div>
		<div class="t-slide">
			<img src="https://picsum.photos/1800/900?image=839" alt="" />
		</div>
        <div class="t-slide">
			<img src="https://picsum.photos/1800/900?image=821" alt="" />
		</div>
	<div class="t-slider-controls">
		<div class="arrow right-arrow">
			<div class="arrow-container">
				<div class="arrow-icon"><i class="fa fa-chevron-right" aria-hidden="true"></i></div>
			</div>
		</div>
		<div class="arrow left-arrow">
			<div class="arrow-container">
				<div class="arrow-icon"><i class="fa fa-chevron-left" aria-hidden="true"></i></div>
			</div>
		</div>
		<div class="t-load-bar">
			<div class="inner-load-bar"></div>
		</div>
		<div class="t-dots-container">
			<div class="t-slide-dots-wrap">
				<div class="t-slide-dots">

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

<div class="third-slider text-slider">
			<div class="t-slide current-t-slide">
				<div class="t-slide-content">
					<p>"Mr. Mestayer is a great attorney that helped me with my Estate Planning needs for a very reasonable price. He listens to what you have to say and takes the time that your case properly needs. He is hands on and does not just turn you over to an assistant. He usually is able to see you within 24 to 48 hours of calling to make an appointment. He helped my brother with getting custody of his son. He helped my nephew with legally changing his name.I highly recommend Mr. Mestayer. He is extremely knowledgeable in many different aspects and areas of the law, so if you have multiple needs he can handle them all."</p>
					<div class="signature">
						<p><b>Patti Bradley-Davis</b></p>
						<p>Pascagoula</p>
					</div>
				</div>
			</div>
			<div class="t-slide">
				<div class="t-slide-content">
					<p>“I had put off setting up my will and the burden weighed heavy on me. Mr. Mestayer was polite and kind while walking me through the process. I now feel secure knowing my affairs will be handled and my children will have legal documents to refer to in the event I pass away.”</p>
					<div class="signature">
						<p><b>Vanessa A. Gulf Breeze</b></p>
						<p>Gulf Breeze</p>
					</div>
				</div>
			</div>
			<div class="t-slider-controls">
				<div class="arrow right-arrow">
					<div class="arrow-container">
						<div class="arrow-icon"><i class="fa fa-chevron-right" aria-hidden="true"></i></div>
					</div>
				</div>
				<div class="arrow left-arrow">
					<div class="arrow-container">
						<div class="arrow-icon"><i class="fa fa-chevron-left" aria-hidden="true"></i></div>
					</div>
				</div>
				<div class="t-dots-container">
					<div class="t-slide-dots-wrap">
						<div class="t-slide-dots">

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

  <script src="js/main.js"></script>
</body>

</html>
