diff --git a/login.html b/login.html
new file mode 100644
index 00000000..f4de8fa9
--- /dev/null
+++ b/login.html
@@ -0,0 +1,133 @@
+
+
+
+
+ Registration Page
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 00000000..607d8d09
--- /dev/null
+++ b/style.css
@@ -0,0 +1,154 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap");
+*{
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family:'Urbanist', sans-serif;
+}
+:root{
+ --var-primary-color: #2888E8FF
+}
+html{
+ font-size:62.5%;
+
+}
+h1,h2,h3,h4{
+ font-family:'Lexend Deca', sans-serif;
+}
+h1{
+ font-size:4.8rem;
+}
+h2{
+ font-size:3rem;
+}
+p{
+ font-size: 1.6rem;
+ letter-spacing: 0.08rem;
+}
+button, input[type="submit"]{
+ border: .1rem solid #fff;
+ outline: none;
+ padding: .6rem 1.2rem;
+ font-size: 1.7rem;
+ text-transform: capitalize;
+ letter-spacing: 0.01rem;
+ background-color: transparent;
+ color: #fff;
+ cursor: pointer;
+}
+
+.registration-header{
+ height: 100vh;
+ background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url("img/img1.jpeg");
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: center;
+}
+.container{
+ height:10vh;
+ width: 80%;
+ margin:auto;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+}
+.logo a{
+ font-size: 2.4rem;
+ font-weight: bold;
+ color: #fff;
+ text-decoration: none;
+}
+
+main{
+ min-height: 80vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+.registration, .login{
+ min-height: 30rem;
+ min-width: 40vw;
+ background-color: aqua;
+}
+.grid-two--column{
+ display: grid;
+ grid-template-columns: repeat(2,1fr);
+}
+.form-text{
+ height: inherit;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.3)),url("img/img2.jpg");
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: center;
+ color: #fff;
+ padding: 3rem 2rem;
+}
+.form-text p{
+ width: 30ch;
+ text-align: center;
+ margin: 2rem 0 3rem 0;
+}
+.form-text button{
+ background-color:#fff;
+ color: #000;
+
+}
+.form-text button:hover{
+ background-color: transparent;
+ color: #fff;
+}
+.registration-form, .login-form{
+ width: 100%;
+ min-height: 45vh;
+ background-color: #fff;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+}
+.registration-form p, .login-form p{
+ margin: 1rem 0 .7rem 0;
+}
+.social-icons{
+ display: flex;
+ gap: 1.4rem;
+ margin: 1.6rem 0 .6rem 0;
+}
+.fa-brands{
+ width:4rem;
+ height: 4rem;
+ border-radius: 50%;
+ border: 0.1rem solid #ccc;
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 1.6rem;
+}
+input{
+ width: 20rem;
+ margin: .7rem 0;
+ border: none;
+ background-color: #e8e8e8;
+ padding: 1rem 1.8rem;
+ letter-spacing: 0.1rem;
+}
+input[type="submit"]{
+ margin-top: 1rem;
+ min-width: 10rem;
+ background-color: var(--var-primary-color);
+ color:#fff;
+}
+.registration:not(.login-section--display){
+ display: none;
+}
+.login-section--display .registration{
+ display: block;
+}
+.login-section--display .login{
+ display: none;
+}
\ No newline at end of file