diff --git a/src/asset/icons/password.png b/src/asset/icons/password.png new file mode 100644 index 0000000..feea61f Binary files /dev/null and b/src/asset/icons/password.png differ diff --git a/src/asset/icons/username.png b/src/asset/icons/username.png new file mode 100644 index 0000000..5e3112f Binary files /dev/null and b/src/asset/icons/username.png differ diff --git a/src/asset/imgs/cover.png b/src/asset/imgs/cover.png new file mode 100644 index 0000000..e7424b0 Binary files /dev/null and b/src/asset/imgs/cover.png differ diff --git a/src/asset/imgs/devc.png b/src/asset/imgs/devc.png new file mode 100644 index 0000000..05cb66b Binary files /dev/null and b/src/asset/imgs/devc.png differ diff --git a/src/asset/imgs/devc1.png b/src/asset/imgs/devc1.png new file mode 100644 index 0000000..90dff3f Binary files /dev/null and b/src/asset/imgs/devc1.png differ diff --git a/src/asset/imgs/devc2.png b/src/asset/imgs/devc2.png new file mode 100644 index 0000000..09e244d Binary files /dev/null and b/src/asset/imgs/devc2.png differ diff --git a/src/asset/imgs/devc3.png b/src/asset/imgs/devc3.png new file mode 100644 index 0000000..15ebd18 Binary files /dev/null and b/src/asset/imgs/devc3.png differ diff --git a/src/asset/imgs/transparent.png b/src/asset/imgs/transparent.png new file mode 100644 index 0000000..e886460 Binary files /dev/null and b/src/asset/imgs/transparent.png differ diff --git a/src/container/Full.jsx b/src/container/Full.jsx index cac8b59..77ce78a 100644 --- a/src/container/Full.jsx +++ b/src/container/Full.jsx @@ -8,7 +8,7 @@ import { bool } from 'prop-types' // Home and Auth Pages import Home from '../views/Home/HomeContainer' import Login from '../views/Login/LoginContainer' - +import Signup from '../views/Signup/SignupContainer' // Private route import { connect } from 'react-redux'; import PrivateRoute from './PrivateRoute'; @@ -25,6 +25,7 @@ class Full extends Component { return ( + diff --git a/src/styles/Login.scss b/src/styles/Login.scss new file mode 100644 index 0000000..aef5408 --- /dev/null +++ b/src/styles/Login.scss @@ -0,0 +1,136 @@ +.login { + margin: 0; + display: flex; + min-height: 100vh; + justify-content: center; + align-items: center; + background: #E5E5E5; + font-family: "Poppins", sans-serif, 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + .carousel { + background-color: white; + background-size: cover; + width: 300px; + height: 300px; + align-content: center; + padding: 40px; + border-radius: 50%; + left: 90px; + z-index: 5; + } + + .carousel div img { + width: 250px; + height: 220px; + border-radius: 50%; + + } + .carousel-indicators li { + width: 10px; + height: 10px; + border-radius: 100%; + } + .carousel-indicators { + bottom: -80px; + } + .box { + padding: 50px; + background: #ffffff; + box-shadow: 0px 116.543px 327.368px rgba(0, 0, 0, 0.25); + border-radius: 20px; + min-width: 80%; + } + + .column1 { + width: 100%; + background-color: transparent; + height: 100%; + position: absolute; + top: 0; + left: 0; + background-image: url("../asset/imgs/transparent.png"); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + // z-index: 3; + } + + .column2 { + flex: 1; + } + + h1 { + font-weight: 600; + font-size: 30px; + text-align: center; + } + + .login-form { + text-align: center; + .icon { + margin: 20px; + } + .input-group { + display: flex; + width: 100%; + height: 60px; + background: #e8f0fe; + opacity: 0.99; + border: 2px solid rgb(91, 116, 227); + box-sizing: border-box; + box-shadow: 0px 13.524px 27.048px rgba(0, 0, 0, 0.15); + border-radius: 56.3917px; + margin: 10px 0px 10px 0px; + align-content: center; + padding: 20px; + .input { + flex: 1; + padding-left: 10px; + border: none; + background-color: transparent !important; + } + input:focus, + textarea:focus, + select:focus { + outline: none; + background-color: transparent !important; + } + img { + height: 30px; + } + } + } + + .button { + width: 100%; + background-color: rgba(83, 66, 235, 0.97); + color: white; + opacity: 0.99; + backdrop-filter: blur(210.981px); + border: 3.381px solid rgb(66, 88, 211); + box-sizing: border-box; + border-radius: 56.3917px; + margin: 10px 0px 10px 0px; + align-content: center; + + padding: 20px; + } + + .pass { + color: black; + } + + .regain { + color: rgb(65, 44, 255); + } + + .p1 { + float: inline-end; + color: black; + } + + .p2 { + float: inline-end; + color: black; + } + } + \ No newline at end of file diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss new file mode 100644 index 0000000..69f2842 --- /dev/null +++ b/src/styles/_fonts.scss @@ -0,0 +1 @@ +@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Poppins:400,600,700,800&display=swap'); \ No newline at end of file diff --git a/src/styles/fonts.scss b/src/styles/fonts.scss new file mode 100644 index 0000000..19419d5 --- /dev/null +++ b/src/styles/fonts.scss @@ -0,0 +1,3 @@ +@import url('https://fonts.googleapis.com/css?family=Pacifico'); +@import url('https://fonts.googleapis.com/css?family=Kaushan+Script'); + diff --git a/src/styles/landing.scss b/src/styles/landing.scss new file mode 100644 index 0000000..4305064 --- /dev/null +++ b/src/styles/landing.scss @@ -0,0 +1,83 @@ +.nav { +width: 100%; + float: right; + padding: 0; + list-style: none; + padding: 0px 35px 0px 0px; + margin: 0px 30px 0px 0px; + +} +#skin { + font-family: Source Sans Pro; + padding: 0px 0px 0px 70px; + margin: 0px 0px 0px 20px; +} +.nav li { + float: right; + text-align:right; + padding: 0px 0px 0px 5px; + margin: 0px 0px 0px 5px; +} +.nav li a { + display: block; + padding: 0px 0px 0px 5px; + margin: 0px 0px 0px 5px; + text-decoration: none; + text-align: right; + float: right; +} +.style { + font-family: Kaushan Script; +} +.polygon { + position: absolute; + width: 390px; + height: 517px; + left: 860px; + top: 80px; + background: rgb(96, 118, 192); + border-radius: 20px; + transform: rotate(-90deg); +} + +.out { + padding: 50px; + font-style: normal; + font-weight: normal; + font-family: Kaushan Script; + font-size: 60px; + line-height: 116px; + color: #1A348D; +} + +.text { + position: absolute; + width: 624px; + height: 100px; + left: 57px; + top: 508px; + font-family: Pacifico; + font-style: normal; + font-weight: normal; + font-size: 38px; + line-height: 146.28%; + color: #1A348D; +} +.button { + position: absolute; + width: 242px; + height: 86px; + left: 823px; + top: 613px; + background: #1A348D; + border-radius: 30px; +} + +.practice { + color: red; +} +.mynav { + position: sticky; + top: 0; + background-color: #1A348D; +} \ No newline at end of file diff --git a/src/styles/signup.scss b/src/styles/signup.scss new file mode 100644 index 0000000..b38f6d7 --- /dev/null +++ b/src/styles/signup.scss @@ -0,0 +1,135 @@ +.signup { + margin: 0; + display: flex; + min-height: 100vh; + justify-content: center; + align-items: center; + background: #E5E5E5; + font-family: "Poppins", sans-serif, 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + .carousel { + background-color: white; + background-size: cover; + width: 300px; + height: 300px; + align-content: center; + padding: 40px; + border-radius: 50%; + left: 90px; + z-index: 5; + } + + .carousel div img { + width: 250px; + height: 220px; + border-radius: 50%; + + } + .carousel-indicators li { + width: 10px; + height: 10px; + border-radius: 100%; + } + .carousel-indicators { + bottom: -80px; + } + .box { + padding: 50px; + background: #ffffff; + box-shadow: 0px 116.543px 327.368px rgba(0, 0, 0, 0.25); + border-radius: 20px; + min-width: 80%; + } + + .column1 { + width: 100%; + background-color: transparent; + height: 100%; + position: absolute; + top: 0; + left: 0; + background-image: url("../asset/imgs/transparent.png"); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + // z-index: 3; + } + + .column2 { + flex: 1; + } + + h1 { + font-weight: 600; + font-size: 30px; + text-align: center; + } + + .signup-form { + text-align: center; + .icon { + margin: 20px; + } + .input-group { + display: flex; + width: 100%; + height: 60px; + background: #e8f0fe; + opacity: 0.99; + border: 2px solid rgb(91, 116, 227); + box-sizing: border-box; + box-shadow: 0px 13.524px 27.048px rgba(0, 0, 0, 0.15); + border-radius: 56.3917px; + margin: 10px 0px 10px 0px; + align-content: center; + padding: 20px; + .input { + flex: 1; + padding-left: 10px; + border: none; + background-color: transparent !important; + } + input:focus, + textarea:focus, + select:focus { + outline: none; + background-color: transparent !important; + } + img { + height: 30px; + } + } + } + + .button { + width: 100%; + background-color: rgba(83, 66, 235, 0.97); + color: white; + opacity: 0.99; + backdrop-filter: blur(210.981px); + border: 3.381px solid rgb(66, 88, 211); + box-sizing: border-box; + border-radius: 56.3917px; + margin: 10px 0px 10px 0px; + align-content: center; + + padding: 20px; + } + + .pass { + color: black; + } + + .regain { + color: rgb(65, 44, 255); + } + + .p1 { + float: inline-end; + color: black; + } + + .p2 { + float: inline-end; + color: black; + } + } \ No newline at end of file diff --git a/src/styles/styles.scss b/src/styles/styles.scss index bffbfeb..317ca9a 100644 --- a/src/styles/styles.scss +++ b/src/styles/styles.scss @@ -1,5 +1,16 @@ @import "variables.scss"; +@import "Login.scss"; +@import "signup.scss"; p { color: $primaryColor -} \ No newline at end of file +} + +body { + font-family: 'Montserrat', sans-serif, 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif + } + + h1, h2, h3, h4, h5, h6 { + font-family: "Poppins", sans-serif, 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + font-weight: bold + } diff --git a/src/views/Home/Home.jsx b/src/views/Home/Home.jsx index c6994f3..266493d 100644 --- a/src/views/Home/Home.jsx +++ b/src/views/Home/Home.jsx @@ -1,9 +1,53 @@ import React, { Component } from "react"; + class Home extends Component { + render() { - return

Home Page

; + return ( +
+ + + + + + +
+
+

E-Practice

+

Develop a passion of learning, if you do, you will never cease to go

+ +
+ + + ); + } } + + export default Home; diff --git a/src/views/Login/Login.jsx b/src/views/Login/Login.jsx index 8345915..ea31394 100644 --- a/src/views/Login/Login.jsx +++ b/src/views/Login/Login.jsx @@ -1,12 +1,107 @@ -import React, { Component } from 'react' +import React, { Component } from 'react'; +import DevC from '../../asset/imgs/devc.png'; +import DevC1 from '../../asset/imgs/devc1.png'; +import DevC2 from '../../asset/imgs/devc2.png'; +import DevC3 from '../../asset/imgs/devc3.png'; +import UserNameIcon from '../../asset/icons/username.png'; +import PasswordIcon from '../../asset/icons/password.png'; class Login extends Component { - render(){ - return
- Login Page -
+ render() { + return ( +
+
+
+
+ First slide +
+
+ Second slide +
+
+ Third slide +
+
+ Forth slide +
+
+ Fifth slide +
+
+ Sixth slide +
+
+ + + Previous + + + + Next + +
    +
  1. +
  2. +
  3. +
  4. +
  5. +
  6. +
+
+
+
+
+
+
+
+
+
+

Sign In

+
+ facebook_signin + google_signin +
+
+ ui + +
+
+
+ ui + +
+
+ +
+

+ Forgot your + {' '} + + password? + +

+

+ Don't have an account? + {' '} + + click here. + + {' '} +           + {' '} + Need help? +

+
+
+
+
+
+
+ ); } } -export default Login \ No newline at end of file +export default Login; diff --git a/src/views/Signup/Signup.jsx b/src/views/Signup/Signup.jsx new file mode 100644 index 0000000..f5c1dce --- /dev/null +++ b/src/views/Signup/Signup.jsx @@ -0,0 +1,101 @@ +import React, { Component } from 'react'; +import DevC from '../../asset/imgs/devc.png'; +import DevC1 from '../../asset/imgs/devc1.png'; +import DevC2 from '../../asset/imgs/devc2.png'; +import DevC3 from '../../asset/imgs/devc3.png'; +import UserNameIcon from '../../asset/icons/username.png'; +import PasswordIcon from '../../asset/icons/password.png'; + + +class Signup extends Component { + render() { + return ( +
+
+
+
+ First slide +
+
+ Second slide +
+
+ Third slide +
+
+ Forth slide +
+
+ Fifth slide +
+
+ Sixth slide +
+
+ + + Previous + + + + Next + +
    +
  1. +
  2. +
  3. +
  4. +
  5. +
  6. +
+
+
+
+
+
+
+
+
+
+

Sign Up

+
+ facebook_signup + google_signup +
+
+ ui + +
+
+
+ ui + +
+
+ +
+ +

+ Already have an account? + {' '} + + click here. + + {' '} +           + {' '} + Need help? +

+
+
+
+
+
+
+ ); + } +} + +export default Signup; \ No newline at end of file diff --git a/src/views/Signup/SignupContainer.jsx b/src/views/Signup/SignupContainer.jsx new file mode 100644 index 0000000..bc24161 --- /dev/null +++ b/src/views/Signup/SignupContainer.jsx @@ -0,0 +1,11 @@ +import React, { Component } from 'react' + +import Signup from './Signup' + +class SignupContainer extends Component { + render(){ + return + } +} + +export default SignupContainer \ No newline at end of file