├── .gitignore ├── frontend ├── README.md ├── .gitignore ├── src │ ├── images │ │ ├── expenses.jpg │ │ ├── expenses1.png │ │ └── profile_user.jpg │ ├── components │ │ ├── user │ │ │ ├── images │ │ │ │ ├── fb.png │ │ │ │ ├── google.png │ │ │ │ ├── twitter.png │ │ │ │ └── linkedin.png │ │ │ ├── Register.js │ │ │ ├── Login.js │ │ │ └── user.css │ │ ├── Layout.js │ │ ├── home │ │ │ ├── LogoHeader.js │ │ │ ├── ExpenseImage.js │ │ │ ├── CreditFooter.js │ │ │ ├── home.js │ │ │ └── home.css │ │ └── dashboard │ │ │ ├── dashboard.css │ │ │ └── dashboard.js │ ├── App.css │ ├── index.js │ └── App.js ├── public │ └── index.html └── package.json ├── backend ├── app.js └── server.js ├── README.md └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /frontend/README.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /frontend/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /frontend/src/images/expenses.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surajaswal29/expense-tracker/HEAD/frontend/src/images/expenses.jpg -------------------------------------------------------------------------------- /frontend/src/images/expenses1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surajaswal29/expense-tracker/HEAD/frontend/src/images/expenses1.png -------------------------------------------------------------------------------- /frontend/src/images/profile_user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surajaswal29/expense-tracker/HEAD/frontend/src/images/profile_user.jpg -------------------------------------------------------------------------------- /frontend/src/components/user/images/fb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surajaswal29/expense-tracker/HEAD/frontend/src/components/user/images/fb.png -------------------------------------------------------------------------------- /frontend/src/components/user/images/google.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surajaswal29/expense-tracker/HEAD/frontend/src/components/user/images/google.png -------------------------------------------------------------------------------- /frontend/src/components/user/images/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surajaswal29/expense-tracker/HEAD/frontend/src/components/user/images/twitter.png -------------------------------------------------------------------------------- /frontend/src/components/user/images/linkedin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/surajaswal29/expense-tracker/HEAD/frontend/src/components/user/images/linkedin.png -------------------------------------------------------------------------------- /backend/app.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | const bodyParser = require("body-parser"); 3 | 4 | const app = express(); 5 | 6 | module.exports = app; 7 | -------------------------------------------------------------------------------- /backend/server.js: -------------------------------------------------------------------------------- 1 | const app = require("./app"); 2 | 3 | const PORT = "4000"; 4 | 5 | app.listen(PORT, () => { 6 | console.log(`server is up and running in port ${PORT}`); 7 | }); 8 | -------------------------------------------------------------------------------- /frontend/src/App.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | /* font-family: "Montserrat", sans-serif; */ 6 | font-family: "Poppins", sans-serif; 7 | } 8 | -------------------------------------------------------------------------------- /frontend/src/components/Layout.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Home from "./home/home"; 3 | 4 | const Layout = () => { 5 | return ; 6 | }; 7 | 8 | export default Layout; 9 | -------------------------------------------------------------------------------- /frontend/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import App from "./App.js"; 4 | 5 | const root = document.getElementById("root"); 6 | ReactDOM.createRoot(root).render(); 7 | -------------------------------------------------------------------------------- /frontend/src/components/home/LogoHeader.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const LogoHeader = () => { 4 | return ( 5 |
6 |

Expenzie

7 |
8 | ); 9 | }; 10 | 11 | export default LogoHeader; 12 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # expenzie 2 |

Expense Tracker Web App

3 | 4 | App Preview => https://expenzie.netlify.app/ 5 | Application Status => Under Development ⚙ 6 | 7 | ![Alt](https://repobeats.axiom.co/api/embed/d0e0b73a238ef14872deeef895393d4543fc1cf2.svg "Repobeats analytics image") 8 | -------------------------------------------------------------------------------- /frontend/src/components/home/ExpenseImage.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const ExpenseImage = ({ image }) => { 4 | return ( 5 |
6 | Expense 7 |
8 | ); 9 | }; 10 | 11 | export default ExpenseImage; 12 | -------------------------------------------------------------------------------- /frontend/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Expenzie | Track your expenses 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /frontend/src/components/home/CreditFooter.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const creditFooter = () => { 4 | return ( 5 | 15 | ); 16 | }; 17 | 18 | export default creditFooter; 19 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "expenzie", 3 | "version": "1.0.0", 4 | "description": "Expense Tracker App", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "node backend/server.js", 9 | "dev": "nodemon backend/server.js" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/surajaswal29/expenzie.git" 14 | }, 15 | "author": "Suraj Aswal", 16 | "license": "ISC", 17 | "bugs": { 18 | "url": "https://github.com/surajaswal29/expenzie/issues" 19 | }, 20 | "homepage": "https://github.com/surajaswal29/expenzie#readme", 21 | "dependencies": { 22 | "body-parser": "^1.20.1", 23 | "express": "^4.18.2", 24 | "mongoose": "^6.8.3", 25 | "nodemailer": "^6.9.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /frontend/src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | // Bootstrap file 4 | import "bootstrap/dist/css/bootstrap.min.css"; 5 | 6 | // react router 7 | import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; 8 | 9 | // component imports 10 | import Layout from "./components/Layout.js"; 11 | import Login from "./components/user/Login.js"; 12 | import Register from "./components/user/Register.js"; 13 | import Dashboard from "./components/dashboard/dashboard"; 14 | 15 | // css file 16 | import "./App.css"; 17 | 18 | const App = () => { 19 | return ( 20 | 21 | 22 | } /> 23 | } /> 24 | } /> 25 | } /> 26 | 27 | 28 | ); 29 | }; 30 | 31 | export default App; 32 | -------------------------------------------------------------------------------- /frontend/src/components/dashboard/dashboard.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #fff; 3 | } 4 | .profile-box { 5 | padding: 40px; 6 | background-color: #e9e5e5; 7 | position: relative; 8 | border-radius: 10px; 9 | height: 150px; 10 | } 11 | .profile-icon { 12 | width: 70px; 13 | height: 70px; 14 | overflow: hidden; 15 | border-radius: 50%; 16 | border: 3px solid #9c9a9a; 17 | position: absolute; 18 | transform: translate(100%, -100%); 19 | } 20 | .profile-icon img { 21 | height: 100%; 22 | width: 100%; 23 | } 24 | .profile-box p { 25 | font-size: 14px; 26 | } 27 | .dashboard-time-display { 28 | padding: 30px; 29 | background: #000; 30 | height: 150px; 31 | } 32 | .dashboard-time-display h1 { 33 | color: #fff; 34 | } 35 | .dashboard-time-display h4 { 36 | color: #9c9c9c; 37 | } 38 | .dashboard-time-display span { 39 | position: fixed; 40 | } 41 | .total-money-box { 42 | padding: 30px; 43 | background-color: #e9e5e5; 44 | border-radius: 10px; 45 | height: 150px; 46 | } 47 | -------------------------------------------------------------------------------- /frontend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "expenzie", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "bootstrap": "^5.2.3", 10 | "react": "^18.2.0", 11 | "react-bootstrap": "^2.7.0", 12 | "react-dom": "^18.2.0", 13 | "react-router": "^6.6.2", 14 | "react-router-dom": "^6.6.2", 15 | "react-scripts": "^5.0.1", 16 | "web-vitals": "^2.1.4" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test", 22 | "eject": "react-scripts eject" 23 | }, 24 | "eslintConfig": { 25 | "extends": [ 26 | "react-app", 27 | "react-app/jest" 28 | ] 29 | }, 30 | "browserslist": { 31 | "production": [ 32 | ">0.2%", 33 | "not dead", 34 | "not op_mini all" 35 | ], 36 | "development": [ 37 | "last 1 chrome version", 38 | "last 1 firefox version", 39 | "last 1 safari version" 40 | ] 41 | }, 42 | "proxy": "http://localhost:4000" 43 | } 44 | -------------------------------------------------------------------------------- /frontend/src/components/home/home.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | // Main Image 4 | import expenses from "../../images/expenses1.png"; //banner image 5 | //Header Logo 6 | import LogoHeader from "./LogoHeader"; 7 | //Credit Footer 8 | import CreditFooter from "./CreditFooter"; 9 | //expense image 10 | import ExpenseImage from "./ExpenseImage"; 11 | 12 | // React Router DOM 13 | import { Link } from "react-router-dom"; 14 | 15 | // css file 16 | import "./home.css"; 17 | 18 | const Home = () => { 19 | return ( 20 | 21 |
22 | 23 |
24 | 25 |
26 | 35 | 36 |

Manage Your Expenses

37 | Expenzie - An Expense Tracker App 38 |
39 |
40 | 41 |
42 | 43 | ); 44 | }; 45 | 46 | export default Home; 47 | -------------------------------------------------------------------------------- /frontend/src/components/home/home.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600&family=Poppins:wght@200;300;400&display=swap"); 2 | * { 3 | padding: 0; 4 | margin: 0; 5 | box-sizing: border-box; 6 | /* font-family: "Montserrat", sans-serif; */ 7 | font-family: "Poppins", sans-serif; 8 | } 9 | .main-container { 10 | height: 100vh; 11 | width: 100%; 12 | font-family: "Poppins", sans-serif; 13 | background-color: hsl(208, 100%, 97%); 14 | } 15 | .logo-header { 16 | background-color: black; 17 | padding: 5px; 18 | } 19 | .logo-header h1 { 20 | color: #fff; 21 | font-weight: 300; 22 | text-align: center; 23 | } 24 | .sub-container { 25 | display: flex; 26 | width: 100vw; 27 | padding: 20px 40px; 28 | } 29 | .sub-container .img-container { 30 | width: 40%; 31 | } 32 | .img-container img { 33 | width: 100%; 34 | height: 100%; 35 | } 36 | .app-heading { 37 | width: 60%; 38 | padding: 1rem; 39 | /* border: 1px solid #000; */ 40 | text-align: end; 41 | } 42 | .app-heading h1 { 43 | line-height: 1.3; 44 | /* text-shadow: 2px -2px 30px rgba(75, 207, 14, 0.603); */ 45 | font-size: 6rem; 46 | margin: 0; 47 | margin-top: 2.5rem; 48 | font-weight: 400; 49 | } 50 | .app-heading *::selection { 51 | background-color: rgb(151, 245, 193); 52 | } 53 | .user-account-buttons { 54 | display: flex; 55 | justify-content: flex-end; 56 | } 57 | .user-account-buttons button { 58 | border: none; 59 | cursor: pointer; 60 | margin: 0 1rem; 61 | font-size: 1rem; 62 | padding: 8px 15px; 63 | border-radius: 5px; 64 | color: #fff; 65 | background: linear-gradient(to right, #2dc653, #4ad66d); 66 | } 67 | .user-account-buttons button:hover { 68 | background: linear-gradient(to right, #25a244, #4ad66d); 69 | } 70 | .app-heading span { 71 | font-size: 30px; 72 | margin-top: 1rem; 73 | display: inline-block; 74 | font-weight: 200; 75 | } 76 | .credit { 77 | display: flex; 78 | justify-content: center; 79 | width: 100%; 80 | font-size: 13px; 81 | color: rgb(39, 38, 38); 82 | position: fixed; 83 | bottom: 1%; 84 | } 85 | @media (max-width: 768px) { 86 | .sub-container { 87 | flex-flow: column-reverse; 88 | } 89 | .sub-container .img-container, 90 | .app-heading { 91 | width: auto; 92 | } 93 | .app-heading h1 { 94 | font-size: 2rem; 95 | } 96 | .app-heading { 97 | text-align: center; 98 | } 99 | .app-heading span { 100 | font-size: 1rem; 101 | } 102 | .user-account-buttons { 103 | justify-content: center; 104 | } 105 | } 106 | -------------------------------------------------------------------------------- /frontend/src/components/user/Register.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import LogoHeader from "../home/LogoHeader"; 3 | 4 | import { Link } from "react-router-dom"; 5 | 6 | // CSS file 7 | import "./user.css"; 8 | 9 | // // images 10 | // import Facebook from "./images/fb.png"; 11 | // import Google from "./images/google.png"; 12 | // import Linkedin from "./images/linkedin.png"; 13 | // import Twitter from "./images/twitter.png"; 14 | 15 | const Register = () => { 16 | const [uname, setUname] = useState(""); 17 | const [email, setEmail] = useState(""); 18 | const [password, setPassword] = useState(""); 19 | 20 | const registerHandler = (e) => { 21 | e.preventDefault(); 22 | console.log(uname, email, password); 23 | const myData = new FormData(); 24 | 25 | myData.set("uname", uname); 26 | myData.set("email", email); 27 | myData.set("password", password); 28 | 29 | const userData = [...myData]; 30 | console.log(userData); 31 | localStorage.setItem("userData", JSON.stringify(userData)); 32 | 33 | alert("user registered"); 34 | }; 35 | 36 | return ( 37 | <> 38 | 39 |
40 | Create an account 41 |
42 | 43 | setUname(e.target.value)} 51 | /> 52 | 53 | setEmail(e.target.value)} 61 | /> 62 | 63 | setPassword(e.target.value)} 71 | /> 72 | {/*
73 | Incorrect email or password 74 |
*/} 75 | 76 | 79 |
80 |
81 | Already had an account?   82 | Login 83 |
84 |
85 | 86 | ); 87 | }; 88 | 89 | export default Register; 90 | -------------------------------------------------------------------------------- /frontend/src/components/dashboard/dashboard.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import LogoHeader from "../home/LogoHeader"; 3 | 4 | import ProfileImage from "../../images/profile_user.jpg"; 5 | 6 | import "./dashboard.css"; 7 | 8 | const Dashboard = () => { 9 | const date = new Date(); 10 | const [currentSecond, setCurrentSecond] = useState(); 11 | 12 | const currentHour = date.getHours(); 13 | const currentMin = date.getMinutes(); 14 | 15 | const weekDay = [ 16 | "Sunday", 17 | "Monday", 18 | "Tuesday", 19 | "Wednesday", 20 | "Thursday", 21 | "Friday", 22 | "Saturday", 23 | ]; 24 | 25 | const month = [ 26 | "January", 27 | "February", 28 | "March", 29 | "April", 30 | "May", 31 | "June", 32 | "July", 33 | "August", 34 | "September", 35 | "October", 36 | "November", 37 | "December", 38 | ]; 39 | 40 | useEffect(() => { 41 | const perSecondDisplay = setInterval(() => { 42 | setCurrentSecond(date.getSeconds()); 43 | }, 1000); 44 | 45 | return () => clearInterval(perSecondDisplay); 46 | }); 47 | 48 | const moneySpent = 4000; 49 | 50 | const hourFormat = 12; 51 | let hour = 0; 52 | 53 | if (currentHour > 12) { 54 | hour = hour + (currentHour % hourFormat); 55 | } else { 56 | hour += currentHour; 57 | } 58 | 59 | return ( 60 | <> 61 | 62 |
63 |
64 |
65 |
66 |
67 | Profile Icon 68 |
69 |

Suraj Udai Aswal

70 |

Student

71 |
72 |
73 |
74 |
75 |

76 | {`${hour < 10 ? "0" + hour : hour}:${currentMin}:${ 77 | currentSecond < 10 ? "0" + currentSecond : currentSecond 78 | }`} 79 | {currentHour > 12 ? "PM" : "AM"} 80 |

81 |

{`${weekDay[date.getDay()]}, ${ 82 | month[date.getMonth()] 83 | } ${date.getDate()}, ${date.getFullYear()}`}

84 |
85 |
86 |
87 |
88 |

Total Money Spent

89 |

90 | {moneySpent.toLocaleString("en-IN", { 91 | style: "currency", 92 | currency: "INR", 93 | })} 94 |

95 |
96 |
97 |
98 |
99 | 100 | ); 101 | }; 102 | 103 | export default Dashboard; 104 | -------------------------------------------------------------------------------- /frontend/src/components/user/Login.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import LogoHeader from "../home/LogoHeader"; 3 | 4 | import { Link, useNavigate } from "react-router-dom"; 5 | 6 | // CSS file 7 | import "./user.css"; 8 | 9 | // images 10 | // import Facebook from "./images/fb.png"; 11 | // import Google from "./images/google.png"; 12 | // import Linkedin from "./images/linkedin.png"; 13 | // import Twitter from "./images/twitter.png"; 14 | 15 | const Login = () => { 16 | const navigate = useNavigate(); 17 | 18 | const userData = JSON.parse(localStorage.getItem("userData")); 19 | console.log(userData[0][1]); 20 | 21 | // const demoEmail = "chrispine@gmail.com"; 22 | // const demoPassword = "Abc@123"; 23 | 24 | const [email, setEmail] = useState(""); 25 | const [password, setPassword] = useState(""); 26 | 27 | console.log(email, password); 28 | const loginHandler = (e) => { 29 | e.preventDefault(); 30 | 31 | if (email === userData[1][1] && password === userData[2][1]) { 32 | navigate("/dashboard"); 33 | } else { 34 | alert("Incorrect email or password"); 35 | } 36 | }; 37 | 38 | // useEffect(() => { 39 | // console.log(errorMsg); 40 | // }, [errorMsg]); 41 | 42 | return ( 43 | <> 44 | 45 |
46 | Login to your account 47 |
48 | 49 | setEmail(e.target.value)} 57 | /> 58 | 59 | setPassword(e.target.value)} 67 | /> 68 | {/*
69 | {errorMsg} 70 |
*/} 71 |
72 | 77 | 78 | Forget password? 79 | 80 |
81 | 84 |
85 | {/* or sign in with 86 |
87 |
88 | Social Icons 89 |
90 |
91 | Social Icons 92 |
93 |
94 | Social Icons 95 |
96 |
97 | Social Icons 98 |
99 |
*/} 100 |
101 | New to Expenzie?   102 | Create an account 103 |
104 |
105 | 106 | ); 107 | }; 108 | 109 | export default Login; 110 | -------------------------------------------------------------------------------- /frontend/src/components/user/user.css: -------------------------------------------------------------------------------- 1 | /* Login CSS */ 2 | *::selection { 3 | background-color: #c7c9ca; 4 | } 5 | body { 6 | background-color: #ecf0f3; 7 | margin: 0px; 8 | padding: 0px; 9 | } 10 | .box { 11 | margin: auto; 12 | box-sizing: border-box; 13 | margin-top: 50px; 14 | padding: 40px 30px; 15 | width: 340px; 16 | border-radius: 15px; 17 | background-color: #ecf0f3; 18 | box-shadow: -8px -8px 8px #feffff, 8px 8px 8px #161b1d2f; 19 | /* box-shadow: -5px -5px 5px #feffff, 5px 5px 5px #161b1d2f; */ 20 | /* box-shadow: inset 5px 5px 5px #cbced1, 21 | inset -5px -5px 5px #ffffff; */ 22 | } 23 | /* .box:hover{ 24 | box-shadow: inset 5px 5px 5px #cbced1, 25 | inset -5px -5px 5px #ffffff; 26 | } */ 27 | .box .login-heading { 28 | font-size: 22px; 29 | display: block; 30 | margin-bottom: 10px; 31 | color: #535658; 32 | } 33 | .box label { 34 | font-size: 14px; 35 | font-weight: 500; 36 | color: #858686; 37 | margin-top: 10px; 38 | /* margin-bottom: 10px; */ 39 | } 40 | .box .input-box { 41 | width: 100%; 42 | /* height: 35px; */ 43 | padding: 6px 12px; 44 | border: none; 45 | color: #858686; 46 | margin-top: 5px; 47 | margin-bottom: 10px; 48 | background-color: #ecf0f3; 49 | outline: none; 50 | border-radius: 5px; 51 | box-shadow: inset 5px 5px 5px #cbced1, inset -5px -5px 5px #ffffff; 52 | } 53 | .box .input-box::placeholder { 54 | color: #9ea0a0; 55 | font-size: 12px; 56 | } 57 | .error span { 58 | font-size: 12px; 59 | display: block; 60 | text-align: center; 61 | color: rgb(235, 69, 69); 62 | } 63 | .forget { 64 | margin-top: 2px; 65 | } 66 | .forget .fg a { 67 | text-decoration: none; 68 | font-size: 13px; 69 | color: #8f8c8c; 70 | line-height: 20px; 71 | } 72 | .forget .fg { 73 | display: inline-block; 74 | margin-left: 58%; 75 | font-size: 12px; 76 | } 77 | .forget .fg:hover { 78 | text-decoration: underline; 79 | text-decoration-color: #b4b8b8; 80 | } 81 | .forget .checkbox-label { 82 | display: block; 83 | position: relative; 84 | cursor: pointer; 85 | font-size: 22px; 86 | line-height: 22px; 87 | } 88 | .label-text { 89 | color: #8f8c8c; 90 | display: inline-block; 91 | /* width: 100%; */ 92 | position: absolute; 93 | font-weight: 500; 94 | left: 12%; 95 | font-size: 13px; 96 | } 97 | .forget .checkbox-label input { 98 | position: absolute; 99 | opacity: 0; 100 | cursor: pointer; 101 | } 102 | .create-account-box { 103 | font-size: 12px; 104 | color: #282829; 105 | text-align: center; 106 | margin-top: 5px; 107 | } 108 | .create-account-box a { 109 | font-size: 12px; 110 | color: #34345a; 111 | } 112 | .reg-cab { 113 | margin-top: 10px; 114 | } 115 | .checkbox-label .checkbox-custom { 116 | position: absolute; 117 | top: 0; 118 | left: 0px; 119 | height: 20px; 120 | width: 20px; 121 | background-color: #ecf0f3; 122 | border-radius: 5px; 123 | border: none; 124 | box-shadow: inset 3px 3px 3px #cbced1, inset -3px -3px 3px #ffff; 125 | } 126 | .checkbox-label input:checked ~ .checkbox-custom { 127 | background-color: #ecf0f3; 128 | border-radius: 5px; 129 | -webkit-transform: rotate(0deg) scale(1); 130 | -ms-transform: rotate(0deg) scale(1); 131 | transform: rotate(0deg) scale(1); 132 | opacity: 1; 133 | border: none; 134 | box-shadow: -4px -4px 4px #feffff, 4px 4px 4px #161b1d2f; 135 | } 136 | .checkbox-label .checkbox-custom::after { 137 | position: absolute; 138 | content: ""; 139 | left: 10px; 140 | top: 10px; 141 | height: 0px; 142 | width: 0px; 143 | border-radius: 5px; 144 | border: solid #635f5f; 145 | border-width: 0 3px 3px 0; 146 | -webkit-transform: rotate(0deg) scale(0); 147 | -ms-transform: rotate(0deg) scale(0); 148 | transform: rotate(0deg) scale(0); 149 | opacity: 1; 150 | transition: all 0.3s ease-out; 151 | } 152 | .checkbox-label input:checked ~ .checkbox-custom::after { 153 | -webkit-transform: rotate(45deg) scale(1); 154 | -ms-transform: rotate(45deg) scale(1); 155 | transform: rotate(45deg) scale(1); 156 | opacity: 1; 157 | left: 7px; 158 | top: 3px; 159 | width: 4px; 160 | height: 8px; 161 | border: solid #635f5f; 162 | border-width: 0 2px 2px 0; 163 | background-color: transparent; 164 | border-radius: 0; 165 | } 166 | .btn { 167 | width: 100%; 168 | margin-top: 15px; 169 | height: 38px; 170 | border: none; 171 | outline: none; 172 | border-radius: 10px; 173 | background-color: #727171; 174 | font-size: 16px; 175 | font-weight: 500; 176 | color: #ffffff; 177 | cursor: pointer; 178 | box-shadow: -5px -5px 8px #d8e2e6, 5px 5px 10px #2c313378; 179 | transition: 0.8s; 180 | } 181 | .btn:hover { 182 | background-color: #535658; 183 | box-shadow: inset 5px 5px 10px #05050578, inset -5px -5px 10px #9e9c9c; 184 | } 185 | .social { 186 | display: flex; 187 | justify-content: center; 188 | margin-top: 14px; 189 | } 190 | .box-radius { 191 | border-radius: 50%; 192 | width: 40px; 193 | display: block; 194 | height: 40px; 195 | margin: 6px; 196 | /* margin-top: 50px; */ 197 | background-color: #ecf0f3; 198 | box-shadow: 5px 5px 6px #0d275023, -5px -5px 6px #ffffff; 199 | padding: 11px; 200 | cursor: pointer; 201 | } 202 | .box-radius:hover { 203 | box-shadow: inset 5px 5px 5px #cbced1, inset -5px -5px 5px #ffffff; 204 | } 205 | .box-radius img { 206 | width: 18px; 207 | margin: auto; 208 | height: 18px; 209 | } 210 | .option { 211 | display: block; 212 | margin-top: 20px; 213 | color: #6c6d6d; 214 | text-align: center; 215 | } 216 | /* Register CSS */ 217 | --------------------------------------------------------------------------------