Update layout.scss to accomodate dropdown menu

Signed-off-by: sunilpaulmathew <sunil.kde@gmail.com>

Author: sunilpaulmathew

docs/_sass/layout.scss

@@ -1,4 +1,4 @@
-.imageWrapper {					// Sets the background image in the header area
+.imageWrapper {
 	height: 714px;
 	background: 
 		linear-gradient(
@@ -32,7 +32,7 @@
 	background-color: #fff;
 }
 
-.container {					// Set up the container for the site content
+.container {
 	display: grid;
 	margin: auto;
 	max-width: $content-width;
@@ -144,10 +144,8 @@ header {
 		margin-left: 15px;
 	}	
 
-} 
-
+}
 
-// Navigation Links
 .scroll {
 	display: flex;
 	width: 100%;
@@ -221,9 +219,6 @@ nav > ul li a:active {
 	color: rgba($header-title-color, 1);
 }
 
-
-
-// Sub Page Header Styling
 .subPageHeaderBackground .logo > p {
 	color: #000;
 }
@@ -238,10 +233,6 @@ nav > ul li a:active {
 	color: rgba(#000, 1);
 }
 
-
-
-// App Title, Price, Description and Links
-
 .appInfo {
 	grid-area: i;
 	display: flex;
@@ -250,6 +241,48 @@ nav > ul li a:active {
 	align-content: flex-start;
 }
 
+.dropbtn {
+	background-color: black;
+	color: white;
+	padding: 16px;
+	font-size: 16px;
+	border: none;
+	cursor: pointer;
+}
+
+.dropdown {
+	float: left;
+	overflow: hidden;
+}
+
+.dropdown-content {
+	display: none;
+	position: absolute;
+	background-color: #f9f9f9;
+	min-width: 160px;
+	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+	z-index: 1;
+}
+
+.dropdown-content a {
+	color: black;
+	padding: 12px 16px;
+	text-decoration: none;
+	display: block;
+}
+
+.dropdown-content a:hover {
+	background-color: #f1f1f1
+}
+
+.dropdown:hover .dropdown-content {
+	display: block;
+}
+
+.dropdown:hover .dropbtn {
+	background-color: #3e8e41;
+}
+
 @media only screen and (max-width: 992px) {
 
 	.appInfo {
@@ -374,10 +407,6 @@ nav > ul li a:active {
 	height: 75px;
 }
 
-
-
-// iPhone Device Preview
-
 .iphonePreview {
 	grid-area: p;
 	background-image: url($device-color);
@@ -466,10 +495,7 @@ nav > ul li a:active {
 		height: 488px;
 	}
 
-} 
-
-
-// Feature List
+}
 
 .features {
 	grid-area: c;
@@ -598,13 +624,8 @@ nav > ul li a:active {
 
 	.feature:nth-child(3n+1) {
 		padding-left: 0px;
-	}
-	
-} 
-
-
-
-// Footer
+	}	
+}
 
 footer {
 	grid-area: f;
@@ -625,8 +646,8 @@ footer {
 
 .footerIcons {
 	margin-top: 10px;
-	padding-top: 50px;
-	padding-bottom: 50px;
+	padding-top: 25px;
+	padding-bottom: 25px;
 	display: flex;
 	flex: 0 0 100%;
 	justify-content: center;
@@ -679,11 +700,10 @@ footer {
 
 	.footerIcons {
 		margin-top: 10px;
-		padding-top: 50px;
-		padding-bottom: 50px;
+		padding-top: 25px;
+		padding-bottom: 25px;
 		display: flex;
-	}
-	
+	}	
 } 
 
 .hidden {