Skip to content

Commit 7309abd

Browse files
najar2807najar2807
authored
A-Gym-Website
1 parent 6eca140 commit 7309abd

File tree

5 files changed

+233
-0
lines changed

5 files changed

+233
-0
lines changed

‎gymwebsite/gym.jpg

1.04 MB
Loading

‎gymwebsite/gym2.jpg

2.87 MB
Loading

‎gymwebsite/gymwebsite.html

Lines changed: 233 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,233 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>GYM WEBSITE</title>
8+
<style>
9+
* {
10+
margin: 0;
11+
padding: 0;
12+
}
13+
body {
14+
/* background-image: url(/gym2.jpg); */
15+
background-size: cover;
16+
17+
}
18+
19+
header::before {
20+
background-image: url(/gym2.jpg);
21+
content: "";
22+
background-size: cover;
23+
position: absolute;
24+
width: 100%;
25+
height: 100%;
26+
z-index: -1;
27+
opacity: 0.8;
28+
29+
30+
}
31+
32+
@import url("https://fonts.googleapis.com/css2?family=DynaPuff:wght@600&family=Oswald&display=swap");
33+
34+
ul {
35+
display: inline-block;
36+
padding: 13px;
37+
}
38+
39+
li {
40+
display: inline-block;
41+
42+
font-family: "DynaPuff", cursive;
43+
44+
padding-right: 20px;
45+
46+
border: 3px solid black;
47+
text-align: center;
48+
margin-left: 20px;
49+
border-radius: 6px;
50+
}
51+
52+
li:hover {
53+
text-decoration: underline;
54+
transform: scale(1.1);
55+
background-color: #88f4ff;
56+
cursor: pointer;
57+
}
58+
a:hover {
59+
color: black;
60+
}
61+
62+
li:visited {
63+
color: dimgrey;
64+
}
65+
66+
a {
67+
text-decoration: none;
68+
color: white;
69+
font-weight: bold;
70+
text-align: center;
71+
}
72+
.container {
73+
display: flex;
74+
justify-content: space-between;
75+
}
76+
.logo {
77+
display: inline-block;
78+
color: wheat;
79+
margin-right: 30px;
80+
font-size: 40px;
81+
font-weight: 1000;
82+
}
83+
img {
84+
display: inline-block;
85+
}
86+
nav {
87+
background-color: black;
88+
height: 50px;
89+
width: 100vw;
90+
}
91+
.quote {
92+
color: black;
93+
display: inline-block;
94+
top: 14px;
95+
font-size: medium;
96+
font-weight: bold;
97+
position: relative;
98+
left: 37vw;
99+
width: 300px;
100+
/* margin: 0 0 0 15px; */
101+
font-family: "DynaPuff", cursive;
102+
background-color: white;
103+
color: black;
104+
border: 2px solid black;
105+
text-align: center;
106+
}
107+
108+
109+
summary {
110+
text-decoration: underline;
111+
}
112+
.searchbar {
113+
text-align: center;
114+
margin-left: 15px;
115+
padding: 4px;
116+
border: 2px solid black;
117+
border-radius: 4px;
118+
}
119+
h1 {
120+
color: black;
121+
text-shadow: 6px 3px 3px white;
122+
/* background-color: black; */
123+
/* border: 2px solid white; */
124+
font-family: "DynaPuff", cursive;
125+
border-radius: 8px;
126+
width: 300px;
127+
margin-top: 0px;
128+
margin-left: 58px;
129+
font-size: 26px;
130+
131+
}
132+
133+
.userDetails {
134+
display: inline-block;
135+
font-weight: bold;
136+
position: absolute;
137+
height: 316px;
138+
width: 425px;
139+
border: 2px solid black;
140+
border-radius: 30px;
141+
margin-left: 400px;
142+
margin-top: 188px;
143+
padding: 10px;
144+
text-align: center;
145+
box-shadow: 0px 4px 22px 12px black;
146+
147+
}
148+
149+
.formgroup input {
150+
text-align: center;
151+
width: 307px;
152+
margin: 11px auto;
153+
padding: 5px;
154+
border: 2px solid black;
155+
border-radius: 13px;
156+
font-family: "DynaPuff", cursive;
157+
font-size: 17px;
158+
159+
160+
}
161+
.btn {
162+
text-align: center;
163+
border: 3px solid white;
164+
width: 140px;
165+
height: 33px;
166+
border-radius: 16px;
167+
/* background-color: black; */
168+
color: black;
169+
font-size: medium;
170+
font-weight: 600;
171+
margin-top: 10px;
172+
font-family: "DynaPuff", cursive;
173+
}
174+
button:hover {
175+
/* border:3px solid rgb(6, 132, 243) ; */
176+
/* transform: scale(1.1); */
177+
text-decoration: underline;
178+
border: 2px solid black;
179+
}
180+
181+
</style>
182+
</head>
183+
<body>
184+
<header>
185+
<div class="container">
186+
<div class="img">
187+
<img src="logo3.jpg" alt="image" height="50px" />
188+
</div>
189+
190+
<nav class="navigation">
191+
<ul>
192+
<li><a href="#"> HOME</a></li>
193+
<li><a href="#">YOUR PROFILE</a></li>
194+
<li><a href="#">TRACK FITNESS </a></li>
195+
<li><a href="#">ABOUT </a></li>
196+
<li><a href="#"> FAQ</a></li>
197+
<li><a href="#"> CONTACT US</a></li>
198+
<li><a href="#">NEED HELP! </a></li>
199+
<input type="text" name="search" class="searchbar" placeholder="Search Your Query..." />
200+
</ul>
201+
</nav>
202+
</div>
203+
</header>
204+
205+
<main>
206+
<div class="userDetails">
207+
<h1>JOIN US TODAY</h1>
208+
<div class="formgroup">
209+
<input type="text" name="NAME" id="1" placeholder="NAME*" />
210+
</div>
211+
<div class="formgroup">
212+
<input type="email" name="NAME" id="1" placeholder="EMAIL*" />
213+
</div>
214+
<div class="formgroup">
215+
<input type="password" name="NAME" id="1" placeholder="CREATE PASSWORD*" />
216+
</div>
217+
<div class="formgroup">
218+
<input type="text" name="NAME" id="1" placeholder="RE-ENTER PASSWORD*" />
219+
</div>
220+
<BUTTON class="btn">SIGN IN</BUTTON>
221+
</div>
222+
<div class="quote">
223+
<summary>QUOTE OF THE DAY</summary>
224+
225+
<p1>
226+
WAKE UP TO REALITY, NOTHING EVER GOES AS PLANNED IN THIS ACURRSED
227+
WORLD , THE LONGER YOU LIVE THE MORE YOU REALISE THE ONLY THING THAT
228+
TRULY EXIST IS PAIN AND SUFFERING!
229+
</p1>
230+
</div>
231+
</main>
232+
</body>
233+
</html>

‎gymwebsite/logo2.jpg

9.79 KB
Loading

‎gymwebsite/logo3.jpg

7.25 KB
Loading

0 commit comments

Comments
 (0)