diff --git a/.vscode/c_cpp_properties.json b/.vscode/c_cpp_properties.json new file mode 100644 index 0000000..87c564b --- /dev/null +++ b/.vscode/c_cpp_properties.json @@ -0,0 +1,20 @@ +{ + "configurations": [ + { + "name": "Mac", + "includePath": [ + "${workspaceFolder}/**" + ], + "defines": [], + "macFrameworkPath": [ + "/System/Library/Frameworks", + "/Library/Frameworks" + ], + "compilerPath": "/usr/bin/clang", + "cStandard": "c11", + "cppStandard": "c++98", + "intelliSenseMode": "macos-clang-x64" + } + ], + "version": 4 +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 8f0207a..3c69a05 100644 --- a/src/App.js +++ b/src/App.js @@ -1,3 +1,4 @@ +import Account from "./Pages/AccountPage/AccountPage"; import React, { useEffect, useState } from "react"; import Registration from "./Pages/RegistrationPage/RegistrationPage"; import Home from "./Pages/HomePage/HomePage" diff --git a/src/Pages/AccountPage/AccountPage.css b/src/Pages/AccountPage/AccountPage.css new file mode 100644 index 0000000..57857a4 --- /dev/null +++ b/src/Pages/AccountPage/AccountPage.css @@ -0,0 +1,170 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); + + + +.body{ + /* height: 500%; + width:500%; */ + display: flex; + justify-content: center; + align-items: center; + padding: 100px; + background: linear-gradient(135deg, #71b7e6, #9b59b6); +} + +.nav { + background-color: grey; + height: 30px; +} +.a{ + color: white; + margin-right: 2em; + text-decoration: none; + +} +.container{ + max-width: 700px; + width: 100%; + background-color: #fff; + padding: 25px 30px; + border-radius: 5px; + border: blue; + box-shadow: 0 5px 10px rgba(0,0,0,0.15); +} +.container .title{ + font-size: 25px; + font-weight: 500; + position: relative; +} +.container .title::before{ + content: ""; + position: absolute; + left: auto; + bottom: auto; + height: 3px; + width: 30px; + border-radius: 5px; + background: linear-gradient(135deg, #71b7e6, #9b59b6); +} +.content form .user-details{ + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin: 20px 0 12px 0; +} +div.positioning{ + margin-left: auto; + margin-right: auto; + width: 8em +} +form .user-details .input-box{ + margin-bottom: 15px; + width: calc(100% / 2 - 20px); +} +form .input-box span.details{ + display: block; + font-weight: 500; + margin-bottom: 20px; +} +.user-details .input-box input{ + height: 45px; + width: 100%; + outline: none; + font-size: 16px; + border-radius: 5px; + padding-left: 15px; + border: 1px solid black; + border-bottom-width: 2px; + transition: all 0.3s ease; +} +.user-details .input-box input:focus, +.user-details .input-box input:valid{ + border-color: #9b59b6; +} + form .gender-details .gender-title{ + font-size: 20px; + font-weight: 500; + } + form .category{ + display: flex; + width: 80%; + margin: 14px 0 ; + justify-content: space-between; + } + form .category label{ + display: flex; + align-items: center; + cursor: pointer; + } + form .category label .dot{ + height: 18px; + width: 18px; + border-radius: 50%; + margin-right: 10px; + background-color: #15a05a; + border: 5px solid transparent; + transition: all 0.3s ease; +} + #dot-1:checked ~ .category label .one, + #dot-2:checked ~ .category label .two, + #dot-3:checked ~ .category label .three{ + background: #9b59b6; + border-color: #d9d9d9; + } + form .input[type="radio"]{ + display: none; + } + form .button{ + height: 45px; + margin: 35px 0 + } + form .button input{ + height: 100%; + width: 100%; + border-radius: 5px; + border: none; + color: rgb(229, 236, 238); + font: bold; + font-size: 18px; + font-weight: 500; + letter-spacing: 1px; + cursor: pointer; + transition: all 0.3s ease; + background: linear-gradient(135deg, #71b7e6, #9b59b6); + } + form .button input:hover{ + /* transform: scale(0.99); */ + background: linear-gradient(-135deg, #71b7e6, #9b59b6); + } + @media(max-width: 584px){ + .container{ + max-width: 100%; +} +form .user-details .input-box{ + margin-bottom: 15px; + width: 100%; + } + form .category{ + width: 100%; + } + .content form .user-details{ + max-height: 300px; + overflow-y: scroll; + } + .user-details::-webkit-scrollbar{ + width: 5px; + } + } + @media(max-width: 459px){ + .container .content .category{ + flex-direction: column; + } + + .nav { + background-color: grey; + height: 30px; + padding-left: 20px; + color: red !important; + + } +} diff --git a/src/Pages/AccountPage/AccountPage.js b/src/Pages/AccountPage/AccountPage.js new file mode 100644 index 0000000..a637c91 --- /dev/null +++ b/src/Pages/AccountPage/AccountPage.js @@ -0,0 +1,52 @@ +import { useState } from "react"; +import "./AccountPage.css" +import Axios from "axios"; +import { useHistory } from "react-router-dom"; + + + +function getAccountInformation() { + +return ( + +
+
Profile
+
+
+
+
+ Full Name + +
+
+ Username + +
+
+ Email + +
+
+ Phone Number + +
+
+ Password + +
+
+ Confirm Password + +
+
+
+ +
+
+
+
+ +); + + } +export default getAccountInformation;