diff --git a/src/components/Adhook.jsx b/src/components/Adhook.jsx
index bfeec35..e31caa3 100644
--- a/src/components/Adhook.jsx
+++ b/src/components/Adhook.jsx
@@ -4,7 +4,9 @@ import '../styles/Adhook.scss';
function Adhook() {
return (
-
+
+ Chez vous, partout et ailleurs
+
);
}
diff --git a/src/components/App.jsx b/src/components/App.jsx
index 839aca6..4bbff68 100644
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -1,8 +1,8 @@
import '../styles/App.scss';
import NavBar from './NavBar';
-import Footer from './Footer';
import Adhook from './Adhook';
+import Footer from './Footer';
import * as React from "react";
import * as ReactDOM from "react-dom/client";
import {
diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx
index f94ad2e..7bae2cd 100644
--- a/src/components/NavBar.jsx
+++ b/src/components/NavBar.jsx
@@ -4,9 +4,9 @@ import '../styles/NavBar.scss';
function NavBar() {
return (
);
diff --git a/src/styles/Adhook.scss b/src/styles/Adhook.scss
index e69de29..e7020b7 100644
--- a/src/styles/Adhook.scss
+++ b/src/styles/Adhook.scss
@@ -0,0 +1,27 @@
+.Adhook {
+ display: grid;
+ place-items: center;
+ width: min(1240px, 90%);
+ min-height: 223px;
+ margin: auto;
+ border-radius: 25px;
+ box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
+ color: white;
+ margin-bottom: 43px;
+ position: relative;
+
+ &:before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-image: url("../assets/Coast.png");
+ background-size: cover;
+ background-position: center;
+ filter: brightness(60%);
+ border-radius: inherit;
+ z-index: 0;
+}
+}
\ No newline at end of file
diff --git a/src/styles/NavBar.scss b/src/styles/NavBar.scss
index 7fde6ca..e22d85e 100644
--- a/src/styles/NavBar.scss
+++ b/src/styles/NavBar.scss
@@ -1,33 +1,52 @@
+$kasa-black: #000000;
+$kasa-pink: #FF6060;
+$kasa-font: "Montserrat", sans-serif;
+
.NavBar {
+ width: min(1240px, 80%);
+ height: auto;
+ margin: 45px auto 50px auto;
display: flex;
justify-content: space-between;
- padding: 10px 20px;
-}
+ align-items: center;
-.kasa-logo {
- display: flex;
- padding: 40px;
- pointer-events: none;
- color: black;
-}
+ &a {
+ &:active, &:focus {
+ text-decoration: underline;
+ outline: none;
+ }
-.navLinks {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- padding: 10px 20px;
- align-items: center;
-}
+ &:link, &:visited {
+ color: $kasa-black;
+ }
+
+ &:hover {
+ color: $kasa-pink;
+ }
+ }
+ &--logo {
+ width: 210px;
+ height: 68px;
+ }
-.kasa-nav {
- font-family: "Montserrat", sans-serif;
- display: flex;
- align-items: flex-end;
- font-size: 1.5em;
- font-weight: 500;
- color: black;
- width: 120px;
- padding: 40px;
-}
+ &--links {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ padding: 10px 20px;
+ align-items: center;
+ gap: 20px;
+ }
+ &--nav {
+ font-family: $kasa-font;
+ font-size: 16px;
+ display: flex;
+ align-items: flex-end;
+ font-size: 1.5em;
+ font-weight: 500;
+ color: $kasa-black;
+ width: 120px;
+ }
+}