From 665f58a285014e04fdc539d637982a16d32e0eda Mon Sep 17 00:00:00 2001
From: VividTruthKeeper <you@example.com>
Date: Tue, 28 Jun 2022 19:08:16 +0500
Subject: [PATCH] profile page on /profile

---
 src/App.tsx              |  2 ++
 src/pages/Profile.tsx    | 62 +++++++++++++++++++++++++++++++++++++
 src/styles/_profile.scss | 67 ++++++++++++++++++++++++++++++++++++++++
 src/styles/style.scss    |  1 +
 4 files changed, 132 insertions(+)
 create mode 100644 src/pages/Profile.tsx
 create mode 100644 src/styles/_profile.scss

diff --git a/src/App.tsx b/src/App.tsx
index 58d5e48..c84c497 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -12,6 +12,7 @@ import Footer from "./components/global/Footer";
 import Main from "./pages/Main";
 import Events from "./pages/Events";
 import Rating from "./pages/Rating";
+import Profile from "./pages/Profile";
 
 const App = () => {
   return (
@@ -22,6 +23,7 @@ const App = () => {
           <Route path="/" element={<Main />} />
           <Route path="/news" element={<Events />} />
           <Route path="/rating" element={<Rating />} />
+          <Route path="/profile" element={<Profile />} />
         </Routes>
       </div>
       <Footer />
diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx
new file mode 100644
index 0000000..6f54baa
--- /dev/null
+++ b/src/pages/Profile.tsx
@@ -0,0 +1,62 @@
+// Modules
+
+// Images
+import magnus from "../images/magnus.jpg";
+
+// Link: /profile
+
+const Profile = () => {
+  return (
+    <main className="profile">
+      <div className="container">
+        <div className="profile-inner">
+          <div className="profile-container">
+            <div className="profile-left">
+              <div className="profile-img">
+                <img src={magnus} alt="" />
+              </div>
+            </div>
+            <div className="profile-right">
+              <div className="profile-data">
+                <h3 className="profile-name">Carlsen, Magnus</h3>
+                <div className="profile-data-wrapper">
+                  <div className="profile-item">
+                    <span>ID</span>
+                    <p>1503014</p>
+                  </div>
+                  <div className="profile-item">
+                    <span>ID</span>
+                    <p>1503014</p>
+                  </div>
+                  <div className="profile-item">
+                    <span>ID</span>
+                    <p>1503014</p>
+                  </div>
+                </div>
+              </div>
+              <div className="profile-rating">
+                <h3 className="profile-name profile-rating">Rating</h3>
+                <div className="profile-data-wrapper">
+                  <div className="profile-item">
+                    <span>ID</span>
+                    <p>1503014</p>
+                  </div>
+                  <div className="profile-item">
+                    <span>ID</span>
+                    <p>1503014</p>
+                  </div>
+                  <div className="profile-item">
+                    <span>ID</span>
+                    <p>1503014</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default Profile;
diff --git a/src/styles/_profile.scss b/src/styles/_profile.scss
new file mode 100644
index 0000000..848832d
--- /dev/null
+++ b/src/styles/_profile.scss
@@ -0,0 +1,67 @@
+.profile-inner {
+  padding: 8rem 0 16rem 0;
+}
+
+.profile-container {
+  background: #ffffff;
+  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.25);
+  border-radius: 5px;
+  display: grid;
+  grid-template-columns: 1fr 2.5fr;
+  gap: 8rem;
+  padding: 4.8rem;
+}
+
+.profile-left {
+  justify-self: flex-start;
+}
+
+.profile-right {
+  align-self: center;
+  display: flex;
+  flex-direction: column;
+  gap: 4.8rem;
+  justify-self: flex-end;
+  width: 100%;
+}
+
+.profile-data,
+.profile-rating {
+  display: flex;
+  flex-direction: column;
+  gap: 2.4rem;
+}
+
+.profile-name {
+  font-size: 2.8rem;
+  line-height: 3.8rem;
+  color: $base-green;
+}
+
+.profile-data-wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 4.8rem;
+  text-align: center;
+}
+
+.profile-item {
+  * {
+    display: block;
+    font-size: 1.8rem;
+    padding: 1.3rem;
+  }
+
+  span {
+    background: $base-green;
+    color: #fff;
+  }
+
+  p {
+    background: #f8f8f8;
+  }
+}
+
+.profile-rating {
+  color: #000;
+}
diff --git a/src/styles/style.scss b/src/styles/style.scss
index 9ae980a..13a87a6 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -9,3 +9,4 @@
 @import "./main";
 @import "./events";
 @import "./rating";
+@import "./profile";