Offers UI completed

src/app/menu-items/menu-items.component.html

@@ -1,7 +1,8 @@
 <div class="container">
 	<section class="item-details">
 		<div class="widget-heading-holder">
-			<header> Menu Items </header>
+			<header *ngIf="selectedTab === 'items'"> Menu Items </header>
+			<header *ngIf="selectedTab === 'offers'"> Offers </header>
 
 			<div class="tabs-holder" [ngClass]="{'left' : selectedTab === 'items', 'right': selectedTab === 'offers'}">
 				<button (click)="selectedTab = 'items'"> Items </button>
@@ -9,7 +10,7 @@
 			</div>
 		</div>
 
-		<table>
+		<table *ngIf="selectedTab === 'items'">
 			<tr>
 				<th> Item No </th>
 				<th> Item Name </th>
@@ -70,6 +71,85 @@
 				</td>
 			</tr>
 		</table>
+
+		<ul class="offer-list" *ngIf="selectedTab === 'offers'">
+			<li>
+				<div class="info">
+					<header> Buy 2 Solo Bucket @ &#x20B9; 750  </header>
+					<p>
+						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi quae sit repudiandae omnis iste dolorem, error eum totam voluptate non unde ut numquam minus temporibus dolores sequi! Incidunt debitis, fugit?
+					</p>
+
+					<button class="round-button"> Subscribed </button>
+				</div>
+
+				<div class="time-limit">
+					<header> Limited Time Offer </header>
+					<div class="caption"> Subscribe before it ends </div>
+
+					<div class="counters-holder">
+						<div class="counter">
+							<div class="heading"> Days </div>
+							<div class="count"> 2 </div>
+						</div>
+
+						<div class="counter">
+							<div class="heading"> Hrs </div>
+							<div class="count"> 15 </div>
+						</div>
+
+						<div class="counter">
+							<div class="heading"> Mins </div>
+							<div class="count"> 38 </div>
+						</div>
+
+						<div class="counter">
+							<div class="heading"> Sec </div>
+							<div class="count"> 58 </div>
+						</div>
+					</div>
+				</div>
+			</li>
+
+			<li>
+				<div class="info">
+					<header> Buy 2 Solo Bucket @ &#x20B9; 750  </header>
+					<p>
+						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi quae sit repudiandae omnis iste dolorem, error eum totam voluptate non unde ut numquam minus temporibus dolores sequi! Incidunt debitis, fugit?
+					</p>
+
+					<button class="round-button active"> Subscribe Now </button>
+				</div>
+
+				<div class="time-limit">
+					<header> Limited Time Offer </header>
+					<div class="caption"> Subscribe before it ends </div>
+
+					<div class="counters-holder">
+						<div class="counter">
+							<div class="heading"> Days </div>
+							<div class="count"> 2 </div>
+						</div>
+
+						<div class="counter">
+							<div class="heading"> Hrs </div>
+							<div class="count"> 15 </div>
+						</div>
+
+						<div class="counter">
+							<div class="heading"> Mins </div>
+							<div class="count"> 38 </div>
+						</div>
+
+						<div class="counter">
+							<div class="heading"> Sec </div>
+							<div class="count"> 58 </div>
+						</div>
+					</div>
+				</div>
+			</li>
+		</ul>
+
 	</section>
 
 	<ul class="subscribed-offers">

src/app/menu-items/menu-items.component.scss

@@ -6,8 +6,35 @@
 	height: 100%;
 
 	.item-details {
-		width: 65%;
+		padding: 0 2.5%;
+		width: 70%;
+		height: calc(100vh - 70px);
+		overflow: auto;
 		margin-right: auto;
+
+		&:hover {
+			&::-webkit-scrollbar {
+			  display: block;
+			}
+		}
+
+		&::-webkit-scrollbar {
+			width: 8px;
+			display: none;
+		}
+
+			/* Track */
+		&::-webkit-scrollbar-track {
+			background-color: white;
+		}
+		/* Handle */
+		&::-webkit-scrollbar-thumb {
+			background-color: rgba(black, 0.2);
+		}
+		/* Handle on hover */
+		&::-webkit-scrollbar-thumb:hover {
+			background-color: rgba(black, 0.5);
+		}
 	}
 }
 
@@ -171,3 +198,113 @@ table {
 		}
 	}
 }
+
+
+.offer-list {
+	margin: 30px 0;
+	list-style: none;
+
+	li {
+		display: flex;
+		width: 100%;
+		align-items: stretch;
+		background-color: white;
+		border-radius: 10px;
+		margin-bottom: 30px;
+	}
+
+	.info {
+		width: 60%;
+		padding: 20px;
+
+		header {
+			font-size: 16px;
+			color: var(--dark-grey);
+			font-weight: 500;
+			letter-spacing: 0.5px;
+		}
+
+		p {
+			color: var(--grey);
+			font-size: 13px;
+			line-height: 1.5;
+			margin: 15px 0;
+		}
+
+		button {
+			&.active {
+				background-color: var(--brand-blue);
+			}
+		}
+	}
+
+	.time-limit {
+		width: 40%;
+		padding: 20px;
+		border-left: 1px solid #efefef;
+		text-align: center;
+
+		header {
+			font-size: 16px;
+			color: var(--dark-grey);
+			font-weight: 500;
+			letter-spacing: 0.5px;
+		}
+
+		.caption {
+			margin: 10px 0;
+			letter-spacing: 1px;
+			font-size: 12px;
+			color: var(--grey);
+		}
+
+		.counters-holder {
+			display: flex;
+			width: 90%;
+			margin: 0 auto;
+			justify-content: space-between;
+
+			.counter {
+				width: 20%;
+
+				.heading {
+					font-size: 10px;
+					color: var(--grey);
+					letter-spacing: 0.5px;
+					font-weight: 500;
+				}
+
+				.count {
+					color: var(--brand-blue);
+					font-weight: 700;
+					font-size: 22px;
+					position: relative;
+					padding: 5px 0;
+					margin-top: 10px;
+
+					&::before {
+						content: '';
+						position: absolute;
+						top: 0;
+						left: 0;
+						height: 48%;
+						width: 100%;
+						box-shadow: 0px 0px 5px #cecece;
+						border-radius: 3px;
+					}
+
+					&::after {
+						content: '';
+						position: absolute;
+						bottom: 0;
+						left: 0;
+						height: 48%;
+						width: 100%;
+						box-shadow: 0px 0px 5px #cecece;
+						border-radius: 3px;
+					}
+				}
+			}
+		}
+	}
+}

src/app/menu-items/menu-items.component.ts

@@ -6,7 +6,7 @@ import { Component, OnInit } from '@angular/core';
 	styleUrls: ['./menu-items.component.scss']
 })
 export class MenuItemsComponent implements OnInit {
-	selectedTab: string = 'items';
+	selectedTab: string = 'offers';
 	productAvailable: boolean = false;
 
 	constructor() { }

src/styles.scss

@@ -45,7 +45,7 @@ button {
 	color: white;
 	font-size: 13px;
 	letter-spacing: 1px;
-	height: 25px;
+	height: 30px;
 	border: 0px;
 }