initial commit

assets/css/src/calendar-strip.css

@@ -0,0 +1,25 @@
+.calendar-strip {
+  background-color: var(--color-yellow);
+  box-sizing: border-box;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: 2rem var(--margin-body);
+  border-top: var(--border);
+  border-bottom: var(--border);
+}
+
+.calendar-strip__selector {
+  flex-shrink: 0;
+}
+
+.calendar-strip__days {
+  display: flex;
+  justify-content: space-evenly;
+  width: 100%;
+}
+
+.calendar-strip__calendar-btn {
+  border: var(--border);
+  padding: 0.2rem 0.5rem;
+}

assets/css/src/nav.css

@@ -0,0 +1,67 @@
+/* Nav */
+.main-nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: var(--border);
+  padding: 1rem;
+}
+
+.main-nav .logo {
+  font-weight: normal;
+  transition: opacity 0.2s ease-in-out;
+}
+
+.main-nav .logo > * {
+  display: block;
+}
+
+.main-nav .logo > *:not(:first-child) {
+  margin-left: 2.4ch;
+}
+
+.main-nav__right {
+  display: flex;
+}
+
+.main-nav__right > *:not(:last-child) {
+  margin-right: 2.69rem;
+}
+
+.main-nav .burger-btn {
+  position: relative;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.main-nav .burger-btn__line,
+.main-nav .burger-btn__line::before,
+.main-nav .burger-btn__line::after {
+  content: "";
+  width: 100%;
+  height: 3px;
+  background-color: #000;
+  position: absolute;
+}
+
+.main-nav .burger-btn__line::before {
+  transform: translateY(-0.5rem);
+}
+
+.main-nav .burger-btn__line::after {
+  transform: translateY(0.5rem);
+}
+
+/* Main nav small */
+
+.main-nav--small .logo__detail {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.main-nav--small .logo > *:not(:first-child) {
+  margin-left: 1.4ch;
+}

assets/css/src/reset.css

@@ -0,0 +1,59 @@
+body,
+html,
+h1,
+h2,
+h3,
+h4,
+h5,
+p {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background-color: var(--color-body-bg);
+}
+
+body,
+html {
+  scroll-behavior: smooth;
+}
+
+figure {
+  margin: 0;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+a:visited {
+  color: inherit;
+}
+
+ul {
+  margin: 0;
+  padding-left: 0;
+}
+
+li {
+  list-style: none;
+}
+
+img {
+  width: 100%;
+  height: 100%;
+}
+picture {
+  width: 100%;
+}
+
+picture {
+  display: block;
+}
+
+button {
+  all: unset;
+  cursor: pointer;
+}

assets/css/src/text.css

@@ -0,0 +1,14 @@
+@font-face {
+  font-family: "Joker";
+  src: url("/assets/fonts/Jokker-Medium.woff") format("woff");
+  font-weight: normal;
+}
+@font-face {
+  font-family: "Joker";
+  src: url("/assets/fonts/Jokker-Semibold.woff") format("woff");
+  font-weight: bold;
+}
+body {
+  font-family: "Joker";
+  font-size: var(--font-size-body);
+}

assets/css/src/variables.css

@@ -0,0 +1,27 @@
+:root {
+  --border: 1px solid #000;
+
+  --font-size-body: 1.25rem;
+  --font-size-h3: 1.5625rem;
+  --font-size-h2: 1.875rem;
+  --font-size-h1: 2.8125rem;
+
+  --margin-body: 3.86rem;
+
+  --color-pink: #ed268f;
+  --color-pink-light: #ffa199;
+  --color-salmon: #ff4f4b;
+  --color-purple: #9e00ff;
+  --color-purple-light: #f066ff;
+  --color-yellow: #faff82;
+  --color-yellow-fluo: #d6ff00;
+  --color-orange: #ff5c00;
+  --color-red: #ff3300;
+  --color-duck: #2e8799;
+  --color-blue: #009eff;
+  --color-blue-light: #abf1ff;
+  --color-grey: #c4c9cc;
+  --color-green: #00b477;
+  --color-brown: #a59478;
+  --color-brown-light: #d6cfbe;
+}

assets/css/style.css

@@ -0,0 +1,5 @@
+@import url("src/reset.css");
+@import url("src/variables.css");
+@import url("src/text.css");
+@import url("src/nav.css");
+@import url("src/calendar-strip.css");

assets/images/icons/search.svg

@@ -0,0 +1,4 @@
+<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.35423 18.8127C4.22113 18.8127 0 14.5916 0 9.40634C0 4.22113 4.22113 0 9.35423 0C14.5394 0 18.7606 4.22113 18.7606 9.40634C18.7606 14.5916 14.5394 18.8127 9.35423 18.8127ZM1.85 9.40634C1.85 13.6014 5.23733 16.9887 9.38029 16.9887C13.4972 16.9887 16.8845 13.6014 16.8845 9.40634C16.8845 5.21127 13.4972 1.82394 9.38029 1.82394C5.23733 1.82394 1.85 5.21127 1.85 9.40634Z" fill="black"/>
+<line x1="15.0899" y1="14.3447" x2="22.0383" y2="21.293" stroke="black" stroke-width="2"/>
+</svg>

assets/images/icons/ticket.svg

@@ -0,0 +1,14 @@
+<svg width="36" height="23" viewBox="0 0 36 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1125_1428)">
+<path d="M30.7411 11.4703C30.7411 9.52004 32.3278 7.93341 34.278 7.93341V0.82666H0.82666V7.93341C2.77689 7.93341 4.36351 9.52004 4.36351 11.4703C4.36351 13.4205 2.77689 15.0071 0.82666 15.0071V22.1139H34.278V15.0071C32.3278 15.0071 30.7411 13.4205 30.7411 11.4703Z" stroke="black" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M13.9822 5.15583C14.5481 5.15583 15.0069 4.69706 15.0069 4.13114C15.0069 3.56522 14.5481 3.10645 13.9822 3.10645C13.4163 3.10645 12.9575 3.56522 12.9575 4.13114C12.9575 4.69706 13.4163 5.15583 13.9822 5.15583Z" fill="black"/>
+<path d="M13.9822 10.2149C14.5481 10.2149 15.0069 9.75615 15.0069 9.19022C15.0069 8.6243 14.5481 8.16553 13.9822 8.16553C13.4163 8.16553 12.9575 8.6243 12.9575 9.19022C12.9575 9.75615 13.4163 10.2149 13.9822 10.2149Z" fill="black"/>
+<path d="M13.9822 15.3038C14.5481 15.3038 15.0069 14.845 15.0069 14.2791C15.0069 13.7132 14.5481 13.2544 13.9822 13.2544C13.4163 13.2544 12.9575 13.7132 12.9575 14.2791C12.9575 14.845 13.4163 15.3038 13.9822 15.3038Z" fill="black"/>
+<path d="M13.9822 20.3941C14.5481 20.3941 15.0069 19.9353 15.0069 19.3694C15.0069 18.8035 14.5481 18.3447 13.9822 18.3447C13.4163 18.3447 12.9575 18.8035 12.9575 19.3694C12.9575 19.9353 13.4163 20.3941 13.9822 20.3941Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_1125_1428">
+<rect width="35.1041" height="22.9399" fill="white"/>
+</clipPath>
+</defs>
+</svg>

assets/js/calendar.js

@@ -0,0 +1,12 @@
+dayjs.locale("fr");
+function getDaysInMonth(month, year) {
+  const daysInMonth = dayjs(new Date(year, month, 0)).daysInMonth();
+  const days = [];
+
+  for (let day = 1; day <= daysInMonth; day++) {
+    const currentDay = dayjs(new Date(year, month - 1, day));
+    days.push(currentDay.format("DD-MM-YYYY"));
+  }
+
+  return days;
+}