diff --git a/css/style.css b/css/style.css
index ec898d6d..9bebc198 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,3 +1,4 @@
+
.bgColor, button:focus{
background-color: #315972;
color: #ffffff;
@@ -24,6 +25,7 @@ padding-right:0;
#people{
height: 1000px;
}
+
/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
@@ -220,29 +222,28 @@ h6 {
/* Desktop Navigation */
-.main-nav {
- /* Drop Down */
- /* Deep Drop Down */
+.sidenav {
+ right: 0;
}
#upper{
background-color: white !important;
}
-.main-nav,
-.main-nav * {
+.sidenav,
+.sidenav * {
margin: 0;
padding: 0;
list-style: none;
}
-.main-nav > ul > li {
+.sidenav > ul > li {
position: relative;
white-space: nowrap;
float: left;
}
-.main-nav a {
+.sidenav a {
display: block;
position: relative;
color: #413e66;
@@ -254,77 +255,36 @@ background-color: white !important;
font-weight: 600;
}
-.main-nav a:hover,
-.main-nav .active > a,
-.main-nav li:hover > a {
+.sidenav a:hover,
+.sidenav .active > a,
+.sidenav li:hover > a {
color: #1bb1dc;
text-decoration: none;
}
-.main-nav .drop-down ul {
- display: block;
- position: absolute;
- left: 0;
- top: calc(100% - 30px);
- z-index: 99;
- opacity: 0;
- visibility: hidden;
- padding: 10px 0;
- background: #fff;
- box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
- transition: ease all 0.3s;
-}
-
-.main-nav .drop-down:hover > ul {
- opacity: 1;
- top: 100%;
- visibility: visible;
-}
-
-.main-nav .drop-down li {
- min-width: 180px;
- position: relative;
-}
-
-.main-nav .drop-down ul a {
- padding: 10px 20px;
- font-size: 14px;
- font-weight: 500;
- text-transform: none;
- color: #065e77;
-}
-
-.main-nav .drop-down ul a:hover,
-.main-nav .drop-down ul .active > a,
-.main-nav .drop-down ul li:hover > a {
- color: #1bb1dc;
-}
-.main-nav .drop-down > a:after {
- content: "\f107";
+.sidenav .drop-down > a:after {
+ content: "\f078";
font-family: FontAwesome;
- padding-left: 10px;
+ padding-left: 1px;
+ position: absolute;
}
-.main-nav .drop-down .drop-down ul {
- top: 0;
- left: calc(100% - 30px);
+.sidenav .active.drop-down > a:after {
+ content: "\f077";
}
-.main-nav .drop-down .drop-down:hover > ul {
- opacity: 1;
- top: 0;
- left: 100%;
+.sidenav .drop-down > a {
+ padding-right: 35px;
}
-.main-nav .drop-down .drop-down > a {
- padding-right: 35px;
+.sidenav .drop-down ul {
+ display: none;
+ overflow: hidden;
}
-.main-nav .drop-down .drop-down > a:after {
- content: "\f105";
- position: absolute;
- right: 15px;
+.sidenav .drop-down li {
+
}
/* Mobile Navigation */
@@ -544,6 +504,171 @@ background-color: white !important;
transition: .5s;
}
+
+/* The side navigation menu */
+.sidenav {
+ height: 100%; /* 100% Full-height */
+ width: 0; /* 0 width - change this with JavaScript */
+ position: fixed; /* Stay in place */
+ z-index: 1; /* Stay on top */
+ top: 0; /* Stay at the top */
+ right: 0;
+ background-color: rgba(40, 38, 70, 0.8); /* Black*/
+ overflow-x: hidden; /* Disable horizontal scroll */
+ padding-top: 60px; /* Place content 60px from the top */
+ transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
+}
+
+/* The navigation menu links */
+.sidenav a {
+ padding: 8px 8px 8px 32px;
+ text-decoration: none;
+ font-size: 24px;
+ color: #fff;
+ display: block;
+ transition: 0.3s;
+}
+
+/* When you mouse over the navigation links, change their color */
+.sidenav a:hover {
+ color: #f1f1f1;
+}
+
+/* Position and style the close button (top right corner) */
+.sidenav .closebtn {
+ position: absolute;
+ top: 0;
+ right: 25px;
+ font-size: 36px;
+ margin-left: 50px;
+}
+
+/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
+#main {
+ transition: margin-left .5s;
+ padding: 20px;
+}
+
+/* On smaller screens, where height is less than 450px, change the style of the sidenav */
+
+@media only screen and (max-width: 1026px) {
+ .navbutton {
+ display: none;
+ }
+ #crossonbigscreen{
+ display: none;
+ }
+}
+
+#threedash{
+ color: #1316eb;
+ size: 24px;
+ font-weight: 400;
+}
+
+#about {
+ padding: 80px 0;
+}
+
+#about .about-content {
+ padding-top: 40px;
+}
+
+#about .about-content h2 {
+ color: #413e66;
+ font-family: "Montserrat", sans-serif;
+ font-weight: 700;
+}
+
+#about .about-content h3 {
+ color: #696592;
+ font-weight: 400;
+ font-size: 22px;
+ font-style: italic;
+}
+
+#about .about-content ul {
+ list-style: none;
+ padding: 0;
+}
+
+#about .about-content ul li {
+ padding-bottom: 10px;
+}
+
+#about .about-content ul li i {
+ font-size: 20px;
+ padding-right: 4px;
+ color: #1bb1dc;
+}
+
+#about .about-img {
+ position: relative;
+ margin: 30px 30px 30px 30px;
+}
+
+#about .about-img img {
+ width: 100%;
+ border: 8px solid #fff;
+ transition: .5s;
+}
+
+#about .about-img img:hover {
+ width: 100%;
+ -webkit-transform: scale(1.03);
+ transform: scale(1.03);
+}
+
+#about .about-img::before {
+ position: absolute;
+ left: -31px;
+ top: -30px;
+ width: 90%;
+ height: 92%;
+ z-index: -1;
+ content: '';
+ background-color: #ebf1fa;
+ transition: .5s;
+}
+
+#about .about-img::after {
+ position: absolute;
+ right: -31px;
+ bottom: -30px;
+ width: 90%;
+ height: 92%;
+ z-index: -1;
+ content: '';
+ background-color: #ebf1fa;
+ transition: .5s;
+}
+
+#footer{
+ width: 100%;
+ background-color: white !important;
+ padding: 15px 0px;
+ height:80px;
+}
+.copyright {
+ float: left;
+}
+
+.center {
+ float: left;
+ width: 47%;
+
+}
+.right {
+ width: 12%;
+ float: right;
+}
+.left {
+ width: 41%;
+ float: left;
+
+}
+
+
#projects {
color: #413e66;
font-family: "Montserrat", sans-serif;
@@ -644,7 +769,9 @@ background-color: white !important;
.ch{
margin-left: 40px;
- float: center;
+
+ float: left;
+
}
.probox{
@@ -671,6 +798,7 @@ background: linear-gradient(to right, #92FE9D, #00C9FF); /* W3C, IE 10+/ Edge, F
}
+
#participants{
color: #413e66;
font-family: "Montserrat", sans-serif;
@@ -708,6 +836,8 @@ background: linear-gradient(to right, #92FE9D, #00C9FF); /* W3C, IE 10+/ Edge, F
font-size: 10px;
margin: 1%;
}
+
+
/* .box {
height: 300px;
@@ -718,3 +848,4 @@ background: linear-gradient(to right, #92FE9D, #00C9FF); /* W3C, IE 10+/ Edge, F
position: relative;
border-radius: 25px;
} */
+
diff --git a/index.html b/index.html
index 6a3b8c93..5aca5ba5 100644
--- a/index.html
+++ b/index.html
@@ -48,11 +48,12 @@
-
+
diff --git a/js/main.js b/js/main.js
index d77dd79b..57b46203 100644
--- a/js/main.js
+++ b/js/main.js
@@ -20,7 +20,7 @@
// Navigation active state on scroll
var nav_sections = $('section');
- var main_nav = $('.main-nav, .mobile-nav');
+ var main_nav = $('.sidenav, .mobile-nav');
var main_nav_height = $('#header').outerHeight();
$(window).on('scroll', function () {
@@ -36,7 +36,6 @@
}
});
});
- //Scroll to top
$(window).scroll(function() {
var height = $(window).scrollTop();
if (height > 100) {
@@ -103,9 +102,34 @@ $(document).ready(function() {
pagination(start*8,limit);
});
+});
});
-})(jQuery);
+
+(jQuery);
+
+ /* Set the width of the side navigation to 250px */
+function openNav() {
+ document.getElementById("mySidenav").style.width = "250px";
+}
+
+/* Set the width of the side navigation to 0 */
+function closeNav() {
+ document.getElementById("mySidenav").style.width = "0";
+}
+
+$("#threedash").click(function(){
+ $("#threedash").hide();
+});
+
+$(".closebtn").click(function(){
+ $("#threedash").show();
+});
+ $(document).on('click', '.sidenav .drop-down > a', function(e) {
+ e.preventDefault();
+ $(this).next().slideToggle(300);
+ $(this).parent().toggleClass('active');
+ });
\ No newline at end of file
diff --git a/lib/mobile-nav/mobile-nav.js b/lib/mobile-nav/mobile-nav.js
index 6f8a2c20..a6e99648 100644
--- a/lib/mobile-nav/mobile-nav.js
+++ b/lib/mobile-nav/mobile-nav.js
@@ -2,8 +2,8 @@
"use strict";
// Mobile Navigation
- if ($('.main-nav').length) {
- var $mobile_nav = $('.main-nav').clone().prop({
+ if ($('.sidenav').length) {
+ var $mobile_nav = $('.sidenav').clone().prop({
class: 'mobile-nav d-lg-none'
});
$('body').append($mobile_nav);
@@ -31,9 +31,9 @@
$('.mobile-nav-overly').fadeOut();
}
}
- });
+ })
} else if ($(".mobile-nav, .mobile-nav-toggle").length) {
- $(".mobile-nav, .mobile-nav-toggle").hide();
- }
+ $(".mobile-nav, .mobile-nav-toggle").hide();}
+
})(jQuery);