Skip to content
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

Business Website - Registration page for the tennis camp #371

Open
wants to merge 11 commits into
base: master
Choose a base branch
from
Open

Business Website - Registration page for the tennis camp #371

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
da4d62e
added form
cholpoun Aug 31, 2024
69649e3
added form
cholpoun Aug 31, 2024
428a723
added form, images and text
cholpoun Aug 31, 2024
e30e8d2
added sections
cholpoun Aug 31, 2024
c94a65a
finalized the form, footer, main body, added images and text
cholpoun Sep 1, 2024
e0b7ef4
updated the readme file
cholpoun Sep 1, 2024
af0f758
updated the responsivness
cholpoun Sep 1, 2024
8db2021
added hamburger menu
cholpoun Sep 1, 2024
a1a75fa
updated the code
cholpoun Sep 2, 2024
8c89b25
added hhtpbin
cholpoun Sep 2, 2024
c087ff3
Update README.md
cholpoun Sep 3, 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
Binary file added .DS_Store
View file
Open in desktop
Binary file not shown.
22 changes: 17 additions & 5 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,24 @@
# Business Site

Replace this readme with your own information about your project.

Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
This is a website for summer camp registrations. It includes a quote from the former participant, a registration form, a navigation bar, and a grid section with other camp options.

## The problem

Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
Describe how you approached the problem and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?

Problem - create a website with a registration form for a business.

A header with responsive image/video
A signup form with at least three different input types. Examples:
Text fields
A password field
Set of radio buttons
Set of checkboxes
Submit button
Style your page
The page should be fully responsive and work well on mobile, tablet, and desktop (it should look good on devices from 320px width up to 1600px).
Follow the guidelines on how to write clean code.


## View it live
Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
https://66d48d6d1c630b008e16a794--heroic-kataifi-f3484c.netlify.app/
157 changes: 145 additions & 12 deletions code/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,150 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Business Site</title>
<!-- dont forget to add a css file and link it here! -->
</head>
<body>
<h1>Business name 🌻</h1>
<html lang="en">

<!-- video or image as a header is cool :) -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ace Tennis Academy</title>
<link rel="stylesheet" href="style.css">
</head>

<!-- Signup form -->
<body>
<nav class="navbar">
<div class="logo">
<h1>Ace Tennis Academy</h1>
</div>

<div class="hamburger-menu" id="hamburger-menu">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>

<ul class="nav-links">
<li><a href="https://salk.se/">Home</a></li>
<li><a href="https://salk.se/klubben/">The club</a></li>
<li><a href="https://salk.se/traning/">Training</a></li>
<li><a href="https://salk.se/klubben/om-salk/kontakt/">Contact us</a></li>
<li><a href="#" class="btn-login">Log in</a></li>
</ul>
</nav>

<!-- Registration section -->
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great with the comments to clarify the different sections!


<div class="registration-section">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

← this could be called a section (like your class name suggests, and then you can have the div:s inside of the section)

<div class="left-section">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

← I would name this something like form-box or registration-box, so it's easier to understand what type of content it holds.

<h2>Summer Camp Registration</h2>
<p>Immerse yourself in the vibrant atmosphere of the Summer Camps at the Ace Tennis Academy!</p>
<form action="https://httpbin.org/anything" method="post">
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here I'm curious to why you have div:s around the label and input. I think you can add on to the margin-bottom for the input in the CSS, and get the same effect without the div:s.
input[type="text"], input[type="email"], input[type="password"]

<label for="email">Email</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="password">Create a password</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit" class="btn-create">Register</button>
<button type="button" class="btn-google">Register with Google</button>
<button type="button" class="btn-twitter">Register with Twitter</button>
</form>
<p class="login-link">Already registered? <a href="#">Log in</a></p>
</div>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the form looks really nice! The box around could be styled differently to adjust better to the different screen sizes. (width, and maybe center it for the smaller screen sizes)

<div class="right-section">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

← This could also be a section, for example “classes-section”, with smaller div:s inside. Here I think it would be useful to work with flexbox in the section and the div:s, to position the overlay and quote so it fits inside the div/section.

<img class="image"
src="https://images.unsplash.com/photo-1595435934249-5df7ed86e1c0?q=80&w=3572&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

← I got this message “URL signature expired” on the small images (classes), I’ve had the same issue on my site, so I think I’ll avoid using links as image sources i coming projects.

alt="Person">

<div class="overlay">
<div class="quote">
<p>"Experience unforgettable
moments under the sun of the French Riviera between training sessions and festive activities! Improve your
game with the advice of coaches trained in the methodology of Patrick Mouratoglou,
historical coach of Serena Williams and current coach of the prodigy Holger Rune. Discover our wide range
of available camps: intensive, half-day, or our new camp, the Night Sessions."</p>
<div class="quote-author">
<span> Nadia Pak</span> - Tennis player, SALK
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • Tennis player, SALK ← This part of the text doesn’t have a tag (p for example or should it be part of the span?) I also wonder why you chose the span-tag, because I can only see that you have applied styling to the div, but not the span in the CSS.

</div>
</div>
</div>
</div>
</div>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the closing div:s could be closer to the opening div. So it’s easier to see where the div actually ends. Or maybe for example the paragraphs and the spans could have been a class instead of a div, or just styled as p and span in the CSS. I think that would look more “clean”.


<!-- Section with other camp options -->
<section class="other-camps-section">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work with the CSS grid! It works well on the different screen sizes.

<div class="grid-camps">
<div class="grid-item">
<img
src="https://scontent-arn2-1.xx.fbcdn.net/v/t39.30808-6/457750699_8505520102816221_2492337728740259486_n.jpg?_nc_cat=110&ccb=1-7&_nc_sid=127cfc&_nc_ohc=pW1hMX4bB-gQ7kNvgE5Fawo&_nc_ht=scontent-arn2-1.xx&cb_e2o_trans=t&oh=00_AYA29ET3BlfjB9rHc-E6e_6gW3nfHJkcwSlX6MVV8bJ3rQ&oe=66DA37F3"
alt="Tennis balls">
<h3>Junior Camp</h3>
<p>Youth players aged 8 to 17 train with the Ace Tennis Academy by Movistar staff to enhance their skills and
reach their potential using the Ace Tennis Academy Methodology. They learn the positive values that Ace Tennis
Academy promotes on and off the court, influencing not only their gameplay but also their character and
behavior in life. This holistic approach aims to create well-rounded athletes who set a positive example,
making a difference in their communities as leaders both on and off the court.</p>
<button type="submit" class="btn-create">Learn more</button>
</div>
<div class="grid-item">
<img
src="https://scontent-arn2-1.xx.fbcdn.net/v/t39.30808-6/458193660_8505520116149553_5225990035521238507_n.jpg?_nc_cat=111&ccb=1-7&_nc_sid=127cfc&_nc_ohc=R2HEDzRWQaUQ7kNvgHuJFda&_nc_ht=scontent-arn2-1.xx&cb_e2o_trans=t&oh=00_AYDJSoWmR41GGaXYKM1nTK977oqo2RGhtvmpfk2liS-qzQ&oe=66DA3778"
alt="A woman in the tennis court">
<h3>Adult Camp</h3>
<p>The adult camps are structured to help players excel in matches, leagues, tournaments, and competitions.
Participants train with the Ace Tennis Academy’s skilled coaches, employing the Ace Tennis Academy Methodology
for comprehensive growth. The camps focus on advanced drills, tactical insights, and mental conditioning, all
designed to elevate performance. These programs provide a challenging yet supportive environment where adults
can enhance their skills, build confidence, and achieve their personal best.
</p>
<button type="submit" class="btn-create">Learn more</button>
</div>
<div class="grid-item">
<img
src="https://scontent-arn2-1.xx.fbcdn.net/v/t39.30808-6/457740804_8505520106149554_7251837137325307767_n.jpg?_nc_cat=100&ccb=1-7&_nc_sid=127cfc&_nc_ohc=Gb1PV5cs9R4Q7kNvgGBgzub&_nc_ht=scontent-arn2-1.xx&cb_e2o_trans=t&oh=00_AYDqtpeJKrZR8sEsYkrHS82sg4kUM-yqVcP12U8zWtiGXQ&oe=66DA38DA"
alt="Woman in the tennis court">
<h3>Weekend Camp</h3>
<p>Enjoy a weekend of high-intensity tennis training! Improve your skills while having fun, whether solo, with
friends, or with family, at the Ace Tennis Academy Resort. Experience intensive coaching sessions, dynamic
drills, and matches, combined with relaxing amenities, in a beautiful setting. This unique getaway blends
sport and leisure, giving you the chance to train hard, relax under the sun, and create unforgettable
memories. Perfect for tennis lovers seeking both improvement and enjoyment on the court.</p>
<button type="submit" class="btn-create">Learn more</button>
</div>

</section>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like the structure here and the use of div:s!


<!-- Footer Section -->
<footer class="footer">
<div class="footer-container">
<div class="footer-logo">
<h1>Ace Tennis Academy</h1>
</div>
<div class="footer-links">
<a href="#">About</a>
<a href="#">Privacy Policy</a>
<a href="#">Terms of Service</a>
<a href="#">Contact</a>
</div>
<div class="footer-social">
<a href="#"><img src="https://cdn-icons-png.flaticon.com/128/20/20837.png" alt="Facebook"></a>
<a href="#"><img src="https://cdn-icons-png.flaticon.com/128/733/733635.png" alt="Twitter"></a>
<a href="#"><img src="https://cdn-icons-png.flaticon.com/128/1400/1400829.png" alt="Instagram"></a>
</div>
<p class="footer-text">&copy; 2024 Ace Tennis Academy. All rights reserved.</p>
</div>
</footer>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like this part also, it looks good on all the different screen sizes when the text is centered.


</body>

</body>
</html>

</body>

</html>


</html>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like the overall design of the site, especially in the biggest screen size. I think the use of boxes is really good because it makes the site but also the code easier to overlook. I think the big image and the transparent quote-box is a nice way to combine image and text together.

Loading