Responsive Club Website (CSS)

Book club website - live version

Book club website - github repository

2 Likes

Krav Maga Club - Live

Github Repository

I have to do more work to make it more responsive.

1 Like

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.

Live Site
Repository

alwaha logo

3 Likes

Oh wow you even have the hamburger menu when the site shrinks. Nice !

1 Like

Thanks :slight_smile:
I kinda forgot to make the hamburger menu clickable.

Have a look at my page :slight_smile:
Live page: Picture Perfect
Code: GitHub - laureng9/Responsive-Club-Website

1 Like

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 :slight_smile:

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

2 Likes

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!

1 Like

looks great man! congrats

1 Like

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 :wink:

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>&copy 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.

1 Like

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 :slight_smile:

1 Like

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:

1 Like

Hi!

Here is my club website:

A Stitch In Time

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?

CSS

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:

  1. 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?
  2. 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.
  3. 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

1 Like

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 :sweat_smile:
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

1 Like

Wow! This site is great. You’ve clearly put a lot of effort into this project. You’ve put my own effort to shame :slight_smile:

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!