-
Notifications
You must be signed in to change notification settings - Fork 0
/
indexr.html
172 lines (158 loc) · 7.93 KB
/
indexr.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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!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>
<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>
<a href="#" class="toggle-btn">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<!--Background-->
<div class="wall">
<img class="wall-pic" src="images/bg.jpg">
<section class="section-1">
<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="testimonials.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>