Responsive framework

css/main.css

@@ -1,47 +1,125 @@
-/**
-Sample css code
-*/
-/* Set height to 100% for body and html to enable the background image to cover the whole page: */
+
 body,
 html {
   height: 100%;
+  margin: 0;
+  font-family: 'Abel';
 }
 
-/*Set background image*/
-.container {
-  background-image: url('https://doc-10-ao-docs.googleusercontent.com/docs/securesc/ha0ro937gcuc7l7deffksulhg5h7mbp1/r085o9ungppbiokopob2sfbekae4uqbb/1537920000000/14802840322886517493/*/110cT8sl-pOiHGgj9yToPkAqAzrr-RNfb');
-  height: 100%;
-  background-position: center;
-  background-size: cover;
+/* Add a black background color to the top navigation */
+.topnav {
+  background-color: #333;
 }
 
-/* Position text in the middle */
-.middle {
-  position: absolute;
-  color: beige;
-  top: 70%;
-  left: 39%;
+/* Style the links inside the navigation bar */
+.topnav a {
+  float: left;
+  display: block;
+  color: #f2f2f2;
   text-align: center;
-  font-size: 25px;
+  padding: 14px 16px;
+  text-decoration: none;
+  font-size: 17px;
+}
+
+/* Change the color of links on hover */
+.topnav a:hover {
+  background-color: #ddd;
+  color: black;
+}
+
+/* Add an active class to highlight the current page */
+.topnav a.active {
+  background-color: #a8a8a8;
+  color: white;
 }
 
-/*Set circle in unordered list*/
-.middle ul {
-  list-style-type: circle;
+/* Hide the link that should open and close the topnav on small screens */
+.topnav .icon {
+  display: none;
 }
 
-/*Set text inside li tag to left*/
-.middle ul li {
-  text-align: left !important;
+.sticky {
+  position: fixed;
+  top: 0;
+  width: 100%;
 }
 
-/*Set text color for a tag inside middle class and ul>li element*/
-.middle ul li a {
-  color: beige;
+.content {
+  padding-top: 48px;
 }
 
-/*Change text color and decoration for a tags inside middle class and ul>li element*/
-.middle ul li a:hover {
-  color: red;
+.card {
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+  transition: 0.3s;
+  border-radius: 5px;
+  overflow-y: hidden;
+}
+
+.card:hover {
+  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.6);
+}
+
+.container {
+  padding: 2px 16px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.card p {
+  margin: 0;
+}
+
+.card-title a {
+  font-size: medium;
   text-decoration: none;
+  color: black;
+  margin: 5px 0;
+}
+
+.card-title a:hover {
+  text-decoration: underline;
+}
+
+.card-img {
+  border-radius: 5px 5px 0 0;
+}
+
+footer {
+  background-color: #333;
+  color: #f2f2f2;
 }
+
+.copyright {
+  font-size: smaller;
+}
+
+
+/* TABLET GRIDS */
+@media only screen and (min-width: 600px) {
+  .content {
+    margin: 0 2em;
+  }
+  .topnav .icon {
+    display: flex;
+    float: right;
+    padding: 10px;
+  }
+}
+
+/* PHONE LANDSCAPE */
+@media only screen and (orientation: landscape) and (min-width: 600px) {
+  .content {
+    margin: 0 4em;
+  }
+}
+
+/* DESKTOP GRIDS */
+@media only screen and (min-width: 768px) {
+  .content {
+    margin: 0 5em;
+  }
+  .card {
+    height: 30vw;
+  }
+}

css/responsive.css

@@ -0,0 +1,137 @@
+* {
+    box-sizing: border-box;
+}
+
+.row::after {
+    content: "";
+    clear: both;
+    display: table;
+}
+
+/* MOBILE GRIDS*/
+
+[class*="col-"] {
+    float: left;
+    padding: 15px;
+    width: 100%;
+}
+
+/* TABLET GRIDS */
+@media only screen and (min-width: 600px) {
+    .col-s-1 {
+        width: 8.33%;
+    }
+    .col-s-2 {
+        width: 16.66%;
+    }
+    .col-s-3 {
+        width: 25%;
+    }
+    .col-s-4 {
+        width: 33.33%;
+    }
+    .col-s-5 {
+        width: 41.66%;
+    }
+    .col-s-6 {
+        width: 50%;
+    }
+    .col-s-7 {
+        width: 58.33%;
+    }
+    .col-s-8 {
+        width: 66.66%;
+    }
+    .col-s-9 {
+        width: 75%;
+    }
+    .col-s-10 {
+        width: 83.33%;
+    }
+    .col-s-11 {
+        width: 91.66%;
+    }
+    .col-s-12 {
+        width: 100%;
+    }
+}
+
+/* DESKTOP GRIDS */
+@media only screen and (min-width: 768px) {
+    .col-1 {
+        width: 8.33%;
+    }
+    .col-2 {
+        width: 16.66%;
+    }
+    .col-3 {
+        width: 25%;
+    }
+    .col-4 {
+        width: 33.33%;
+    }
+    .col-5 {
+        width: 41.66%;
+    }
+    .col-6 {
+        width: 50%;
+    }
+    .col-7 {
+        width: 58.33%;
+    }
+    .col-8 {
+        width: 66.66%;
+    }
+    .col-9 {
+        width: 75%;
+    }
+    .col-10 {
+        width: 83.33%;
+    }
+    .col-11 {
+        width: 91.66%;
+    }
+    .col-12 {
+        width: 100%;
+    }
+}
+
+.m-auto {
+    margin: auto;
+}
+
+.clear-3 [class*="col-"]:nth-child(3n+1) {
+    clear: left; 
+}
+
+.clear-4 [class*="col-"]:nth-child(4n+1) {
+    clear: left; 
+}
+
+.clear-5 [class*="col-"]:nth-child(5n+1) {
+    clear: left; 
+}
+
+.clear-6 [class*="col-"]:nth-child(6n+1) {
+    clear: left; 
+}
+
+.clear-7 [class*="col-"]:nth-child(7n+1) {
+    clear: left; 
+}
+
+.mx-auto {
+    margin: 0 auto;
+}
+
+.ml-auto {
+    margin-left: auto;
+}
+
+.mr-auto {
+    margin-right: auto;
+}
+
+.text-center {
+    text-align: center;
+}