Pull request for code review #56
There are no files selected for viewing
Binary file not shown.
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,3 @@ | ||
| # js-project-business-site | ||
|
|
||
| https://willz-models.netlify.app/ |
Binary file not shown.
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.
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.
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,269 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta | ||
| name="viewport" | ||
| content="width=device-width, initial-scale=1.0" | ||
| > | ||
| <title>Willz agency</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=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Sansation:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" | ||
| rel="stylesheet" | ||
| > | ||
| <link | ||
| rel="stylesheet" | ||
| href="https://fonts.googleapis.com/icon?family=Material+Icons" | ||
| rel="stylesheet" | ||
| > | ||
| </head> | ||
|
|
||
| <body> | ||
| <!---NAVBAR-------------> | ||
| <ul class="nav-list"> | ||
| <li><a href="#">Home </a></li> | ||
| <li><a href="#">Models </a></li> | ||
| <li><a href="#">About us </a></li> | ||
| <li><a href="#">Contact </a></li> | ||
| </ul> | ||
|
|
||
| <!---HAMBURGER MENU--> | ||
| <ul | ||
| id="menu" | ||
| class="menu" | ||
| > | ||
| <span class="hamburger-links"> | ||
| <li class="hamburger-text"><a | ||
| class="menuItem" | ||
| href="#" | ||
| >Home</a></li> | ||
| </span> | ||
| <span class="hamburger-links"> | ||
| <li class="hamburger-text"><a | ||
| class="menuItem" | ||
| href="#" | ||
| >Models</a></li> | ||
| </span> | ||
| <span class="hamburger-links"> | ||
| <li class="hamburger-text"><a | ||
| class="menuItem" | ||
| href="#" | ||
| >About us</a></li> | ||
| </span> | ||
| <span class="hamburger-links"> | ||
| <li class="hamburger-text"><a | ||
| class="menuItem" | ||
| href="#" | ||
| >Contact</a></li> | ||
| </span> | ||
| </ul> | ||
| <button | ||
| id="hamburger" | ||
| class="hamburger" | ||
| > | ||
| <i | ||
| id="menuIcon" | ||
| class="menuIcon material-icons" | ||
| >menu</i> | ||
| <i | ||
| id="closeIcon" | ||
| class="closeIcon material-icons" | ||
| >close</i> | ||
| </button> | ||
|
||
|
|
||
| <header class="hero"> | ||
| <div class="header-text"> | ||
| <h1>WILLZ MODELS</h1> | ||
| <p class="header-paragraph">Feline model agency</p> | ||
| </div> | ||
| </header> | ||
|
|
||
| <!----MAIN section GRID---------> | ||
| <section class="main-section"> | ||
|
||
| <div class="card 1"> | ||
| <img src="images/willz-zara.jpeg" /> | ||
| <h3>Fashionable Willz</h3> | ||
| </div> | ||
|
|
||
| <div class="card 2"> | ||
| <img src="images/Willz-fancy.jpeg" /> | ||
| <h3>Fancy Willz</h3> | ||
| </div> | ||
|
|
||
| <div class="card 3"> | ||
| <img src="images/willz-cowboy.jpeg" /> | ||
| <h3>Cowboy Willz</h3> | ||
| </div> | ||
|
|
||
| <div class="card 4"> | ||
| <img src="images/Willz-catwalk.jpeg" /> | ||
| <h3>Catwalk Willz</h3> | ||
| </div> | ||
|
|
||
| <div class="card 5"> | ||
| <img src="images/willz-manicure.jpeg" /> | ||
| <h3>Manicure Willz</h3> | ||
| </div> | ||
|
|
||
| <div class="card 6"> | ||
| <img src="images/willz-potato.jpeg" /> | ||
| <h3>Potato lover Willz</h3> | ||
| </div> | ||
|
|
||
| <div class="card 7"> | ||
| <img src="images/willz-nature.jpeg" /> | ||
| <h3>Nature Willz</h3> | ||
| </div> | ||
|
|
||
| <div class="card 8"> | ||
| <img src="images/willz-jacket.jpeg" /> | ||
| <h3>Suit jacket Willz</h3> | ||
| </div> | ||
|
|
||
| <div class="card 9"> | ||
| <img src="images/willz-princess.jpeg" /> | ||
| <h3>BLABLA 8</h3> | ||
| </div> | ||
|
|
||
| <div class="card 10"> | ||
| <img src="images/Willz-fancy.jpeg" /> | ||
| <h3>BLABLA 10</h3> | ||
| </div> | ||
|
|
||
| <div class="card 11"> | ||
| <img src="images/willz-potato.jpeg" /> | ||
| <h3>BLABLA 11</h3> | ||
| </div> | ||
|
|
||
| <div class="card 12"> | ||
| <img src="images/Willz-catwalk.jpeg" /> | ||
| <h3>BLABLA 12</h3> | ||
| </div> | ||
| </section> | ||
|
|
||
|
|
||
| <!--INFO + FORM section-------> | ||
|
|
||
| <section class="info-section"> | ||
| <div class="info-text"> | ||
| <h2>About us</h2> | ||
|
|
||
| <Professional>Forget about casting calls, multiple models, or diva drama. Willz is the one-cat wonder your brand | ||
|
||
| has been dreaming of. From slick fashion to casual cool, Willz can pull off any look, any pose and any vibe. All | ||
| without a single hiss. Professional Purr-fectionist: Takes direction better than most humans. Multi-Look Maven: | ||
| From suave sunglasses to cozy sweater vibes, Willz does it all. Flexible & Focused: Stretches, yawns, or stares | ||
| dramatically — all on cue. Why hire a dozen cats when Willz has mastered them all? Book a shoot and let this | ||
| feline phenom turn you project into a paw-some masterpiece. | ||
| </div> | ||
|
|
||
| <div class="form-section"> | ||
| <form | ||
| action="http://httpbin.org/anything" | ||
|
||
| method="post" | ||
| > | ||
| <h3>Request a booking with willz</h3> | ||
| <fieldset> | ||
| <label> | ||
| <span class="customer-name">Name</span> | ||
|
There was a problem hiding this comment. här används span - är nyfiken över det, själv använde jag label och lade namnet i den, hade varit kul att veta hur det funkat med span och om det blir någon skillnad beroende på vilken man använder :) |
||
| <input | ||
| type="text" | ||
| name="name" | ||
| placeholder="Your name" | ||
| required | ||
|
There was a problem hiding this comment. Snyggt jobbat med att lägga in ”required” på formuläret, är mer realistiskt då! |
||
| > | ||
| </label> | ||
|
|
||
| <label> | ||
|
There was a problem hiding this comment. ser lite ut som att du använder label lite som en div, hur har det funkat? hade varit intressant att veta hur det påverkar hur man exempelvis stylar koden sen :) |
||
| <span class="customer-email">Email</span> | ||
| <input | ||
| type="text" | ||
| name="email" | ||
| placeholder="[email protected]" | ||
| required | ||
| > | ||
| </label> | ||
|
Comment on lines
212
to
220
There was a problem hiding this comment. en idé: i formuläret under email, skulle man kunna lägga till så att bara texter som ser ut som en email kan skrivas in |
||
|
|
||
| <label> | ||
| <span class="version-willz">Version of Willz</span> | ||
| <select | ||
| name="willz-version" | ||
| id="willz-version" | ||
| required | ||
| > | ||
| <option | ||
| value="Choose your version" | ||
| selected | ||
| disabled | ||
| >Choose your version</option> | ||
|
||
| <option value="Sophisticated Willz">Sophisticated Willz</option> | ||
| <option value="Cowboy Willz">Cowboy Willz</option> | ||
| <option value="Fun Willz">Fun Willz</option> | ||
| </select> | ||
| </label> | ||
|
|
||
| <label> | ||
| <span class="requested-date">Requested date</span> | ||
| <input | ||
| type="date" | ||
| name="day" | ||
| id="day" | ||
| required | ||
| > | ||
| </label> | ||
|
Comment on lines
+240
to
+248
There was a problem hiding this comment. Coolt med datum rutan, visste inte hur man gjorde det. |
||
|
|
||
| <div class="radiobutton-row"> | ||
| <label class="radiobutton-container">Full day | ||
| <input | ||
| type="radio" | ||
| name="time" | ||
| value="Full day" | ||
| > | ||
| <span class="custom-radiobutton"></span> | ||
| </label> | ||
| <label class="radiobutton-container">Half day | ||
| <input | ||
| type="radio" | ||
| name="time" | ||
| value="Half day" | ||
| > | ||
| <span class="custom-radiobutton"></span> | ||
| </label> | ||
| </div> | ||
| <div class="button-box"> | ||
| <button | ||
| id="submit-button" | ||
| class="submit-button" | ||
| type="submit" | ||
| >Submit</button> | ||
| </div> | ||
| </fieldset> | ||
|
|
||
|
|
||
|
|
||
| </form> | ||
| </div> | ||
|
|
||
| </section> | ||
|
|
||
| <!---FOOTER-----------> | ||
| <footer> | ||
| <p>Created by Nicolina Bäcklin Löwenberg</p> | ||
| </footer> | ||
|
|
||
| <script src="script.js"></script> | ||
| </body> | ||
|
|
||
| </html> | ||
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,28 @@ | ||
| const menu = document.getElementById("menu") | ||
| const menuItems = document.getElementsByClassName("menuItem") | ||
| const hamburger = document.getElementById("hamburger") | ||
| const closeIcon = document.getElementById("closeIcon") | ||
| const menuIcon = document.getElementById("menuIcon") | ||
|
|
||
| function toggleMenu() { | ||
| if (menu.classList.contains("showMenu")) { | ||
| menu.classList.remove("showMenu") | ||
| closeIcon.style.display = "none" | ||
| menuIcon.style.display = "block" | ||
| } else { | ||
| menu.classList.add("showMenu") | ||
| closeIcon.style.display = "block" | ||
| menuIcon.style.display = "none" | ||
| } | ||
| } | ||
|
|
||
| hamburger.addEventListener("click", toggleMenu) | ||
|
|
||
|
||
| /*const submitButton = document.getElementById("submit-button") | ||
|
|
||
| const bookingRequest = () => { | ||
| alert("Great choice.We will get back to you shortly with more details".) | ||
| } | ||
|
|
||
| submitButton.addEventListener("click", bookingRequest)*/ | ||
|
||
|
|
||
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.
superbra användning av kommentarer - det ska jag ta med mig till mitt projekt!