Team 10 D3 Visualizations Submission

css/scrolling-nav.css

@@ -0,0 +1,88 @@
+/*!
+ * Start Bootstrap - Scrolling Nav HTML Template (http://startbootstrap.com)
+ * Code licensed under the Apache License v2.0.
+ * For details, see http://www.apache.org/licenses/LICENSE-2.0.
+ */
+body {
+    width: 100%;
+    height: 100%;
+}
+
+html {
+    width: 100%;
+    height: 100%;
+}
+
+@media(min-width:767px) {
+    .navbar {
+        padding:7px 0;
+        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
+        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
+        transition: background .5s ease-in-out,padding .5s ease-in-out;
+    }
+
+    .navbar-default {
+        background-color: #990000;
+    }
+
+    .top-nav-collapse {
+        padding: 0;
+    }
+}
+
+/* Demo Sections - You can use these as guides or delete them - the scroller will work with any sort of height, fixed, undefined, or percentage based.
+The padding is very important to make sure the scrollspy picks up the right area when scrolled to. Adjust the margin and padding of sections and children
+of those sections to manage the look and feel of the site. */
+
+.intro-section {
+    height: 100%;
+    padding-top: 50px;
+    color: white;
+    text-align: center;
+    background: #fff;
+    background-image: url('../images/iceberg.jpg');
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-size: cover;
+    min-height: 1000px;
+}
+
+.about-section {
+    height: 100%;
+    padding-top: 90px;
+    text-align: center;
+    background: #fffffa;
+}
+
+.features-section {
+    height: 100%;
+    padding-top: 90px;
+    text-align: center;
+    background: #fffffd;
+}
+
+.getting-started-section {
+    height: 100%;
+    padding-top: 90px;
+    padding-bottom: 90px;
+    text-align: center;
+    background: #fffffa;
+    min-height: 1000px;
+}
+
+.extras-section {
+    height: 100%;
+    padding-top: 50px;
+    color: white;
+    text-align: center;
+    background: #fff;
+
+}
+
+.partner-section {
+    height: 100%;
+    padding-top: 20px;
+    text-align: center;
+    background: #fffffa;
+    min-height: 800px;
+}

css/styles.css

@@ -0,0 +1,181 @@
+@font-face {
+     font-family: National; src: url('//www.usc.edu/assets/fonts/NationalWeb-Regular.eot'); src: local(':)'), url('//www.usc.edu/assets/fonts/NationalWeb-Regular.woff') format('woff'), url('//www.usc.edu/assets/fonts/NationalWeb-Regular.ttf') format('truetype'), url('//www.usc.edu/assets/fonts/NationalWeb-Regular.svg') format('svg');
+     font-weight: 500;
+     font-style: normal;
+ }
+
+/* Custom CSS */
+
+/* Navbar */
+
+.navbar .navbar-nav > .active > a,
+.navbar .navbar-nav > .active > a:hover,
+.navbar .navbar-nav > .active > a:focus {
+    color: #fff;
+    background-color: rgba(227,190,66,0.8);
+}
+
+.navbar .nav li.dropdown.open > .dropdown-toggle,
+.navbar .nav li.dropdown.active > .dropdown-toggle,
+.navbar .nav li.dropdown.open.active > .dropdown-toggle {
+      background-color: rgba(227,190,66,0.8);
+}
+
+body {
+    overflow-y: scroll;
+}
+
+.nav-ul-second > li > a {
+  padding-top: 12px;
+  padding-bottom:2px !important;
+}
+
+.nav-ul-second {
+  margin-left: 134px;
+}
+
+/* Buttons */
+.btn-primary {
+    background-color: #ffcc00;
+    border: none;
+}
+
+#nav-secondary {
+  margin-top: 50px;
+  max-height: 50px;
+  height: 64px;
+  background-color: #000;
+}
+
+.btn-primary:hover {
+    background-color: #ffdb4d;
+}
+
+.navbar-collapse { background:#990000;  }
+
+.btn-default {
+    color: #fff;
+    background-color: transparent;
+    border-color: #fff;
+}
+
+.btn-default:hover {
+    color: #fff;
+    background-color: #FFCC00;
+    border-color: #fff;
+}
+
+.btn-default:focus,
+.btn-default.focus {
+    color: #fff;
+    background-color: transparent;
+    border-color: #fff;
+}
+
+/* Other classes */
+
+.vertical-center {
+    min-height: 100%;
+    min-height: 100vh;
+
+    display: flex;
+    align-items: center;
+}
+
+.media-object {
+    max-width:64px;
+    max-height:64px;
+}
+
+.media-body {
+    text-align: left;
+}
+
+#intro .title {
+    font-size: 70px;
+    margin-top: 4.5cm;
+}
+
+.thumbnail h3{
+   padding: 3mm 0cm 0cm 0cm;
+}
+
+#mime-viz .thumbnail img{
+    height: 200px;
+    width: 400px;
+}
+
+#regular-viz .thumbnail img{
+    height: 200px;
+    width: 400px;
+}
+
+#dynamic-viz .thumbnail img{
+    height: 200px;
+    width: 400px;
+}
+
+#sce-viz .thumbnail img{
+    height: 200px;
+    width: 400px;
+}
+
+#sce-viz .thumbnail{
+    height: 30%;
+}
+
+#eval-viz .thumbnail img{
+    height: 200px;
+    width: 400px;
+}
+
+#eval-viz .thumbnail{
+    height: 30%;
+}
+
+
+#d3-other .thumbnail img{
+    height: 200px;
+    width: 400px;
+}
+
+#about .stylish-panel {
+    padding: 20px 0;
+    text-align: center;
+}
+#about .stylish-panel > div > div{
+    padding: 10px;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    transition: 0.2s;
+}
+#about .stylish-panel > div:hover > div{
+    margin-top: -10px;
+    border: 1px solid rgb(200, 200, 200);
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px 2px;
+    background: rgba(200, 200, 200, 0.1);
+    transition: 0.5s;
+}
+
+#about .stylish-panel > div:hover img {
+    border-radius: 50%;
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
+}
+
+#learn-more .panel .panel-body{
+    min-height:280px;
+}
+
+
+#irdsgroup{
+    color:white;
+    text-decoration: none;
+}
+
+#irdsgroup:hover{
+    color:#FFCC00;
+}