-
Notifications
You must be signed in to change notification settings - Fork 0
/
about.html
105 lines (97 loc) · 5.64 KB
/
about.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-wdith initial-scale=1">
<title>About- Meet Your Trainer</title>
<meta name="description" content="Ahsan Danyal is a fitness coach that's not only here to make you workout plans but also educate you throughout your journey and guide you in each every step. Learn more 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="stylesheet" type="text/css" href="about.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">
<img class="wall-pic" src="Wide Gym Wallpaper.jpg" alt="A wide picture of a gym focused on weight rack and in distance a girl doing dumbell rows">
</div>
<section class="aboutMe">
<div class="img-sec">
<img id="about-img" src="gallery3.jpg" alt="I'm Ahsan Danyal. Your personal trainer. Yes that is me in this portrait">
<h4>Ahsan Danyal</h4>
<p class="designation">Personal Trainer</p>
</div>
<div class="text">
<h1>Meet Your Trainer</h1>
<p class="about-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin egestas maximus est id semper. Integer placerat, tortor at cursus consequat, odio nibh tempus lorem, ac ornare ante odio non odio. Etiam vitae libero tellus. Mauris accumsan feugiat maximus. Mauris fringilla risus vitae ligula placerat, nec mattis ex malesuada. Nam convallis leo mi, id varius sapien aliquet eget. Cras semper orci ut magna suscipit sagittis. Etiam molestie elit ut enim pharetra, vitae egestas tellus malesuada. Vivamus rutrum nisi varius iaculis consequat. Sed vitae tincidunt est, non aliquet turpis. Sed eu hendrerit nisi.</p>
<p class="about-desc">Nunc hendrerit quis mi vitae viverra. Vivamus ultricies nec felis in volutpat. Integer velit erat, fermentum quis odio at, molestie laoreet arcu. Donec consequat enim molestie feugiat auctor. Nunc suscipit purus a quam sollicitudin, id pharetra nisl tempor. Proin lacinia, sem vulputate fringilla bibendum, turpis odio laoreet nunc, at pellentesque nisi odio sit amet tellus. Etiam risus enim, imperdiet ac leo faucibus, tempus tempus purus. Praesent id auctor leo. Donec ultrices ullamcorper sem, ac egestas augue dictum non. Aliquam ut dictum risus, vitae sagittis mi. Nunc commodo eros aliquam, dapibus odio in, efficitur lectus. Integer porta erat sed sapien pulvinar venenatis.</p>
</div>
</section>
<section class="quote">
<div class="quote-main">
“There are no shortcuts—everything is reps, reps, reps.”
</div>
<div class="author">- Arnold Schwarzenegger</div>
</section>
<section class="why-choose-me">
<h2>Why Choose Trainer?</h2>
<p class="about-para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum temporibus perspiciatis, ipsam doloremque assumenda laborum iure asperiores, corrupti ut quidem natus! Quasi natus, esse odio tempora debitis praesentium ullam repellat.</p>
<div class="about-img-grid">
<img id="about-sub-img" src="about1.jpg" alt="A girl doing dumbell rows in red leggings and white skinny that has a nice floral colored tattoo on her right shoulder">
<img id="about-sub-img" src="about2.jpg" alt="A young man determined to lifeting heavy in deep squatting position">
<img id="about-sub-img" src="about3.jpg" alt="Strong girl doing leg press and lighting reveals her amazing muscle distribution of her thighs">
<img id="about-sub-img" src="about4.jpg" alt="A man with washboard abs and nice chest and shoulders using cable crossover machine">
<img id="about-sub-img" src="about5.jpg" alt="A girl with red hoodie attatched to red sports bra and white shorts with insane abs posing next to weights">
<img id="about-sub-img" src="about6.jpg" alt="A strong man trying heavy wight shoulder raises and his facial expressions shows how heavy that is">
</div>
</section>
<section class="service-redirect">
<div class="service-text"><a id="about-link" href="services.html">
Learn More about services right NOW
</a>
</div>
</section>
<!--Footer-->
<footer>
<ul class="footer-list">
<li class="footer-item"><a id="footer-link" href="index.html">Home</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>© All Rights Reserved</p>
</div>
</footer>
<script type="text/javascript" src="script.js"></script>
</body>
</html>