layout basic structure

rameskum · rameskum · commit b6a8ba5563ed · 2022-02-19T15:50:03.000-05:00
diff --git a/practice/06 - Components/06-app-layout.html b/practice/06 - Components/06-app-layout.html
@@ -0,0 +1,63 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+	      name="viewport">
+	<meta content="ie=edge" http-equiv="X-UA-Compatible">
+	<title>Application Layout</title>
+	<style>
+		* {
+			margin: 0;
+			padding: 0;
+			box-sizing: border-box;
+		}
+
+		body {
+			font-family: sans-serif;
+			color: #343a40;
+			font-size: 24px;
+
+			height: 100vh;
+
+			display: grid;
+			grid-template-columns: 80px 400px 1fr 250px;
+			grid-template-rows: 80px 1fr;
+			text-align: center;
+			font-weight: bold;
+		}
+
+		nav, menu, section, main, aside {
+			padding-top: 24px;
+		}
+
+		nav {
+			background-color: #343a40;
+			color: #fff;
+			grid-row: 1 / -1;
+		}
+
+		menu {
+			background-color: #7048e8;
+			color: #fff;
+			grid-column: 2 / -1;
+		}
+
+		section {
+			background-color: #e9ecef;
+		}
+
+		aside {
+			background-color: #e9ecef;
+		}
+
+	</style>
+</head>
+<body>
+<nav>Nav</nav>
+<menu>Menu</menu>
+<section>Inbox</section>
+<main>Email view</main>
+<aside>Additional Info</aside>
+</body>
+</html>
