Here is my challenge site on Responsive Club Website, where I did Al Waha Swimming Club. The word ‘al-waha’ means ‘the oasis’ in Arabic to reflect the oasis that attracts people with common interests and goals. The website seems incomplete but at least I fulfilled the guideline.
Oh wow you even have the hamburger menu when the site shrinks. Nice !
Thanks 
I kinda forgot to make the hamburger menu clickable.
Have a look at my page
Live page: Picture Perfect
Code: GitHub - laureng9/Responsive-Club-Website
hi folks!
adding my solution here. I’ve been wanting to start a running club with some colleagues to prepare for my half in the dolomites so I pull up this website to lure them in
See it live here → https://regional-running-club.vercel.app/
Code here → GitHub - cerve86/Regional-Running-club: Setting up a website for the Singapore Running Club
Had fun with this one - only problem I didn’t find use cases to use media queries … ideas to what to add or improve?
A
Hi there!
I went out of the topic and made a landing page for my girlfriend’s yoga classes.
She is super happy with the results. Lucky me!
Code:
Webpage:
Please, share your feedback. Thanks!
looks great man! congrats
very nice!! Like how you structured the page. Just an idea, how about making the prices box with a diff color than the background? seems more visible 
Hi Folks,
Please review my responsive club website project. Any feedback would be appreciated.
Thank you,
Kind Regards
Iskandar
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./styles.css">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Display&display=swap" rel="stylesheet">
<title>Stephanians Football Club</title>
</head>
<body>
<header class="header">
<div class="logo">
<img src="./logo.jpg" alt="Stephanian Football Team Logo">
</div>
<h1>Stephanian Football AFC</h1>
<nav>
<img src="./cost-icon.png" alt="quote icon">
<a href="#">Get Quote</a>
<img src="./call-icon.png" alt="call icon">
<a href="#">Call Now</a>
<img src="./direction-icon.png" alt="direction icon">
<a href="#">Get Directions</a>
</nav>
</header>
<main class="main">
<section id="top">
<h1>Stephanian Ottery Football Club</h1>
<div>Sports Complex in Ferness Estate</div>
<div>Tristan Avenue, Ferness, Cape Town </div>
<img src="./activism.jpg" alt="16 Days of Activism">
</section>
<section class="info">
<h1>Youth Development</h1>
<div>We are passionate about our Youth. We offer development programmes and coaching for boys and girls of all ages</div>
<div>Looking forward to meeting you!</div>
<div id="infoimages">
<figure>
<img src="./exco.jpg" alt="Executive Team">
<figcaption>Executive Team</figcaption>
</figure>
<figure>
<img src="./youth1.JPG" alt="Youth">
<figcaption>The boys</figcaption>
</figure>
<figure>
<img src="./youth2.JPG" alt="Youth">
<figcaption>More of the boys</figcaption>
</figure>
<figure>
<img src="./youth3.jpg" alt="Youth">
<figcaption>The field</figcaption>
</figure>
</div>
</section>
</main>
<footer>
<section class="footer">
<div>© 2023</div>
<div>Powered by football</div>
<div>Project Next Level</div>
</section>
</footer>
</body>
</html>
* {
font-family: "Noto Sans Display";
text-align: center;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
}
.header {
width: 100%;
height: 85px;
border-bottom: 1px solid black;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
z-index: 1;
opacity: 1;
background-color: white;
}
.header img {
height: 80px;
margin-left: 10px;
}
.header a {
color: black;
margin-right: 10px;
}
.main {
position: relative;
top: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 100px;
}
.header nav img {
width: 40px;
height: 40px;
}
#top {
width: 90%;
max-height: 700px;
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
flex: 1 1200px;
}
#top img {
padding-top: 1rem;
max-width: 100%;
height: auto;
}
.footer {
height: 2rem;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid black;
}
.footer div {
font-size: 0.8rem;
font-weight: bold;
}
.info {
padding-top: 30px;
display: flex;
flex-direction: column;
}
#infoimages {
display: flex;
flex-direction: row;
}
figure img {
width: 90%;
height: auto;
padding:10px
}
figcaption {
font-size: 0.8rem;
font-weight: bold;
}
@media only screen and (max-width: 500px) {
.header .logo img {
display: none;
}
}
@media only screen and (max-width: 700px) {
.header nav a {
display: none;
}
}
I opted for redesigning the template provided, here the link to the final page: South Village Running Club
And code: GitHub - Irene12345/Club
I was struggling to make the 2nd row fully responsive (one div containing and image in the centre and two divs containing text to each side), as you can see it stretches the image when resizing to approximately iPad size. I couldn’t figure out now how to fix it so something to improve in the future.
Hello guys!!
This is my Club Responsive Website Live: Desabafo Supportive Club
and the code: GitHub - aliiinecosta/ResponsiveClubWebsite: This is a challenge project of Codecademy Front-End path
Any comments either here or on GitHub will be really appreciated
Hey guys,
I design a tennis club website called “Kiss my Ace!”. I’d love if you check it out and pass on any feedback:
-
See it live: https://patchalv.github.io/Kiss-my-Ace/
-
Review code: GitHub - Patchalv/Kiss-my-Ace
Hi!
Here is my club website:
Everything is responsive when I resize my screen on my laptop. However, this is not the case for my mobile. The images simply don’t resize to 100% and I’m not sure why. Can anyone help me?
Any feedback would be much appreciated.
Thanks,
Liz P
Hello,
This is my first contribution and code upload for review. Please forgive me if I am not uploading in the correct place. (github code links below)
…I followed the code for the Club example pretty closely until the second half where I wanted to add classes for my club. I have three main questions/ issues:
- In my section on class-offerings, I used anchor tags and a hover state to show the link is clickable, but had to make the hover state around the margin of my flex-item. (I understand the hover state is only for desktop). I used margin for my flex item spacing . Is it possible to use anchor tags and hover states with flexbox without targeting the margin?
- This is my first time using media queries and chrome dev tools to see different screen sizes and I stopped after adding two screen size media queries in my css file because I am not sure how to get rid of the padding or margin on the smaller size. I am not sure I am going about the media queries correctly at all.
- I downloaded free svg files for my icons and was only able to target the fill color within the svg files themselves and made a comment about it in my css. Is there a way to use a variable in the svg file that can be targeted/changed in the main css file?
Thank you for any and all feedback.
Here is the link to my club website:
https://rachelfaris.github.io/littletonHikingClub/
and here is the link to my code:
Thanks Again,
Rachel
Hello everybody, i did this project today hope everything is responsive enough, trying always to improve!
I believe it is still a bit messy but always better than how i started 
here’s the code if you want to check out.
Hello all, I’ve kind of attempted this project combined with the previous project together. Fair warning! There are a lot of puppies involved.
See my website here - feel free to play around with chrome tools and let me know what you think!
https://tsewell93.github.io/cavapoos/
Cheers,
Tom
Wow! This site is great. You’ve clearly put a lot of effort into this project. You’ve put my own effort to shame
I played around with the responsiveness and it all seems to be working great. Only thing I could comment on is maybe the footer is a bit large for a mobile display. Otherwise, great work!
Hi Rachel,
I think you’ve done a good job with this website, I’ve only looked purely from a responsiveness perspective rather than closely at the code but I was always able to read everything well.
I dont know if you’ve used something like this before, but there’s a great way to find a colour scheme for your website based on an input photo: https://coolors.co/image-picker - you could give this a go and see if you can make the whole site’s colour scheme more cohesive!