user-profile

api/static/style.css

@@ -766,6 +766,10 @@ body {
 	z-index: -1;
 }
 
+.img-wave-profile {
+	height: 80%;
+}
+
 .row-img {
 	display: flex;
 	justify-content: flex-end;
@@ -846,6 +850,47 @@ body {
 	padding: 10px 50px;
 }
 
+.container-profile {
+	width: 100vw;
+	height: 100vh;
+	overflow-y: hidden;
+}
+
+.container-bg {
+	position: absolute;
+	width: 600px;
+	height: 400px;
+	right: 0;
+	bottom: 0;
+}
+
+.container-profile .card-profile {
+	width: 25%;
+	min-width: 320px;
+	margin: auto;
+	margin-top: 4rem;
+	border-radius: 10px;
+	padding: 2rem;
+	text-align: center;
+	box-shadow: 0px 0px 20px 1px rgb(180, 180, 180);
+}
+
+.container-profile .card-profile img {
+	width: 120px;
+	margin: 1rem auto;
+}
+
+.card-profile-txt {
+	color: rgb(109, 109, 109);
+	font-size: 1.2rem;
+	font-weight: 500;
+}
+
+.card-profile-cnt {
+	font-size: 1.5rem;
+	font-weight: 700;
+}
+
 @media screen and (max-width: 900px){
 	.container-login{
 		grid-template-columns: 1fr;
@@ -862,6 +907,12 @@ body {
 	.row-login{
 		justify-content: center;
 	}
+	.container-bg {
+		width: 400px;
+		height: 300px;
+		right: 0;
+		bottom: 0;
+	}
 }
 
 @media screen and (max-height: 450px) {

api/templates/user_profile.html

@@ -5,7 +5,15 @@
 {% endblock %}
 {% block content %}
 
-User Profile - {{current_user}}
-
-
+<div class="container-profile">
+    <img class="img-wave img-wave-profile" src="static/img/wave.png" alt="">
+    <img class="container-bg" src="static/img/undraw_mobile_user_7oqo.svg" alt="">
+    <div class="card card-profile">
+        <img src="static/img/undraw_male_avatar_323b.svg" alt="">
+        <p class="card-profile-txt">User Profile</p>
+        <p class="card-profile-cnt">{{current_user}}</p>
+        <p class="card-profile-cnt">Email</p>
+    </div>
+</div>
+ 
 {% endblock %}