test

WEB/View/src/CSS/Main.css

@@ -0,0 +1,385 @@
+/*Fonts CSS */
+
+@font-face {
+  font-family: Fauna;
+  src: url("../../assets/fonts/Fauna.ttf");
+}
+@font-face {
+  font-family: Equinox;
+  src: url("../../assets/fonts/Equinox.otf");
+}
+/* End Fonts CSS */
+
+body {
+  min-height: 100vh;
+  font-family: "Equinox", sans-serif;
+  color: white;
+  height: 100vh;
+  background-image: url("../../assets/img/BackgroundForMain.png");
+  background-position: center center;
+  background-attachment: fixed;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-color: #000;
+}
+
+#imgMain {
+  background-image: url("../../assets/img/BackgroundForMain2.png");
+  background-position: bottom center;
+  background-attachment: fixed;
+  background-repeat: no-repeat;
+  background-size: cover;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 70%;
+  height: 80%;
+  border-radius: 10px;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  -ms-border-radius: 10px;
+  -o-border-radius: 10px;
+  border: 1px solid #fff;
+}
+
+.neonBg {
+  background-color: #511949;
+  opacity: 0.9;
+  background-size: 10px 10px;
+  border-radius: 10px;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  -ms-border-radius: 10px;
+  -o-border-radius: 10px;
+}
+
+button:focus {
+  outline: none;
+}
+
+#imgProfil {
+  width: 30%;
+  height: 100%;
+}
+
+@media screen and (max-width: 1100px) {
+  #imgProfil {
+    display: none;
+  }
+}
+
+#profil {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  height: 100%;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+}
+
+#profil.open {
+  opacity: 1;
+  display: flex;
+  transition: all 0.6s;
+  -webkit-transition: all 0.6s;
+  -moz-transition: all 0.6s;
+  -ms-transition: all 0.6s;
+  -o-transition: all 0.6s;
+}
+
+#profilIcon {
+  font-size: 40px;
+  color: white;
+  transform: rotate(90deg);
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  transition: transform 0.8s;
+  -webkit-transition: transform 0.8s;
+  -moz-transition: transform 0.8s;
+  -ms-transition: transform 0.8s;
+  -o-transition: transform 0.8s;
+}
+
+#profilIcon.open {
+  transition: transform 0.8s;
+  -webkit-transition: transform 0.8s;
+  -moz-transition: transform 0.8s;
+  -ms-transition: transform 0.8s;
+  -o-transition: transform 0.8s;
+  background: none;
+  transform: rotate(180deg) !important;
+  -webkit-transform: rotate(180deg) !important;
+  -moz-transform: rotate(180deg) !important;
+  -ms-transform: rotate(180deg) !important;
+  -o-transform: rotate(180deg) !important;
+}
+
+#profilContainer.open {
+  justify-content: end;
+}
+
+#mainPart {
+  transition: all 0.8s;
+  -webkit-transition: all 0.8s;
+  -moz-transition: all 0.8s;
+  -ms-transition: all 0.8s;
+  -o-transition: all 0.8s;
+}
+
+#mainPart.open {
+  margin-left: 50% !important;
+}
+
+/* Button Login/ Logout animation */
+
+a {
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+  outline: none;
+  border: 0;
+  text-decoration: none;
+  background: transparent;
+  padding: 0;
+  font-size: inherit;
+  font-family: inherit;
+}
+
+a.logButton {
+  width: 12rem;
+  height: 50px;
+}
+
+a.logButton .circle {
+  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
+  display: block;
+  margin: 0;
+  width: 3rem;
+  height: 3rem;
+  background: #fff;
+  border-radius: 1.625rem;
+}
+a.logButton .circle .icon {
+  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  background: #050e15;
+}
+a.logButton .circle .icon.arrow {
+  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
+  left: 0.625rem;
+  width: 1.125rem;
+  height: 0.125rem;
+  background: none;
+}
+a.logButton .circle .icon.arrow::before {
+  position: absolute;
+  content: "";
+  top: -0.25rem;
+  right: 0.0625rem;
+  width: 0.625rem;
+  height: 0.625rem;
+  border-top: 0.125rem solid #050e15;
+  border-right: 0.125rem solid #050e15;
+  transform: rotate(45deg);
+}
+a.logButton .button-text {
+  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 0.75rem 0;
+  margin: 0 0 0 1.85rem;
+  color: #fff;
+  font-weight: 700;
+  line-height: 1.6;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+a:hover .circle {
+  width: 100%;
+}
+
+a:hover .circle .icon.arrow {
+  background: #050e15;
+  transform: translate(1rem, 0);
+}
+
+a:hover .button-text {
+  color: #050e15;
+}
+
+/* Button style for code */
+
+a,
+button {
+  text-decoration: none !important;
+  outline: none !important;
+}
+
+.cssbuttons-io {
+  position: relative;
+  font-family: inherit;
+  font-weight: bolder;
+  font-size: 18px;
+  letter-spacing: 0.05em;
+  border-radius: 0.8em;
+  border: none;
+  color: white; /* text color */
+  overflow: hidden;
+  width: 65%;
+  background-position: center center;
+  background-attachment: fixed;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+#btn-1 {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='300' height='75' preserveAspectRatio='none' viewBox='0 0 300 75'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1065%26quot%3b)' fill='none'%3e%3crect width='300' height='75' x='0' y='0' fill='rgba(15%2c 17%2c 21%2c 1)'%3e%3c/rect%3e%3cpath d='M88.58 44.57 a12.5 12.5 0 1 0 25 0 a12.5 12.5 0 1 0 -25 0z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M304.7324658513289 67.92373703388498L289.9393763882664 65.58074183860701 287.5963811929884 80.37383130166957 302.38947065605095 82.71682649694753z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M272.6717239241291 45.44517070202609L265.44747696055765 34.734784126938415 252.99402057971187 50.92634785983939z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M139.86852403993186 17.277208590099413L152.36680844893687-0.5721913763171713 134.5174084825203-13.070475785322195 122.01912407351527 4.778924181094389z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M69.31 2.7 a23.05 23.05 0 1 0 46.1 0 a23.05 23.05 0 1 0 -46.1 0z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M200.644556359526 77.73750637644713L210.09013424424927 69.23266984831206 192.61009050968502 59.31672128529469z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M188.74 65.78 a22.37 22.37 0 1 0 44.74 0 a22.37 22.37 0 1 0 -44.74 0z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M50.67333971689776 18.34335935719956L34.189822854481996 24.670788651580793 40.51725214886323 41.154305513996555 57.00076901127899 34.82687621961532z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M236.50761656073053 43.80085479326328L215.11114470239534 38.46611519693424 209.77640510606628 59.862587055269444 231.1728769644015 65.19732665159847z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M36.69630717595443 33.954886934991144L51.286547918089674 23.354456541993386 40.686117525091916 8.764215799858142 26.095876782956672 19.3646461928559z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M277.96 6.68 a17.57 17.57 0 1 0 35.14 0 a17.57 17.57 0 1 0 -35.14 0z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M48.13 71.94 a14.2 14.2 0 1 0 28.4 0 a14.2 14.2 0 1 0 -28.4 0z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M227.81 38.26 a16.2 16.2 0 1 0 32.4 0 a16.2 16.2 0 1 0 -32.4 0z' fill='rgba(68%2c 255%2c 246%2c 0.45)' class='triangle-float3'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1065'%3e%3crect width='300' height='75' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");
+  color: black;
+}
+
+#btn-1::before {
+  background: white;
+}
+
+#btn-1:hover {
+  color: white;
+}
+
+#btn-2 {
+  background-image: url(../../assets/svg/Polygon\ Luminary.svg);
+}
+
+.cssbuttons-io:hover {
+  color: white; /* Text color hover */
+}
+
+.cssbuttons-io svg {
+  width: 1.5em;
+  height: 1.5em;
+  margin-right: 0.8em;
+}
+
+.cssbuttons-io span {
+  position: relative;
+  z-index: 10;
+  display: inline-flex;
+  align-items: center;
+  padding: 0.8em 1.2em 0.8em 1.05em;
+  transition: color 0.6s;
+  -webkit-transition: color 0.6s;
+  -moz-transition: color 0.6s;
+  -ms-transition: color 0.6s;
+  -o-transition: color 0.6s;
+}
+
+.cssbuttons-io::before,
+.cssbuttons-io::after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+}
+
+.cssbuttons-io::before {
+  content: "";
+  background: rgb(20, 18, 33); /* Background color */
+  width: 120%;
+  left: -10%;
+  transform: skew(30deg);
+  -webkit-transform: skew(30deg);
+  -moz-transform: skew(30deg);
+  -ms-transform: skew(30deg);
+  -o-transform: skew(30deg);
+  transition: transform 0.6s cubic-bezier(0.3, 1, 0.8, 1);
+  -webkit-transition: transform 0.6s cubic-bezier(0.3, 1, 0.8, 1);
+  -moz-transition: transform 0.6s cubic-bezier(0.3, 1, 0.8, 1);
+  -ms-transition: transform 0.6s cubic-bezier(0.3, 1, 0.8, 1);
+  -o-transition: transform 0.6s cubic-bezier(0.3, 1, 0.8, 1);
+}
+
+.cssbuttons-io:hover::before {
+  transform: translate3d(100%, 0, 0);
+  -webkit-transform: translate3d(100%, 0, 0);
+  -moz-transform: translate3d(100%, 0, 0);
+  -ms-transform: translate3d(100%, 0, 0);
+  -o-transform: translate3d(100%, 0, 0);
+}
+
+.cssbuttons-io:active {
+  transform: scale(0.95);
+  -webkit-transform: scale(0.95);
+  -moz-transform: scale(0.95);
+  -ms-transform: scale(0.95);
+  -o-transform: scale(0.95);
+}
+
+/* Button admin */
+
+#btn {
+  width: 150px;
+  height: 50px;
+  border-radius: 5px;
+  border: none;
+  transition: all 0.5s ease-in-out;
+  font-size: 20px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  background: #040f16;
+  color: #f5f5f5;
+}
+
+#btn:hover {
+  box-shadow: 0 0 20px 0px #2e2e2e3a;
+}
+
+#btn #icon {
+  position: absolute;
+  height: 25px;
+  width: 25px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.5s;
+  -webkit-transition: all 0.5s;
+  -moz-transition: all 0.5s;
+  -ms-transition: all 0.5s;
+  -o-transition: all 0.5s;
+}
+
+#btn #text {
+  transform: translateX(40px);
+  -webkit-transform: translateX(40px);
+  -moz-transform: translateX(40px);
+  -ms-transform: translateX(40px);
+  -o-transform: translateX(40px);
+}
+
+#btn:hover #icon {
+  width: 130px;
+}
+
+#btn:hover #text {
+  transition: all 0.5s;
+  opacity: 0;
+}
+
+#btn:focus {
+  outline: none;
+}
+
+#btn:active #icon {
+  transform: scale(0.85);
+}