Improved gallery

src/app/components/carousel/carousel.component.scss

@@ -1,90 +1,55 @@
 .carousel-container {
 	position: relative;
 	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 
-
+	.carousel-background {
-	//.carousel-next {
-	//	display: none;
-	//}
-	//.carousel-previous {
-	//	display: none;
-	//}
-	//.carousel-pause {
-	//	display: none;
-	//}
-	//
-	//&:hover {
-	//	.carousel-next {
-	//		display: flex;
-	//	}
-	//	.carousel-previous {
-	//		display: flex;
-	//	}
-	//	.carousel-pause {
-	//		display: flex;
-	//	}
-	//}
-}
-
-.carousel-background {
 		width: 100%;
 		height: 100%;
 		filter: blur(10px);
 		-webkit-filter: blur(10px);
-}
+	}
 
-.carousel-image {
+	.carousel-image {
-	position: absolute;
+		display: block;
-	top: 5%;
+		max-width: 95%;
-	left: 50%;
+		max-height: 95%;
-	transform: translate(-50%);
+		object-fit: cover;
-	height: 90%;
 		width: auto;
-}
+		height: auto;
+	}
 
-.carousel-next {
+	.carousel-next, .carousel-previous {
 		position: absolute;
-	top: calc(50% - 28px);
+		top: 0;
+		bottom: 0;
+		width: 56px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: rgba(255, 255, 255, 0.75);
+		filter: drop-shadow(3px 3px 5px black);
+		cursor: pointer;
+		transition: 0.25s;
+
+		&.carousel-next {
 			right: 0;
-	height: 56px;
-	width: 56px;
-	color: rgba(255, 255, 255, 0.75);
-	filter: drop-shadow(3px 3px 5px black);
-	cursor: pointer;
-	padding: 1rem;
-	border-radius: 50%;
-	transition: 0.25s;
-
-	&:hover {
-		color: white;
-		background: rgba(0,0,0,0.25);
-		filter: none;
 		}
-}
 
-.carousel-previous {
+		&.carousel-previous {
-	position: absolute;
-	top: calc(50% - 28px);
 			left: 0;
-	height: 56px;
+		}
-	width: 56px;
-	color: rgba(255, 255, 255, 0.75);
-	filter: drop-shadow(3px 3px 5px black);
-	cursor: pointer;
-	padding: 1rem;
-	border-radius: 50%;
-	transition: 0.25s;
 
 		&:hover {
 			color: white;
 			background: rgba(0,0,0,0.25);
 			filter: none;
 		}
-}
+	}
 
-
+	.carousel-pause {
-
-.carousel-pause {
 		position: absolute;
 		bottom: 0;
 		left: 50%;
@@ -103,4 +68,5 @@
 			background: rgba(0,0,0,0.25);
 			filter: none;
 		}
+	}
 }

src/app/view/home/home.component.html

@@ -39,7 +39,7 @@
 <!-- Restaurant -->
 <section class="py-5 bg-white">
 	<div class="py-5 cap-width d-flex flex-column flex-wrap flex-md-row align-items-center justify-content-around">
-		<div class="m-5">
+		<div class="m-4">
 			<img src="/assets/resturant.png" alt="Restaurant icon" style="width: 200px; height: auto;">
 		</div>
 		<div class="m-5" style="flex: 1 0 0">
@@ -69,8 +69,8 @@
 <section class="py-5">
 	<div class="py-5 px-3 cap-width text-center">
 		<h2 class="mb-5">About Us</h2>
-		<p class="mb-4">Pelican Landing is a family run, year-round, hunting & fishing lodge. With local guides to help to you navigate the beautiful southern shores of Lake of Woods you are assured to have a successful hunting or fishing trip. Pelican landing offers a multitude of amenities and packages to give any outdoorsman the perfect tailor made experience.</p>
+		<p class="mb-4">Pelican Landing is a family run, year-round, hunting & fishing lodge. With local guides to help to you navigate the beautiful southern shores of Lake of Woods you are assured to have a successful hunting or fishing trip. Pelican landing offers a multitude of amenities and packages to give any angler, hunter, or outdoorsman the perfect tailor made experience. Our goal at Pelican Landing is to make your stay with us a memorable & relaxing experience that you will want to repeat.</p>
-		<p class="mb-5">Amenities include: boats, boat-launch, cabins, guides, on-site restaurant & shore-side lunches. With both road and water access this resort can meet the needs of the angler, hunter, or nature enthusiast. Our goal at Pelican Landing is to make your stay with us a memorable & relaxing experience that you will want to repeat.</p>
+		<p class="mb-5">Amenities include: road access, water access, boats, a boat launch, cabins, guides, on-site restaurant & shore-side lunches.</p>
 		<app-carousel></app-carousel>
 	</div>
 </section>