From 61d6b76c1e46df278e78a84f896a19c58b0fe4d8 Mon Sep 17 00:00:00 2001 From: shuba400 Date: Mon, 20 Jan 2020 11:50:14 +0530 Subject: [PATCH 1/8] Add navdrawe --- css/style.css | 182 ++++++++++++++++++++++++++++++----- index.html | 7 +- js/main.js | 23 ++++- lib/mobile-nav/mobile-nav.js | 10 +- 4 files changed, 186 insertions(+), 36 deletions(-) diff --git a/css/style.css b/css/style.css index 9a8e9501..cb6632c4 100644 --- a/css/style.css +++ b/css/style.css @@ -1,4 +1,4 @@ - + /*-------------------------------------------------------------- # General --------------------------------------------------------------*/ @@ -177,25 +177,24 @@ h6 { /* Desktop Navigation */ -.main-nav { - /* Drop Down */ - /* Deep Drop Down */ +.sidenav { + right: 0; } -.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; @@ -207,14 +206,14 @@ h6 { 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 { +.sidenav .drop-down ul { display: block; position: absolute; left: 0; @@ -228,18 +227,18 @@ h6 { transition: ease all 0.3s; } -.main-nav .drop-down:hover > ul { +.sidenav .drop-down:hover > ul { opacity: 1; top: 100%; visibility: visible; } -.main-nav .drop-down li { +.sidenav .drop-down li { min-width: 180px; position: relative; } -.main-nav .drop-down ul a { +.sidenav .drop-down ul a { padding: 10px 20px; font-size: 14px; font-weight: 500; @@ -247,34 +246,34 @@ h6 { color: #065e77; } -.main-nav .drop-down ul a:hover, -.main-nav .drop-down ul .active > a, -.main-nav .drop-down ul li:hover > a { +.sidenav .drop-down ul a:hover, +.sidenav .drop-down ul .active > a, +.sidenav .drop-down ul li:hover > a { color: #1bb1dc; } -.main-nav .drop-down > a:after { +.sidenav .drop-down > a:after { content: "\f107"; font-family: FontAwesome; padding-left: 10px; } -.main-nav .drop-down .drop-down ul { +.sidenav .drop-down .drop-down ul { top: 0; left: calc(100% - 30px); } -.main-nav .drop-down .drop-down:hover > ul { +.sidenav .drop-down .drop-down:hover > ul { opacity: 1; top: 0; left: 100%; } -.main-nav .drop-down .drop-down > a { +.sidenav .drop-down .drop-down > a { padding-right: 35px; } -.main-nav .drop-down .drop-down > a:after { +.sidenav .drop-down .drop-down > a:after { content: "\f105"; position: absolute; right: 15px; @@ -497,6 +496,141 @@ h6 { 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; + } +} + +#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; +} + #projects { color: #413e66; font-family: "Montserrat", sans-serif; @@ -607,5 +741,5 @@ background: linear-gradient(to right, #92FE9D, #00C9FF); /* W3C, IE 10+/ Edge, F position: relative; transition: 0.8s; } -======= + diff --git a/index.html b/index.html index 707954f7..b2cdbd00 100644 --- a/index.html +++ b/index.html @@ -44,11 +44,12 @@ - + diff --git a/js/main.js b/js/main.js index bfeb02d1..104b18c3 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) { @@ -52,13 +51,29 @@ $(document).ready(function() { return false; }); -======= }); }); + +(jQuery); + + /* Set the width of the side navigation to 250px */ +function openNav() { + document.getElementById("mySidenav").style.width = "250px"; +} -})(jQuery); +/* 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(); +}); 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); From dbb57ec30dcbbff89a702842a3a6e2a8c639ce31 Mon Sep 17 00:00:00 2001 From: shuba400 <51315650+shuba400@users.noreply.github.com> Date: Tue, 21 Jan 2020 17:21:36 +0530 Subject: [PATCH 2/8] Update style.css --- css/style.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/css/style.css b/css/style.css index cb6632c4..4ed6dde4 100644 --- a/css/style.css +++ b/css/style.css @@ -546,6 +546,10 @@ h6 { .navbutton { display: none; } + + #crossonbigscreen{ + display: none; + } } #threedash{ From 5fbae68caf750e170689d8c648ddfc045ae9f650 Mon Sep 17 00:00:00 2001 From: shuba400 <51315650+shuba400@users.noreply.github.com> Date: Tue, 21 Jan 2020 17:22:30 +0530 Subject: [PATCH 3/8] Update index.html --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index b2cdbd00..9e22fa74 100644 --- a/index.html +++ b/index.html @@ -49,7 +49,7 @@

OPENCODE'2
- × + ×
  • Home
  • About Us
    • From 4dd8ff377fd57537e7931db6c2476d53c5319e51 Mon Sep 17 00:00:00 2001 From: shuba400 <51315650+shuba400@users.noreply.github.com> Date: Tue, 21 Jan 2020 17:27:35 +0530 Subject: [PATCH 4/8] Update style.css --- css/style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index 4ed6dde4..a940b11d 100644 --- a/css/style.css +++ b/css/style.css @@ -546,10 +546,10 @@ h6 { .navbutton { display: none; } - - #crossonbigscreen{ + #crossonbigscreen{ display: none; } + } #threedash{ From b7ce5649d26fae9c9842e94816b754c6d5a0791e Mon Sep 17 00:00:00 2001 From: Shubhang Singh <51315650+shuba400@users.noreply.github.com> Date: Wed, 22 Jan 2020 20:53:29 +0530 Subject: [PATCH 5/8] Update index.html --- index.html | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 9e22fa74..a28961a4 100644 --- a/index.html +++ b/index.html @@ -49,7 +49,7 @@

    OPENCODE'2

- × + ×
  • Contact Us
    • From 85dc070a87df9e83f3d439ad455cafab7f91f24b Mon Sep 17 00:00:00 2001 From: Shubhang Singh <51315650+shuba400@users.noreply.github.com> Date: Wed, 22 Jan 2020 20:54:14 +0530 Subject: [PATCH 6/8] Update style.css --- css/style.css | 73 ++++++++++++++------------------------------------- 1 file changed, 19 insertions(+), 54 deletions(-) diff --git a/css/style.css b/css/style.css index a940b11d..7d9a7fef 100644 --- a/css/style.css +++ b/css/style.css @@ -213,70 +213,29 @@ h6 { text-decoration: none; } -.sidenav .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; -} - -.sidenav .drop-down:hover > ul { - opacity: 1; - top: 100%; - visibility: visible; -} - -.sidenav .drop-down li { - min-width: 180px; - position: relative; -} - -.sidenav .drop-down ul a { - padding: 10px 20px; - font-size: 14px; - font-weight: 500; - text-transform: none; - color: #065e77; -} - -.sidenav .drop-down ul a:hover, -.sidenav .drop-down ul .active > a, -.sidenav .drop-down ul li:hover > a { - color: #1bb1dc; -} .sidenav .drop-down > a:after { - content: "\f107"; + content: "\f078"; font-family: FontAwesome; - padding-left: 10px; + padding-left: 1px; + position: absolute; } -.sidenav .drop-down .drop-down ul { - top: 0; - left: calc(100% - 30px); +.sidenav .active.drop-down > a:after { + content: "\f077"; } -.sidenav .drop-down .drop-down:hover > ul { - opacity: 1; - top: 0; - left: 100%; +.sidenav .drop-down > a { + padding-right: 35px; } -.sidenav .drop-down .drop-down > a { - padding-right: 35px; +.sidenav .drop-down ul { + display: none; + overflow: hidden; } -.sidenav .drop-down .drop-down > a:after { - content: "\f105"; - position: absolute; - right: 15px; +.sidenav .drop-down li { + } /* Mobile Navigation */ @@ -549,7 +508,6 @@ h6 { #crossonbigscreen{ display: none; } - } #threedash{ @@ -747,3 +705,10 @@ background: linear-gradient(to right, #92FE9D, #00C9FF); /* W3C, IE 10+/ Edge, F } + + + + + + + From d23c4b2d565c1555b96124b7dd1ff7d2356ecf45 Mon Sep 17 00:00:00 2001 From: Shubhang Singh <51315650+shuba400@users.noreply.github.com> Date: Wed, 22 Jan 2020 20:55:09 +0530 Subject: [PATCH 7/8] Update main.js --- js/main.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/js/main.js b/js/main.js index 104b18c3..9db16e5a 100644 --- a/js/main.js +++ b/js/main.js @@ -77,3 +77,9 @@ $("#threedash").click(function(){ $(".closebtn").click(function(){ $("#threedash").show(); }); + + $(document).on('click', '.sidenav .drop-down > a', function(e) { + e.preventDefault(); + $(this).next().slideToggle(300); + $(this).parent().toggleClass('active'); + }); From 550143949b893aca9741c544d9c967ba047d44e1 Mon Sep 17 00:00:00 2001 From: shuba400 Date: Sun, 26 Jan 2020 23:39:19 +0530 Subject: [PATCH 8/8] conflict resolved --- css/style.css | 3 ++- js/main.js | 7 +++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/css/style.css b/css/style.css index 6e3c40b3..ce7aa789 100644 --- a/css/style.css +++ b/css/style.css @@ -592,6 +592,7 @@ h6 { content: ''; background-color: #ebf1fa; transition: .5s; +} #footer{ width: 100%; @@ -706,7 +707,7 @@ h6 { } .ch{ - marign-left: 40px; + margin-left: 40px; float: left; } diff --git a/js/main.js b/js/main.js index 77e46329..d57803e5 100644 --- a/js/main.js +++ b/js/main.js @@ -52,9 +52,11 @@ $(document).ready(function() { }); +}); }); + (jQuery); @@ -71,9 +73,6 @@ function closeNav() { $("#threedash").click(function(){ $("#threedash").hide(); }); -======= -})(jQuery); - $(".closebtn").click(function(){ $("#threedash").show(); @@ -83,4 +82,4 @@ $(".closebtn").click(function(){ e.preventDefault(); $(this).next().slideToggle(300); $(this).parent().toggleClass('active'); - }); + }); \ No newline at end of file