start page hemsedaltur pictures not entirely done

varianter · Aug 13, 2024 · 75cb6ba · 75cb6ba
1 parent 246ea90
commit 75cb6ba
Show file tree

Hide file tree

Showing 15 changed files with 347 additions and 0 deletions.
diff --git a/pages/hemsedal24/index.tsx b/pages/hemsedal24/index.tsx
@@ -0,0 +1 @@
+export { default } from 'src/hemsedal24/index';
diff --git a/public/images/hemsedalhero1text.svg b/public/images/hemsedalhero1text.svg
diff --git a/src/hemsedal24/components/Hero.module.css b/src/hemsedal24/components/Hero.module.css
@@ -0,0 +1,115 @@
+.container {
+  display: flex;
+  position: relative;
+  margin-top: 8rem;
+  flex-direction: column;
+}
+
+.left {
+  display: flex;
+  margin-bottom: 1.5rem;
+  margin-top: 1rem;
+  flex-direction: column;
+  margin-left: 4rem;
+}
+
+.text {
+  width: 100%;
+  z-index: 10;
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+  text-align: center;
+}
+
+.text > h1 {
+  font-size: 4rem;
+  font-weight: 500;
+}
+
+.text > h2 {
+  font-size: 1rem;
+  line-height: 2.25rem;
+  margin-top: 0;
+  font-weight: 500;
+}
+
+.arrow {
+  position: absolute;
+  left: 1rem;
+  top: -3rem;
+  width: 100px;
+  font-family: 'Recoleta';
+  z-index: 5;
+}
+
+.arrow > span {
+  position: absolute;
+  top: -2.5rem;
+}
+
+.arrow > img {
+  width: 60px;
+  transform: rotate(45deg);
+}
+
+.blob {
+  position: absolute;
+  right: 11rem;
+  z-index: auto;
+  width: 33.333333%;
+}
+
+@media (min-width: 1024px) {
+  .container {
+    align-items: center;
+    flex-direction: row;
+  }
+
+  .left {
+    width: 50%;
+  }
+
+  .arrow {
+    top: 3.5rem;
+    left: -3rem;
+    width: 20%;
+  }
+
+  .arrow > span {
+    top: -2rem;
+  }
+
+  .arrow > img {
+    transform: rotate(0);
+  }
+}
+
+.hemsedalhero1 {
+  position: absolute;
+  top: -8rem;
+  right: 62.7vw;
+  width: 35%;
+  height: auto;
+}
+
+.hemsedalhero1text {
+  position: absolute;
+  top: -7.4rem;
+  right: 65.6vw;
+  width: 43%;
+  height: auto;
+}
+
+.hemsedalhero2 {
+  position: absolute;
+  top: -7rem;
+  left: 71.1vw;
+  width: 25%;
+  height: auto;
+}
+
+text {
+  font-weight: 400;
+  font-family: 'Graphik Web';
+  font-size: larger;
+}
diff --git a/src/hemsedal24/components/Hero.tsx b/src/hemsedal24/components/Hero.tsx
@@ -0,0 +1,29 @@
+import styles from "./Hero.module.css";
+
+import arrow from "../images/curved-arrow.svg";
+import s from "../images/s.svg"
+import Image from 'next/image';
+import blob from "../images/blob.svg";
+import HemsedalImage from "./hemsedalimgcurvedtext";
+import hemsedalhero1 from "../../../public/images/hemsedalhero1text.svg"
+import hemsedalHero2 from "../images/hemsedalhero2.png"
+import Container from "../../helsinki23/components/Container";
+
+
+export default function Hero() {
+  return <section id="hero">
+    <Container className={styles.container}>
+    <HemsedalImage/>
+    {/* <img src={hemsedalhero1} alt="hemsedalbilde" className={styles.hemsedalhero1}/> */}
+    <img src={hemsedalHero2} alt="hemsedalbilde" className={styles.hemsedalhero2}/>
+        <div className={styles.blob}>
+          <img src={blob} alt="blobben" />
+        </div>
+        <div className={styles.text}>
+          <h1>Hemsedal</h1>
+          <h2>30. august-1. september</h2>
+        </div>
+    </Container>
+  </section>;
+}
+
diff --git a/src/hemsedal24/components/Imgwcurvedtext.svg b/src/hemsedal24/components/Imgwcurvedtext.svg
diff --git a/src/hemsedal24/components/hemsedalimgcurvedtext.tsx b/src/hemsedal24/components/hemsedalimgcurvedtext.tsx
diff --git a/src/hemsedal24/hemsedal.module.css b/src/hemsedal24/hemsedal.module.css
@@ -0,0 +1,45 @@
+.tur {
+  background: #ede8d7;
+  color: var(--color-standard__black);
+  margin: 0;
+  padding: 0;
+  font-family: 'Graphik Web';
+  min-height: 100vh;
+  overflow: auto;
+}
+
+.tur h1,
+.tur h2,
+.tur h3 {
+  font-family: 'Recoleta';
+}
+
+.tur h2 {
+  font-weight: 400;
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+.tur p {
+  max-width: 50rem;
+  font-size: 16px;
+  margin-top: 1.5rem;
+  font-weight: 400;
+}
+
+.tur li {
+  margin-bottom: 2rem;
+}
+
+.tur time {
+  display: inline-block;
+  width: 4rem;
+  margin-right: 3rem;
+}
+
+.tur a {
+  all: unset;
+  color: #fff;
+  cursor: pointer;
+  font-weight: 500;
+}
diff --git a/src/hemsedal24/images/blob.svg b/src/hemsedal24/images/blob.svg
diff --git a/src/hemsedal24/images/curved-arrow.svg b/src/hemsedal24/images/curved-arrow.svg
diff --git a/src/hemsedal24/images/curvetext.svg b/src/hemsedal24/images/curvetext.svg
diff --git a/src/hemsedal24/images/hemsedalhero1.png b/src/hemsedal24/images/hemsedalhero1.png
diff --git a/src/hemsedal24/images/hemsedalhero1text.svg b/src/hemsedal24/images/hemsedalhero1text.svg
diff --git a/src/hemsedal24/images/hemsedalhero2.png b/src/hemsedal24/images/hemsedalhero2.png
diff --git a/src/hemsedal24/images/test.html b/src/hemsedal24/images/test.html
diff --git a/src/hemsedal24/index.tsx b/src/hemsedal24/index.tsx
@@ -0,0 +1,21 @@
+import styles from './hemsedal.module.css'
+import { NextPage } from 'next';
+import Head from 'next/head';
+import Image from 'next/image';
+import Link from 'next/link';
+
+import Hero from './components/Hero'
+
+const Hemsedal24: NextPage = () => {
+    return (
+        <div className={styles.tur}>
+            <Head>
+                <title>Hemsedal</title>
+                <link rel="shortcut icon" href="/favicon.ico" />
+            </Head>
+            <Hero/>
+        </div>
+    );
+};
+
+export default Hemsedal24;