style is broken in all project

Author: NisanurBulut

Orhun/src/app/book-list/book-item/book-item.component.scss

@@ -1,36 +1,38 @@
 .col-1 {
-    display: inline-block;
-    width: 60%;
-  }
+  display: inline;
+  width: 60%;
+}
 
-  .col-1 h3 {
-    margin: 0 0 10px 0;
-    padding: 0;
-    font-size: 22px;
-    font-style: italic;
-  }
+.col-1 h3 {
+  margin: 0 0 10px 0;
+  padding: 0;
+  font-size: 22px;
+  font-style: italic;
+}
 
-  .col-2 {
-    display: inline-block;
-    width: 40%;
-    vertical-align: top;
-    text-align: right;
-  }
-  .book-element {
-    box-shadow: 3px 3px 10px #fff;
-    padding: 10px;
-    margin: 10px 0;
-    border-radius: 5px;
-    background-color: #61729c;
-    color:white;
-    cursor: pointer;
-  }
-  .info {
-    color:#ECEFF4;
-    font-family: monospace;
-  }
-  .author {
-    font-style: italic;
-    font-size: 22px;
-    margin-bottom: 5px;
-  }
+.col-2 {
+  width: 40%;
+  vertical-align: top;
+  text-align: right;
+}
+.book-element {
+  width: 50%;
+  margin-left: 5%;
+  display: flex;
+  justify-content: center;
+  box-shadow: 3px 3px 10px #fff;
+  padding-left: 100px;
+  border-radius: 5px;
+  background-color: #61729c;
+  color: white;
+  cursor: pointer;
+}
+.info {
+  color: #eceff4;
+  font-family: monospace;
+}
+.author {
+  font-style: italic;
+  font-size: 22px;
+  margin-bottom: 5px;
+}

Orhun/src/app/book-list/book-list.component.html

@@ -1,5 +1,8 @@
-<app-profile [profileNewItem]="NewBookItem"></app-profile>
-<book-search
+<div class="profile-section">
+  <app-profile [profileNewItem]="NewBookItem"></app-profile>
+</div>
+<div class="book-section">
+  <book-search
   (searchResultBookItems)="refreshBookItemResults($event)"
 ></book-search>
 <section class="book-list">
@@ -9,3 +12,5 @@
     (setProfileBookItems)="setBookProfileItem($event)"
   ></book-item>
 </section>
+
+</div>

Orhun/src/app/book-list/book-list.component.scss

@@ -1,4 +1,10 @@
-.book-list {
-    margin: 20px auto;
-    width: 40%;
+
+.profile-section {
+  width: 20%;
+  float: left;
+  padding-left: 5%;
+}
+.book-section {
+    width: 60%;
+    float: left;
   }

Orhun/src/app/profile/profile.component.html

@@ -2,5 +2,5 @@ <h3 *ngIf="profiles.length>0">Saved Profile</h3>
 <article #profile class="profile" *ngFor="let profile of profiles" (click)="onLoadProfile(profile)">
     <h4>{{profile.bookItem.title}}</h4>
     <img src="{{profile.bookItem.imageLink}}"/>
-    <span (click)="onDeleteProfile($event, profile)" class="delete">X</span>
+    <span (click)="onDeleteProfile($event, profile)" class="delete">❌</span>
 </article>

Orhun/src/app/profile/profile.component.scss

@@ -1,9 +1,9 @@
-:host {
-    float: left;
-    margin-top: 10px;
-    width: 25%;
-    padding: 10px;
-  }
+// :host {
+//     float: left;
+//     // margin-top: 10px;
+//     // width: 25%;
+//     // padding-left: 25px;
+//   }
 
   h3 {
     margin: 0 0 10px 0;
@@ -22,9 +22,7 @@
     color: white;
   }
 
-  button:hover {
-    background-color: #2980b9;
-  }
+
   img {
     width: 50px;
     height: 50px;
@@ -39,7 +37,8 @@
 
     h4 {
       margin: 0;
-      padding: 0;
+      padding: 5px 0 5px;
+      font-style: italic;
     }
 
     p {
@@ -52,7 +51,7 @@
       top: 2px;
       right: 5px;
       font-size: 14px;
-      color: #7f8c8d;
+      font-style: bold;
     }
 
     .delete:hover {
@@ -61,6 +60,6 @@
   }
 
   .profile:hover {
-    background-color:#90a7e0;
-    color:rgb(110, 110, 110);
-  }
+    background-color:#1E6566;
+    color:rgb(245, 239, 239);
+  }

Orhun/src/styles.scss

@@ -12,6 +12,6 @@ body {
 
   @media screen and (max-width: 768px) {
     .book-list {
-      width: 80%;
+      width: 100%;
     }
 }