Gabriella - JS Project Business Site #59
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,2 @@ | ||
| # js-project-business-site | ||
| Link to site: https://sportlinksite.netlify.app/ |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,265 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>SportLink</title> | ||
| <link rel="stylesheet" href="style.css"> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com"> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
| <link href="https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet"> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> | ||
| </head> | ||
|
|
||
| <body> | ||
| <header class="hero"> | ||
| <img | ||
| class="hero-image" | ||
| src="./hero-modified.jpeg" | ||
| alt="group of running people" | ||
| > | ||
| <nav class="navbar" id="nav"> | ||
| <div | ||
| class="menu-icon" | ||
| id="menuIcon"> | ||
| <img | ||
| class="hamburger-icon" | ||
| id="hamburgerIcon" | ||
| src="./burger-menu-white.svg" | ||
| alt="hamburger menu icon"> | ||
| <img | ||
| class="cross-icon hidden" | ||
| id="crossIcon" | ||
| src="./burger-menu-cross-white.svg" | ||
| alt="cross menu icon"> | ||
| </div> | ||
| <ul class="nav-links" id="links"> | ||
| <li><a href="#">Home</a></li> | ||
| <li><a href="#events">Events</a></li> | ||
| <li><a href="#">About</a></li> | ||
| </ul> | ||
| </nav> | ||
| <div class="hero-content"> | ||
| <img | ||
| class="logo" | ||
| src="./logo.png" | ||
| alt="logo"> | ||
| <div> | ||
| <img | ||
| class="hamburger-logo" | ||
| id="hamburgerLogo" | ||
| src="./logo.png" | ||
| alt="logo"> | ||
| </div> | ||
| <p>All the city's free social workouts—gathered in one place so you can stay active and make | ||
| friends along the way.</p> | ||
| <a href="#form"> | ||
| <button class="primary-cta"> | ||
| Sign up! | ||
| </button> | ||
| </a> | ||
| </div> | ||
| </header> | ||
| <main> | ||
| <section class="introduction"> | ||
| <h1>Bored of working out solo? We've got you!</h1> | ||
| <p>Staying active doesn't have to be boring—or solo. Our platform brings together the city's free social sports | ||
| events so you can find activities that fit your schedule, your energy, and your mood. Whether you're into | ||
| early | ||
| morning run clubs, yoga sessions in the park, or high-energy group workouts, everything is in one place. Join, | ||
| and connect with like-minded people who love to move.</p> | ||
| </section> | ||
| <section class="events-section" id="events"> | ||
| <h2>Current events</h2> | ||
| <section class="card-section"> | ||
| <div class="modal-overlay hidden" id="modalOverlay"> | ||
| <img | ||
| class="cross-icon" | ||
| id="modalCrossIcon" | ||
| src="./burger-menu-cross-white.svg" alt="cross menu icon"> | ||
gabriellaberko marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| <div class="modal" id="modalPopup"> | ||
| <div class="modal-content" id="modalContent"></div> | ||
| <p><b>Connect with the club on social media</b></p> | ||
| <div class="social-links"> | ||
| <a href="#" class="fa fa-facebook"></a> | ||
| <a href="#" class="fa fa-instagram"></a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="card" id="card"> | ||
| <h3 class="card-title">Thursday Run Club</h3> | ||
| <img | ||
| src="./group-run.jpeg" | ||
| alt="group of runners" | ||
| > | ||
| <div class="card-description"> | ||
| <div class="location-date-box"> | ||
| <p>📍 Mariatorget, Stockholm <br> 🕐 18.00 every Thursday</p> | ||
| </div> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do il dolore eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> | ||
| </div> | ||
| <button class="card-button">Read more</button> | ||
| </div> | ||
| <div class="card"> | ||
| <h3 class="card-title">Vinyasa Flow Mornings</h3> | ||
| <img | ||
| src="./yoga-session.jpeg" | ||
| alt="group yoga session in park" | ||
| > | ||
| <div class="card-description"> | ||
| <div class="location-date-box"> | ||
| <p>📍 Vasaparken, Stockholm <br> 🕐 11.00 every Saturday</p> | ||
| </div> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do il dolore eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> | ||
| </div> | ||
| <button class="card-button">Read more</button> | ||
| </div> | ||
| <div class="card"> | ||
| <h3 class="card-title">Tuesday Run Club - Cruisers (Slow)</h3> | ||
| <img | ||
| src="./group-run.jpeg" | ||
| alt="group of runners" | ||
| > | ||
| <div class="card-description"> | ||
| <div class="location-date-box"> | ||
| <p>📍 Mariatorget, Stockholm <br> 🕐 18.30 every Tuesday</p> | ||
| </div> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do il dolore eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> | ||
| </div> | ||
| <button class="card-button">Read more</button> | ||
| </div> | ||
| <div class="card"> | ||
| <h3 class="card-title">Stretch & Mobility</h3> | ||
| <img | ||
| src="./yoga-in-park.jpeg" | ||
| alt="group yoga session in park" | ||
| > | ||
| <div class="card-description"> | ||
| <div class="location-date-box"> | ||
| <p>📍 Tantolunden, Stockholm <br> 🕐 12.00 every Saturday and Sunday</p> | ||
| </div> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do il dolore eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> | ||
| </div> | ||
| <button class="card-button">Read more</button> | ||
| </div> | ||
| </section> | ||
| <div class="button-wrapper"> | ||
| <a href=""> | ||
| <button class="events-button"> | ||
| More events | ||
| </button> | ||
| </div> | ||
| </a> | ||
| </section> | ||
| <section class="form-section" id="form"> | ||
| <h2>Sign up to not miss out on new events!</h2> | ||
| <p>Sign up to get the latest social sports events straight to your inbox. Pick the activities you love and your skill level, and we'll make sure you get updates on new events that match your interests and pace.</p> | ||
| <form | ||
| class="sign-up-form" | ||
| action="https://httpbin.org/anything" | ||
| method="POST" | ||
| > | ||
| <fieldset> | ||
| <legend>Newsletter Sign up</legend> | ||
| <label class="text-field"> | ||
| <span>First name</span> | ||
| <input | ||
| type="text" | ||
| name="first-name" | ||
| placeholder="Emma" | ||
| required | ||
| > | ||
| </label> | ||
| <label class="text-field"> | ||
| <span>Last name</span> | ||
| <input | ||
| type="text" | ||
| name="last-name" | ||
| placeholder="Andersson" | ||
| required | ||
| > | ||
| </label> | ||
| <label class="text-field"> | ||
| <span>Email</span> | ||
| <input | ||
| type="email" | ||
| name="email" | ||
| placeholder="example@example.com" | ||
| required | ||
| > | ||
| </label> | ||
| <p>What are you interested in?</p> | ||
| <label class="checkbox">Running | ||
| <input | ||
| type="checkbox" | ||
| name="interest" | ||
| value="running" | ||
| checked | ||
| > | ||
| <span class="custom-checkbox"></span> | ||
| </label> | ||
| <label class="checkbox">Cycling | ||
| <input | ||
| type="checkbox" | ||
| name="interest" | ||
| value="cycling" | ||
| > | ||
| <span class="custom-checkbox"></span> | ||
| </label> | ||
| <label class="checkbox">Yoga | ||
| <input | ||
| type="checkbox" | ||
| name="interest" | ||
| value="yoga" | ||
| > | ||
| <span class="custom-checkbox"></span> | ||
| </label> | ||
| <label class="checkbox">Mobility | ||
| <input | ||
| type="checkbox" | ||
| name="interest" | ||
| value="mobility" | ||
| > | ||
| <span class="custom-checkbox"></span> | ||
| </label> | ||
| <p>What is your skill level?</p> | ||
| <label class="radio-button">Beginner | ||
| <input | ||
| type="radio" | ||
| name="skill-level" | ||
| value="beginner" | ||
| checked | ||
| > | ||
| <span class="custom-radio-button"></span> | ||
| </label> | ||
| <label class="radio-button">Intermediate | ||
| <input | ||
| type="radio" | ||
| name="skill-level" | ||
| value="intermediate" | ||
| > | ||
| <span class="custom-radio-button"></span> | ||
| </label> | ||
| <label class="radio-button">Advanced | ||
| <input | ||
| type="radio" | ||
| name="skill-level" | ||
| value="advanced" | ||
| > | ||
| <span class="custom-radio-button"></span> | ||
| </label> | ||
| <button class="submit-button" type="submit"> | ||
| Sign me up! | ||
| </button> | ||
| </fieldset> | ||
| </form> | ||
| </section> | ||
| </main> | ||
| <script src="script.js"></script> | ||
| <footer> | ||
| <p>© Copyright</p> | ||
| </footer> | ||
| </body> | ||
|
|
||
| </html> | ||
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| const hamburgerIcon = document.getElementById("hamburgerIcon"); | ||
| const crossIcon = document.getElementById("crossIcon"); | ||
| const navBar = document.getElementById("nav"); | ||
| const navLinks = document.getElementById("links"); | ||
| const cardButtons = document.querySelectorAll(".card-button"); | ||
| const cardButton = document.querySelector(".card-button"); | ||
| const cards = document.querySelectorAll(".card"); | ||
| const card = document.querySelector(".card"); | ||
| const modalOverlay = document.getElementById("modalOverlay"); | ||
| const modal = document.getElementById("modal"); | ||
| const modalContent = document.getElementById("modalContent") | ||
| const modalCrossIcon = document.getElementById("modalCrossIcon"); | ||
|
|
||
| function expandCollapseHamburgerMenu() { | ||
| if (navLinks.style.display === "block") { | ||
| navLinks.style.display = "none"; | ||
| navBar.style.backgroundColor = "transparent"; | ||
| } else { | ||
| navLinks.style.display = "block"; | ||
| navBar.style.backgroundColor = "rgba(33, 32, 23, 0.817)"; | ||
| } | ||
| } | ||
|
|
||
| /* add/remove the CSS for the class hidden (which is display: none) to the different menu icons */ | ||
|
There was a problem hiding this comment. Good explanation! it helps to understand what the code does:) |
||
| function changeMenuIcon() { | ||
| hamburgerIcon.classList.toggle("hidden"); | ||
| crossIcon.classList.toggle("hidden"); | ||
| }; | ||
|
|
||
| menuIcon.addEventListener("click", () => { | ||
| expandCollapseHamburgerMenu(); | ||
| changeMenuIcon(); | ||
| }); | ||
|
|
||
|
|
||
| function openCloseModal() { | ||
| modalOverlay.classList.toggle("hidden"); | ||
| }; | ||
|
|
||
| function showCardInModal(clickedButton) { | ||
| // find the card which button was clicked | ||
| const clickedCard = clickedButton.closest(".card"); | ||
|
|
||
| // copy its inner HTML into modal-content | ||
| modalContent.innerHTML = clickedCard.innerHTML; | ||
|
|
||
| // remove the card's inital ("read more") button | ||
| modalContent.querySelector(".card-button").remove(); | ||
| }; | ||
|
|
||
| /* call the funtions on click for every of the card buttons */ | ||
| cardButtons.forEach((cardButton) => { | ||
| cardButton.addEventListener("click", () => { | ||
| openCloseModal(cardButton); | ||
| showCardInModal(cardButton); | ||
| }); | ||
| }); | ||
|
|
||
| modalCrossIcon.onclick = () => { | ||
| openCloseModal(); | ||
| }; | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I just wonder why this text is written on multiple lines when other long texts are not.