working on profile front-end

src/main/webapp/app/FaeBoo/Profile-head/profile-head.component.html

@@ -0,0 +1,46 @@
+<div class="main-cont">
+
+    <div class = "friend-cont">
+
+        <div class = "profile-pic">
+            <img class ="friend-photo" src = "../../../content/images/defaultphoto.png">
+        </div>
+
+        <div class="friend-pic">
+            <img class ="friend-photo" src = "../../../content/images/defaultphoto.png">
+        </div>
+
+        <div class="friend-pic">
+            <img class ="friend-photo" src = "../../../content/images/defaultphoto.png">
+        </div>
+
+        <div class="friend-pic">
+            <img class ="friend-photo" src = "../../../content/images/defaultphoto.png">
+        </div>
+
+        <div class="friend-pic">
+            <img class ="friend-photo" src = "../../../content/images/defaultphoto.png">
+        </div>
+
+        <div class="friend-pic">
+            <img class ="friend-photo" src = "../../../content/images/defaultphoto.png">
+        </div>
+
+        <div class="friend-pic">
+            <img class ="friend-photo" src = "../../../content/images/defaultphoto.png">
+        </div>
+
+        <div class="friend-pic">
+            <img class ="friend-photo" src = "../../../content/images/defaultphoto.png">
+        </div>
+
+        <div class="friend-pic">
+            <img class ="friend-photo" src = "../../../content/images/defaultphoto.png">
+        </div>
+
+    </div>
+
+    <div id = "bio-cont"></div>
+
+
+</div>

src/main/webapp/app/FaeBoo/Profile-head/profile-head.component.ts

@@ -3,6 +3,6 @@ import { Component } from '@angular/core';
 @Component({
     selector: 'jhi-profile-head',
     templateUrl: './profile-head.component.html',
-    styleUrls: ['profile-head.scss']
+    styleUrls: ['profile-head.css']
 })
 export class ProfileHeadComponent {}

src/main/webapp/app/FaeBoo/Profile-head/profile-head.css

@@ -0,0 +1,103 @@
+.main-cont {
+    border: red 1px solid;
+    width: 100%;
+    height: 1fr;
+    box-sizing: border-box;
+    padding: 8px;
+}
+
+.friend-cont {
+    display: grid;
+    justify-content: space-around;
+    grid-template-columns: calc(10% - 5px) calc(10% - 5px) calc(10% - 5px) calc(10% - 5px) calc(20% - 5px) calc(10% - 5px) calc(10% - 5px) calc(
+            10% - 5px
+        ) calc(10% - 5px);
+    grid-column-gap: 5px;
+    grid-template-rows: auto;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    margin: auto;
+}
+
+#bio-cont {
+    border: red 1px solid;
+    width: 100%;
+    height: 75px;
+    box-sizing: border-box;
+    padding: 8px;
+    margin-top: 8px;
+}
+
+.friend-pic {
+    /*border: blue 1px solid;
+    width: 100%;
+    height: 0px;
+    border-radius: 50%;
+    grid-row-start: 1;
+    margin: auto;
+    padding-bottom: 100%;
+    position:relative;*/
+
+    /*border-radius: 50%;
+    height: 50%;
+    overflow: hidden;
+    margin: auto;
+    box-sizing: border-box;*/
+
+    /*border: blue 1px solid;
+    border-radius: 50%;
+    width: 100%;
+    height: 0%;
+    padding-top: 100%;
+    margin:auto;
+    overflow: hidden;*/
+
+    width: 100%;
+    height: 75%;
+    position: relative;
+    overflow: hidden;
+    border-radius: 50%;
+}
+
+.friend-photo {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.profile-pic {
+    /*border: green 1px solid;
+    width: 100%;
+    height: 0px;
+    padding-bottom: 100%;
+    border-radius: 50%;
+    grid-column-start: 5;
+    grid-row-start: 1;
+    margin:auto;*/
+
+    /*border-radius: 50%;
+    height: 100%;
+    overflow: hidden;
+    margin: auto;
+    box-sizing: border-box;
+    grid-column-start: 5;
+    grid-row-start: 1;
+    margin:auto*/
+
+    /*border: blue 1px solid;
+    border-radius: 50%;
+    width: 100%;
+    height: 0%;
+    padding-top: 100%;
+    margin:auto;
+    overflow: hidden;*/
+
+    width: 100%;
+    height: 150%;
+    position: relative;
+    overflow: hidden;
+    border-radius: 50%;
+    grid-column-start: 5;
+    grid-row-start: 1;
+}

src/main/webapp/app/FaeBoo/Profile-temp/profile-temp.component.html

@@ -0,0 +1 @@
+<jhi-profile-head></jhi-profile-head>

src/main/webapp/app/FaeBoo/Profile-temp/profile-temp.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { ProfileHeadComponent } from 'app/FaeBoo/Profile-head/profile-head.component';
 
 @Component({
     selector: 'jhi-profile-temp',

src/main/webapp/app/FaeBoo/Profile-temp/profile-temp.module.ts

@@ -4,10 +4,11 @@ import { RouterModule } from '@angular/router';
 import { FaeBooSharedModule } from 'app/shared';
 import { PROFILE_ROUTE } from 'app/FaeBoo/Profile-temp/profile-temp.route';
 import { ProfileTempComponent } from 'app/FaeBoo/Profile-temp/profile-temp.component';
+import { ProfileHeadComponent } from 'app/FaeBoo/Profile-head/profile-head.component';
 
 @NgModule({
     imports: [FaeBooSharedModule, RouterModule.forChild([PROFILE_ROUTE])],
-    declarations: [ProfileTempComponent],
+    declarations: [ProfileTempComponent, ProfileHeadComponent],
     schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class ProfileTempModule {}

src/main/webapp/app/app.module.ts

@@ -7,7 +7,7 @@ import { NgbDatepickerConfig } from '@ng-bootstrap/ng-bootstrap';
 import { Ng2Webstorage } from 'ngx-webstorage';
 import { NgJhipsterModule } from 'ng-jhipster';
 
-import { ProfileHeadComponent } from 'app/FaeBoo/Profile-head/profile-head.component';
+// import { ProfileHeadComponent } from 'app/FaeBoo/Profile-head/profile-head.component';
 import { ProfileTempComponent } from 'app/FaeBoo/Profile-temp/profile-temp.component';
 import { ProfileTempModule } from 'app/FaeBoo/Profile-temp/profile-temp.module';
 
@@ -51,8 +51,8 @@ import { JhiMainComponent, NavbarComponent, FooterComponent, PageRibbonComponent
         ErrorComponent,
         PageRibbonComponent,
         ActiveMenuDirective,
-        FooterComponent,
-        ProfileHeadComponent
+        FooterComponent
+        // ProfileHeadComponent,
     ],
     providers: [
         {