Added profile.html and profile.css

client/component/Profile page/App.js

@@ -0,0 +1,18 @@
+// App.js code as follows
+import React from 'react';
+import profile from './profile';
+
+const App = () => {
+ return (
+ <div>
+ <Profile />
+ </div>
+ );
+};
+
+export default App;
+
+// terminal Commands
+// npm init -y // if you haven't initialized your project with a package.json file
+// npm install react react-dom
+// npm start

client/component/Profile page/profile.css

@@ -0,0 +1,155 @@
+/* profile.css */
+
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600&display=swap');
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: 'Poppins', sans-serif;
+}
+
+.body {
+ height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: rgb(21, 23, 24);
+}
+.nav-links{
+ display: flex;
+ align-items: center;
+ background: #fff;
+ padding: 20px 50px;
+ border-radius: 12px;
+ box-shadow: 0 5px 10px rgba(0,0,0,0.2);
+}
+
+.nav-links li{
+ list-style: none;
+ margin: 0 12px;
+}
+.nav-links li a{
+ position: relative;
+ color: #333;
+ font-size: 20px;
+ font-weight: 500;
+ padding: 15px 0;
+ text-decoration: none;
+}
+.nav-links li a:before{
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ height: 3px;
+ width: 0%;
+ background: #34efdf;
+ border-radius: 12px;
+ transition: all 0.4s ease;
+}
+.nav-links li a:hover:before{
+ width: 100%;
+}
+.nav-links li.center a:before{
+ left: 50%;
+ transform: translateX(-50%);
+}
+.nav-links li.upward a:before{
+ width: 100%;
+ bottom: -5px;
+ opacity: 0;
+}
+.nav-links li.upward a:hover:before{
+ bottom: 0px;
+ opacity: 1;
+}
+.nav-links li.forward a:before{
+ width: 100%;
+ transform: scaleX(0);
+ transform-origin: right;
+ transition: transform 0.4s ease;
+}
+.nav-links li.forward a:hover:before{
+ transform: scaleX(1);
+ transform-origin: left;
+}
+.profile-card {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ max-width: 370px;
+ width: 100%;
+ background: #fff;
+ border-radius: 24px;
+ padding: 25px;
+ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
+ position: relative;
+ margin: auto; /* Center horizontally */
+ top: 50%; /* Center vertically */
+ transform: translateY(50%); /* Adjust for vertical centering */
+}
+
+.profile-card::before {
+ content: "";
+ position: absolute;
+ height: 36%;
+ top: 0;
+ left: 0;
+ width: 100%;
+ border-radius: 24px 24px 0 0;
+ background-color: #8968FF;
+}
+
+.image {
+ position: relative;
+ height: 130px;
+ width: 130px;
+ border-radius: 50%;
+ background-color: #cdc2f4;
+ padding: 3px;
+ overflow: hidden;
+ margin-bottom: 10px;
+}
+
+.image .profle-img {
+ height: 100%;
+ width: 100%;
+ object-fit: cover;
+ border-radius: 50%;
+ border: 3px solid #fff;
+}
+
+.profile-card .text-data {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.text-data .name {
+ font-size: 22px;
+ font-weight: 500;
+}
+
+.text-data .email {
+ padding-top: 8px;
+ font-size: 15px;
+ font-weight: 400;
+}
+
+.text-data .prof {
+ padding-top: 15px;
+ font-size: 18px;
+ font-weight: 400;
+ color: #8968FF;
+}
+
+.profile-card .media-button {
+ display: flex;
+ align-items: center;
+}
+
+.media-button .links {
+ background-color: #4070f4;
+}

client/component/Profile page/profile.js

@@ -0,0 +1,30 @@
+// Profile.js code as follows
+import React from 'react';
+import './Profile.css'; 
+
+const Profile = () => {
+ return (
+ <div>
+ <ul className="nav-links">
+ <li><a href="#">Easy<span style={{ color: '#8968FF' }}>Exit</span></a></li>
+ <li className="profile-icon" style={{ color: '#8968FF', fontSize: '35px', marginLeft: '87%' }}>
+ <i className='bx bx-user'></i>
+ </li>
+ </ul>
+
+ <div className="profile-card">
+ <div className="image">
+ {/* add profile image */}
+ </div>
+
+ <div className="text-data">
+ <span className="name">Shrutika</span>
+ <span className="email">Shrutikarathi6</span>
+ <span className="prof">Student</span>
+ </div>
+ </div>
+ </div>
+ );
+};
+
+export default Profile;