Responsive Club Website (CSS)

Thank you for checking it out and the feedback! :smiley:
I’m just learning animations and transitions, I’ll try to improve it further with your recommendations!

1 Like

So I bent the rules a bit to make a site for my friends music project - Red Meat - instead of a club.
It may be a bit on the punk side and the aesthetics are kind of in your face, but he liked it.
I used a flex grid that changes configuration based on the display port switching to normal flex boxes at the smallest size.

enjoy-
https://masteroffluff.github.io/ResponsiveClub/

git here

1 Like

Your website looks amazing! well done.

1 Like

I had a little fun with this project and made a silly one. All of these remind me of how much I need to learn about design :see_no_evil: haha. It was fun though!

Live: Peach Club
GitHub Repo: GitHub Repo

4 Likes

Hi, Everyone!
I hope you’ll accept my humble offerings below. Feedback is, as always, really appreciated :smiley:

code: GitHub - Karo-lcw/clubsite: Codecademy's final project for Fundamentals ;)
live page: Moon Town Biking Club

3 Likes

Hey guys here’s my code- GitHub - zaddy66/club: Responsive club from Webflow Template

Hey guys and girl.

here is my Code

and

here is my Website

I am overall quite happy but I had some problem to position some elements exactly as i want (the Login button for example) and also when you shrink the screen the “JOIN NOW” button is offset I could not find out how to fix it and would be thankful if somebody know how to fix it and can assit me (idealy as a GitHub reply)

1 Like

I love Ping-Pong so i made a website for that.
Here is mine:

Live Site - Space Club :point_left:

Source Code :wave:

Love feedback, so let me know what you think. :smiling_face_with_three_hearts:

QuanBui.

2 Likes

The above is my attempt for a rather edgy and cocky club of revolutionary coders that wants to disrupt the digital norms.
(unintentionally got some inspiration form Watch Dogs 2 hah)

I think I got most of the responsiveness in place, but just a few elements, like the ‘Join Us’ section doesn’t seem to be as responsive as I wanted to.

So, any feedback is welcome :slight_smile:

Hallo everyone!
This is my website for the Responsive Club website challenge. I made a website for a book club run by vampires. The code is here:

It looks amazing! your use of multiple classes is impressive, I should try to tidy up my CSS like that :smiley:

1 Like

Thank you for paying attention to it. I separate the CSS property into small class and use it again when need.
Your css file will be simpler and more concise, but you have to pay more attention to the class in the HTMl file.
The advantage is that it makes the design easy to synchronize in size and color.
Try it. :smiling_face_with_three_hearts:

1 Like

Hey all this is my attempt!

Thanks in advance.

Hi,

This is my work on this project;

The code: https://poppyszn.github.io/travel-club/

The website: https://github.com/poppyszn/travel-club

Please let me know what you think!

Hi all, this is my attempt at this projext. Hope you enjoy :slight_smile:

Guthub: GitHub - PersonalError/BigTop: Codecademy Challenge Project

Live: PersonalError | Big Top Academy

3 Likes

Wow your site looks fantastic! Very well done. I’m going to give some nitpicky feedback.

In the about section:
Your images squish as the page is resized. You could fix this with: object-fit: cover;
With object-fit you do lose the cutout at the bottom of the image, but instead of cutting the image itself, you could crop it with a css clip mask. Maybe something like this: clip-path: polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 100%);

In the time table section:
I would specify AM or PM in the time column. It may be obvious the first 6-7 is am and the last is pm, but what if the schedule only has one 6-7? Better to remove all uncertainty.
In the time table you have classes Saturday and Sunday going till 8PM, but later in the open hours section you say you are only open till 6PM Sat and 2PM Sun. Keep it consistent. Either leave the additional rows on Sat and Sun empty or remove them.

Signature Classes section:
You need padding on the left of .cassses-info. It starts to run into the image around 1300px screen width.

Get in Touch with Us - Open Hours:
Be consistent with your labels. If you are abbreviating days of the week, use “Sun” instead of “sunday”. Sunday also should be capitalized. I would also like to see a dash between “Mon-Fri”.
Under Send Us a Message, you don’t need an asterisk at the end of the disclaimer. Usually asterisks indicate a note with farther explanation somewhere else on the page.

Take or leave any of my suggestions, overall impressive work!

1 Like

Hi!

Here’s my project for Pottery Club

Live Version

Repository

Thanks,
Angie

3 Likes

this is really good!