From f33de7fe2cefd0854eb7c5112c7aab6abfaf32f7 Mon Sep 17 00:00:00 2001
From: yonigithub <62628255+yonigithub@users.noreply.github.com>
Date: Sat, 4 Apr 2020 16:15:05 -0400
Subject: [PATCH] Assignment-2

---
 moduleAssignment-2.css  | 101 ++++++++++++++++++++++++++++++++++++++++
 moduleAssignment-2.html |  42 +++++++++++++++++
 2 files changed, 143 insertions(+)
 create mode 100644 moduleAssignment-2.css
 create mode 100644 moduleAssignment-2.html
diff --git a/moduleAssignment-2.css b/moduleAssignment-2.css
new file mode 100644
index 0000000..593b38d
--- /dev/null
+++ b/moduleAssignment-2.css
@@ -0,0 +1,101 @@
+
+*{
+	box-sizing: border-box;
+}
+
+#chickenBox {
+	background-color: blue;
+
+}
+
+#beefBox {
+	background-color: #BFE5DE;
+	
+}
+
+#sushiBox {
+	background-color: #DFDD4A;
+	
+}
+
+#header{
+	text-align: center;
+	margin-bottom: 30px;
+}
+
+.row h3{
+	border: 2px solid black;
+	float:right;
+	padding:0 10px;
+	margin: 0;
+}
+
+.content {
+	border:2px solid black;
+	background-color: silver;
+	margin:5px;
+	padding:0;
+}
+
+ p{
+	margin:40px 5px 5px 5px;
+	font-family: sans-serif;
+}
+
+
+
+
+
+
+
+
+/* ******  Desktop View >= 992px ****** */
+
+@media (min-width: 992px) and (max-width: 1500px){
+
+	.row{
+		width:100%;
+	}
+
+	.col-lg-4{
+		width:33.3%;
+		float:left;
+	}
+
+
+}
+
+ /******  Tablet View 768px and 991px ****** */
+
+@media  (min-width: 768px) and (max-width: 991px) {
+
+	.row{
+		width:100%;
+	}
+
+	.col-md-6{
+		width:50%;
+		float: left;
+	}
+
+	.col-md-12{
+		width:100%;
+		float:left;
+	}
+
+}
+
+/* ****** Mobile view  =< than 767px ****** */
+
+@media (max-width: 767px){
+
+	.row{
+		width: 100%;
+	}
+
+	.col-sm-12{
+		width:100%;
+		float:left;
+
+}
+
diff --git a/moduleAssignment-2.html b/moduleAssignment-2.html
new file mode 100644
index 0000000..ef1a28a
--- /dev/null
+++ b/moduleAssignment-2.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="moduleAssignment-2.css">
+</head>
+<body>
+
+  <div class="container">
+    <header id="header"><h1>Our Menu</h1></header>
+    <div class="row">
+
+      <div class="col-sm-12 col-md-6 col-lg-4 "> 
+        <div class="content"><h3 id="chickenBox"> Chicken </h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. </p>
+        </div>
+      </div>
+      <div class="col-sm-12 col-md-6 col-lg-4 ">
+        <div class="content"> <h3 id="beefBox"> Beef</h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. </p> 
+        </div>
+      </div>
+      <div class="col-sm-12 col-md-12 col-lg-4 ">
+        <div class="content"> <h3 id="sushiBox"> Sushi</h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. </p> 
+        </div>
+      </div>
+    </div>
+    
+  </div>
+
+  
+
+</body>
+</html>
