Initial V1

V1/resources/css/components/hero.css

@@ -0,0 +1,196 @@
+.hero-title {
+  color: white;
+  font-size: 10vmin;
+  font-family: 'Mona-Sans';
+  font-weight: bold;
+  line-height: 12vh;
+}
+
+.hero-title2 {
+  position: relative;
+  top: 25px;
+  left: 15px;
+  color: white;
+  font-family: "Moonstone History";
+  font-size: 10vmin;
+  line-height: 10vh;
+}
+
+.hero-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 100%;
+  background-color: black;
+  background-size: cover;
+  background-image: url("/resources/img/IMG_Accueil.png");
+}
+
+.hero-sub-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.hero-sub-container-separator {
+  height: 400px;
+  width: 2px;
+  background-color: #ffffff;
+  transform: rotate(15deg);
+  margin: 100px;
+}
+
+.hero-sub-container-menu {
+  display: flex;
+  flex-direction: column;
+}
+
+.hero-sub-container-menu-item1 {
+  font-size: 40px;
+  margin-bottom: 50px;
+  margin-left: 50px;
+  padding: 10px 20px;
+  font-family: "Montserrat", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 500;
+  font-style: normal;
+  color: #ffffff;
+  text-decoration: none;
+  transition: 0.5s;
+  border-radius: 50px;
+  background-color: #ff3c00;
+}
+
+.hero-sub-container-menu-item1:hover {
+  cursor: pointer;
+  background-color: #ff5e00;
+}
+
+.hero-sub-container-menu-item2 {
+  font-size: 30px;
+  margin-right: 60px;
+  padding: 10px 20px;
+  font-family: "Montserrat", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 500;
+  font-style: normal;
+  color: #ffffff;
+  text-decoration: none;
+  transition: 0.5s;
+  border-radius: 50px;
+  border: 3px solid white;
+}
+
+.hero-sub-container-menu-item2:hover {
+  cursor: pointer;
+  background-color: #ff5e00;
+}
+
+.hero-logo {
+  width: 80%;
+  max-width: 500px;
+}
+
+.hero-decoration-text {
+  position: absolute;
+  white-space: nowrap;
+  overflow: hidden;
+  margin: 0 auto;
+}
+
+.hero-decoration-text span {
+  color: #ffffff;
+  font-family: "Montserrat", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 600;
+  font-style: normal;
+  display: inline-block;
+  animation: marquee 5s linear infinite;
+}
+
+.hero-decoration-text-top {
+  top: 62px;
+  width: calc(100% - 220px);
+}
+
+.hero-decoration-text-bottom {
+  bottom: 62px;
+  width: calc(100% - 220px);
+  transform: rotate(180deg);
+}
+
+.hero-decoration-text-left {
+  position: absolute;
+  transform: rotate(-90deg);
+  transform-origin: 0 0;
+  width: calc(100vh - 220px);
+}
+
+.hero-decoration-text-left-container {
+  position: absolute;
+  left: 62px;
+  bottom: 110px;
+}
+
+.hero-decoration-text-right {
+  position: absolute;
+  transform: rotate(90deg);
+  transform-origin: 0 0;
+  width: calc(100vh - 220px);
+}
+
+.hero-decoration-text-right-container {
+  position: absolute;
+  right: 63px;
+  top: 110px;
+}
+
+.hero-decoration-cross {
+  position: absolute;
+  height: 50px;
+  width: 50px;
+  color: #ffffff;
+}
+
+.hero-decoration-arrow {
+  position: absolute;
+  color: #ffffff;
+  width: 10vmin;
+  bottom: 150px;
+  right: 180px;
+}
+
+#cross_up_right {
+  top: 50px;
+  right: 50px;
+}
+
+#cross_up_left {
+  top: 50px;
+  left: 50px;
+}
+
+#cross_down_left {
+  bottom: 50px;
+  left: 50px;
+}
+
+#cross_down_right {
+  bottom: 50px;
+  right: 50px;
+}
+
+@keyframes marquee {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(-150px, 0);
+  }
+}
+
+@media only screen and (max-width: 800px) {
+
+}