Arta's business site #68
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,23 @@ | ||
| # 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. |
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,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 🚗`); | ||
| } */ |
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.
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.
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,297 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta | ||
| name="viewport" | ||
| content="width=device-width, initial-scale=1.0" | ||
| /> | ||
| <link | ||
| rel="stylesheet" | ||
| href="style.css" | ||
| /> | ||
| <title>FikaMatch</title> | ||
|
|
||
| <link | ||
| rel="preconnect" | ||
| href="https://fonts.googleapis.com" | ||
| /> | ||
| <link | ||
| rel="preconnect" | ||
| href="https://fonts.gstatic.com" | ||
| crossorigin | ||
| /> | ||
| <link | ||
| rel="stylesheet" | ||
| href="https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,100..900;1,100..900&display=swap" | ||
| /> | ||
| <link | ||
| rel="stylesheet" | ||
| href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" | ||
| > | ||
|
|
||
| </head> | ||
|
|
||
| <body> | ||
| <!--Video fading when opening the page--> | ||
| <div id="video-intro-container"> | ||
| <video | ||
| autoplay | ||
| muted | ||
| playsinline | ||
| loop | ||
| > | ||
| <source | ||
| src="img/fikamatch.mp4" | ||
| type="video/mp4" | ||
| /> | ||
| </video> | ||
| </div> | ||
|
|
||
| <!--Navigation bar--> | ||
| <main id="main content"> | ||
| <nav class="navigation-bar"> | ||
| <a | ||
| href="#" | ||
| class="logo" | ||
| > | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| width="50px" | ||
| height="50px" | ||
| viewBox="0 0 24 24" | ||
| fill="none" | ||
| stroke="currentColor" | ||
| stroke-width="2" | ||
| stroke-linecap="round" | ||
| stroke-linejoin="round" | ||
| > | ||
| <style> | ||
| @keyframes steam-rise { | ||
| 0% { | ||
| transform: translateY(0); | ||
| opacity: 1; | ||
| } | ||
|
|
||
| 100% { | ||
| transform: translateY(-8px); | ||
| opacity: 0; | ||
| } | ||
| } | ||
|
|
||
| .steam1 { | ||
| animation: name duration timing-function iteration-count; | ||
| animation: steam-rise 2s linear infinite; | ||
| } | ||
|
|
||
| .steam2 { | ||
| animation: steam-rise 2s linear infinite; | ||
| animation-delay: 0.7s; | ||
| } | ||
|
|
||
| .steam3 { | ||
| animation: steam-rise 2s linear infinite; | ||
| animation-delay: 1.4s; | ||
| } | ||
| </style> | ||
|
|
||
| <path | ||
| class="steam1" | ||
| d="M10 2v2" | ||
| /> | ||
| <path | ||
| class="steam2" | ||
| d="M14 2v2" | ||
| /> | ||
| <path | ||
| class="steam3" | ||
| d="M6 2v2" | ||
| /> | ||
|
|
||
| <path d="M16 8a1 1 0 0 1 1 1v8a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1h14a4 4 0 1 1 0 8h-1" /> | ||
| </svg> | ||
| FikaMatch | ||
| </a> | ||
|
|
||
| <!--Ham-menu- | ||
| start--> | ||
| <div class="off-screen-menu"> | ||
| <ul> | ||
| <li>Home</li> | ||
| <li>Events</li> | ||
| <li>Blog</li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <!-- <nav> --> | ||
| <div class="ham-menu"> | ||
| <span></span> | ||
| <span></span> | ||
| <span></span> | ||
| </div> | ||
| <!-- </nav> --> | ||
| <!--Ham-menu-end--> | ||
|
|
||
| <div class="nav-links"> | ||
| <a href="#">Home</a> | ||
| <a href="#">Events</a> | ||
| <a href="#">Blog</a> | ||
| <a | ||
| class="login-nav" | ||
| href="#signup" | ||
| >Login</a> | ||
| </div> | ||
| </nav> | ||
| <!--Homepage content--> | ||
| <header class="homepage"> | ||
| <div class="homepage-inner"> | ||
| <div class="homepage-content"> | ||
| <h1 class="content-header">Find someone to share a fika with</h1> | ||
| <h2 class="content-subheader">Meet locals over coffee and kanelbullar - casual, friendly, real.</h2> | ||
|
|
||
| <div class="header-buttons"> | ||
| <a | ||
| href="#signup" | ||
| class="button-primary" | ||
| >Create Profile</a> | ||
| <a | ||
| href="#" | ||
| class="button-browse" | ||
| >Browse Profiles</a> | ||
| </div> | ||
| </div> | ||
| <div class="coffee-image-placeholder"> | ||
| <img | ||
| src="https://images.unsplash.com/photo-1543269865-4430f94492b9?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" | ||
| alt="People enjoying coffee together" | ||
| /> | ||
| </div> | ||
| </div> | ||
| </header> | ||
|
|
||
| <!--Middle page section--> | ||
| <section class="features-section"> | ||
| <div class="feature-item"> | ||
| <h3>Verified by BankId</h3> | ||
| <p>Safety and trust are our top priorities. All profiles are verified for a secure experience.</p> | ||
| </div> | ||
| <div class="feature-item"> | ||
| <h3>Fika Events</h3> | ||
| <p>Join group events at local cafes. It's a great way to meet multiple new people at once.</p> | ||
| </div> | ||
| <div class="feature-item"> | ||
| <h3>Local Cafes Near You</h3> | ||
| <p>Discover new spots and get discounts at our partner cafes when you meet your match.</p> | ||
| </div> | ||
| </section> | ||
|
|
||
| <!--Profile Cards--> | ||
| <section class="profiles-preview"> | ||
| <h2>Featured Profiles</h2> | ||
| <div class="profile-cards"> | ||
| <div class="profile-card"> | ||
| <img | ||
| src="img/icon_img1.jpg" | ||
| alt="Woman with dark hair in a messy bun wearing a white shirt standing against a plain light background, neutral expression" | ||
| /> | ||
| <h4>Emma, 32</h4> | ||
| </div> | ||
| <div class="profile-card"> | ||
| <img | ||
| src="img/icon_img2.jpg" | ||
| alt="Black pug wearing a light blue shirt looking directly at the camera with wide eyes, neutral background, expression appears curious and slightly anxious" | ||
| /> | ||
| <h4>Doggy, 2</h4> | ||
| </div> | ||
| <div class="profile-card"> | ||
| <img | ||
| src="img/icon_img3.jpg" | ||
| alt="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" | ||
| /> | ||
| <h4>Max, 29</h4> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <!--Signup Form--> | ||
| <section | ||
| id="signup" | ||
| class="create-profile-section" | ||
| > | ||
| <div class="create-profile-container"> | ||
| <h2>Join FikaMatch Today</h2> | ||
| <form | ||
| class="create-profile-form" | ||
| action="http://httpbin.org/anything" | ||
| method="post" | ||
| > | ||
| <label for="email">Email</label> | ||
| <input | ||
| id="email" | ||
| type="email" | ||
| name="email" | ||
| placeholder="[email protected]" | ||
| required | ||
| /> | ||
|
|
||
| <label for="username">Username</label> | ||
| <input | ||
| id="username" | ||
| type="text" | ||
| name="username" | ||
| required | ||
| /> | ||
|
|
||
| <label for="password">Password</label> | ||
| <input | ||
| id="password" | ||
| type="password" | ||
| name="password" | ||
| required | ||
| /> | ||
|
|
||
| <label for="confirm-password">Confirm Password</label> | ||
| <input | ||
| id="confirm-password" | ||
| type="password" | ||
| name="confirm_password" | ||
| required | ||
| /> | ||
|
|
||
| <p class="subscription-label">Subscription Type:</p> | ||
| <div class="radio-group"> | ||
| <label><input | ||
| type="radio" | ||
| name="subscription" | ||
| value="free" | ||
| checked | ||
| /> Free</label> | ||
| <label><input | ||
| type="radio" | ||
| name="subscription" | ||
| value="premium" | ||
| /> Premium</label> | ||
|
Comment on lines
+264
to
+274
|
||
| </div> | ||
|
|
||
| <button | ||
| type="submit" | ||
| class="submit-button" | ||
| >Create profile</button> | ||
| </form> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| </section> | ||
|
|
||
| <!--Footer--> | ||
| <footer class="footer"> | ||
| </p>Made by Arta K.</p> | ||
| </footer> | ||
|
|
||
| </main> | ||
|
|
||
| <script src="app.js" type="text/javascript"></script> | ||
| </body> | ||
|
|
||
| </html> | ||
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.
Make sure you're using https as the action as some browsers will block http (unsecure)