Skip to content
This repository was archived by the owner on Jul 23, 2025. It is now read-only.

Create Landing and Signup screens #266

Open
mallika2011 wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

Create Landing and Signup screens #266

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
275bb87
Frontend for login-signup screens added
mallika2011 Mar 29, 2020
1dc946b
Signup and login screens added
mallika2011 Mar 29, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions src-view/Routes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,18 @@ import React from 'react'
import LandingView from './views/LandingView'
import { Router } from '@reach/router'
import LoginView from './views/LoginView'
import Transition from './views/Transition'
// import Login from './views/Login'
// import Signup from './views/Signup'

import SignUpView from './views/SignUpView'
export default () => {
return (
<Router>
<LandingView path='/' />
<LoginView path='/login' />
<SignUpView path='/sign-up' />
<Transition path='/login-signup' />
{/* <Login path='/login' /> */}
{/* <Signup path='/sign-up' /> */}
</Router>
)
}
152 changes: 152 additions & 0 deletions src-view/assets/styles/Transition.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@
@import './variables';
@import './mixins';

body {

font-family: "Montserrat", sans-serif;
// background: rgb(15,11,84);
// background: radial-gradient(circle, rgba(15,11,84,1) 0%, rgba(29,29,173,1) 45%, rgba(0,212,255,1) 96%);
background-image: linear-gradient(to right, var(--violet), var(--green));

}

h1 {
text-align: center;
color: #ffffff;
}

.title{
color: red;
}

.tank-title {
font-size: 30px;
}

//Custom Fonts
@import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap");

.App {
text-align: center;
display: flex;
justify-content: center;
align-items: center;
font-family: "Open Sans", sans-serif;
}

.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 40vmin;
pointer-events: none;
}

.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}

.App-link {
color: #61dafb;
}

@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

//Login Main Container
.login {
background-color:red;
width: 27em;
height: 40em;
//min-height: 44em;
display: flex;
justify-content: center;
align-items: center;
margin-top: 150px;
position: relative;
z-index: 99;
.container {
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
box-shadow: 0px 0px 12px 2px rgba(15, 15, 15, 0.2);
border-radius: 4px;
position: relative;
z-index: 99;
width: 100%;
height: 100%;
z-index: 99;
padding: 17px 10px;
//transition: transform 200ms ease-in-out;
}
.rightSide {
display: flex;
flex-direction: column;
justify-content: center;
height: 90%;
background-color:#4830C2;
width: 100%;
position: absolute;
right: -34%;
border-radius: 6px;
z-index: 1;
transition: all 400ms ease-in-out;
cursor: pointer;
box-shadow: 0px 0px 12px 2px rgba(15, 15, 15, 0.281);

&.right {
right: -40%;
align-items: flex-end;
background-color:#4830C2;
&:hover {
right: -45%;
}
}
&.left {
right: 40%;
align-items: flex-start;
background-color:#00E4BF;
&:hover {
right: 45%;
}
}

.text {
font-size: 21px;
font-weight: 500;
color: #fff;
margin-right: 3em;
margin-left: 3em;
}
}
}

//Button
.btn {
font-size: 21px;
padding: 5px 20px;
border: 0;
background-color: #3498db;
color: #fff;
border-radius: 3px;
transition: all 250ms ease-in-out;
cursor: pointer;
&:hover {
background-color: #2386c8;
}
&:focus {
outline: none;
}
}
94 changes: 94 additions & 0 deletions src-view/assets/styles/login-signup-styles.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
@import './variables';
@import './mixins';

.baseContainer {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
.header {
font-size: 24px;
font-family: "Open Sans", sans-serif;
}

.content {
display: flex;
flex-direction: column;

.image {
width: 21em;
img {
width: 100%;
height: 100%;
}
}

.form {
margin-top: 2em;
display: flex;
flex-direction: column;
align-items: center;

.formGroup {
display: flex;
flex-direction: column;
align-items: flex-start;
width: fit-content;
label {
font-size: 20px;
}
input {
margin-top: 6px;
min-width: 18em;
height: 37px;
padding: 0px 10px;
font-size: 16px;
font-family: "Open Sans", sans-serif;
background-color: #f3f3f3;
border: 0;
border-radius: 4px;
margin-bottom: 31px;
transition: all 250ms ease-in-out;
&:hover {
background-color: #ffffff;
box-shadow: 0px 0px 14px 0.3px #0e81ce96;
}

&:focus {
outline: none;
box-shadow: 0px 0px 12px 0.8px #3474dbb2;
}
}
}
}
}

.footer {
margin-top: 3em;
}
.btn {
box-shadow: 3px 4px 0px 0px #1564ad;
background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
background-color:#79bbff;
border-radius:5px;
border:1px solid #337bc4;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
font-weight:bold;
padding:12px 44px;
text-decoration:none;
text-shadow:0px 1px 0px #528ecc;
}
.btn:hover {
background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
background-color:#378de5;
}
.btn:active {
position:relative;
top:1px;
}

}
4 changes: 4 additions & 0 deletions src-view/css/login.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
.login-container {
display: flex;
justify-content: center;
}

.test{
background-color: brown;
}
Loading