Skip to content

Thomas Jensen #104

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
th0jensen wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Thomas Jensen #104

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8706455
Completed exercise and extensions
th0jensen May 8, 2024
011166d
Added gitignore
th0jensen May 8, 2024
586d4f3
Delete .zed directory
th0jensen May 8, 2024
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
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
.DS_Store
.zed
115 changes: 115 additions & 0 deletions about-us.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Gymtastic</title>
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="carousel.css" />
</head>
<body>
<div id="page-container">
<div id="content-wrap">
<div class="navbar">
<ul>
<li>
<a
href="./home.html"
style="font-weight: bold; font-size: 18px"
>
Gymtastic
</a>
</li>
<li><a href="./home.html">Home</a></li>
<li><a href="./about-us.html">About Us</a></li>
<li><a href="#contact-us">Contact Us</a></li>
</ul>
</div>
<div class="content">
<h1>About Us</h1>
<section>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ipsa odit sapiente odio modi, saepe officiis mollitia
placeat tempora! Minima at, eaque natus alias omnis
eligendi iure quia reiciendis unde velit. Lorem ipsum
dolor sit amet consectetur adipisicing elit. Vel dolore
quia, quos molestiae aliquam pariatur laboriosam,
dolorum perspiciatis beatae blanditiis dignissimos.
Labore architecto aspernatur fugiat ullam a maiores
error obcaecati? Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Recusandae reprehenderit laudantium,
labore facere culpa magnam! Alias aperiam molestias
officiis nulla dolores adipisci. Vitae dolores iure
accusantium odio, quam assumenda a?
</p>
</section>
</div>
<div>
<h1 style="margin-left: 20px">Our Gyms</h1>
<section>
<div class="carousel">
<div class="card-container">
<div class="card">
<h2>London</h2>
<p>📍 Westminster</p>
<p>Open 24 hours</p>
</div>
<div class="card">
<h2>Cardiff</h2>
<p>📍 Splott</p>
<p>Open 24 hours</p>
</div>
<div class="card">
<h2>Glasgow</h2>
<p>📍 Govanhill</p>
<p>Open 24 hours</p>
</div>
<div class="card">
<h2>London</h2>
<p>📍 Camden</p>
<p>Open 24 hours</p>
</div>
<div class="card">
<h2>London</h2>
<p>📍 Leicester Square</p>
<p>Open 24 hours</p>
</div>
</div>
</div>
</section>
</div>
</div>
<footer id="footer">
<p class="footer-heading">Popular Features</p>
<p class="footer-text">Gyms Near Me</p>
<div class="footer-list">
<p>Gyms in London</p>
<p>Gyms in Cardiff</p>
<p>Gyms in Glasgow</p>
</div>
<p class="footer-text">Fitness Classes</p>
<p class="footer-text">Personal Trainers</p>
<p class="footer-text">Gym Membership Deals & Offers</p>
</footer>
</div>
<script>
const listOfCardElements = document.querySelectorAll('.card')
const cardContainer = document.querySelector('.card-container')

listOfCardElements.forEach((cardElement, index) => {
cardElement.addEventListener('click', () => {
const scrollLeft = index * listOfCardElements[0].offsetWidth
cardContainer.scrollTo({
left: scrollLeft,
behavior: 'smooth',
})
})
})
</script>
</body>
</html>
39 changes: 39 additions & 0 deletions carousel.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
.carousel {
width: 100%;
height: 166px;
margin-bottom: 50px;
}

.card-container {
width: 100%;
display: flex;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
gap: 8px;
width: 100%;
margin: 8px;
flex: 0 0 100%;
}

.card-container::-webkit-scrollbar {
display: none;
}

.card {
min-width: 250px;
height: 150px;
scroll-snap-align: start;
display: inline;
text-align: center;
justify-content: center;
align-items: center;
border: 1px solid #181818;
color: white;
border-radius: 8px;
background-color: #3779a4;
}

.card:hover {
background: #6ba4c9;
}
103 changes: 103 additions & 0 deletions home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Gymtastic</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="page-container">
<div id="content-wrap">
<div class="navbar">
<ul>
<li>
<a
href="./home.html"
style="font-weight: bold; font-size: 18px"
>
Gymtastic
</a>
</li>
<li><a href="./home.html">Home</a></li>
<li><a href="./about-us.html">About Us</a></li>
<li><a href="#contact-us">Contact Us</a></li>
</ul>
</div>
<div class="content">
<h1>Fitness for life!</h1>
<section>
<p>
Every gym is designed with you in mind, from the way
they're laid out, to the range of equipment available.
</p>
<p>
Get your membership today and save a whopping
<a id="discount" href="#membership">50%</a>
!
</p>
<button class="membership-button">GET MEMBERSHIP</button>
</section>
<br />
<h1>Follow us on</h1>
<section>
<button
class="social-media-button"
style="background-color: #874af3"
>
Instagram
</button>
<button
class="social-media-button"
style="background-color: #3578ea"
>
Facebook
</button>
<button
class="social-media-button"
style="background-color: #e93123"
>
YouTube
</button>
</section>
</div>
<div class="testimonials">
<h1>Member Stories</h1>
<div class="quote-container">
<p class="quote">
This is the best gym ever!
<br />
<cite>- Alva Jordal</cite>
</p>
<p class="quote">
I love training at Gymtastic!
<br />
<cite>- Ezeikel Pemberton</cite>
</p>
<p class="quote">
It's fantastic with Gymtastic!
<br />
<cite>- Carlo Minciacchi</cite>
</p>
</div>
</div>
</div>
<footer id="footer">
<p class="footer-heading">Popular Features</p>
<p class="footer-text">Gyms Near Me</p>
<div class="footer-list">
<p>Gyms in London</p>
<p>Gyms in Cardiff</p>
<p>Gyms in Glasgow</p>
</div>
<p class="footer-text">Fitness Classes</p>
<p class="footer-text">Personal Trainers</p>
<p class="footer-text">Gym Membership Deals & Offers</p>
</footer>
</div>
</body>
</html>
134 changes: 134 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
html,
body {
width: 100%;
height: 100%;
margin: 0;
box-sizing: border-box;
}

.navbar {
display: flex;
background-color: #3779a4;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover {
background-color: #6ba4c9;
}

.content {
margin: 20px;
}

#discount {
color: #3779a4;
font-weight: bold;
text-decoration: none;
}

.membership-button {
background-color: white;
color: orange;
border-style: solid;
border-width: 2px;
border-color: orange;
border-radius: 15px;
}

.social-media-button {
box-shadow:
0 4px 8px 0 rgba(0, 0, 0, 0.2),
0 6px 20px 0 rgba(0, 0, 0, 0.19);
font-size: 20px;
color: white;
font-weight: bold;
border-style: solid;
border-width: 1px;
border-radius: 15px;
margin-right: 10px;
}

button {
padding-top: 15px;
padding-bottom: 15px;
padding-left: 25px;
padding-right: 25px;
}

.testimonials {
width: 100%;
margin: 20px;
margin-top: 50px;
margin-bottom: 50px;
}

.quote-container {
display: flex;
overflow-x: scroll;
}

.quote {
max-height: 50px;
width: 150px;
background: #f0f0f0;
padding: 20px;
border-radius: 15px;
margin-right: 10px;
}

footer {
background-color: #3779a4;
color: white;
line-height: 0.5;
padding: 20px;
}

.footer-heading {
padding-bottom: 10px;
font-size: 18px;
}

.footer-list {
margin-left: 20px;
}

.footer-text {
font-weight: bold;
}

h1 {
color: #3779a4;
}

#page-container {
position: relative;
min-height: 100%;
}

#content-wrap {
padding-bottom: 2.5rem;
}

#footer {
position: absolute;
bottom: 0;
width: 100%;
}