init and add form element

src/css/filter-700px.css

@@ -0,0 +1,23 @@
+@media screen and (max-width: 700px) {
+  .filter-options h2 {
+    width: 100%;
+    font-size: 3vw;
+    text-align: center;
+  }
+  .filter-options select {
+    width: 100%;
+    height: 5vh;
+    margin: 10px 10px 10px 10px;
+    font-size: 3vw;
+  }
+}
+
+@media screen and (max-width: 700px) {
+  #restaurants-list li {
+    width: 100%;
+  }
+  .restaurant-img {
+    width: 60vw;
+    max-height: 350px;
+  }
+}

src/css/main-aux.css

@@ -0,0 +1,55 @@
+
+#restaurants-list li h2 {
+  color: #703f0a;
+  font-size: 13pt;
+  text-transform: uppercase;
+  text-align: center;
+}
+#restaurants-list p {
+  font-size: 11pt;
+}
+#restaurants-list p:last-child {
+  margin: 50px;
+}
+#restaurants-list li a {
+  color: #fff;
+  background: #7d4f00;
+  opacity: 1;
+  border-bottom: 3px solid #eee;
+  display: inline-block;
+  text-decoration: none;
+  margin: 15px 0 0;
+  padding: 8px 30px 10px;
+  text-transform: uppercase;
+}
+
+*:focus {
+  outline: none;
+  box-shadow: 5px 5px 5px #7A4507;
+}
+#reviews-list [id^=rating]:focus {
+  outline: none;
+  border: 2px solid #000000;
+
+}
+.filter-options select:focus {
+  outline: none;
+  border: 2px solid #000000;
+}
+*:hover {
+  outline: none;
+}
+#footer {
+  color: #B1B1B1;
+  background: #444444;
+  opacity: 1;
+  font-size: 8pt;
+  letter-spacing: 1px;
+  padding: 25px;
+  margin-bottom: -70px;
+  text-align: center;
+  text-transform: uppercase;
+}
+strong {
+  color : white;
+}

src/css/main.css

@@ -0,0 +1,132 @@
+/* CSS Document */
+@charset "utf-8";
+
+article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+.collapsible {
+  background-color: #eee;
+  color: #444;
+  padding: 18px;
+  width: 100%;
+  border: none;
+  text-align: center;
+  outline: none;
+  font-size: 15px;
+}
+.active, .collapsible:hover {
+  background-color: #ccc;
+}
+
+/* ====================== Restaurant Filtering ====================== */
+
+.filter-options {
+  background-color: #29648b;
+  margin: auto;
+  display: flex;
+  flex-wrap: wrap;
+}
+.filter-options h2 {/*.filter-options h2*/
+  color: white;
+  font-weight: normal;
+  margin: 5px 10px;
+}
+.filter-options select {
+  background-color: white;
+  border: 1px solid #fff;
+  font-size: 2vw;
+  letter-spacing: 0;
+  margin: 10px auto 10px auto;
+  padding: 0 10px;
+  width: calc((100% - 20px)/3);
+}
+#restaurants-list {
+  background-color: #f3f3f3;
+  list-style: outside none none;
+  margin: 0;
+  padding: 30px 0 60px;
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+}
+#restaurants-list li {
+  border: 2px solid #ccc;
+  margin: 15px;
+  padding: 0 30px 25px;
+  width: calc((100% - 200px)/2);
+  padding-bottom: 50px;
+}
+
+@media screen and (max-width: 700px) {
+  .filter-options h2 {
+    width: 100%;
+    font-size: 5vw;
+    text-align: center;
+      height: 5vh;
+
+  }
+  .filter-options select {
+    width: 100%;
+    height: 5vh;
+    margin: 10px 10px 10px 10px;
+    font-size: 3vw;
+  }
+}
+
+.restaurant-img {
+  background-color: #ccc;
+  display: block;
+  margin: 0;
+  width: 30vw;
+  min-height: 248px;
+  min-width: 100%;
+}
+
+
+.restaurant-img {
+  width: 20vw;
+  /* margin:0 0 0 18%; */
+}
+@media screen and (max-width: 700px) {
+  #restaurants-list li {
+    width: 100%;
+  }
+  .restaurant-img {
+    width: 60vw;
+    max-height: 350px;
+  }
+}
+@media screen and (min-width: 1300px) {
+  #restaurants-list li {
+    max-width: 25%;
+    margin: 5px auto 20px auto;
+  }
+  #restaurants-list .restaurant-img {
+    max-width: 200px;
+    margin: auto;
+  }
+}
+
+#map {
+  /* position: absolute; */
+  transition: left 1s ease;
+  /* left:-100%; */
+  height: 51vh;
+  width: 100%;
+  margin: auto;
+  display: none;
+  overflow: hidden;
+}
+/* ====================== Navigation ====================== */
+html,body {
+  background-color: #fdfdfd;
+  width: 100%;
+  margin: 0;
+}
+
+body,td,th,p {
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 10pt;
+  line-height: 1.5;
+  margin: 0;
+}

src/css/restaurant-1300px.css

@@ -0,0 +1,10 @@
+@media screen and (min-width: 1300px) {
+  #restaurants-list li {
+    max-width: 25%;
+    margin: 5px auto 20px auto;
+  }
+  #restaurants-list .restaurant-img {
+    max-width: 200px;
+    margin: auto;
+  }
+}