diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 000000000..f10092a74
Binary files /dev/null and b/.DS_Store differ
diff --git a/css/main.css b/css/main.css
index bcc90344f..4725f610e 100644
--- a/css/main.css
+++ b/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;
+ }
+}
\ No newline at end of file
diff --git a/css/responsive.css b/css/responsive.css
new file mode 100644
index 000000000..bbf2d836c
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/img/favicon.ico b/img/favicon.ico
new file mode 100644
index 000000000..825774c33
Binary files /dev/null and b/img/favicon.ico differ
diff --git a/img/usf-logo-png-2.png b/img/usf-logo-png-2.png
index 3d3d8548e..c5288d52e 100644
Binary files a/img/usf-logo-png-2.png and b/img/usf-logo-png-2.png differ
diff --git a/index.html b/index.html
index fbae197cd..d34ce0eda 100644
--- a/index.html
+++ b/index.html
@@ -1 +1,1412 @@
-
\ No newline at end of file
+
+
+
+
+
+
diff --git a/sample.html b/sample.html
deleted file mode 100644
index 6fa891b6c..000000000
--- a/sample.html
+++ /dev/null
@@ -1,33 +0,0 @@
-
-
-
-
-