From b8038130b7bbb6a28c831123bc4eb5686587575f Mon Sep 17 00:00:00 2001
From: Gerome Matilla <gerome.matilla07@gmail.com>
Date: Thu, 4 Jun 2020 09:03:54 +0800
Subject: [PATCH] add content to centered box

---
 css/centered-box.css  |  3 ++-
 css/profile-image.css | 31 +++++++++++++++++++++++++++++++
 css/style.css         |  1 +
 index.html            |  2 +-
 4 files changed, 35 insertions(+), 2 deletions(-)
 create mode 100644 css/profile-image.css

diff --git a/css/centered-box.css b/css/centered-box.css
index 3abf548..c59e4ed 100644
--- a/css/centered-box.css
+++ b/css/centered-box.css
@@ -1,7 +1,8 @@
 .centeredBar {
-	background: #ff00ff;
+	background: #ff00ff60;
 	width: 100%;
     height: auto;
+    
     border: none;
     pointer-events: none;
     
diff --git a/css/profile-image.css b/css/profile-image.css
new file mode 100644
index 0000000..effae71
--- /dev/null
+++ b/css/profile-image.css
@@ -0,0 +1,31 @@
+#profileImageContainer {
+	background: var(--base-bg);
+	backdrop-filter: blur(var(--blur-strength));
+
+	height: 138px;
+	width: 138px;
+	border-radius: 50%;
+	pointer-events: initial;
+    
+    margin: 0 auto;
+    margin-bottom: 90px;
+    position: relative;
+
+   	flex-flow: column wrap;
+	display: flex;
+  	justify-content: center;
+  	align-items: center;
+}
+
+#profileImage {
+	background-image: url('../assets/user.png') ;
+	height: 128px;
+	width: 128px;
+	border-radius: 50%;
+	background-size: cover;
+	
+   	flex-flow: column wrap;
+	display: flex;
+  	justify-content: center;
+  	align-items: center;
+}
diff --git a/css/style.css b/css/style.css
index a60fb5b..3b1c45a 100644
--- a/css/style.css
+++ b/css/style.css
@@ -6,6 +6,7 @@
 @import url('dock.css');
 @import url('dock-buttons.css');
 @import url('centered-box.css');
+@import url('profile-image.css');
 
 :root {
 	/* Colors */
diff --git a/index.html b/index.html
index 961749f..968c00a 100644
--- a/index.html
+++ b/index.html
@@ -48,7 +48,7 @@
 
 	<div class='centeredBar' id='centeredBox'>
 		<div id='profileImageContainer'>
-			<div id='profile'></div>
+			<div id='profileImage'></div>
 		</div>
 		<input type="text" id="searchBox" autocomplete="off" autofocus="off" placeholder="Type to search"/>
 	</div>