Merge pull request 'feature/index2.0' (#9) from feature/index2.0 into main
Reviewed-on: #9
This commit is contained in:
commit
2aa49d93a2
15
.vscode/launch.json
vendored
Normal file
15
.vscode/launch.json
vendored
Normal file
@ -0,0 +1,15 @@
|
||||
{
|
||||
// Use IntelliSense to learn about possible attributes.
|
||||
// Hover to view descriptions of existing attributes.
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"type": "chrome",
|
||||
"request": "launch",
|
||||
"name": "Launch Chrome against localhost",
|
||||
"url": "http://localhost:8080",
|
||||
"webRoot": "${workspaceFolder}"
|
||||
}
|
||||
]
|
||||
}
|
||||
BIN
assets/Burger eating together.jpg
Normal file
BIN
assets/Burger eating together.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
BIN
assets/Cake cutting figs.jpg
Normal file
BIN
assets/Cake cutting figs.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 148 KiB |
BIN
assets/Cooking woman at home.jpg
Normal file
BIN
assets/Cooking woman at home.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 203 KiB |
BIN
assets/Eating and laughing girls.jpg
Normal file
BIN
assets/Eating and laughing girls.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
BIN
assets/Pasta and many forks.jpg
Normal file
BIN
assets/Pasta and many forks.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
BIN
assets/Pasta in cheese.jpg
Normal file
BIN
assets/Pasta in cheese.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
BIN
assets/Plate icon.png
Normal file
BIN
assets/Plate icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
assets/Red checkered social eating.jpg
Normal file
BIN
assets/Red checkered social eating.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
BIN
assets/Salad roommates.jpg
Normal file
BIN
assets/Salad roommates.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
BIN
assets/Sharing food table.jpg
Normal file
BIN
assets/Sharing food table.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 400 KiB |
BIN
assets/Spicy food zoomed.jpg
Normal file
BIN
assets/Spicy food zoomed.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 189 KiB |
BIN
assets/Zoomed in asian eating.jpg
Normal file
BIN
assets/Zoomed in asian eating.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 282 KiB |
BIN
assets/add-event icon.png
Normal file
BIN
assets/add-event icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
assets/instagram.png
Normal file
BIN
assets/instagram.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
assets/register icon.png
Normal file
BIN
assets/register icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
@ -1,35 +1,4 @@
|
||||
:root {
|
||||
--color-bg: #f7f7f2;
|
||||
--color-surface: #ffffff;
|
||||
--color-surface-soft: #f0eee7;
|
||||
--color-text: #1f1f1f;
|
||||
--color-text-secondary: #303030;
|
||||
--color-muted: #6b6b6b;
|
||||
--color-border: #d8d8d2;
|
||||
--color-border-strong: #202020;
|
||||
--color-primary: #222222;
|
||||
--color-primary-hover: #111111;
|
||||
--color-focus: #2f6fed;
|
||||
--color-error: #b42318;
|
||||
--color-progress-bg: #ddddda;
|
||||
--color-divider: #ecece7;
|
||||
|
||||
--shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.06);
|
||||
|
||||
--radius-sm: 0.875rem;
|
||||
--radius-md: 1.25rem;
|
||||
--radius-lg: 1.5rem;
|
||||
--radius-pill: 999px;
|
||||
|
||||
--space-1: 0.25rem;
|
||||
--space-2: 0.5rem;
|
||||
--space-3: 0.75rem;
|
||||
--space-4: 1rem;
|
||||
--space-5: 1.5rem;
|
||||
--space-6: 2rem;
|
||||
--space-7: 3rem;
|
||||
--space-8: 4rem;
|
||||
|
||||
--max-width: 1120px;
|
||||
--content-width: 760px;
|
||||
--header-height: 4.5rem;
|
||||
|
||||
@ -1,41 +1,3 @@
|
||||
:root {
|
||||
--black: #221c1a;
|
||||
--white: #fff;
|
||||
--gray-bg: #f4f4f4;
|
||||
--border: 1px solid #221c1a;
|
||||
--olive: #6b6b05;
|
||||
--tomato: #d44b24;
|
||||
--olive-light: #e5e1b7;
|
||||
--cream: #f3efcf;
|
||||
--butter: #fffde3;
|
||||
--brown: #66340D;
|
||||
|
||||
/* Spacing Scale */
|
||||
--space-1: 8px;
|
||||
--space-2: 12px;
|
||||
--space-3: 16px;
|
||||
--space-4: 20px;
|
||||
--space-5: 24px;
|
||||
--space-6: 32px;
|
||||
|
||||
/* Radius Scale */
|
||||
--radius-pill: 999px;
|
||||
--radius-md: 20px;
|
||||
--radius-lg: 30px;
|
||||
|
||||
/* Letter Spacing Scale */
|
||||
--ls-none: 0;
|
||||
--ls-ui: 0.03em;
|
||||
--ls-label: 0.045em;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Jost", sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: var(--butter);
|
||||
}
|
||||
|
||||
.container { max-width: 1100px; margin: 0 auto; padding: 20px; }
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
@ -101,95 +63,6 @@ body {
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
Top Navigation
|
||||
--------------------------------------------------------- */
|
||||
.top-nav-wrap {
|
||||
background: var(--butter);
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
.top-nav {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: 0 3px 12px rgba(102, 52, 13, 0.1);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
min-height: 58px;
|
||||
padding: 3px 9px 3px var(--space-5);
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.brand img {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
max-width: 104px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.top-nav-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: var(--black);
|
||||
line-height: 1.3;
|
||||
text-decoration: none;
|
||||
padding: var(--space-1) var(--space-4);
|
||||
border-radius: var(--radius-md);
|
||||
border-width: 2px;
|
||||
border-color: var(--olive-light);
|
||||
border-style: solid;
|
||||
border-radius: 20px
|
||||
}
|
||||
|
||||
.nav-link:hover,
|
||||
.nav-link.active,
|
||||
.nav-link:focus-visible {
|
||||
background: var(--olive);
|
||||
color: var(--white);
|
||||
border-color: var(--olive);
|
||||
}
|
||||
|
||||
.login-pill {
|
||||
background: var(--olive);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--butter);
|
||||
line-height: 1.3;
|
||||
padding: var(--space-1) var(--space-4);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.profile-pill {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 19px;
|
||||
background: var(--tomato);
|
||||
color: var(--butter);
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
letter-spacing: var(--ls-ui);
|
||||
line-height: 1.3;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
Overview Header + Filters
|
||||
--------------------------------------------------------- */
|
||||
|
||||
@ -1,3 +1,22 @@
|
||||
/* Instagram and Invite logo in gallery info area */
|
||||
.gallery__icon--instagram {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
object-fit: contain;
|
||||
border-radius: 8px;
|
||||
background: none;
|
||||
/* Olive green filter for PNG: #6b6b05 */
|
||||
filter: brightness(0) saturate(100%) invert(27%) sepia(81%) saturate(749%) hue-rotate(24deg) brightness(90%) contrast(90%);
|
||||
}
|
||||
|
||||
.gallery__icon--invite {
|
||||
height: 56px;
|
||||
width: 56px;
|
||||
object-fit: contain;
|
||||
margin-left: 0;
|
||||
transform: translate(-4%, -1%);
|
||||
position: relative;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
:root {
|
||||
@ -49,7 +68,7 @@ body {
|
||||
.header__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.top-nav-wrap {
|
||||
@ -165,7 +184,7 @@ body {
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 28px 20px;
|
||||
background: #ffffff;
|
||||
background: #6B6B05;
|
||||
border-radius: 28px;
|
||||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
@ -201,6 +220,46 @@ body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.how-step__icon--brown {
|
||||
background: #66340d;
|
||||
}
|
||||
|
||||
.how-step__label--brown {
|
||||
color: #FFFDE3;
|
||||
}
|
||||
|
||||
.how-step__label--big {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.how-step--numbered {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.how-step__corner-number {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 16px;
|
||||
font-size: 2.2rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.how-step__corner-number--brown {
|
||||
color: #FFFDE3;
|
||||
}
|
||||
|
||||
.how-step__png {
|
||||
width: 192px;
|
||||
height: 192px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.how-step__png--brown {
|
||||
filter: brightness(0) saturate(100%) invert(99%) sepia(6%) saturate(1200%) hue-rotate(10deg) brightness(104%) contrast(97%);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.how-it-works__steps {
|
||||
grid-template-columns: 1fr;
|
||||
@ -254,29 +313,81 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
/* Container for the 3 photos */
|
||||
/* Carousel gallery */
|
||||
.gallery__carousel {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.gallery__track {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20px;
|
||||
margin-bottom: 30px; /* Space between photos and dots */
|
||||
}
|
||||
|
||||
/* Container for the dots to keep them in the middle */
|
||||
.gallery__dots {
|
||||
display: flex;
|
||||
justify-content: center; /* This is the "magic" line that centers them */
|
||||
gap: 12px; /* Space between the dots */
|
||||
width: 100%;
|
||||
gap: 20px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 30px; /* Space between photos and dots */
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* The actual black dots */
|
||||
.dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #000; /* Solid black */
|
||||
border-radius: 50%; /* Makes them round */
|
||||
display: inline-block;
|
||||
.gallery__item {
|
||||
flex: 0 0 calc((100% - 40px) / 3);
|
||||
min-width: calc((100% - 40px) / 3);
|
||||
border-radius: 24px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
|
||||
aspect-ratio: 2 / 3;
|
||||
}
|
||||
|
||||
.gallery__item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.gallery__arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
backdrop-filter: none;
|
||||
border: none;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
font-size: 1.6rem;
|
||||
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
|
||||
transition: transform 0.2s ease, color 0.2s ease;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.gallery__arrow:hover {
|
||||
transform: translateY(-50%) scale(1.15);
|
||||
color: #e5e1b7;
|
||||
}
|
||||
|
||||
.gallery__arrow--prev {
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.gallery__arrow--next {
|
||||
right: 12px;
|
||||
}
|
||||
|
||||
/* Center arrow removed – using side arrows only */
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.gallery__track {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.gallery__item {
|
||||
flex: 0 0 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- 2. Button & Link Styling --- */
|
||||
|
||||
@ -1,105 +0,0 @@
|
||||
/* Font Import */
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Bagel+Fat+One&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;600&display=swap');
|
||||
|
||||
|
||||
/* Reset / Normalize */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Colors + Main Font */
|
||||
:root {
|
||||
--primary-color: #D44B24;
|
||||
--primary-color-dark: #D44B24;
|
||||
--secondary-color: #6B6B05;
|
||||
--secondary-color-dark: #5C5C05;
|
||||
--white: #ffffff;
|
||||
--black: #221C1A;
|
||||
--brown: #66340d;
|
||||
|
||||
--font-main: 'Jost', sans-serif;
|
||||
--font-size-base: 16px;
|
||||
}
|
||||
|
||||
/* Base Styles */
|
||||
body {
|
||||
font-family: var(--font-main);
|
||||
font-size: 1.125em;
|
||||
line-height: 1.5;
|
||||
color: var(--black);
|
||||
background-color: #FFFDE3;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
|
||||
h1, h2 {
|
||||
font-family: 'Bagel Fat One';
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: 'Jost', sans-serif;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
/* Layout */
|
||||
.container {
|
||||
width: 90%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Components */
|
||||
.button {
|
||||
display: inline-block;
|
||||
padding: 0.5em 1.25em;
|
||||
background-color: var(--secondary-color);
|
||||
font-family: 'Jost', sans-serif;
|
||||
font-size: 1em;
|
||||
color: #FFFDE3;
|
||||
border: none;
|
||||
border-radius: 2em;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: var(--secondary-color-dark);
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
.nav {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* Utilities */
|
||||
.text-center {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Media Queries (Responsive) */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.nav {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
210
css/stylesheet_global.css
Normal file
210
css/stylesheet_global.css
Normal file
@ -0,0 +1,210 @@
|
||||
/* Font Import */
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Bagel+Fat+One&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;600&display=swap');
|
||||
|
||||
|
||||
/* Reset / Normalize */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Colors + Main Font */
|
||||
:root {
|
||||
--tomato: #D44B24;
|
||||
--tomato-dark: #D44B24;
|
||||
--olive: #6B6B05;
|
||||
--olive-dark: #5C5C05;
|
||||
--olive-light: #E5E1B7;
|
||||
--butter: #FFFBD1;
|
||||
--butter-light: #FFFDE3;
|
||||
--white: #ffffff;
|
||||
--black: #221C1A;
|
||||
--brown: #66340d;
|
||||
|
||||
--font-main: 'Jost', sans-serif;
|
||||
--font-size-base: 16px;
|
||||
|
||||
/* Spacing Scale */
|
||||
--space-1: 8px;
|
||||
--space-2: 12px;
|
||||
--space-3: 16px;
|
||||
--space-4: 20px;
|
||||
--space-5: 24px;
|
||||
--space-6: 32px;
|
||||
|
||||
/* Radius Scale */
|
||||
--radius-pill: 999px;
|
||||
--radius-md: 20px;
|
||||
--radius-lg: 30px;
|
||||
|
||||
/* Letter Spacing Scale */
|
||||
--ls-none: 0;
|
||||
--ls-ui: 0.03em;
|
||||
--ls-label: 0.045em;
|
||||
}
|
||||
|
||||
/* Base Styles */
|
||||
body {
|
||||
font-family: var(--font-main);
|
||||
font-size: 1.125em;
|
||||
line-height: 1.5;
|
||||
color: var(--black);
|
||||
background-color: var(--butter);
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
|
||||
h1, h2 {
|
||||
font-family: 'Bagel Fat One';
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: 'Jost', sans-serif;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
/* Layout */
|
||||
.container {
|
||||
width: 90%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Top Navigation */
|
||||
.top-nav-wrap {
|
||||
background: var(--butter);
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
.top-nav {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: 0 3px 12px rgba(102, 52, 13, 0.1);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
min-height: 58px;
|
||||
padding: 3px 9px 3px var(--space-5);
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.brand img {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
max-width: 104px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.top-nav-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: var(--black);
|
||||
line-height: 1.3;
|
||||
text-decoration: none;
|
||||
padding: var(--space-1) var(--space-4);
|
||||
border-radius: var(--radius-md);
|
||||
border-width: 2px;
|
||||
border-color: none;
|
||||
border-radius: 20px
|
||||
}
|
||||
|
||||
.nav-link:hover,
|
||||
.nav-link:focus-visible {
|
||||
background: var(--olive-light);
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
.login-pill {
|
||||
background: var(--olive);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--butter);
|
||||
line-height: 1.3;
|
||||
padding: var(--space-1) var(--space-4);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.profile-pill {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 19px;
|
||||
background: var(--tomato);
|
||||
color: var(--butter);
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
letter-spacing: var(--ls-ui);
|
||||
line-height: 1.3;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Components */
|
||||
.button {
|
||||
display: inline-block;
|
||||
padding: 0.5em 1.25em;
|
||||
background-color: var(--olive-color);
|
||||
font-family: 'Jost', sans-serif;
|
||||
font-size: 1em;
|
||||
color: var(--butter-light);
|
||||
border: none;
|
||||
border-radius: 2em;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: var(--olive-dark);
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
.nav {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* Utilities */
|
||||
.text-center {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Media Queries (Responsive) */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.nav {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
@ -4,19 +4,27 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Event erstellen | Invité</title>
|
||||
|
||||
<!-- Stylesheet für diese Seite-->
|
||||
<link rel="stylesheet" href="css/event_create.css" />
|
||||
<!-- Globales Stylesheet -->
|
||||
<link rel="stylesheet" href="css/stylesheet_global.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<header class="site-header">
|
||||
<nav class="site-nav" aria-label="Hauptnavigation">
|
||||
<a href="" class="site-logo">INVITÉ</a>
|
||||
|
||||
<ul class="site-nav-links">
|
||||
<li><a href="">Events</a></li>
|
||||
<li><a href="" aria-label="Zum Profil">M</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<!-- Top navigation: global entry points and current page indicator -->
|
||||
<header class="top-nav-wrap">
|
||||
<div class="top-nav">
|
||||
<a class="brand" href="index.html" aria-label="Zur Startseite">
|
||||
<img src="assets/invite-logo.svg" alt="Invite Logo">
|
||||
</a>
|
||||
<nav class="top-nav-links" aria-label="Hauptnavigation">
|
||||
<a class="nav-link active" href="event_overview.html" aria-current="page">Event finden</a>
|
||||
<a class="nav-link" href="event_create.html">Event erstellen</a>
|
||||
<a class="profile-pill" href="login.html" aria-label="Profil">M</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="event-create-page">
|
||||
<section class="event-flow-header" aria-label="Event erstellen Aktionen">
|
||||
|
||||
@ -4,10 +4,13 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Event-Overview</title>
|
||||
<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=Bagel+Fat+One&family=Jost:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/event_overview.css">
|
||||
|
||||
<!-- Stylesheet für diese Seite-->
|
||||
<link rel="stylesheet" href="css/stylesheet_global.css">
|
||||
<!-- Globales Stylesheet -->
|
||||
<link rel="stylesheet" href="stylesheet.css">
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!-- Top navigation: global entry points and current page indicator -->
|
||||
|
||||
95
index.html
95
index.html
@ -26,8 +26,8 @@
|
||||
<!-- Hero: uses .hero, .btn, .image-card, and .hero-image for a polished first impression -->
|
||||
<section class="hero">
|
||||
<div class="hero__left">
|
||||
<h1>Events entdecken, Plätze sichern, Genuss teilen.</h1>
|
||||
<p>Finde kulinarische Erlebnisse in deiner Nähe oder erstelle dein eigenes Event – alles in einer warmen, einladenden Invité-Atmosphäre.</p>
|
||||
<h1>Dein Platz am Tisch wartet schon.</h1>
|
||||
<p>Egal, ob du leidenschaftlich gerne den Kochlöffel schwingst oder dich einfach auf ein hausgemachtes Essen in guter Gesellschaft freust: Bei Invité bringst du Menschen zusammen. Finde Events, die zu deinem Geschmack passen, und geniesse unkomplizierte Begegnungen ohne Networking-Zwang.</p>
|
||||
<a class="btn" href="login.html">Anmelden</a>
|
||||
</div>
|
||||
|
||||
@ -43,50 +43,83 @@
|
||||
<h2>So funktioniert's</h2>
|
||||
</div>
|
||||
<div class="how-it-works__steps">
|
||||
<article class="how-step">
|
||||
<div class="how-step__icon"><i class="fas fa-user-plus" aria-hidden="true"></i></div>
|
||||
<div class="how-step__number">1</div>
|
||||
<p class="how-step__label">Anmelden</p>
|
||||
<article class="how-step how-step--numbered">
|
||||
<span class="how-step__corner-number how-step__corner-number--brown">1</span>
|
||||
<img src="assets/register icon.png" alt="Register" class="how-step__png how-step__png--brown" />
|
||||
<p class="how-step__label how-step__label--brown how-step__label--big">Anmelden</p>
|
||||
</article>
|
||||
<article class="how-step">
|
||||
<div class="how-step__icon"><i class="fas fa-calendar-plus" aria-hidden="true"></i></div>
|
||||
<div class="how-step__number">2</div>
|
||||
<p class="how-step__label">Event erstellen</p>
|
||||
<article class="how-step how-step--numbered">
|
||||
<span class="how-step__corner-number how-step__corner-number--brown">2</span>
|
||||
<img src="assets/add-event icon.png" alt="Event erstellen" class="how-step__png how-step__png--brown" />
|
||||
<p class="how-step__label how-step__label--brown how-step__label--big">Event erstellen</p>
|
||||
</article>
|
||||
<article class="how-step">
|
||||
<div class="how-step__icon"><i class="fas fa-utensils" aria-hidden="true"></i></div>
|
||||
<div class="how-step__number">3</div>
|
||||
<p class="how-step__label">Gemeinsam essen</p>
|
||||
<article class="how-step how-step--numbered">
|
||||
<span class="how-step__corner-number how-step__corner-number--brown">3</span>
|
||||
<img src="assets/Plate icon.png" alt="Gemeinsam essen" class="how-step__png how-step__png--brown" />
|
||||
<p class="how-step__label how-step__label--brown how-step__label--big">Gemeinsam essen</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Main Content: uses .gallery, .gallery__track, .gallery__item, .placeholder, and .gallery__info to present event cards and overview content -->
|
||||
<!-- Main Content: uses .gallery, .gallery__carousel, .gallery__track, .gallery__item, and .gallery__info to present event carousel content -->
|
||||
<section class="gallery">
|
||||
<div class="gallery__track">
|
||||
<article class="gallery__item">
|
||||
<div class="placeholder"></div>
|
||||
</article>
|
||||
<article class="gallery__item">
|
||||
<div class="placeholder"></div>
|
||||
</article>
|
||||
<article class="gallery__item">
|
||||
<div class="placeholder"></div>
|
||||
</article>
|
||||
<div class="gallery__carousel">
|
||||
<button type="button" class="gallery__arrow gallery__arrow--prev" aria-label="Vorheriges Bild">
|
||||
<i class="fas fa-chevron-left"></i>
|
||||
</button>
|
||||
|
||||
<div class="gallery__track">
|
||||
<article class="gallery__item">
|
||||
<img src="assets/Red checkered social eating.jpg" alt="Red checkered social eating">
|
||||
</article>
|
||||
<article class="gallery__item">
|
||||
<img src="assets/Pasta and many forks.jpg" alt="Pasta and many forks">
|
||||
</article>
|
||||
<article class="gallery__item">
|
||||
<img src="assets/Zoomed in asian eating.jpg" alt="Zoomed in asian eating">
|
||||
</article>
|
||||
<article class="gallery__item">
|
||||
<img src="assets/Burger eating together.jpg" alt="Burger eating together">
|
||||
</article>
|
||||
<article class="gallery__item">
|
||||
<img src="assets/Cake cutting figs.jpg" alt="Cake cutting figs">
|
||||
</article>
|
||||
<article class="gallery__item">
|
||||
<img src="assets/Cooking woman at home.jpg" alt="Cooking woman at home">
|
||||
</article>
|
||||
<article class="gallery__item">
|
||||
<img src="assets/Eating and laughing girls.jpg" alt="Eating and laughing girls">
|
||||
</article>
|
||||
<article class="gallery__item">
|
||||
<img src="assets/Pasta in cheese.jpg" alt="Pasta in cheese">
|
||||
</article>
|
||||
<article class="gallery__item">
|
||||
<img src="assets/Salad roommates.jpg" alt="Salad roommates">
|
||||
</article>
|
||||
<article class="gallery__item">
|
||||
<img src="assets/Sharing food table.jpg" alt="Sharing food table">
|
||||
</article>
|
||||
<article class="gallery__item">
|
||||
<img src="assets/Spicy food zoomed.jpg" alt="Spicy food zoomed">
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<button type="button" class="gallery__arrow gallery__arrow--next" aria-label="Nächstes Bild">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="gallery__dots">
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
</div>
|
||||
|
||||
<div class="gallery__info">
|
||||
<div class="gallery__handle"><i class="fas fa-location-dot gallery__icon" aria-hidden="true"></i><span>Invité Events</span></div>
|
||||
<div class="gallery__handle" style="display: flex; align-items: center; gap: 16px;">
|
||||
<img src="assets/instagram.png" alt="Instagram" class="gallery__icon--instagram" />
|
||||
<img src="assets/invite-logo.svg" alt="Invité Logo" class="gallery__icon--invite" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script src="js/index-carousel.js"></script>
|
||||
<footer class="footer">
|
||||
<a href="#" class="footer__link">Impressum</a>
|
||||
</footer>
|
||||
|
||||
52
js/index-carousel.js
Normal file
52
js/index-carousel.js
Normal file
@ -0,0 +1,52 @@
|
||||
const carouselTrack = document.querySelector('.gallery__track');
|
||||
const prevArrow = document.querySelector('.gallery__arrow--prev');
|
||||
const nextArrow = document.querySelector('.gallery__arrow--next');
|
||||
|
||||
if (carouselTrack) {
|
||||
const items = Array.from(carouselTrack.querySelectorAll('.gallery__item'));
|
||||
const getItemsPerPage = () => (window.matchMedia('(max-width: 900px)').matches ? 1 : 3);
|
||||
let itemsPerPage = getItemsPerPage();
|
||||
const pageCount = Math.ceil(items.length / itemsPerPage);
|
||||
let activePage = 0;
|
||||
|
||||
function scrollToPage(page) {
|
||||
activePage = page;
|
||||
const pageWidth = carouselTrack.clientWidth;
|
||||
carouselTrack.scrollTo({ left: pageWidth * page, behavior: 'smooth' });
|
||||
}
|
||||
|
||||
function showNext() {
|
||||
activePage = (activePage + 1) % pageCount;
|
||||
scrollToPage(activePage);
|
||||
}
|
||||
|
||||
function showPrev() {
|
||||
activePage = (activePage - 1 + pageCount) % pageCount;
|
||||
scrollToPage(activePage);
|
||||
}
|
||||
|
||||
function refreshCarousel() {
|
||||
const responsiveItemsPerPage = getItemsPerPage();
|
||||
if (responsiveItemsPerPage !== itemsPerPage) {
|
||||
itemsPerPage = responsiveItemsPerPage;
|
||||
window.location.reload();
|
||||
}
|
||||
}
|
||||
|
||||
if (nextArrow) nextArrow.addEventListener('click', showNext);
|
||||
if (prevArrow) prevArrow.addEventListener('click', showPrev);
|
||||
|
||||
document.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'ArrowRight') {
|
||||
showNext();
|
||||
}
|
||||
if (event.key === 'ArrowLeft') {
|
||||
showPrev();
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
refreshCarousel();
|
||||
scrollToPage(activePage);
|
||||
});
|
||||
}
|
||||
27
login.html
27
login.html
@ -4,17 +4,28 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Login - Social Cooking</title>
|
||||
|
||||
<!-- Stylesheet für diese Seite-->
|
||||
<link rel="stylesheet" href="css/login_signup.css">
|
||||
<!-- Navigation Stylesheet -->
|
||||
<link rel="stylesheet" href="css/landingpage.css">
|
||||
<!-- Globales Stylesheet -->
|
||||
<link rel="stylesheet" href="css/stylesheet.css">
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!-- Header -->
|
||||
<header class="header">
|
||||
<div class="header-logo">Invité</div>
|
||||
<div class="header-buttons">
|
||||
<button class="header-btn header-btn-secondary">Event finden</button>
|
||||
<a href="signup.html" class="header-btn header-btn-primary">Anmeldung</a>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Top navigation: global entry points and current page indicator -->
|
||||
<header class="top-nav-wrap">
|
||||
<div class="top-nav">
|
||||
<a class="brand" href="index.html" aria-label="Zur Startseite">
|
||||
<img src="assets/invite-logo.svg" alt="Invité">
|
||||
</a>
|
||||
<nav class="top-nav-links" aria-label="Hauptnavigation">
|
||||
<a class="nav-link nav-link--login" href="login.html">Anmelden</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="main-content">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user