From d2adab9bd97932f5780003c5f71cb02c8ceb0cb0 Mon Sep 17 00:00:00 2001 From: Maria Katrin Bonde <78419778+MariaBonde@users.noreply.github.com> Date: Fri, 23 Aug 2024 16:30:55 +0200 Subject: [PATCH] Lasterrorhemsedal24 (#515) * couldt do arrows:/ * hopefully last commit now:) --- src/hemsedal24/activities.module.css | 24 ++- src/hemsedal24/activities.tsx | 146 ++++++++++++------ .../components/ActivityBlock.module.css | 3 + src/hemsedal24/components/ActivityBlock.tsx | 4 +- src/hemsedal24/components/Hero.module.css | 8 +- src/hemsedal24/hemsedal.module.css | 9 +- src/hemsedal24/images/activityarrow.svg | 3 + src/hemsedal24/images/kosevors.svg | 4 +- src/hemsedal24/images/mobileactivityarrow.svg | 3 + src/hemsedal24/index.tsx | 2 +- src/hemsedal24/tingogtang.module.css | 31 ++-- src/hemsedal24/tingogtang.tsx | 11 +- 12 files changed, 160 insertions(+), 88 deletions(-) create mode 100644 src/hemsedal24/images/activityarrow.svg create mode 100644 src/hemsedal24/images/mobileactivityarrow.svg diff --git a/src/hemsedal24/activities.module.css b/src/hemsedal24/activities.module.css index f634c76a0..d449db1d3 100644 --- a/src/hemsedal24/activities.module.css +++ b/src/hemsedal24/activities.module.css @@ -6,6 +6,14 @@ z-index: 1; } +@-moz-document url-prefix() { + p { + font-size: 1.25rem; + } +} +.bold { + font-weight: 500; +} .header h3 { display: flex; justify-content: center; @@ -77,28 +85,30 @@ html { .blob { z-index: auto; - max-width: 75%; position: relative; } .blob img { position: absolute; - z-index: auto; - top: -9rem; - right: -20rem; + width: 70%; + top: -13rem; + right: -10rem; } .title { z-index: 10; } - .bop { flex-shrink: 0; display: flex; justify-content: center; - width: 20%; + width: 25rem; z-index: 10; margin: 0 auto; - margin-top: 10%; +} + +.bop img { + /* Or another appropriate value */ + height: auto; /* Maintain aspect ratio */ } @media (max-width: 500px) { diff --git a/src/hemsedal24/activities.tsx b/src/hemsedal24/activities.tsx index 6fc2391ea..2beee85f7 100644 --- a/src/hemsedal24/activities.tsx +++ b/src/hemsedal24/activities.tsx @@ -1,53 +1,101 @@ - -import { NextPage } from "next"; -import Link from "next/link"; -import arrowleft from "./images/arrow-left.svg" -import styles from "./activities.module.css" -import blob from "./images/activityblob.svg" -import bop from "./images/bop.svg" -import ActivityBlock from "./components/ActivityBlock"; -import hund from "./images/hund.svg" -import sykling from "./images/sykling.svg" -import via from "./images/viaferrata.svg" +import { NextPage } from 'next'; +import Link from 'next/link'; +import arrowleft from './images/arrow-left.svg'; +import styles from './activities.module.css'; +import blob from './images/activityblob.svg'; +import bop from './images/bop.svg'; +import ActivityBlock from './components/ActivityBlock'; +import hund from './images/hund.svg'; +import sykling from './images/sykling.svg'; +import via from './images/viaferrata.svg'; const Activities: NextPage = () => { - return ( -
- - - pil venste - Tilbake - -
blob
-
-

Aktivitetene på lørdag

-

- Lørdag! Aktiviteter! Sykle på fjellet, klatre i fjellveggen eller kose med hunder, - det er mye forskjellig som skjer på lørdag. Her har vi derfor samlet litt informasjon om - de forskjellige aktivitetene her slik at man er forberedt på hva lørdagsaktivitetene vil bringe ⛰️🌞 -

- - Vi blir hentet med bussen igjen kl 11:45 og er framme på hotellet ca 12:45. De som vil kan så gå på tur rundt Rjukandefossen (det ser helt sykt fint ut på bildene omg). Turen tar 3 timer tur/retur. Og man kan bade!!! Ellers kan man også henge på hotellet og slappe av etter hundekjøringen, det velger man selv 🤗} - picture={hund}/> - -
big blobs
+ + return ( +
+ + + pil venste + Tilbake + +
+ blob +
+
+
+

Aktivitetene på lørdag

+
+

+ Lørdag! Aktiviteter! Sykle på fjellet, klatre i fjellveggen eller kose + med hunder, det er mye forskjellig som skjer på lørdag. Her har vi + derfor samlet litt informasjon om de forskjellige aktivitetene her + slik at man er forberedt på hva lørdagsaktivitetene vil bringe ⛰️🌞 +

+
+ + + Dere tar bussen fra hotellet sammen med klatregjengen{' '} + kl 09:00. Vi er framme hos + Hemsedal Husky kl 10:25, og så er det hundekjøring fra kl 10:30🥳 + Her får vi litt over en time hundekjøring med guide. Det er også + viktig å påpeke at “det blir tid til å kose med hundene i + hundegården også”😌 På grunn av veldig kosete hunder som er glad i + mennesker så blir vi tipset om å gå med klær som tåler poter, snuter + og pels. + + } + link="https://hemsedalhusky.no/hundekjoring/" + reference="hundekjøringen" + secondtext={ + <> + Vi blir hentet med bussen igjen kl 11:45 og er framme på hotellet ca + 12:45. De som vil kan så gå på tur rundt{' '} + + Rjukandefossen + {' '} + (det ser helt sykt fint ut på bildene omg). Turen tar 3 timer + tur/retur. Og man kan bade!!! Ellers kan man også henge på hotellet + og slappe av etter hundekjøringen, det velger man selv 🤗 + + } + picture={hund} + /> + + Dere tar bussen fra hotellet sammen med hundegjengen{' '} + kl 09:00, og blir sluppet av + der dere skal møte guiden og resten av gruppen som skal klatre 🚌 + Her tar erfarne guider deg med opp bratte fjellsider og langs trange + fjellhyller (hjelp) på en rute som tar deg til Vesle Røggjin. Det + tar 3-5 timer, avhengig av nivået til de som klatrer💫 Men ikke vær + for treig, for bussen plukker dere opp igjen kl 12:30 og kjører dere + tilbake til hotellet🤠 + + } + link="https://hemsedal.com/hemsedal-fjellsport/via-ferrata" + reference="klatreturen" + secondtext="Når dere er tilbake på hotellet så kan dere velge om dere vil på tur med hundegjengen (info om turen finner du under programmet til hundekjøring) eller slappe av på hotellet🌟" + picture={via} + /> + + +
+ big blobs +
+
-); + ); }; -export default Activities; \ No newline at end of file +export default Activities; diff --git a/src/hemsedal24/components/ActivityBlock.module.css b/src/hemsedal24/components/ActivityBlock.module.css index 89c6a10db..6745e543d 100644 --- a/src/hemsedal24/components/ActivityBlock.module.css +++ b/src/hemsedal24/components/ActivityBlock.module.css @@ -45,6 +45,9 @@ p { width: 100%; } + .textportion h2 { + font-size: 1.8rem; + } p { margin: 0; color: var(--Secondary-4-D4, #2f2e2b); diff --git a/src/hemsedal24/components/ActivityBlock.tsx b/src/hemsedal24/components/ActivityBlock.tsx index 1526715c7..06864f5ab 100644 --- a/src/hemsedal24/components/ActivityBlock.tsx +++ b/src/hemsedal24/components/ActivityBlock.tsx @@ -4,13 +4,13 @@ import Link from "next/link"; import styles from "./ActivityBlock.module.css" import { ReactNode } from "react"; -export default function ActivityBlock({ title, text, link, reference, secondtext, picture}: { title: string, text: string, link: string, reference: string,secondtext:ReactNode,picture:string}) { +export default function ActivityBlock({ title, text, link, reference, secondtext, picture}: { title: string, text: ReactNode, link: string, reference: string,secondtext:ReactNode,picture:string}) { return

{title}

{text}

-

Du finner mer informasjon om {reference} HER

+

Du finner mer informasjon om {reference} HER.

{secondtext}

bilde
diff --git a/src/hemsedal24/components/Hero.module.css b/src/hemsedal24/components/Hero.module.css index 608a4c500..4560b721a 100644 --- a/src/hemsedal24/components/Hero.module.css +++ b/src/hemsedal24/components/Hero.module.css @@ -2,7 +2,7 @@ section { } .container { position: relative; - width: 100vw; + width: 100%; height: 30rem; } @@ -46,14 +46,14 @@ section { .hemsedalhero1 { position: absolute; - max-width: 50%; + width: 35%; left: 0; top: -4rem; } .hemsedalhero2 { position: absolute; - max-width: 20%; + width: 21%; top: 0; right: 0; } @@ -66,7 +66,7 @@ section { max-width: 0%; } .hemsedalhero1 { - max-width: 160%; + width: 75%; left: 0; top: 0; } diff --git a/src/hemsedal24/hemsedal.module.css b/src/hemsedal24/hemsedal.module.css index d72cf6fc8..9f9171f4b 100644 --- a/src/hemsedal24/hemsedal.module.css +++ b/src/hemsedal24/hemsedal.module.css @@ -83,6 +83,13 @@ padding: 0 6px 0 0; font-weight: 400; font-family: 'Graphik Web'; + font-size: 1rem; +} + +@-moz-document url-prefix() { + .navigation span { + font-size: 1.2rem; + } } .navigation img { @@ -195,7 +202,7 @@ html { flex-shrink: 0; display: flex; justify-content: center; - width: 20%; + width: 25rem; z-index: 10; margin: 0 auto; } diff --git a/src/hemsedal24/images/activityarrow.svg b/src/hemsedal24/images/activityarrow.svg new file mode 100644 index 000000000..04fe3027e --- /dev/null +++ b/src/hemsedal24/images/activityarrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/hemsedal24/images/kosevors.svg b/src/hemsedal24/images/kosevors.svg index 3b35c9c5b..502703a1a 100644 --- a/src/hemsedal24/images/kosevors.svg +++ b/src/hemsedal24/images/kosevors.svg @@ -3,11 +3,11 @@ - + - + diff --git a/src/hemsedal24/images/mobileactivityarrow.svg b/src/hemsedal24/images/mobileactivityarrow.svg new file mode 100644 index 000000000..38286c3f2 --- /dev/null +++ b/src/hemsedal24/images/mobileactivityarrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/hemsedal24/index.tsx b/src/hemsedal24/index.tsx index 7baa2a6a3..6a5a57583 100644 --- a/src/hemsedal24/index.tsx +++ b/src/hemsedal24/index.tsx @@ -58,7 +58,7 @@ const Hemsedal24: NextPage = () => { ikke kommer til å si siden det er elektrisk, men vi kan late som🤝 Uansett! Årets Varianttur tar oss med opp på fjellet, og her blir det hygge, kos, god mat og gøye aktiviteter💥

-

Under finner du programmet for turen.

+

Og bilder!! Det er gøy å dele litt bilder underveis på turen, så vi skal ha vår egen lille fotobank her på denne nettsiden. Den kommer i løpet av uken, så stay tuned! 📸

koser seg
big blobs
diff --git a/src/hemsedal24/tingogtang.module.css b/src/hemsedal24/tingogtang.module.css index 415fb84ef..8f22f6e71 100644 --- a/src/hemsedal24/tingogtang.module.css +++ b/src/hemsedal24/tingogtang.module.css @@ -111,9 +111,13 @@ h4 { justify-content: space-between; } -.pakkeliste img { - width: 100%; +.koseimg { + width: 50%; } +.koseimg img { + width: 90%; +} + .utsiktsblob { margin-top: -2rem; } @@ -148,7 +152,7 @@ h4 { flex-shrink: 0; display: flex; justify-content: center; - width: 20%; + width: 25rem; z-index: 10; margin: 0 auto; } @@ -215,19 +219,19 @@ h4 { margin-bottom: -30%; } .pakkeliste { - margin: 5rem 4.5rem 0 0; flex-direction: column; - margin-top: 7rem; } .koseimg { + width: 80%; position: relative; - top: -8rem; - right: -40%; + top: -7rem; + right: -70%; } - .pakkeliste img { - width: 15rem; + .koseimg img { + width: 100%; position: absolute; } + .aktivitetene { flex-direction: column; align-items: flex-start; @@ -260,14 +264,13 @@ h4 { margin-left: -5rem; } .utsiktsblob { - z-index: -1; - display: flex; - justify-content: center; margin: 5rem 0 5rem 0; - min-width: 100%; + width: 160%; + position: relative; + left: -6rem; } .utsiktsblob img { - min-width: 150%; + width: 100%; } .bop { width: 60%; diff --git a/src/hemsedal24/tingogtang.tsx b/src/hemsedal24/tingogtang.tsx index 9803d9857..b1255a470 100644 --- a/src/hemsedal24/tingogtang.tsx +++ b/src/hemsedal24/tingogtang.tsx @@ -79,7 +79,7 @@ const TingogTang: NextPage = () => {
- strandsenger + strandsenger

Husk å ta med:

@@ -124,15 +124,10 @@ const TingogTang: NextPage = () => {
)}
- {mobile ? ( +
- utsiktsblob + utsiktsblob
- ) : ( -
- utsiktsblob -
- )}
big blobs