Log In is now responsive

- Added responsiveness to the Log In interface.
kevtorres23 · Jun 8, 2024 · 831a9d8 · 831a9d8
1 parent db20009
commit 831a9d8
Show file tree

Hide file tree

Showing 2 changed files with 128 additions and 28 deletions.
diff --git a/views/login.html b/views/login.html
@@ -13,28  13,30 @@
     </head>
     <body>
         <section class="color-side">
-            <img src="images/astronaut-helmet.png" alt="" width="270px" height="270px">
             <img src="images/astronaut-helmet.png" alt="" width="270px" height="270px" class="astronaut-helmet">
             <h1>Getting Ready</h1>
             <h2>Live the Rocket’s experience. Easy to use.<br>Efficiency guaranteed.</h2>
         </section>
         <section class="login-side">
             <a href="../index.html"><div class="logo">
                 <img src="images/rocket-logo.png" alt="" width="35vw" height="35vw">
-                <span style="font-size: 2vw; margin-left: 10px;">Rocket</span>
                 <span style="font-size: 2rem; margin-left: 10px;">Rocket</span>
             </div></a>
             <h1>Welcome back!</h1>
-            <form action="" class="login-form">
-                <p>Username</p><br>
-                <input type="text" id="username" class="login-input">
-                <p>Password</p><br>
-                <input type="password" id="username" class="login-input" style="margin-bottom: -10px;">
-                <p class="forgot-password">I forgot my password</p>
-            </form>
-            <a href="homepage.html"><button class="sign-in-btn">Sign In</button></a>
-            <div class="or">
-                <div class="gray-line"></div>or<div class="gray-line"></div>
             <div class="form-content">
                 <form action="" class="login-form">
                     <p>Username</p><br>
                     <input type="text" id="username" class="login-input">
                     <p>Password</p><br>
                     <input type="password" id="password" class="login-input" style="margin-bottom: -10px;">
                     <p class="forgot-password">I forgot my password</p>
                 </form>
                 <a href="homepage.html"><button class="sign-in-btn">Sign In</button></a>
                 <div class="or">
                     <div class="gray-line"></div>or<div class="gray-line"></div>
                 </div>
                 <a href="create-account.html"><button class="create-account-btn">Create an account</button></a>
             </div>
-            <a href="create-account.html"><button class="create-account-btn">Create an account</button></a>
         </section>
     </body>
 </html>
diff --git a/views/styles/login_styles.css b/views/styles/login_styles.css
@@ -17,13  17,13 @@ body{
 }
 
 .color-side h1{
-    font-size: 3.5vw;
     font-size: 3.5rem;
 }
 
 .color-side h2{
     text-align: center;
     margin-top: -30px;
-    font-size: 1.3vw;
     font-size: 1.2rem;
     font-weight: 400;
 }
 
@@ -47,7  47,7 @@ body{
 
 .login-side h1{
     margin-top: 10vh;
-    font-size: 1.5vw;
     font-size: 1.3rem;
     font-weight: 500;
 }
 
@@ -58,26  58,33 @@ body{
 }
 
 .login-input{
-    width: 23vw;
     width: 23rem;
     border-radius: 20px;
-    height: 2vw;
     height: 1.8rem;
     border: 1.5px solid #AFAFAF;
     padding-left: 20px;
     padding-right: 20px;
     outline: none;
     font-family: 'DM Sans';
-    margin-bottom: 0.5vw;
     margin-bottom: 0.5rem;
     font-size: 0.8rem;
 }
 
 .login-form{
     align-items: center;
-    margin-top: -1.5vw;
     margin-top: -1.5rem;
 }
 
 .login-form p{
     font-size: 13px;
 }
 
 .form-content{
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 
 .forgot-password{
     text-align: right;
     color: #880AEA !important;
@@ -86,11  93,11 @@ body{
 }
 
 .sign-in-btn{
-    margin-top: 3vw;
     margin-top: 3rem;
     background-color: #880AEA;
     color: white;
     cursor: pointer;
-    padding: 0.8vw 11.2vw;
     padding: 0.65rem 11.2rem;
     border: none;
     font-family: 'DM Sans';
     border-radius: 10px;
@@ -100,27  107,27 @@ body{
 
 .or{
     display: flex;
-    margin-top: 1.5vw;
     margin-top: 1.5rem;
     align-items: center;
     color: #757575;
 }
 
 .gray-line{
-    width: 10vw;
     width: 11rem;
     height: 0.5px;
-    margin-right: 1vw;
-    margin-left: 1vw;
     margin-right: 1rem;
     margin-left: 1rem;
     background-color: #b5b5b5;
 }
 
 .create-account-btn{
-    margin-top: 1.5vw;
     margin-top: 1.5rem;
     background-color: transparent;
     color: #880AEA;
     cursor: pointer;
     font-weight: 500;
     font-family: 'DM Sans';
-    padding: 0.7vw 8.5vw;
     padding: 0.65rem 8.5rem;
     border: solid 1px #880AEA;
     border-radius: 10px;
     font-size: 14px;
@@ -139,4  146,95 @@ body{
 a{
     color: black;
     text-decoration: none;
 }
 
 @media (max-width: 1024px){
     body{
         flex-direction: column-reverse;
     }
 
     .color-side, .login-side{
         width: 100%;
     }
 
     .color-side{
         height: 0;
         padding-top: 20rem;
         padding-bottom: 20rem;
     }
 
     .login-side h1{
         font-size: 1.3rem;
         font-weight: 500;
         margin-bottom: 2rem;
     }
 
     .login-input{
         height: 1.9rem;
         font-size: 0.9rem;
     }
 
     .sign-in-btn{
         padding: 0.7rem 11.2rem;
     }
 
     .create-account-btn{
         padding: 0.6rem 8.5rem;
     }
 }
 
 @media (max-width: 570px){
     .login-input{
         width: 70vw;
     }
 
     .or{
         margin-top: 1rem;
     }
 
     .create-account-btn{
         margin-top: 1rem;
     }
 
     .sign-in-btn, .create-account-btn{
         padding: 0;
         width: 77vw;
         height: 2.3rem;
     }
 
     .color-side{
         height: 0;
         padding-top: 20rem;
         padding-bottom: 20rem;
     }
 
     .color-side h1{
         text-align: center;
         font-size: 13vw;
         margin-right: 2rem;
         margin-left: 2rem;
     }
 
     .color-side h2{
         font-size: 1.1rem;
         margin-right: 1.2rem;
         margin-left: 1.2rem;
     }
 
     .astronaut-helmet{
         width: 50vw;
         height: 50vw;
     }
 
     .gray-line{
         width: 33vw;
     }
 
     .login-side{
         padding-top: 0;
     }
 
     .logo{
         margin-top: -3rem;
     }
 }