added main components, functionality needed

src/app/footer-bar/footer-bar.component.css

@@ -11,6 +11,4 @@
 
 .Footer {
 	width: 100%;
-	position: absolute;
-	bottom: 0px;
 }

src/app/main/main.component.css

+* {
+	box-sizing: border-box;
+}
+
+/* Position the image container (needed to position the left and right arrows) */
+.container {
+	position: relative;
+}
+
+/* Hide the images by default */
+.mySlides {
+	display: none;
+}
+
+/* Add a pointer when hovering over the thumbnail images */
+.cursor {
+	cursor: pointer;
+}
+
+/* Next & previous buttons */
+.prev,
+.next {
+	cursor: pointer;
+	position: absolute;
+	top: 40%;
+	width: auto;
+	padding: 16px;
+	margin-top: -50px;
+	color: white;
+	font-weight: bold;
+	font-size: 20px;
+	border-radius: 0 3px 3px 0;
+	user-select: none;
+	-webkit-user-select: none;
+}
+
+/* Position the "next button" to the right */
+.next {
+	right: 0;
+	border-radius: 3px 0 0 3px;
+}
+
+/* On hover, add a black background color with a little bit see-through */
+.prev:hover,
+.next:hover {
+	background-color: rgba(0, 0, 0, 0.8);
+}
+
+/* Number text (1/3 etc) */
+.numbertext {
+	color: #f2f2f2;
+	font-size: 12px;
+	padding: 8px 12px;
+	position: absolute;
+	top: 0;
+}
+
+
+.row:after {
+	content: "";
+	display: table;
+	clear: both;
+}
+
+/* 4 columns side by side */
+.column {
+	float: left;
+	width: 25%;
+}
+
+/* Add a transparency effect for thumnbail images */
+.demo {
+	opacity: 0.6;
+}
+
+.active,
+.demo:hover {
+	opacity: 1;
+}

src/app/main/main.component.html

-<p>main works!</p>
+<!-- Container for the image gallery -->
+<div class="container">
+
+	<!-- Full-width images with number text -->
+	<div class="mySlides" style="display:block; ">
+		<div class="numbertext">1 / 4</div>
+		<img src="assets/images/el-equilibrista.jpg" style="width:100%;">
+	</div>
+
+	<div class="mySlides">
+		<div class="numbertext">2 / 4</div>
+		<img src="assets/images/fun-home.jpg" style="width:100%">
+	</div>
+
+	<div class="mySlides">
+		<div class="numbertext">3 / 4</div>
+		<img src="assets/images/giragringa.jpg" style="width:100%">
+	</div>
+
+	<div class="mySlides">
+		<div class="numbertext">4 / 4</div>
+		<img src="assets/images/FOREVER-YOUNG.jpg" style="width:100%">
+	</div>
+
+
+	<!-- Next and previous buttons -->
+	<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
+	<a class="next" onclick="plusSlides(1)">&#10095;</a>
+
+	<!-- Thumbnail images -->
+	<div class="row">
+		<div class="column">
+			<img class="demo cursor" src="assets/images/el-equilibrista.jpg" style="width:100%"
+				onclick="currentSlide(1)" alt="El Equilibrista">
+		</div>
+		<div class="column">
+			<img class="demo cursor" src="assets/images/fun-home.jpg" style="width:100%"
+				onclick="currentSlide(2)" alt="Fun Home">
+		</div>
+		<div class="column">
+			<img class="demo cursor" src="assets/images/giragringa.jpg" style="width:100%"
+				onclick="currentSlide(3)" alt="La Gringa">
+		</div>
+		<div class="column">
+			<img class="demo cursor" src="assets/images/FOREVER-YOUNG.jpg" style="width:100%"
+				onclick="currentSlide(4)" alt="Forever Young">
+		</div>
+	</div>
+
+	Novedades
+</div>
+	
\ No newline at end of file

src/app/main/main.component.ts

 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'main',
-  templateUrl: './main.component.html',
-  styleUrls: ['./main.component.css']
+	selector: 'main',
+	templateUrl: './main.component.html',
+	styleUrls: ['./main.component.css']
 })
 export class MainComponent implements OnInit {
 
-  constructor() { }
+	constructor() { }
 
-  ngOnInit(): void {
-  }
+	ngOnInit(): void {
+	}
 
 }

src/app/nav-bar/nav-bar.component.html

@@ -3,7 +3,7 @@
 
 		<a routerLink="/">
 			<!-- style included because child of <a> tag changes appeareance -->
-			<img class="NavLogo" src="assets/images/LogoProv2.png" style="height: auto; width: 300px;">
+			<img class="NavLogo" src="assets/images/LogoProv2.png" style="height: auto; width: 250px;">
 		</a>
 		<div class="NavSearchContainer">
 			<input class="NavInput" type="text" placeholder="Search..">

src/styles.css

@@ -3,3 +3,7 @@ body {
 	margin: 0;
 	padding: 0;
 }
+
+html {
+	font-family: 'Montserrat', sans-serif;
+}