Added user-profiles, added various styles, and also added place-holder avatar image

2 files changed, 206 insertions, 2 deletions

diff --git a/assets/css/style.css b/assets/css/style.css
index ba596a3..614d0c2 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -110,7 +110,8 @@ h1{
 			}
 
 			.side-menu {
-				display
+				/* This line of code is incomplete - Humair */
+				/*display */
 			}
 
 
@@ -501,4 +502,207 @@ p.solutions-type{
     margin-left: 5%;
     margin-top: 0px;
     padding-bottom: 15px;
-}
\ No newline at end of file
+}
+
+/**********************************************************************************************************************/
+/*THE USER-PROFILE PAGE BEGINS HERE*/
+#user-profile-content{
+    flex: 1;
+    width: 60%;
+    background-color: rgba(235,235,235, 0.6);
+
+}
+
+#user-menu-container{
+
+    height: 100%;
+
+    /* For column layout remove width below
+       and add column class for container*/
+    width: 25%;
+    float: left;
+}
+
+#user-menu{
+    padding: 3%;
+    width: 100%;
+}
+
+#user-avatar{
+    /* Center image display*/
+    display: flex;
+    justify-content: center;
+    align-content: center;
+
+    padding: 3%;
+    background-color: white;
+    border-radius: 15px;
+    height: 200px;
+    box-shadow: 7px 5px 10px #b3b3b3;
+
+    /* top, right, bot, left */
+    margin: 100px 10px 10px 10px;
+}
+#user-avatar img{
+    max-width: 100%;
+    height: auto;
+    /*margin: 3px 3px 20px 3px;*/
+
+}
+#user-photo-edit{
+    background-color: white;
+    border-radius: 15px;
+    height: auto;
+    box-shadow: 7px 5px 10px #b3b3b3;
+    margin: 10px 10px 10px 10px;
+}
+
+#user-options{
+    background-color: white;
+    border-radius: 15px;
+    box-shadow: 7px 5px 10px #b3b3b3;
+    margin: 10px 10px 10px 10px;
+}
+
+#user-info-container{
+    display: flex;
+    justify-content: center;
+    align-content: center;
+
+    /* For column layout remove width below
+       and add column class for container*/
+    width: 75%;
+    float: left;
+}
+
+#user-info{
+    background-color: white;
+    border-radius: 15px;
+    height: auto;
+    width: 100%;
+    box-shadow: 7px 5px 10px #b3b3b3;
+
+    /* top, right, bot, left */
+    margin: 110px 20px 20px 15px;
+
+}
+#user-info #user-name h1{
+    padding: 20px;
+    text-align: left;
+    margin: 0;
+    color: white;
+    font-size: 1.5em;
+}
+
+#user-name{
+    height: auto;
+    width: 100%;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    background-color: #73a195;
+}
+#user-content{
+    min-height: 400px;
+    text-align: left;
+
+}
+#user-content h2{
+    margin: 0;
+    color: gray;
+    padding: 10px 10px 10px 10px;
+
+}
+#user-content p{
+    padding: 0 10px 10px 50px;
+    display: block;
+    word-wrap: break-word;
+}
+
+#user-content em{
+    font-weight: bolder;
+    font-style: normal;
+}
+#user-content span{
+    padding-left: 10px;
+}
+
+/* Button styles*/
+
+
+[class^="menu-button"]{
+    background-color: #ffffff; /* Green */
+    width: 100%;
+    border: none;
+    color: #a4a4a4;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    cursor: pointer;
+    -webkit-transition-duration: 0.4s; /* Safari */
+    transition-duration: 0.4s;
+
+    border: solid #cfcfcf 1px;
+}
+
+[class^="menu-button"]:hover {
+    background-color: #73a195;
+    color: white;
+}
+
+.menu-button-first{
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    margin-top: 0;
+}
+.menu-button-last{
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+    margin-bottom: 0;
+}
+
+
+.edit-button {
+    display: inline-block;
+    border-radius: 4px;
+    background-color: #ffffff;
+    border: none;
+    color: #979797;
+    text-align: center;
+    font-size: 1em;
+    padding: 10px;
+    width: auto;
+    transition: all 0.5s;
+    cursor: pointer;
+    margin: 15px;
+    border: solid #c7c7c7 3px;
+    border-radius: 15px;
+}
+
+.edit-button span {
+    cursor: pointer;
+    display: inline-block;
+    position: relative;
+    transition: 0.5s;
+}
+
+.edit-button span:after {
+    content: '»';
+    position: absolute;
+    opacity: 0;
+    top: 0;
+    right: -20px;
+    transition: 0.5s;
+}
+
+.edit-button:hover span {
+    padding-right: 25px;
+}
+
+.edit-button:hover span:after {
+    opacity: 1;
+    right: 0;
+}
+
+/********** !user-profile  *********/
\ No newline at end of file
diff --git a/assets/images/avatar.png b/assets/images/avatar.png
new file mode 100644
index 0000000..a3bd5d9
--- /dev/null
+++ b/assets/images/avatar.png