first commit

.gitignore

@@ -0,0 +1 @@
+.history

README.md

@@ -0,0 +1 @@
+Launch index.html file in browser

index.css

@@ -0,0 +1,206 @@
+* {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+  box-sizing: border-box;
+}
+
+
+html {
+  font-size: 1rem;
+  --color-text-main: #1A1A1A;
+  --color-text-secondary: #0062E0;
+  --color-text-white: #FFFFFF;
+  --text-size-4: 0.25rem;
+}
+
+body {
+  min-height: 100dvh;
+  display: grid;
+  color: var(--color-text-main);
+}
+
+
+.main-container {
+  display: grid;
+  align-items: center;
+  justify-content: center;
+  max-width: 1440px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.content-wrapper {
+  display: grid;
+  max-height: 579px;
+  height: 100%;
+  max-width: 1153px;
+  width: 100%;
+  grid-template-columns: 608px 492px;
+  column-gap: calc(var(--text-size-4) * 10);
+}
+
+.left-part {
+  display: grid;
+  align-items: center ;
+  background-color: #F2F4FF;
+  border-radius: 6px;
+  /* padding: 0 52px; */
+  max-width: 608px;
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+}
+.right-part {
+  display: grid;
+  align-content: start;
+}
+
+.sub-title {
+  color: var(--color-text-secondary);
+  font-family: League Spartan;
+  font-size: calc(var(--text-size-4) * 5);
+font-weight: 600;
+line-height: 1;
+text-align: left;
+margin-bottom: 12px;
+
+}
+
+.title {
+  font-family: League Spartan;
+font-size:  calc(var(--text-size-4) * 10);
+font-weight: 700;
+line-height: 1;
+
+}
+
+.step-number {
+  width: calc(var(--text-size-4) * 10);
+  height: calc(var(--text-size-4) * 10);
+  display: grid;
+  place-items: center;
+  border-radius: 50%;
+  font-family: League Spartan;
+font-size:  calc(var(--text-size-4) * 5);
+font-weight: 600;
+line-height: 1;
+color: var(--color-text-main);
+grid-row: 2 span;
+border: 1px solid var(--color-text-main);
+transition-property: color;
+transition-duration: 250ms;
+transition-timing-function: ease-in-out;
+position: relative;
+overflow: hidden;
+}
+
+.step-number span {
+  position: relative;
+  z-index: 1;
+}
+
+.step-number::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  background: linear-gradient(#0094FF, #0062E0);
+  transition-property: opacity;
+transition-duration: 250ms;
+transition-timing-function: ease-in-out;
+}
+
+.steps-switch-wrapper {
+  display: grid;
+  margin-top: 32px;
+  align-content: space-between;
+}
+
+
+.step-swtich-button {
+  --border-size: 3px;
+  border-radius: 6px;
+  display: grid;
+  align-items: center;
+  column-gap: 30px;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: repeat(2, auto);
+  background: var(--color-text-white);
+  padding: 18px 11px 14px 17px;
+  cursor: pointer;
+  text-align: left;
+  position: relative;
+
+  background-clip: padding-box;
+  border: solid var(--border-size) transparent;
+}
+
+
+
+.step-swtich-button-active .step-switch-title {
+  color: var(--color-text-secondary);
+  grid-row: 1 span;
+}
+.step-swtich-button-active .step-number,
+.step-swtich-button:hover .step-number {
+  /* background: linear-gradient(#0094FF, #0062E0); */
+  color: var(--color-text-white);
+  border: 0;
+}
+
+.step-swtich-button-active .step-number::before,
+.step-swtich-button:hover .step-number::before{
+  opacity: 1;
+}
+
+.step-swtich-button-active .step-switch-description  {
+  display: block;
+}
+
+
+.step-swtich-button-active::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  margin: calc(var(--border-size) * -1); /* !importanté */
+  border-radius: inherit; /* !importanté */
+  background: linear-gradient(to right, #0062E0, #0094FF);
+}
+
+.step-switch-title {
+font-family: League Spartan;
+font-size: calc(var(--text-size-4) * 6);;
+font-weight: 600;
+line-height: 0.91;
+color: var(--color-text-main);
+grid-row: 2 span;
+
+}
+.step-switch-description {
+  font-family: League Spartan;
+  font-size: calc(var(--text-size-4) * 4);
+  font-weight: 400;
+  line-height: 1.375;
+  text-align: left;
+  display: none;
+
+}
+
+.image-wrapper {
+  height: 579px;
+  display: grid;
+  align-items: center;
+  justify-content: center;
+  background-color: #F2F4FF;
+  position: absolute;
+  width: 100%;
+  top: 100%;
+  transition: top 300ms ease-in-out 
+}
+
+.image-wrapper-active {
+  top: 0%;
+}

index.html

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <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=League+Spartan:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+    rel="stylesheet">
+  <link rel="stylesheet" href="index.css">
+  <script src="index.js"></script>
+</head>
+
+<body>
+  <div class="main-container">
+    <div class="content-wrapper">
+      <div class="left-part">
+        <div class="image-wrapper">
+          <img src="assets/Step1.png" height="367px" alt="Step 1" />
+        </div>
+        <div class="image-wrapper">
+          <img src="assets/Step2.png" height="440px" alt="Step 2" />
+        </div>
+        <div class="image-wrapper">
+          <img src="assets/Step3.png" height="452px" alt="Step 3" />
+        </div>
+        <div class="image-wrapper">
+          <img src="assets/Step4.png" height="450px" alt="Step 4" />
+        </div>
+      </div>
+      <div class="right-part">
+        <p class="sub-title">Easy Online Booking Process</p>
+        <h1 class="title">You’re seconds away from securing your Iceland car rental.</h1>
+        <div class="steps-switch-wrapper">
+          <button class="step-swtich-button">
+            <div class="step-number">
+              <span>1</span>
+            </div>
+            <p class="step-switch-title">
+              Select your travel days
+            </p>
+            <p class="step-switch-description">
+              Want to relax in the Blue Lagoon during the summer or hunt the Northern Lights during the winter? Pick
+              your travel days and hit ‘Search’.
+            </p>
+          </button>
+          <button class="step-swtich-button">
+            <div class="step-number">
+              <span>2</span>
+            </div>
+            <p class="step-switch-title">
+              Choose your favorite ride
+            </p>
+            <p class="step-switch-description">
+              Take a good look at our new vehicle fleet. From 4x4s & SUVs to electric and luxury vehicles, the choice is
+              yours!
+            </p>
+          </button>
+          <button class="step-swtich-button">
+            <div class="step-number">
+              <span>3</span>
+            </div>
+            <p class="step-switch-title">
+              Add your extras & insurances
+            </p>
+            <p class="step-switch-description">
+              Feel at home on the road and don’t worry about a thing thanks to our comprehensive insurances and top
+              extras.
+            </p>
+          </button>
+          <button class="step-swtich-button">
+            <div class="step-number">
+              <span>4</span>
+            </div>
+            <p class="step-switch-title">
+              Complete your booking and fly to Iceland!
+            </p>
+            <p class="step-switch-description">
+              All you need to do now is fill in your personal details and complete the online payment process. See you
+              in Iceland!
+            </p>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+
+</html>

index.js

@@ -0,0 +1,53 @@
+
+
+document.addEventListener("DOMContentLoaded", function () {
+
+
+  function changeStep(stepNumber) {
+
+    const searchParams = new URLSearchParams(window.location.search);
+    const activeStepNumber = searchParams.get('step') || 0;
+
+    const steps = document.querySelectorAll('.step-swtich-button');
+
+    // const activeStepNumber = [...steps].findIndex((stepButton) => stepButton.classList.contains('step-swtich-button-active'));
+
+    const activeStep = steps[activeStepNumber];
+    activeStep.classList.remove('step-swtich-button-active');
+
+    const pressedStep = steps[stepNumber];
+    pressedStep.classList.add('step-swtich-button-active');
+
+
+    const images = document.querySelectorAll('.image-wrapper');
+    const activeImage = images[activeStepNumber];
+    activeImage.classList.remove('image-wrapper-active');
+
+    const pressedImageStep = images[stepNumber];
+    pressedImageStep.classList.add('image-wrapper-active');
+
+    const url = new URL(window.location)
+    url.searchParams.set("step", String(stepNumber))
+    history.pushState(null, '', url);
+
+  }
+
+  function assignButtonHandlers() {
+    const steps = document.querySelectorAll('.step-swtich-button');
+    const searchParams = new URLSearchParams(window.location.search);
+    const activeStepNumber = searchParams.get('step') || 0;
+    const activeStepButton = steps[activeStepNumber];
+    activeStepButton.classList.add('step-swtich-button-active');
+
+    const images = document.querySelectorAll('.image-wrapper');
+    const activeStepImage = images[activeStepNumber];
+    activeStepImage.classList.add('image-wrapper-active');
+
+    steps.forEach((button, idx) => {
+      button.onclick = () => changeStep(idx)
+    })
+  }
+
+
+  assignButtonHandlers()
+});

package.json

@@ -0,0 +1,11 @@
+{
+  "name": "test-halo-lab",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}