Feature/update components structure

src/app/app.module.ts

@@ -8,6 +8,7 @@ import { CardComponent } from './components/card/card.component';
 import { MenuBarComponent } from './components/menu-bar/menu-bar.component';
 import { CardLabelComponent } from './components/card/card-label/card-label.component';
 import { CardPricingComponent } from './components/card/card-pricing/card-pricing.component';
+import { HttpClientModule } from '@angular/common/http';
 
 @NgModule({
   declarations: [
@@ -20,7 +21,8 @@ import { CardPricingComponent } from './components/card/card-pricing/card-pricin
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent]

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

@@ -2,17 +2,17 @@
 	position: absolute;
 	bottom:90px;
 	right: 0;
-}
 
-.card-label__content{
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	background-color: #0d0d0d;
-	color: white;
-	font-size: 12px;
-	font-family: 'Segoe UI';
-	font-weight: bold;
-	height: 40px;
-	padding: 0px 50px;
-}
+	.card-label__content{
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background-color: #0d0d0d;
+		color: white;
+		font-size: 12px;
+		font-family: 'Segoe UI';
+		font-weight: bold;
+		height: 40px;
+		padding: 0px 50px;
+	}	
+}

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

@@ -10,25 +10,26 @@
 	padding: 10px;
 	color: antiquewhite;
 	font-family: Calibri;
-}
 
-.card-pricing__title{
-	margin-bottom: 3px;
-}
+	.card-pricing__title{
+		margin-bottom: 3px;
+	}
+
+	.card-pricing__value{
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+	}
+
+	.card-pricing__value__console{
+		display: flex;
+		flex-direction: row;
 
-.card-pricing__value{
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
+		span {
+			font-weight: bolder;
+			color:aqua;
+			margin-right: 10px;
+		}
+	}
 }
 
-.card-pricing__value__console{
-	display: flex;
-	flex-direction: row;
-}
-
-.card-pricing__value__console > span{
-	font-weight: bolder;
-	color:aqua;
-	margin-right: 10px;
-}

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

@@ -1,21 +1,21 @@
 .card__container{
 	position: relative;
-	border:3px solid #3E4357;
-	border-radius: 10px;
+	border: .2rem solid #3E4357;
+	border-radius: 0.5rem;
 	width: 350px;
 	height: 500px;
 
 	display: flex;
 	overflow: hidden;
 	margin-top: 10px;
-}
 
-.card__img{
-	min-width: 100%;
-	min-height: 100%;
-	transition: transform .8s;
-}
+	.card__img{
+		min-width: 100%;
+		min-height: 100%;
+		transition: transform .8s;
+	}
 
-.card__img:hover{
-	transform: scale(1.1);
+	.card__img:hover{
+		transform: scale(1.1);
+	}
 }

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

@@ -5,40 +5,40 @@
 	z-index: 999;
 	background-color: #ffffff;
 	width: 100%;
-	height: 40px;
+	height: 3rem;
 	box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.5);
-}
 
-.menu-bar__logo{
-  margin-left: 30px;
-  display: flex;
-  align-items: center;
-}
+	.menu-bar__logo {
+		margin-left: 1.1rem;
+  		display: flex;
+  		align-items: center;
+	}
 
-.menu-bar__item{
-  display: flex;
-  margin:auto;
-  align-items: center;
-}
+	.menu-bar__item{
+		display: flex;
+		margin:auto;
+		align-items: center;
 
-.menu-bar__item > ul{
-	display: flex;
-	list-style-type: none;
-}
+		ul {
+			display: flex;
+			list-style-type: none;
 
-.menu-bar__item > ul > li {
-	padding: 5px;
-	margin-right: 15px;
-}
+			li {
+				padding: 0.5rem;
+				margin-right: 0.5rem;
 
-.menu-bar__item > ul > li > a {
-	text-decoration: none;
-	padding: 5px;
-	color: rgb(7, 7, 7);
-	font-family: 'Segoe UI';
-}
+				a {
+					text-decoration: none;
+					padding: 0.5rem;
+					color: rgb(7, 7, 7);
+					font-family: 'Segoe UI';
+				}
 
-.menu-bar__item > ul > li > a:hover {
-	color: blue;
-	font-weight: 600;
-}
+				a:hover {
+					color: blue;
+					font-weight: 600;
+				}
+			}
+		}
+	  }
+}

src/app/pages/home/home.component.html

@@ -1,30 +1,9 @@
 <div class="home__container">
-	<app-card
-		gameCover="assets/bt-1.jpg"
-		gameLabel="DIGITAL"
-		gameType="DIGITAL | PS4"
-		gamePrice="R$ 129,99"
-	>
-	</app-card>
-	<app-card
-		gameCover="assets/bt-4.jpg"
-		gameLabel="EXCLUSIVE"
-		gameType="DISC | PS5"
-		gamePrice="R$ 269,99"
-	>
-	</app-card>
-	<app-card
-		gameCover="assets/ac-cover.jpg"
-		gameLabel="BEST OF YEAR"
-		gameType="DIGITAL | PS5"
-		gamePrice="R$ 369,99"
-		>
-	</app-card>
-	<app-card
-		gameCover="assets/bt-hardline.jpg"
-		gameLabel="NEW"
-		gameType="DIGITAL | PS3 PS4 PS5"
-		gamePrice="R$ 369,99"
+	<app-card *ngFor="let d of data"
+		gameCover="{{d.gameCover}}"
+		gameLabel="{{d.gameLabel}}"
+		gameType="{{d.gameType}}"
+		gamePrice="{{d.gamePrice}}"
 	>
 	</app-card>
 </div>

src/app/pages/home/home.component.ts

@@ -1,15 +1,20 @@
 import { Component, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
 
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.css']
 })
 export class HomeComponent implements OnInit {
+  data: any[] = [];
 
-  constructor() { }
+  constructor(private http: HttpClient) { }
 
   ngOnInit(): void {
+    this.http.get<any>('assets/data.json').subscribe(response => {
+      this.data = response;
+    })
   }
 
 }

src/assets/data.json

@@ -0,0 +1,29 @@
+[ 
+    {
+        "gameCover": "assets/bt-1.jpg",
+		"gameLabel": "DIGITAL",
+		"gameType": "DIGITAL | PS4",
+		"gamePrice": "R$ 129,99"
+    },
+
+    {
+        "gameCover": "assets/bt-4.jpg",
+		"gameLabel": "EXCLUSIVE",
+		"gameType": "DISC | PS5",
+		"gamePrice": "R$ 269,99"
+    },
+
+    {
+        "gameCover": "assets/ac-cover.jpg",
+		"gameLabel": "BEST OF YEAR",
+		"gameType": "DIGITAL | PS5",
+		"gamePrice": "R$ 369,99"
+    },
+
+    {
+        "gameCover": "assets/bt-hardline.jpg",
+		"gameLabel": "NEW",
+		"gameType": "DIGITAL | PS3 PS4 PS5",
+		"gamePrice": "R$ 369,99"
+    }	
+]