stilles modified and included more details in card

package.json

@@ -24,7 +24,7 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^14.1.2",
-    "@angular/cli": "~14.1.2",
+    "@angular/cli": "^14.2.12",
     "@angular/compiler-cli": "^14.1.0",
     "@types/jasmine": "~4.0.0",
     "jasmine-core": "~4.2.0",

src/app/components/big-card/big-card.component.html

@@ -1,12 +1,7 @@
 <div class="container__big-card">
 
   <div class="big-card__photo">
-    <img
-      src="{{ photoCover }}"
-      alt=""
-      height="200px"
-      srcset=""
-    >
+    <a [routerLink]="['content', Id]"><img src="{{ photoCover }}" alt="{{ cardTitle }}" height="200px" srcset=""></a>
   </div>
 
   <div class="big-card__title">
@@ -16,9 +11,9 @@ <h1><a [routerLink]="['content', Id]">{{ cardTitle }}</a></h1>
   <div class="big-card__description">
     <p>
       <a [routerLink]="['content', Id]">
-          {{ cardDescription }}
+        {{ cardDescription }}
       </a>
     </p>
   </div>
 
-</div>
+</div>

src/app/components/menu-bar/menu-bar.component.css

@@ -1,12 +1,16 @@
-
-
-.container__menu-bar > ul{
+.container__menu-bar > ul {
   display: flex;
   flex-direction: row;
 }
 
-.container__menu-bar > ul > li{
+.container__menu-bar > ul > li {
   margin-right: 20px;
   list-style: none;
+  padding-left: 2px;
 }
 
+.container__menu-bar > ul > li > a:hover {
+  background-color: grey;
+  color: #111111;
+  padding: 5px;
+}

src/app/components/menu-bar/menu-bar.component.html

@@ -1,9 +1,9 @@
 <div class="container__menu-bar">
   <ul>
-    <li><a href="https://linkedin.com/in/felipe-aguiar-exe">Linkedin</a></li>
-    <li><span>•</span></li>
-    <li><a href="https://github.com/felipeAguiarCode">Github</a></li>
-    <li><span>•</span></li>
-    <li><a href="https://www.youtube.com/channel/UCCcDZkI7AITYFCgDEFV9OoQ">Youtube</a></li>
+    <li><a href="https://www.linkedin.com/in/emersonbbezerra/" target="_blank">Linkedin</a></li>
+    <li><span>|</span></li>
+    <li><a href="https://github.com/emersonbbezerra" target="_blank">Github</a></li>
+    <li><span>|</span></li>
+    <li><a href="https://www.youtube.com/@mundo_todo" target="_blank">Youtube</a></li>
   </ul>
-</div>
+</div>

src/app/components/menu-title/menu-title.component.css

@@ -1,17 +1,18 @@
-.container__menu-title{
+.container__menu-title {
   color: white;
 }
 
-.container__menu-title > h1{
+.container__menu-title > h1 {
   margin-top: 15px;
   margin-bottom: 15px;
   font-size: 135px;
-  font-family: 'segoe UI';
+  font-family: "segoe UI";
   display: flex;
   justify-content: center;
 }
 
-.container__menu-title > hr{
+.container__menu-title > hr {
   margin-top: 20px;
   margin-bottom: 5px;
+  border-color: grey;
 }

src/app/components/menu-title/menu-title.component.html

@@ -1,5 +1,5 @@
 <div class="container__menu-title">
-  <hr/>
+  <hr />
   <h1>MARVEL BLOG</h1>
-  <hr/>
-</div>
+  <hr />
+</div>

src/app/components/small-card/small-card.component.css

@@ -1,9 +1,9 @@
-.container__small-card{
+.container__small-card {
   width: 700px;
   margin-bottom: 15px;
 }
 
-.container__small-card-content{
+.container__small-card-content {
   display: flex;
   flex-direction: row;
 }
@@ -20,6 +20,10 @@
   align-items: center;
 }
 
-.container__small-card__separator{
+.container__small-card__separator {
   margin-top: 10px;
 }
+
+.container__small-card__separator > hr {
+  border-color: grey;
+}

src/app/components/small-card/small-card.component.html

@@ -1,24 +1,19 @@
 <div class="container__small-card">
 
   <div class="container__small-card-content">
-    <div class="small-card__photo">
-      <img
-        src="{{ photoCover }}"
-        alt=""
-        srcset=""
-      >
-    </div>
+    <a [routerLink]="['content', Id]">
+      <div class="small-card__photo">
+        <img src="{{ photoCover }}" alt="{{ cardTitle }}" srcset="">
+      </div>
+    </a>
 
     <div class="small-card__title">
-      <h1><a [routerLink]="['content', Id]" >{{ cardTitle }}</a></h1>
+      <h1><a [routerLink]="['content', Id]">{{ cardTitle }}</a></h1>
     </div>
   </div>
 
   <div class="container__small-card__separator">
     <hr>
   </div>
 
-</div>
-
-
-
+</div>

src/app/data/dataFake.ts

@@ -10,5 +10,17 @@ export const dataFake = [
     "title": "Nova Série anunciada no Disney +",
     "description": "bla blabla",
     "photoCover":"https://disneyplusbrasil.com.br/wp-content/uploads/2021/07/Series-Marvel-Disney-Plus-1024x576.jpg"
+  },
+  {
+    "id":"3",
+    "title": "Nova filme do Pantera Negra",
+    "description": "bla blabla",
+    "photoCover":"https://prod-ripcut-delivery.disney-plus.net/v1/variant/disney/35720ACD323F927C3A83D809D0F460BD3651740DA519BCC184B6F042057EA14D/scale?width=1200&aspectRatio=1.78&format=jpeg"
+  },
+  {
+    "id":"4",
+    "title": "Novo filme dos X-MEN",
+    "description": "bla blabla",
+    "photoCover":"https://midias.correiobraziliense.com.br/_midias/jpg/2022/07/22/675x450/1_xmen-26096415.jpeg?20220722171339?20220722171339"
   }
 ]

src/app/pages/content/content.component.css

@@ -1,5 +1,4 @@
-.container__content{
-
+.container__content {
   width: 100%;
   height: 100vh;
 
@@ -11,19 +10,29 @@
   align-items: center;
 }
 
-.content__cover > img{
-  border:5px solid rgb(144, 144, 144);
+.content__cover > img {
+  border: 5px solid rgb(144, 144, 144);
   border-radius: 5px;
   width: 500px;
   min-width: 500px;
   height: 300px;
 }
 
-.content__description{
+.content__title > hr {
+  border-color: grey;
+}
+
+.content__description {
   margin-top: 15px;
 }
 
-.content__description > p{
+.content__description > a:hover {
+  background-color: grey;
+  color: black;
+  padding: 5px;
+}
+
+.content__description > p {
   margin-top: 20px;
   color: rgb(198, 197, 197);
 }

src/app/pages/content/content.component.html

@@ -7,9 +7,10 @@ <h1>{{ contentTitle }}</h1>
     <hr />
   </div>
   <div class="content__description">
-    <a [routerLink]="['']"> << VOLTAR </a>
-    <p>
-      {{ contentDescription }}
-    </p>
+    <a [routerLink]="['']">
+      << VOLTAR</a>
+        <p>
+          {{ contentDescription }}
+        </p>
   </div>
-</div>
+</div>