-
Notifications
You must be signed in to change notification settings - Fork 0
/
about.html
120 lines (111 loc) · 4.46 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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Body Bulding</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="about.css">
<script src="https://kit.fontawesome.com/c6f38472f5.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div class="wrapper flex">
<i class="fa-brands fa-facebook-f"></i>
<i class="fa-brands fa-twitter"></i>
<a href="#">English</a>
<a href="#">My Page</a>
<a href="#">Logout</a>
</div>
</header>
<i class="fa-sharp fa-solid fa-bars menu"></i>
<div class="navigation">
<i class="fa-solid fa-xmark xmark"></i>
<nav class="wrapper">
<div class="nav-top">
<a href="index.html">
<img class="logo" src="assets/images/logo2.png" alt="logo">
<p class="max-font-26"><span>SP Fitness</span><br>center 2023</p>
</a>
</div>
<ul class="nav-links flex column">
<li><a class="nav-link max-font-26" href="about.html">About</a></li>
<li><a class="nav-link max-font-26" href="#">Program</a></li>
<li><a class="nav-link max-font-26" href="#">Join</a></li>
<li><a class="nav-link max-font-26" href="#">Sponsor</a></li>
<li><a class="nav-link max-font-26 " href="#">News</a></li>
</ul>
<div class="nav-bottom flex">
<button class="max-font-26" type="button">SPFC Story</button>
</div>
</nav>
</div>
<main>
<section id="headline" class="section">
<div class="greeting">
<p>"Hello! Champion"</p>
</div>
<div class="wrapper">
<h1>Super Power Fitness Center 2023</h1>
<p class="description">Super Power Fitness Center is a premier gym offering various services and facilities to
help you achieve your fitness goals. Whether you want to lose weight, build muscle, improve your health or
just
have fun, we have something for you. Join us today and discover the benefits of working out with our qualified
trainers, state-of-the-art equipment and supportive community.</p>
<p class="contact">Please contact us per Email for any further questions about SP Fitness Center 2023!</p>
<br>
<p class="email"><strong><u>[email protected]</u></strong></p>
<img class="abg1" src="assets/images/o-stripes.png" alt="">
<img class="abg2" src="assets/images/b-stripes.png" alt="">
<img class="bg4" src="assets/images/strength.png" alt="muscles">
</div>
</section>
<div class="wrapper logo-wrapper flex column">
<h2 class="title">Super Power Center 2023 Logo</h2>
<p>The logo of SPFC 2023 was decided<br> the logo competition from 8June to 7July</p>
<img class="logo" src="assets/images/logo2 (full).png" alt="SPFC">
</div>
<section id="gallery">
<h2 class="title">See SPFC Gallery</h2>
<div class="gallery-container wrapper flex column">
<div class="gallery-frame">
<img src="assets/Images/Gym.png" alt="" class="gallery-img">
<div class="gallery-curtain"><span class="curtain-text">Equipments</span></div>
</div>
<div class="gallery-frame">
<img src="assets/Images/Gym.png" alt="" class="gallery-img">
<div class="gallery-curtain"><span class="curtain-text">Programs</span></div>
</div>
</div>
</section>
<section id="partners">
<div class="container">
<h2 class="title">Partner</h2>
<div class="company flex">
<span id="facebook">Facebook</span>
<span id="mozilla">Mozilla</span>
<span id="apple">Apple</span>
<span id="microsoft">Microsoft</span>
<span id="google">Google</span>
</div>
</div>
</section>
</main>
<footer>
<div class="wrapper flex">
<a href="index.html">
<img class="logo" src="assets/images/logo2.png" alt="logo">
<p class="max-font-26">SP Fitness<br>center 2023</p>
</a>
<p class="max-font-26">
2023 | SuperPower Fitness center
<span>
<br><br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae minima recusandae voluptate. Numquam esse cumque consequatur culpa, veniam sunt, vero repellat, consequuntur itaque maiores fugit sequi ullam exercitationem repudiandae magni?
</span>
</p>
</div>
</footer>
</body>
<script src="script.js"></script>
</html>