index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-wdith initial-scale=1">
	<title>Ahsan Danyal</title>
	<meta name="description" content="Ahsan Danyal is a fitness coach, transformation specialist and have changed lives of many people. He got different workout programmes specially tailor made for you.  Learn more right now">
	<link rel="shortcut icon" type="image/png" href="Favicon-broad dreams.png">
	<link rel="stylesheet" type="text/css" href="styles.css">
	<link rel="stylesheet" type="text/css" href="./Original CSS/styles.css">

	<link rel="preconnect" href="https://fonts.gstatic.com">
	<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap" rel="stylesheet">
</head>
<body>
	<!--Nav Bar-->
	<nav class="nav-class" id="sticky"> 
		<h3 class="logo-txt">
			<div class="logo">
				<a href="">
				  <span>A</span>D
				  <span></span>
				  <span>G</span>ym
				</a>
			  </div>
		</h3>
		<a href="#" class="toggle-btn">
			<span class="bar"></span>
			<span class="bar"></span>
			<span class="bar"></span>
		</a>
		<div class="nav-links">
			<ul class="nav-list">
				<li class="nav-item"><a id="nav-link" href="index.html">Home</a></li>
				<li class="nav-item"><a id="nav-link" href="about.html">About</a></li>
				<li class="nav-item"><a id="nav-link" href="services.html">Services</a></li>
				<li class="nav-item"><a id="nav-link"  href="products.html">Product</a></li>
				<li class="nav-item"><a id="nav-link" href="contact.html">Contact</a></li>	
			</ul>	
		</div>				
	</nav>

	<!--Background-->
	<div class="wall">
		
		<section class="section-1">
		<img class="wall-pic bg-bkgrground" src="images/bg.jpg">	
		<div class="banner">
			<h1 class="banner-heading">
			  <span class="heading-1">Strength Taininig</span>
			  <span class="heading-2">Weight Taininig</span>
			  <span class="heading-3">Fat Losing</span> 
			   <span class="heading-4">Speed Building</span>
			</h1>
			<p class="banner-paragraph">Lorem ipsum dolor sit</p>
			<button class="banner-btn">Discover Now</button>
		  </div>
		</section>
	</div>

	<!--Service Brief-->
	<section class="services">
		<h1 class="serive-heading">Be A Better You</h1>
		<h2 class="serive-heading second">With AD GYM SERVICE</h1>
		<p class="service-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, accusamus ut architecto repudiandae rem ex mollitia est ab quod, possimus illum, saepe labore temporibus esse soluta cum iure. Excepturi, laudantium.</p><br>
		<p class="service-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quam amet alias nesciunt dolores aliquid ea accusantium quod qui, magnam doloremque maiores aut a doloribus odio quibusdam enim fugit, unde rerum?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, tenetur.</p>

		<div class="service-card-grid">
			<div class="service-card">
				<img src="https://img.icons8.com/ios-glyphs/90/000000/deadlift--v1.png"/>
				<h4 class="card-title">Workout Programmes</h4>
				<p class="card-txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt, magnam?
					Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt, magnam?
					​</p>
				<a id="service-link" href="services.html">Learn More</a>
			</div>
			<div class="service-card">
				<img src="https://img.icons8.com/ios-glyphs/90/000000/rice-bowl.png"/>
				<h4 class="card-title">Diet Plans</h4>
				<p class="card-txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt, magnam?
					Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt, magnam?</p>
				<a id="service-link" href="services.html">Learn More</a>
			</div>
			<div class="service-card">
				<img src="https://img.icons8.com/ios-glyphs/90/000000/counselor.png"/>
				<h4 class="card-title">Consulting</h4>
				<p class="card-txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt, magnam?
					Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt, magnam?</p>
				<a id="service-link" href="services.html">Learn More</a>
			</div>
		</div>
	</section>

	<section class="about">
		<div class="main-wrap">
			<div class="wording-about">
				<h2 class="about-main">Mr Karachi Champion</h1>
				<p class="about-para">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maxime cumque beatae modi harum ipsam impedit voluptatem! Sed ab modi nihil ut minus aperiam veritatis, recusandae suscipit quibusdam dolor? Voluptas, cupiditate?</p>
				<p class="about-para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum consequatur sunt officiis odit natus ea perspiciatis ipsum, praesentium obcaecati dolorum culpa amet voluptatum eligendi. Expedita quibusdam nobis praesentium dolorum facere.</p>
				<p class="about-para">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
				<p class="about-para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis necessitatibus, a doloribus recusandae tempore adipisci dolorem nihil quam perspiciatis minus nisi, est cum rerum, deleniti iste. Nam mollitia expedita blanditiis!</p>
				<button id="about-btn"><a id="about-link" href="about.html">About</a></button>
			</div>	
		<img class="about-img" src="overlay1.png" alt="I'm Ahsan Danyal. Your personal trainer. Yes that is me in this portrait">
		</div>			
	</section>

	<section class="testimonials">
		<h2 class="testi-title">Product</h1>
		<div class="test-grid">
			<div class="testi-card">
				<div class="testi-card one">
				<img id="trans-pic-home" src="product1.png" alt="Before and after results of my clients. Copyright of Ahsan Danyal Fitness">				
			</div></div>
			<div class="testi-card">
				<div class="testi-card one">
				<img id="trans-pic-home" src="product2.png" alt="Before and after results of my clients. Copyright of Ahsan Danyal Fitness">
			</div>	</div>
			<div class="testi-card">
				<div class="testi-card one">
				<img id="trans-pic-home" src="product3.png" alt="Before and after results of my clients. Copyright of Ahsan Danyal Fitness">
			</div>
			</div>
		</div>
		<button id="testi-btn"><a id="testi-link" href="products.html">See More</a></button>
	</section>

	<section class="contact">
		<div class="contact-wrapper">
			<h2 class="contact-main">My Mission</h1>
			<div class="sub-contact-wrapper">
				<img id="contact-img" src="class1.jpg" alt="Through the journey of ftiness I've come this far not to come this far">
				<div>				
				<p class="contact-txt">Lorem ipsum dolor sit amet consectetur adipisicing elit.
					 Provident adipisci,sapiente, dolorum nulla velit corporis repellendus atque 
					 quaerat corrupti cupiditate fuga eius aliquid, inventore architecto laborum? 
					 Quo dolores praesentium doloremque, non eum optio numquam veniam eligendi 
					 consectetur ad sunt, possimus reiciendis atque voluptatibus accusantium ex
					  voluptatum cupiditate! Quisquam facere,  ad labore error saepe nesciunt
						   reprehenderit consequatur ipsum voluptates animi, consectetur, maxime in accusantium
						    tenetur beatae quidem incidunt quo enim nisi quis. Nisi sequi earum minus ipsam hic? 
							Tempora obcaecati non incidunt nostrum reiciendis quos eum sunt, aperiam ex facilis 
							deserunt exercitationem porro aliquam ullam, 
							reiciendis sit explicabo aperiam?   
							   </p>
					<button id="contact-btn"><a id="contact-link" href="contact.html">Contact</a></button>
				</div>
			</div>						
		</div>
	</section>

	<footer>
		<ul class="footer-list">
			<li class="footer-item"><a id="footer-link" href="about.html">About</a></li>
			<li class="footer-item"><a id="footer-link" href="services.html">Services</a></li>
			<li class="footer-item"><a id="footer-link" href="products.html">Product</a></li>
			<li class="footer-item"><a id="footer-link" href="contact.html">Contact</a></li>
		</ul>
		<div class="sponser">
			<a href="https://github.com/ahsandanyal" target="_blank">Web Design By Ahsan Danyal</a>
			<p>&copy; All Rights Reserved</p>
		</div>
	</footer>

<script type="text/javascript" src="script.js"></script>
</body>
</html>