diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 000000000..f0bbadeea Binary files /dev/null and b/.DS_Store differ diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..cbb7b3af2 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5502 +} \ No newline at end of file diff --git a/README.md b/README.md index a15b0ecb9..04fa7c800 100644 --- a/README.md +++ b/README.md @@ -1 +1,47 @@ -# js-project-business-site \ No newline at end of file +# js-project-business-site + +# Business site - Willz models +https://willz-models.netlify.app/ + +This website is my contribution to Technigo bootcamps assignment: project business site. The goal was to explore responsive design, interactivity, and layout techniques. The aim for me while building this was to learn as much as possible while playing around and having fun with the code. Therefor I chose to make a dummy model agency site featuring my family cat Willz. My goal was to make the website look professional but with fun content. The site combines professional design elements with playful, interactive features, making it both visually appealing and enjoyable to explore. + +## Features +* Responsive Design: Optimized for desktop, tablet, and mobile devices. + +* Navigation: Full navigation bar for desktop, Hamburger menu on smaller screens with interactive DOM functionality + +* Interactive Theme: “Party Mode” button changes the site’s color scheme and vibe using JavaScript. + +* Layout: Created using grid and flexbox + +* Booking Form: Includes multiple input types with POST submission to httpbin.org + +## Technologies used +* HTML – Semantic structure and accessibility + +* CSS – Styling with Flexbox and CSS Grid for responsive layouts + +* JavaScript – Interactive hamburger menu and dynamic theme toggle + +## Project requirements met +* Fully responsive across all viewport sizes (320px–1600px) + +* Responsive navigation bar and layout using Flexbox and Grid + +* Responsive header with hero image/video + +* Interactive form with multiple input types and POST submission + +* Hamburger menu on smaller screens, functional using javaScript + +* Successfully deployed on Netlify + +## Learning Outcomes + +* Practiced responsive design techniques across devices + +* Implemented interactive features using JavaScript + +* Experimented with theme toggling and playful UI + +* Gained experience combining CSS Grid and Flexbox for complex layouts \ No newline at end of file diff --git a/images/.DS_Store b/images/.DS_Store new file mode 100644 index 000000000..0663787a3 Binary files /dev/null and b/images/.DS_Store differ diff --git a/images/Willz-catwalk.jpeg b/images/Willz-catwalk.jpeg new file mode 100644 index 000000000..b9d846748 Binary files /dev/null and b/images/Willz-catwalk.jpeg differ diff --git a/images/Willz-fancy.jpeg b/images/Willz-fancy.jpeg new file mode 100644 index 000000000..3a3955a67 Binary files /dev/null and b/images/Willz-fancy.jpeg differ diff --git a/images/blue-paint.jpg b/images/blue-paint.jpg new file mode 100644 index 000000000..54d27b082 Binary files /dev/null and b/images/blue-paint.jpg differ diff --git a/images/disco.jpg b/images/disco.jpg new file mode 100644 index 000000000..5246fb85e Binary files /dev/null and b/images/disco.jpg differ diff --git a/images/golden-party.jpg b/images/golden-party.jpg new file mode 100644 index 000000000..6bfa0a87d Binary files /dev/null and b/images/golden-party.jpg differ diff --git a/images/willz-artsy.jpeg b/images/willz-artsy.jpeg new file mode 100644 index 000000000..45dc878e0 Binary files /dev/null and b/images/willz-artsy.jpeg differ diff --git a/images/willz-cowboy.jpeg b/images/willz-cowboy.jpeg new file mode 100644 index 000000000..034e4738f Binary files /dev/null and b/images/willz-cowboy.jpeg differ diff --git a/images/willz-dreaming.png b/images/willz-dreaming.png new file mode 100644 index 000000000..f54377418 Binary files /dev/null and b/images/willz-dreaming.png differ diff --git a/images/willz-dress.jpeg b/images/willz-dress.jpeg new file mode 100644 index 000000000..8e72de706 Binary files /dev/null and b/images/willz-dress.jpeg differ diff --git a/images/willz-glasses.png b/images/willz-glasses.png new file mode 100644 index 000000000..ecd29c0db Binary files /dev/null and b/images/willz-glasses.png differ diff --git a/images/willz-jacket.jpeg b/images/willz-jacket.jpeg new file mode 100644 index 000000000..a3d43a0da Binary files /dev/null and b/images/willz-jacket.jpeg differ diff --git a/images/willz-kpop.jpeg b/images/willz-kpop.jpeg new file mode 100644 index 000000000..adde1b3ed Binary files /dev/null and b/images/willz-kpop.jpeg differ diff --git a/images/willz-manicure.jpeg b/images/willz-manicure.jpeg new file mode 100644 index 000000000..6330102be Binary files /dev/null and b/images/willz-manicure.jpeg differ diff --git a/images/willz-nature.jpeg b/images/willz-nature.jpeg new file mode 100644 index 000000000..8b91ef948 Binary files /dev/null and b/images/willz-nature.jpeg differ diff --git a/images/willz-potato.jpeg b/images/willz-potato.jpeg new file mode 100644 index 000000000..a0fb3c50e Binary files /dev/null and b/images/willz-potato.jpeg differ diff --git a/images/willz-princess.jpeg b/images/willz-princess.jpeg new file mode 100644 index 000000000..cc5a13f41 Binary files /dev/null and b/images/willz-princess.jpeg differ diff --git a/images/willz-royal.jpeg b/images/willz-royal.jpeg new file mode 100644 index 000000000..7f0cadb9c Binary files /dev/null and b/images/willz-royal.jpeg differ diff --git a/images/willz-zara.jpeg b/images/willz-zara.jpeg new file mode 100644 index 000000000..04da9f2e3 Binary files /dev/null and b/images/willz-zara.jpeg differ diff --git a/index.html b/index.html new file mode 100644 index 000000000..edfa73ccc --- /dev/null +++ b/index.html @@ -0,0 +1,289 @@ + + + + + + + Willz agency + + + + + + + + + + + +
+
+
+
+
+ + + + +
+
+

WILLZ MODELS

+

A one cat model agency

+
+
+ + +
+
+ +

Fashionable

+
+ +
+ +

Sofisticated

+
+ +
+ +

casual

+
+ +
+ +

professional

+
+ +
+ +

Royal

+
+ +
+ +

stoic

+
+ +
+ +

Modern

+
+ +
+ +

Focused

+
+ +
+ +

Feminine

+
+ +
+ +

Artistic

+
+ +
+ +

Well groomed

+
+ +
+ +

Natural

+
+
+ + + +
+
+

ABOUT US

+ cat +

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 expert: + From well dressed sofisticated looks to natural vibes, Willz does it all. Flexible & Focused: Stretches, yawns, + or stares + dramatically, all on cue. Why hire a dozen models when Willz has mastered it all? Book a shoot and let this + feline phenomenon turn you project into a paw-some masterpiece.

+
+ +
+
+
+

Request a booking with willz

+
+
+ + + + + + + + +
+ + +
+
+ +
+
+
+
+ +
+ + + + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 000000000..f0bffef04 --- /dev/null +++ b/script.js @@ -0,0 +1,52 @@ +const hamburgerLinks = document.querySelector(".hamburgerLinks") +const hamburgerBtn = document.querySelector(".hamburger") + +function hamburgerFunction(x) { + x.classList.toggle("change") + hamburgerLinks.classList.toggle("open") +} + +const btn = document.getElementById("partyMode") +const modelSection = document.getElementById("modelSection") +const desktopNav = document.getElementById("desktopNav") +const heroText = document.getElementById("heroText") +const btnHamburger = document.getElementById("partyModeHamburger") +const fullBody = document.getElementById("fullBody") + +btn.onclick = () => { + modelSection.classList.toggle("party") + desktopNav.classList.toggle("partyNav") + heroText.classList.toggle("partyText") + fullBody.classList.toggle("partyBody") +} + +btnHamburger.onclick = () => { + modelSection.classList.toggle("party") + desktopNav.classList.toggle("partyNav") + heroText.classList.toggle("partyText") + fullBody.classList.toggle("partyBody") + closeHamburger() +} + +function closeHamburger() { + hamburgerLinks.classList.remove("open") + hamburgerBtn.classList.remove("change") +} + + + + + + + + + + + + + + + + + + diff --git a/style.css b/style.css new file mode 100644 index 000000000..0d0560255 --- /dev/null +++ b/style.css @@ -0,0 +1,404 @@ +* { + box-sizing: border-box; +} + +body { + background: white; + font-family: "montserrat"; +} + +body.partyBody { + background: url("images/golden-party.jpg") center/cover no-repeat; +} + +/* NAVIGATION BAR on desktop*/ +.nav-list { + list-style-type: none; + margin: 0; + top: 0; + display: flex; + padding: 20px; + font-size: 30px; + top: 0; + position: sticky; + background: white; + z-index: 1000; +} + +.nav-list.partyNav { + background-color: pink; +} + +li { + margin: 0px 15px; +} + +a { + text-decoration: none; + color: black; +} + +a:hover { + color: #bebbb0; +} + +@media (max-width: 1024px) { + .nav-list { + display: none; + } +} + +/* HAMBURGER MENU on smaller screens*/ +.hamburger { + display: inline-block; + cursor: pointer; + position: fixed; + top: 30px; + left: 30px; + z-index: 1000; +} + +@media (min-width: 1025px) { + .hamburger { + display: none; + } + + .hamburgerLinks { + display: none; + } +} + +.barOne, +.barTwo, +.barThree { + width: 40px; + height: 6px; + background-color: black; + margin: 6px 0; + transition: 0.4s; +} + +.change .barOne { + transform: translate(0, 11px) rotate(-45deg); +} + +.change .barTwo { + opacity: 0; +} + +.change .barThree { + transform: translate(0, -11px) rotate(45deg); +} + +.hamburgerList { + list-style-type: none; +} + +.hamburgerLinks { + position: fixed; + top: -100%; + transition: top 0.3s ease; + left: 0; + right: 0; + height: 100%; + z-index: 999; + padding-top: 4rem; + background-color: white; + color: black; +} + +.hamburgerLinks.open { + top: 0; +} + +.hamburgerLinkSpan { + font-size: 30px; + align-items: center; +} + +.hamburgerButtonSpan { + display: flex; + justify-content: center; +} + +/* PARTY BUTTON */ +.partySection { + display: flex; + justify-content: center; + height: 100px; +} + +.partyButton { + font-size: 20px; + background-color: #658382; + border: none; + color: white; + border-radius: 10px; + margin: 0 40px; + cursor: pointer; + font-family: "montserrat"; +} + +.partyButton:hover { + transform: scale(1.1) +} + +.main-section.party { + background: url("images/golden-party.jpg") center/cover no-repeat; +} + +/* HERO SECTION */ +.hero { + background: url("images/blue-paint.jpg") center/cover no-repeat; + height: 50vh; + width: 100%; + text-align: center; + position: relative; + overflow: hidden; +} + +h1 { + margin: 0 auto; + padding-top: 100px; + font-size: 6em; + color: white; +} + +h1.partyText { + color: pink; +} + +@media (max-width: 667px) { + h1 { + font-size: 3em; + } +} + +.header-text { + margin: auto; +} + +.header-paragraph { + color: white; +} + +/* MAIN SECTION */ +.main-section { + background: white; + display: grid; + gap: 30px; + grid-template-columns: repeat(4, minmax(250px, 1fr)); + margin: 0 auto; + padding-top: 150px; + padding-bottom: 100px; + width: 85%; +} + +@media (min-width: 1024px) and (max-width: 1300px) { + .main-section { + grid-template-columns: repeat(3, minmax(250px, 1fr)); + } +} + +@media (min-width: 668px) and (max-width: 1023px) { + .main-section { + grid-template-columns: repeat(2, minmax(250px, 1fr)); + } +} + +@media (max-width:667px) { + .main-section { + grid-template-columns: repeat(1, minmax(250px, 1fr)); + } +} + +img { + width: 60%; + margin-top: 40px; + margin-bottom: 30px; +} + +/* POLAROIDS */ +.card { + display: flex; + flex-direction: column; + align-items: center; + background: #F2F0EF; + margin: 0 auto; + transition: all 0.3s; + width: 100%; + max-width: 400px; + box-shadow: 0 10px 15px -6px gray; + margin-bottom: 100px; + text-transform: uppercase; +} + +.card:hover { + transform: scale(1.1) +} + +h3 { + margin-bottom: 40px; + font-weight: lighter; +} + +/* INFO and FORM section */ +.info-section { + display: flex; + flex-wrap: wrap; + margin-bottom: 100px; + border-top: 3px solid #658382; +} + +@media (max-width: 1024px) { + + .info-section { + flex-direction: column; + } +} + +.infoImage { + border-radius: 50%; + width: 35%; + margin-bottom: 30px; + border: 20px solid #658382; +} + +.info-text { + text-align: center; + width: 50%; + display: flex; + flex-direction: column; + margin: 0 auto; + padding: 0 50px 20px 50px; + align-items: center; + background-color: white; +} + +@media (max-width: 1023px) { + .info-text { + width: 100%; + } + + .infoImage { + border: none; + } +} + +.form-section { + display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + width: 50%; + margin: 0 auto; + background-color: white; +} + +form { + width: 100%; + min-width: 250px; + padding: 10px; + margin 0 auto; +} + +.formHeading { + text-align: center; +} + +fieldset { + border: none; + background: #F2F0EF; + border-radius: 2px; + padding: 10px; +} + +label { + display: flex; + flex-direction: column; + align-items: center; +} + +span { + text-align: center; + margin: 15px; +} + +input { + align-items: center; + width: 80%; + display: flex; + font-size: 15 px; + padding: 10px; + border: none; +} + +select { + width: 80%; + padding: 10px; +} + +.radiobutton-row { + display: flex; + justify-content: center; +} + +.radiobutton-container { + display: flex; + flex-direction: column; + align-items: center; + position: relative; + padding: 0; + margin: 10px 5px; + font-size: 15px; + user-select: none; +} + +.radiobutton-container input { + position: absolute; + opacity: 0; + cursor: pointer; + height: 0; + width: 0; +} + +.custom-radiobutton { + position: static; + margin-top: 5px; + top: 0; + left: 0; + height: 20px; + width: 20px; + background-color: white; + border-radius: 5px; + cursor: pointer; +} + +.radiobutton-container input:checked~.custom-radiobutton { + background-color: black; +} + +.button-box { + display: flex; + justify-content: center; +} + +.submit-button { + font-size: 20px; + transition-duration: 0.4s; + color: white; + margin-top: 10px; + cursor: pointer; + padding: 5px 20px; + text-transform: uppercase; + background-color: #658382; + border: none; + border-radius: 10px; +} + +/* FOOTER SECTION */ +footer { + background: #658382; + text-align: center; + padding: 40px; +} \ No newline at end of file