diff --git a/public/index.html b/public/index.html
index 465eb7f..21fe8b4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,10 +1,45 @@
+
SingUp-SignIn
+
+
+
+
\ No newline at end of file
diff --git a/public/style.css b/public/style.css
index 0bd8d02..766c0bd 100644
--- a/public/style.css
+++ b/public/style.css
@@ -4,4 +4,153 @@ body{
min-height: 100vh;
font-family: 'Jost', sans-serif;
background: linear-gradient(to bottom, #0f0c29, #302b63, #24243e);
-}
\ No newline at end of file
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+#main{
+ text-align: center;
+ width: 350px;
+ height: 500px;
+ background: linear-gradient(to bottom,#0f0c29, #302b63, #24243e);
+ border-radius: 10px;
+ margin-top: 70px;
+ box-shadow: 5px 5px 40px 10px;
+ overflow: hidden;
+}
+.inputforms{
+ padding: 70px 70px 70px 60px;
+ /* margin:auto; */
+ margin-left: 5px;
+}
+
+input{
+ width: 200px;
+ /* height: 30px; */
+ padding: 10px;
+ border-radius: 5px;
+ border: none;
+ margin-bottom:15px;
+}
+
+button{
+ background-color: blueviolet;
+ width: 160px;
+ height: 40px;
+ color: white;
+ /* margin-bottom: 30px; */
+ margin-left: 5px;
+ cursor:pointer;
+ border-radius: 5px;
+ border: none;
+}
+button:hover{
+ background-color: #0f0c29;
+}
+
+label{
+ color:white;
+ font-size: 30px;
+ display: flex;
+ justify-content: center;
+ cursor: pointer;
+ transition: 0.8s ease-in-out;
+}
+
+.signin label{
+ color: #302b63;
+ /* transition: scale(1); */
+}
+
+#link{
+ display: none;
+}
+.signin{
+ background-color:white;
+ border-radius: 90% / 15%;
+ height: 500px;
+ width: 350px;
+ margin-top: 120px;
+ transform:translateY(-50px);
+ transition: 1.5s ease-in-out;
+}
+
+.signin input{
+ background-color:whitesmoke;
+ outline: none;
+}
+
+#link:checked ~ .signin{
+ transform: translateY(-400px);
+}
+#link:checked ~ .signin label{
+ transform: scale(1.25);
+}
+
+#link:checked ~ .signup label{
+ transform: scale(0.75);
+}
+
+nav{
+ display: flex;
+ background-color: white;
+ top: 0;
+ height: 4rem;
+ width: 100vw;
+ position: fixed;
+}
+nav a{
+ display: flex;
+ align-items: center;
+ text-decoration: none;
+ color: black;
+ margin-left: 2px;
+ font-weight: bold;
+ font-size: 20px;
+}
+nav ul{
+ display: flex;
+ justify-content: flex-end;
+ list-style-type: none;
+ align-items: flex-start;
+ padding: 0;
+ margin: 0;
+ width: 100%;
+ margin-right: 2rem;
+}
+nav ul a{
+ display: flex;
+ align-items: center;
+ padding: 10px;
+ height: 3rem;
+}
+nav ul a:hover{
+ color: teal;
+}
+nav a:hover{
+ color: aquamarine;
+}
+@media only screen and (max-width:500px){
+ nav{
+ display: inline;
+ justify-content: center;
+ top: 0;
+ height: 15rem;
+ position: absolute;
+ }
+ nav ul{
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ margin-left: 35vw;
+ }
+ nav a{
+ margin-left: 5px;
+ display: flex;
+ justify-content: center;
+ }
+ #main{
+ margin-top: 250px;
+ }
+}