Skip to content

Commit e4feb84

Browse files
Merge pull request #232 from NikitaMasand/loginscreenfrontend
login screen front end issue
2 parents ea47b0e + 1858bbc commit e4feb84

15 files changed

+9680
-8660
lines changed
5.03 KB
Loading

src-view/assets/images/topleft.png

4.63 KB
Loading
Lines changed: 81 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,81 @@
1-
@import './mixins';
2-
3-
.loginDiv {
4-
display: flex;
5-
justify-content: center;
6-
align-content: center;
7-
flex-direction: column;
8-
align-self: center;
9-
flex-shrink: 1;
10-
padding: 5rem 0rem;
11-
width: 80%;
12-
max-width: 36rem;
13-
14-
>a {
15-
cursor: pointer;
16-
align-self: center;
17-
margin-top: 1rem;
18-
}
19-
20-
>h1 {
21-
align-self: center;
22-
font-weight: 400;
23-
}
24-
25-
@include for-desktop {
26-
box-shadow: 0px 0px 30px -2px rgba(150, 144, 150, 0.85);
27-
padding: 5rem 3rem;
28-
width: 50%;
29-
30-
}
31-
32-
&Wrapper {
33-
display: flex;
34-
flex-direction: column;
35-
height: 100%;
36-
justify-content: center;
37-
}
38-
39-
.loginForm {
40-
display: flex;
41-
flex-direction: column;
42-
margin: 2rem 0 0 0;
43-
44-
>button {
45-
width: 100%;
46-
margin: 2rem 0 0 0;
47-
}
48-
}
49-
}
1+
@import './mixins';
2+
3+
.loginpage {
4+
5+
.bottomright {
6+
>img {
7+
display: flex;
8+
float: right;
9+
width: 20rem;
10+
height: 20rem;
11+
}
12+
}
13+
.topleft {
14+
>img {
15+
display: flex;
16+
float: left;
17+
width: 20rem;
18+
height: 20rem;
19+
}
20+
}
21+
.loginDiv {
22+
display: flex;
23+
flex-direction: column;
24+
padding-left: 15rem;
25+
flex-shrink: 1;
26+
width: 60%;
27+
28+
29+
>h1 {
30+
color: #555555;
31+
font-size: 3.5rem;
32+
align-self: center;
33+
font-weight: 400;
34+
}
35+
36+
@include for-desktop {
37+
padding: 5rem 0rem;
38+
width: 50%;
39+
}
40+
41+
&Wrapper {
42+
display: flex;
43+
flex-direction: column;
44+
padding-left: 15rem;
45+
width: 78%;
46+
height: 60%;
47+
}
48+
49+
.forgotcontent {
50+
color: #555555;
51+
padding-left: 30%;
52+
padding-top: 2%;
53+
font-size: 1rem;
54+
font-family: sans-serif;
55+
font-style: normal;
56+
font-weight: normal;
57+
>a {
58+
color: #C25FFF;
59+
cursor: pointer;
60+
align-self: center;
61+
margin-top: 1rem;
62+
text-decoration-line: underline;
63+
}
64+
}
65+
.loginForm {
66+
display: flex;
67+
flex-direction: column;
68+
margin: 2rem 0 0 0;
69+
70+
>button {
71+
width: 100%;
72+
margin: 2rem 0 0 0;
73+
background: #C25FFF;
74+
border-radius: 1rem;
75+
color: #FFFFFF;
76+
77+
}
78+
}
79+
}
80+
81+
}
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.navbar {
2+
display: flex;
3+
margin: 3rem;
4+
5+
.navRight {
6+
font-family: sans-serif;
7+
font-style: normal;
8+
font-weight: 600;
9+
flex-grow: 1;
10+
font-size: 1.75rem;
11+
.about {
12+
float: right;
13+
color: #555555;
14+
padding: 1rem;
15+
}
16+
.signup {
17+
float: right;
18+
color: #C25FFF;
19+
padding: 1rem;
20+
}
21+
}
22+
}
23+

src-view/components/NavbarLogin.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from 'react'
2+
import { Link } from '@reach/router'
3+
import Masterlogo from '../assets/logo/master-logo.png'
4+
import styles from '../assets/styles/components/NavbarLogin.module.scss'
5+
6+
const Navbar = () => {
7+
return (
8+
<div className={styles.navbar}>
9+
<Link to='/'>
10+
<img src={Masterlogo} />
11+
</Link>
12+
<div className={styles.navRight}>
13+
<div className={styles.signup}>
14+
Signup
15+
</div>
16+
<div className={styles.about}>
17+
About
18+
</div>
19+
</div>
20+
</div>
21+
)
22+
}
23+
export default Navbar
5.03 KB
Loading

src-view/dist/index.html

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
<!DOCTYPE html>
2-
<html>
3-
<head>
4-
<title>MentorFix</title>
5-
<meta charset="utf-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1">
7-
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
8-
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300i,400,600,700&display=swap" rel="stylesheet">
9-
<link rel="stylesheet" href="/src-view.e31bb0bc.css"></head>
10-
<body>
11-
<div id="root"></div>
12-
</body>
13-
<script src="/src-view.e31bb0bc.js"></script>
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>MentorFix</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
8+
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300i,400,600,700&display=swap" rel="stylesheet">
9+
<link rel="stylesheet" href="/src-view.e31bb0bc.css"></head>
10+
<body>
11+
<div id="root"></div>
12+
</body>
13+
<script src="/src-view.e31bb0bc.js"></script>
1414
</html>

0 commit comments

Comments
 (0)