diff --git a/README.md b/README.md index a15b0ecb9..4d90d3084 100644 --- a/README.md +++ b/README.md @@ -1 +1,23 @@ -# js-project-business-site \ No newline at end of file +# FikaMatch Business Site + +This is a simple website for meeting people for coffee. +[Live Site](https://js-project-business-site-fikamatch.netlify.app/) + +## What it does + +- Shows a homepage with info and buttons +- Has a menu that works on phones +- Lets you sign up with a form +- Shows some user profiles + +## Tech used + +- HTML for structure +- CSS for style +- JavaScript for menu + +## How to run + +Open `index.html` in your browser. + +Made by Arta K. \ No newline at end of file diff --git a/app.js b/app.js new file mode 100644 index 000000000..5571c6398 --- /dev/null +++ b/app.js @@ -0,0 +1,14 @@ +const hamMenu = document.querySelector('.ham-menu'); + +const offScreenMenu = document.querySelector('.off-screen-menu'); + +hamMenu.addEventListener('click', () => { + hamMenu.classList.toggle('active'); + offScreenMenu.classList.toggle('active'); +}) + +/* Testing DOM +const age = 19; +if (age >= 18) { + console.log(`Sarah can start driving license 🚗`); +} */ diff --git a/img/Coffee_resized.jpg b/img/Coffee_resized.jpg new file mode 100644 index 000000000..2833f21bf Binary files /dev/null and b/img/Coffee_resized.jpg differ diff --git a/img/coffee-foam.jpg b/img/coffee-foam.jpg new file mode 100644 index 000000000..d11700e84 Binary files /dev/null and b/img/coffee-foam.jpg differ diff --git a/img/fikamatch.mp4 b/img/fikamatch.mp4 new file mode 100644 index 000000000..6575ce713 Binary files /dev/null and b/img/fikamatch.mp4 differ diff --git a/img/foam_cool.jpg b/img/foam_cool.jpg new file mode 100644 index 000000000..99e5fd5e2 Binary files /dev/null and b/img/foam_cool.jpg differ diff --git a/img/icon_img1.jpg b/img/icon_img1.jpg new file mode 100644 index 000000000..12fc59f02 Binary files /dev/null and b/img/icon_img1.jpg differ diff --git a/img/icon_img2.jpg b/img/icon_img2.jpg new file mode 100644 index 000000000..814f4710e Binary files /dev/null and b/img/icon_img2.jpg differ diff --git a/img/icon_img3.jpg b/img/icon_img3.jpg new file mode 100644 index 000000000..4bf61cd10 Binary files /dev/null and b/img/icon_img3.jpg differ diff --git a/img/more_coffee.jpg b/img/more_coffee.jpg new file mode 100644 index 000000000..5087a2d84 Binary files /dev/null and b/img/more_coffee.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 000000000..37c049fe0 --- /dev/null +++ b/index.html @@ -0,0 +1,297 @@ + + + + + + + + FikaMatch + + + + + + + + + + +
+ +
+ + +
+ + +
+
+
+

Find someone to share a fika with

+

Meet locals over coffee and kanelbullar - casual, friendly, real.

+ +
+ Create Profile + Browse Profiles +
+
+
+ People enjoying coffee together +
+
+
+ + +
+
+

Verified by BankId

+

Safety and trust are our top priorities. All profiles are verified for a secure experience.

+
+
+

Fika Events

+

Join group events at local cafes. It's a great way to meet multiple new people at once.

+
+
+

Local Cafes Near You

+

Discover new spots and get discounts at our partner cafes when you meet your match.

+
+
+ + +
+

Featured Profiles

+
+
+ Woman with dark hair in a messy bun wearing a white shirt standing against a plain light background, neutral expression +

Emma, 32

+
+
+ Black pug wearing a light blue shirt looking directly at the camera with wide eyes, neutral background, expression appears curious and slightly anxious +

Doggy, 2

+
+
+ Man with light hair styled back wearing a navy shirt with white polka dots standing outdoors against a plain light background, neutral expression, calm and relaxed atmosphere +

Max, 29

+
+
+
+ + +
+
+

Join FikaMatch Today

+
+ + + + + + + + + + + + +

Subscription Type:

+
+ + +
+ + +
+
+ + +
+ + + + +
+ + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 000000000..ef988e3cc --- /dev/null +++ b/style.css @@ -0,0 +1,545 @@ +html { + /* This property makes the html page scroll smoothly */ + scroll-behavior: smooth; +} + +body { + margin: 0; + font-family: 'Albert Sans', sans-serif; + background-color: #f7f5f2; + color: #6f4e37; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.navigation-bar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 15px 80px; + background-color: #e1ceae; + border-bottom: 1px solid #e2ddd7; + position: sticky; + top: 0; + z-index: 1000; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); +} + +.logo { + font-size: 28px; + font-weight: 900; + color: #6f4e37; + text-decoration: none; + display: flex; + align-items: center; + gap: 10px; +} + +.nav-links { + display: flex; + gap: 40px; +} + +.nav-links a { + text-decoration: none; + color: #6f4e37; + font-size: 18px; + font-weight: 700; + padding: 8px 12px; + border-radius: 8px; + transition: background-color 0.3s ease, color 0.3s ease; +} + +.nav-links a:hover { + background-color: #b95c4d; + color: #f7f5f2; +} + +.login-nav { + background-color: #6f4e37; + color: #f7f5f2 !important; + padding: 8px 16px; +} + +.homepage { + background-color: #f7f5f2; + padding: 80px; + min-height: 85vh; + display: flex; + justify-content: center; + align-items: center; +} + +.homepage-inner { + display: grid; + grid-template-columns: 1fr 1fr; + align-items: center; + gap: 60px; + max-width: 1200px; + margin: 0 auto; +} + +.content-header { + font-size: 58px; + font-weight: 900; + color: #6f4e37; + margin-bottom: 20px; + line-height: 1.15; +} + +.content-subheader { + font-size: 22px; + color: #a19283; + margin-bottom: 40px; + line-height: 1.6; +} + +.coffee-image-placeholder img { + width: 100%; + height: auto; + border-radius: 12px; + box-shadow: 0 12px 24px rgba(111, 78, 55, 0.15); +} + +.header-buttons { + display: flex; + gap: 20px; +} + +.button-primary, +.button-browse { + padding: 15px 35px; + font-size: 18px; + font-weight: bold; + text-decoration: none; + border-radius: 8px; + cursor: pointer; + transition: all 0.3s ease; + border: 2px solid #6f4e37; + text-align: center; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08); +} + +.button-primary { + background-color: #6f4e37; + color: #f7f5f2; +} + +.button-primary:hover { + background-color: #523a28; + border-color: #523a28; + transform: translateY(-3px); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); +} + +.button-browse { + background-color: transparent; + color: #b95c4d; + border-color: #b95c4d; +} + +.button-browse:hover { + background-color: #b95c4d; + color: #f7f5f2; + transform: translateY(-3px); + box-shadow: 0 6px 12px rgba(185, 92, 77, 0.2); +} + +.features-section { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 50px; + padding: 80px; + background-color: #e1ceae; + text-align: center; +} + +.feature-item h3 { + color: #6f4e37; + font-size: 24px; + margin-top: 0; + margin-bottom: 15px; +} + +.feature-item p { + color: #a19283; + font-size: 17px; + line-height: 1.6; +} + +.profiles-preview { + padding: 80px; + text-align: center; + background-color: #f7f5f2; +} + +.profiles-preview h2 { + font-size: 42px; + color: #6f4e37; + margin-top: 0; + margin-bottom: 50px; +} + +.profile-cards { + display: flex; + justify-content: center; + gap: 40px; + flex-wrap: wrap; +} + +.profile-card { + background-color: #e1ceae; + border-radius: 15px; + overflow: hidden; + box-shadow: 0 8px 16px rgba(111, 78, 55, 0.08); + transition: transform 0.3s ease, box-shadow 0.3s ease; + width: 280px; +} + +.profile-card:hover { + transform: translateY(-10px) scale(1.03); + box-shadow: 0 18px 30px rgba(111, 78, 55, 0.12); +} + +.profile-card img { + width: 100%; + height: 280px; + object-fit: cover; + display: block; +} + +.profile-card h4 { + margin: 20px; + font-size: 22px; + color: #6f4e37; +} + +.create-profile-section { + padding: 80px 20px; + background-color: #a19283; + background-image: url('./img/foam_cool.jpg'); + background-size: cover; + background-position: center; + background-attachment: fixed; + background-blend-mode: multiply; +} + +.create-profile-container { + max-width: 500px; + margin: 0 auto; + background-color: rgba(247, 245, 242, 0.95); + padding: 40px; + border-radius: 12px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); + text-align: center; +} + +.create-profile-container h2 { + font-size: 36px; + color: #6f4e37; + margin-top: 0; + margin-bottom: 30px; +} + +.create-profile-form { + display: flex; + flex-direction: column; + text-align: left; +} + +.create-profile-form label { + font-size: 16px; + color: #6f4e37; + margin-bottom: 8px; + font-weight: bold; +} + +.create-profile-form input[type='email'], +.create-profile-form input[type='text'], +.create-profile-form input[type='password'] { + width: 100%; + padding: 14px; + margin-bottom: 20px; + border: 1px solid #e2ddd7; + border-radius: 8px; + font-size: 16px; + box-sizing: border-box; + background-color: #f7f5f2; + color: #6f4e37; + transition: border-color 0.3s ease, box-shadow 0.3s ease; +} + +.create-profile-form input:focus { + outline: none; + border-color: #b95c4d; + box-shadow: 0 0 8px rgba(185, 92, 77, 0.3); +} + +.subscription-label { + font-weight: bold; + color: #6f4e37; + margin-top: 10px; + margin-bottom: 15px; +} + +.radio-group { + display: flex; + gap: 20px; + margin-bottom: 30px; +} + +.radio-group label { + font-weight: normal; + display: flex; + align-items: center; + gap: 10px; + cursor: pointer; + color: #6f4e37; +} + +.radio-group input[type='radio'] { + -webkit-appearance: none; + appearance: none; + background-color: #f7f5f2; + margin: 0; + width: 1.15em; + height: 1.15em; + border: 2px solid #a19283; + border-radius: 50%; + transform: translateY(-0.075em); + display: grid; + place-content: center; + transition: border-color 0.2s ease-in-out; +} + +.radio-group input[type='radio']:hover { + border-color: #b95c4d; +} + +.radio-group input[type='radio']::before { + content: ''; + width: 0.65em; + height: 0.65em; + border-radius: 50%; + transform: scale(0); + transition: 120ms transform ease-in-out; + box-shadow: inset 1em 1em #6f4e37; +} + +.radio-group input[type='radio']:checked { + border-color: #6f4e37; +} + +.radio-group input[type='radio']:checked::before { + transform: scale(1); +} + +.submit-button { + background-color: #6f4e37; + color: #f7f5f2; + font-size: 18px; + font-weight: bold; + padding: 16px; + border: none; + border-radius: 8px; + cursor: pointer; + transition: all 0.3s ease; +} + +.submit-button:hover { + background-color: #523a28; + transform: translateY(-2px); + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); +} + +.footer { + background-color: #523a28; + color: #a19283; + text-align: center; + padding: 25px; + font-size: 15px; +} + +.footer p { + margin: 0; +} + +.hamburgerMenu { + display: none; +} + +.off-screen-menu { + display: none; +} + +@media (max-width: 1024px) { + .navigation-bar { + padding: 15px 40px; + } + + .homepage { + padding: 60px 40px; + } + + .homepage-inner { + grid-template-columns: 1fr; + text-align: center; + } + + .coffee-image-placeholder { + grid-row: 1; + margin-bottom: 40px; + } + + .header-buttons { + justify-content: center; + } + + .features-section, + .profiles-preview { + padding: 60px 40px; + } +} + +@media (max-width: 767px) { + + .off-screen-menu { + background-color: #a19283; + height: 100vh; + position: fixed; + top: 0; + right: -450px; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + text-align: start; + font-size: 3rem; + transition: .3s ease; + font-size: 20px; + padding-top: 50px; + } + + .off-screen-menu.active { + right: -1px; + } + + .off-screen-menu ul { + list-style-type: none; + width: 100%; + } + + .ham-menu { + height: 50px; + width: 43px; + margin-left: auto; + position: relative; + } + + .ham-menu span { + height: 5px; + width: 100%; + background-color: #6f4e37; + border-radius: 25px; + position: absolute; + top: 50%; + transform: translate(-50%, -50%); + transition: .3s ease; + } + + .ham-menu span:nth-child(1) { + top: 25%; + } + + .ham-menu span:nth-child(3) { + top: 75%; + } + + .ham-menu.active span:nth-child(1) { + top: 59%; + transform: translate(-50%, -50%) rotate(45deg); + width: 60%; + } + + .ham-menu.active span:nth-child(2) { + opacity: 0; + } + + .ham-menu.active span:nth-child(3) { + top: 50%; + transform: translate(-50%, 50%) rotate(-45deg); + width: 60%; + } + + + .navigation-bar { + flex-direction: row; + padding: 10px; + gap: 15px; + } + + .nav-links { + display: none; + } + + .homepage { + padding: 40px 20px; + } + + .content-header { + font-size: 38px; + } + + .content-subheader { + font-size: 18px; + } + + .features-section, + .profiles-preview { + padding: 60px 20px; + } +} + +@keyframes fadeOut { + from { + opacity: 1; + } + + to { + opacity: 0; + visibility: hidden; + } +} + +@keyframes fadeIn { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +#video-intro-container { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100vh; + z-index: 9999; + background-color: #000; + + animation: fadeOut 1s ease-out 5s forwards; +} + +#video-intro-container video { + width: 100%; + height: 100%; + object-fit: cover; +} + +#main-content { + opacity: 0; + animation: fadeIn 1s ease-in 5s forwards; +} \ No newline at end of file