Skip to content

Mamadou Leye "Gymtastic Fantastic" #96

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
homonoviscoding wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Mamadou Leye "Gymtastic Fantastic" #96

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 50 additions & 0 deletions gymnastic.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Gymtastic Home</title>
</head>
<body>
<div class="container">
<div class="header">
<h1>Gymtastic</h1>
<nav>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</div>
<div class="main">
<h2 class="fitness">Fitness for life!</h2>
<p>Every gym is designed with you in mind, from the way they're laid out, to the range of equipment available.</p>
<div class="p-two">Get your membership today and save a whopping<span>50%</span>!</div>
<div class="button">
<a href="#">GET MEMBERSHIP</a>
</div>
<div class="follow-us">
<p>Follow us on</p>
<ul class="social-media">
<li><div class="button1"><a href="#">Instagram</a></div></li>
<li><div class="button2"><a href="#">Facebook</a></div></li>
<li><div class="button3"><a href="#">YouTube</a></div></li>
</ul>
</div>
</div>
<div class="footer">
<p>Popular features</p>
<div class="footer1">
<p>Gyms Near Me<ul>
<li><a href="#">Gyms in London</a></li>
<li><a href="#">Gyms in Cardiff</a></li>
<li><a href="#">Gyms in Glasgow</a></li>
</ul></p>
<p>Fitness Classes<br>Personal Trainers<br>Gym Membership Deals & Offers</p>
</div>
</div>
</div>
</body>
</html>
164 changes: 164 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,164 @@
* {
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
}

.container {
display: grid;
height: 100vh;
grid-template-rows: 1fr 4fr 2fr;
grid-template-columns: 1fr;
grid-template-areas:
'header'
'main'
'footer'
}
.header {
display: flex;
background-color: #347BA7;
color: azure;
padding: 20px 0px 20px 25px;
align-items: center;
grid-area: header;
}
.header ul a {
color: white;
text-decoration: none;
}
.menu {
display: flex;
font-size: 20px;
}
.menu li {
padding: 0px 20px 0px 20px;
list-style: none;
}
.fitness {
padding: 40px 0px 0px 35px;
color: #367596;
font-size: 35px;
font-weight: bold;
}
.main p {
padding: 35px 0px 0px 35px;
font-size: 20px;
}
.main .p-two {
padding: 20px 0px 40px 35px;
font-size: 20px;
}
.main .p-two span {
padding: 0px 1px 0px 5px;
font-size: large;
color: #347BA7;
font-weight: bold;
}

.main .button {
padding: 15px 30px 15px 30px;
outline: none;
border: 2px solid #e88132;
border-radius: 10px 10px;
margin: -10px 1050px 30px 40px;
text-align: center;
}

.main .button a {
color: #e88132;
font-weight: 550;
text-decoration: none;
}

.follow-us p {
padding: 10px 0px 0px 40px;
color: #367596;
font-size: 35px;
font-weight: bold;
}
.social-media {
display: flex;
padding: 0px 0px 0px 40px;
margin: 15px 0px 0px 0px;
align-items: center;
}
.social-media li {
padding: 0px 25px 0px 25px;
color: black;
margin: 0px 0px 0px -20px;
list-style: none;
}

.social-media .button1 {
background-color: #874a85;
outline: none;
border: 2px solid #6b2c69;
border-radius: 14px 14px;
text-align: center;
padding: 13px 35px 13px 35px;

}
.social-media .button1 a {
color: white;
font-weight: bolder;
font-size: 25px;
text-decoration: none;
}

.social-media .button2 {
background-color: #3478eb;
outline: none;
border: 2px solid #1b4999;
border-radius: 14px 14px;
text-align: center;
padding: 13px 35px 13px 35px;

}

.social-media .button2 a {
color: white;
font-weight: bolder;
font-size: 25px;
text-decoration: none;
}

.social-media .button3 {
background-color: #eb3323;
outline: none;
border: 2px solid #96170c;
border-radius: 14px 14px;
text-align: center;
padding: 13px 35px 13px 35px;

}

.social-media .button3 a {
color: white;
font-weight: bolder;
font-size: 25px;
text-decoration: none;
}
.footer {
background-color: #347BA7;
grid-area: footer;
padding: 35px 0px 35px 30px;
font-size: 25px;
color: white;
margin-top: 20px;
}

.footer1 {
font-weight: bold;
padding-top: 15px;
font-size: 21px;
}
.footer1 li {
list-style: none;
margin-left: -10px;
}

.footer1 a {
font-weight: normal;
text-decoration: none;
list-style: none;
}