diff --git a/public/index.html b/public/index.html
index 465eb7f..1f1e367 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,10 +1,47 @@
-
-
-
- SingUp-SignIn
-
-
-
-
-
+
+
+
+
+ SingUp-SignIn
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/public/style.css b/public/style.css
index 0bd8d02..af480a8 100644
--- a/public/style.css
+++ b/public/style.css
@@ -4,4 +4,157 @@ body{
min-height: 100vh;
font-family: 'Jost', sans-serif;
background: linear-gradient(to bottom, #0f0c29, #302b63, #24243e);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+nav{
+ top:0;
+ height: 4rem;
+ width: 100vw;
+ position: fixed;
+ background-color:#a9a9d1;
+ display: flex;
+}
+nav a {
+ display: flex;
+ margin-left: 2px;
+ text-decoration: none;
+ color: black;
+ font-weight: bold;
+ font-size: 30px;
+ align-items: center;
+}
+nav ul{
+ display: flex;
+ justify-content: flex-end;
+ list-style: none;
+ padding: 0;
+ margin:0;
+ margin-right: 1.5rem;
+ width: 100%;
+ align-items: flex-start;
+}
+nav li{
+ padding-left: 30px;
+ margin-right: 0;
+}
+nav ul a{
+ display: flex;
+ align-items: center;
+ height: 3rem;
+ text-decoration: none;
+ color: #4e1c77;
+ font-size: medium;
+ padding-top: 10px;
+}
+nav ul a:hover{
+ color: #0f0c29;
+ font-weight: bold;
+}
+.main {
+ width: 350px;
+ height: 500px;
+ text-align: center;
+ background: linear-gradient(to bottom, #0f0c29, #302b63, #24243e);
+ box-shadow: 0px 0px 30px 15px black;
+ border-radius: 10px;
+ margin-top: 80px;
+ overflow: hidden;
+}
+
+
+#check{
+ display: none;
+}
+ label {
+ display: flex;
+ justify-content: center;
+ color: white;
+ font-size: 35px;
+ cursor: pointer;
+ transition: all ease-in-out;
+
+
+}
+.signin-box label{
+ color: #0f0c29;
+ transform: scale(.6);
+}
+
+.inputs{
+ padding: 80px 80px 80px 60px;
+ margin: auto;
+
+}
+input{
+padding: 10px;
+margin-bottom: 20px;
+border-radius: 5px;
+border: none;
+width: 200px;
+outline: none;
+background-color: #e6d4f5;
+}
+button{
+ padding: 10px;
+ width: 180px;
+ border-radius: 5px;
+ border: none;
+ background-color:#0f0c29 ;
+ color: white;
+ font-size: 18px;
+ margin-bottom: 50PX;
+ margin-left: 8px;
+}
+button:hover{
+ background-color: #4e1c77;
+}
+
+.signin-box {
+ background-color: white;
+ border-radius: 60% / 10%;
+ height: 500px;
+ width: 349px;
+ margin-top: 80px;
+ transform: translateY( -120px);
+ transition: .10s ease-in-out;
+}
+
+.signin-box input{
+ background-color: #e6d4f5;
+ outline: none;
+}
+
+
+#check:checked ~ .signin-box{
+ transform: translateY(-470px);
+}
+#check:checked ~ .signin-box label{
+ transform: scale(1);
+}
+#check:checked ~ .singup-box label{
+ transform: scale(.6);
+}
+@media only screen and (max-width: 600px){
+ nav{
+ display: inline;
+ justify-content: center;
+ top:0;
+ height: 15rem;
+ position:absolute ;}
+ nav ul{
+ display: flex;
+ justify-content:center;
+ flex-direction: column;
+ margin-left: 40vw;
+ }
+ nav a {
+ margin-left: 5px;
+ display: flex;
+ justify-content: center;
+ }
+ .main{
+ margin-top: 260px;
+ }
}
\ No newline at end of file