Pull request for code review #56

Nicolinabl · 2025-09-16T15:52:30Z

Pull request for code review on project business-site
https://willz-models.netlify.app/

…with mobile first approach

…e css styling

carro-barro

Först vill jag säga riktigt bra jobbat, detta projekt har tror jag för många i vår grupp varit svårt, iallafall för mig. men också väldigt roligt - hoppas du också känner så!

här kommer lite generella kommentarer:
Snyggt jobbat med responsiviteten ser verkligen proffsigt ut, exempelvis hur hero bilden skalas ner på mobil och att texten flyttas ner i två rader, gillar verkligen hur bilderna är staplade på mobil också!

Gillar verkligen segmentet med ”about us” och formuläret strukturen är väldigt clean, tycker att användningen av padding/margin här gör att sidan är balanserad och en fröjd för ögat 😉

tycker i helhet att projektet är välarbetat, har bara lagt till några mindre kod förslag 🤩

carro-barro · 2025-09-17T12:31:03Z

index.html

+  <!---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-->


superbra användning av kommentarer - det ska jag ta med mig till mitt projekt!

carro-barro · 2025-09-17T12:37:47Z

index.html

+  <!---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>


snyggt jobbat med att skriva bra och beskrivande id/class namn - men var lite nyfiken över att nav-desktop och nav-mobil inte ligger i varsin div? blir nyfiken då jag själv har ganska många div och isåfall kanske kan ta bort några av mina.

carro-barro · 2025-09-17T12:39:27Z

index.html

+  </header>
+
+  <!----MAIN section GRID--------->
+  <section class="main-section">


finns det någon anledning till att section tagen används istället för main tagen? skulle gärna vilja höra om hur det funkade för dig.

carro-barro · 2025-09-17T12:40:11Z

index.html

+  </section>
+
+
+  <!--INFO + FORM section------->


igen bra kommentar !!

carro-barro · 2025-09-17T12:43:11Z

index.html

+        <h3>Request a booking with willz</h3>
+        <fieldset>
+          <label>
+            <span class="customer-name">Name</span>


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

carro-barro · 2025-09-17T13:12:47Z

style.css

+/* Footer section*/
+footer {
+  background: #658382;
+  text-align: center;
+  padding: 40px;
+}


Gillar verkligen att du lagt till en footer som matchar i färg med din hero bild, ser super snyggt ut och får sidan att se mer ihop hängande ut.

carro-barro · 2025-09-17T13:14:44Z

style.css

+  .menu {
+    display: none;
+  }
+}
+
+.showMenu {
+  transform: translateY(0);
+}
+
+.hamburger {
+  position: fixed;
+  z-index: 100;
+  top: 30px;
+  right: 2px;
+  padding: 15px;
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+
+.hamburger .closeIcon {
+  display: none;
+}
+
+.hamburger .menuIcon {
+  display: inline-block;
+}


Man skulle kunna fixa lite med hamburgar menyn, man skulle kunna göra den lite större och försöka på något sätt göra den lite mer synligt när det ligger över hero bilden, då försvinner den lite eftersom bilden och menyn inte har sån hög kontrast mot varandra. kanske en bakgrundsfärg eller ljusskugga

carro-barro · 2025-09-17T13:17:01Z

style.css

+.info-section {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 100px;
+  margin-top: 60px;
+}


Möjligtvis att man kan kolla lite på ”about us” texten lite på mobil för att se om man kanske kan dra ut den lite längre i kanterna så att den inte blir så smal

carro-barro · 2025-09-17T13:56:28Z

script.js

+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)
+


har lite svårt att förstå javascript helt och hållet, så förstår inte helt denna kod - men jag tycker det är intressant att du använt function toggleMenu( )+ resten av koden, då jag själv använt hamMenu.addEventListener("click", () => { hamMenu.classList.toggle("active") hamMenuLinks.classList.toggle("show") })

carro-barro · 2025-09-17T13:57:45Z

script.js

+const bookingRequest = () => {
+  alert("Great choice.We will get back to you shortly with more details".)
+}
+
+submitButton.addEventListener("click", bookingRequest)*/


trr jag förstår vad du försökt göra här med att ge en popup efter submit - kul idé!!, ska nog själv lägga till något liknande på min :)

…d links in navigation bar

…n with polaroids

HIPPIEKICK

A little note: be careful when restyling checkboxes and radio buttons, as users tend to be used to radio buttons being round and checkboxes being square 😇

Beautiful-looking grid and well-working JavaScript. Keep up the good work!

PS. I think it would be nice if the button had the same font as the rest of the page.

HIPPIEKICK · 2025-09-24T09:08:58Z

index.html

+    <li><a href="#homePage">Home </a></li>
+    <li><a href="#modelSection">Models </a></li>
+    <li><a href="#information">About us </a></li>
+    <li><a href="#formSection">Contact </a></li>


Remember indentation

HIPPIEKICK · 2025-09-24T09:09:30Z

index.html

+      class="form-section"
+    >
+      <form
+        action="http://httpbin.org/anything"


Make sure to use the https method, as some browser will otherwise block this action

HIPPIEKICK · 2025-09-24T09:19:06Z

style.css

+  padding: 0;
+  top: 0;
+  display: flex;
+  Padding: 20px;


Double padding 👀 And remember that all properties are written in lower-case

HIPPIEKICK · 2025-09-24T09:31:52Z

script.js

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* OLD JAVASCRIPT
+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)*/
+


One empty line is enough 😉 And you can remove unused code

HIPPIEKICK · 2025-09-24T09:36:15Z

index.html

+        src="images/willz-dreaming.png"
+        alt="cat"
+      >
+      <Professional>Forget about casting calls, multiple models, or diva drama. Willz is the one-cat wonder your brand


What HTML element is this? 👀

…mmented out, updated readme file

Nicolina B. Löwenberg and others added 24 commits September 1, 2025 16:09

added html file, css file and photo folder

73cfc7b

Added some basic structure in html file

58fed4f

added initial grid layout

7858e20

Worked with layout using grid

598c99a

worked with grid and flexbox

daa0960

Redid html structure, commented out old css and started from scratch …

402ae73

…with mobile first approach

worked on making the website responsive

e643b29

worked on layout

a994b8a

made photos look like polaroids, added navigation bar

1567a6a

Update README.md

1bc6754

test

8d7daa9

test

d586c4a

added some hover effects on the polaroids

d4a68f0

small tweaks on media querie

b3bdc4f

tweaks with media queries

2e112fd

minor tweaks

121c3ec

Changed media queries on grid, moved part of grid and made into flexbox

a1575fb

changed font size

e7d3a47

Added basic structure an input types for form

5300233

worked on form, added hero image, played around with styling and colors

8ea19d2

changed colors and hero image

4fbcc9e

Added radio buttons on form, made form responsive, changed some of th…

968f4fd

…e css styling

added hamburger menu

2cb848b

worked on styling

a504751

carro-barro reviewed Sep 17, 2025

View reviewed changes

Nicolinabl added 4 commits September 18, 2025 15:29

Added party mode toggle with javascript, changed hamburger menu, adde…

c2a0ad6

…d links in navigation bar

added more javaScript to add on to party mode

8419fb9

Made hamburger nav menu close when link is clicked

6a36865

added text to readme, made links smaller, added margin to main sectio…

79a31af

…n with polaroids

HIPPIEKICK approved these changes Sep 24, 2025

View reviewed changes

small changes after code review, delet3ed code not in use that was co…

e6355f9

…mmented out, updated readme file

Pull request for code review #56

Are you sure you want to change the base?

Pull request for code review #56

Uh oh!

Conversation

Nicolinabl commented Sep 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

carro-barro left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

HIPPIEKICK left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Nicolinabl commented Sep 16, 2025 •

edited

Loading