microserviciile de register, login finalizate

knowyourfood/views/layouts/CSS/styleAuth.css

@@ -0,0 +1,148 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Josefin Sans', sans-serif;
+  }
+  
+  html,
+  body{
+    height: 100%;
+  }
+  
+  body{
+    background-image: url("../Images/background/background.jpg");
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+  }
+  
+  body{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
+  }
+  
+  h1{
+    color: white;
+    text-shadow:
+        -1px -1px 0 #000,
+         0   -1px 0 #000,
+         1px -1px 0 #000,
+         1px  0   0 #000,
+         1px  1px 0 #000,
+         0    1px 0 #000,
+        -1px  1px 0 #000,
+        -1px  0   0 #000;
+  }
+  
+  .hr1{
+    width: 70%;
+  }
+  
+  .Title{
+    margin: 3vh;
+    margin-top: 0;
+    font-size: 3rem;
+  }
+  
+  input, button{
+    margin: 1rem;
+    margin-left: 0;
+    margin-right: 0;
+    background-color: #60FF8C;
+    border: 0.1em solid black;
+    border-radius: 20px;
+    padding: 1vh;
+    padding-left: 5vh;
+    padding-right: 5vh;
+    min-width: 100%;
+    cursor: default;
+  }
+  
+  button{
+    background-color: #FF5555
+  }
+  
+  button:hover{
+    background-color: #FF2B2B;
+    cursor: pointer;
+  }
+  
+  .Inputs{
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .Inputs > *, button{
+    padding: 1rem;
+  }
+  
+  input[type="radio"]{
+    margin:0;
+  }
+  
+  input:focus{
+    outline: none;
+  }
+  
+  .LoginButtons{
+    width: 70%;
+  }
+
+  .LoginForm{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 100%;
+  }
+
+  .errorStyle{
+    text-align: center;
+    color: white;
+  }
+
+  .LoginButtons hr{
+    width:100%;
+  }
+  
+  .BigContainer{
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 20px;
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 2rem;
+    transform: scale(1);
+    flex: 100%;
+    width:50%;
+  }
+  
+  @media screen and (max-width: 800px){
+    *{
+       overflow: hidden;
+    }
+    .BigContainer{
+      margin-top: 5vh;
+      margin-bottom: 5vh;
+      min-width: 70%;
+      transform: scale(1);
+    }
+    .Inputs > *{
+      width: 100%;
+    }
+    h1{
+      font-size: 1rem;
+      text-align: center;
+    }
+    .LoginButtons{
+        width:100%;
+    }
+    .hr1{
+        width:100%;
+    }
+  }
+  

knowyourfood/views/layouts/CSS/styleMain.css

@@ -0,0 +1,100 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Josefin Sans', sans-serif;
+}
+
+html,
+body {
+    height: 100%;
+}
+
+body {
+    background-image: url("../Images/background/background.jpg");
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+h1, h3 {
+    color: white;
+    text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000;
+}
+
+.Title {
+    margin: 5vh;
+    font-size: 3rem;
+}
+
+button {
+    margin: 1rem;
+    background-color: #60FF8C;
+    border: 0.1em solid black;
+    border-radius: 20px;
+    padding: 1vh;
+    padding-left: 5vh;
+    padding-right: 5vh;
+    max-width: 100%;
+    cursor: default;
+    width: 100%;
+}
+
+    button:hover {
+        margin: 1rem;
+        background-color: #FF5555;
+        border: 0.1em solid black;
+        border-radius: 20px;
+        padding: 1vh;
+        padding-left: 5vh;
+        padding-right: 5vh;
+        max-width: 100%;
+        cursor: pointer;
+        width: 100%;
+    }
+
+.RegisterButton {
+    margin-bottom: 0;
+}
+
+    .RegisterButton:hover {
+        margin-bottom: 0;
+        cursor: pointer;
+    }
+
+.LoginButtons {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 0;
+    margin-top: 0;
+}
+
+.BigContainer {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    transform: scale(1.5);
+    flex: 100%;
+}
+
+@media screen and (max-width: 888px) {
+    .BigContainer {
+        width: 30%;
+    }
+
+    h1, h3 {
+        font-size: 1rem;
+        text-align: center;
+    }
+}