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 = () => {
} />
} />
} />
+ } />
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 (
+
+
+
+
+
+
+

+
+
+
+
+
+
+
+ );
+};
+
+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";