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 (
- Coastal View +

+ 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 (
- Kasa - - Accueil A propos + Kasa + + Accueil A Propos
); 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; + } +}