Skip to content
This repository has been archived by the owner on Sep 20, 2021. It is now read-only.

Added navdrawer #207

Open
wants to merge 12 commits into
base: master
Choose a base branch
from
Open

Added navdrawer #207

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
61d6b76
Add navdrawe
shuba400 Jan 20, 2020
dbb57ec
Update style.css
shuba400 Jan 21, 2020
5fbae68
Update index.html
shuba400 Jan 21, 2020
4dd8ff3
Update style.css
shuba400 Jan 21, 2020
b7ce564
Update index.html
shuba400 Jan 22, 2020
85dc070
Update style.css
shuba400 Jan 22, 2020
d23c4b2
Update main.js
shuba400 Jan 22, 2020
00db750
Merge branch 'master' into master
shuba400 Jan 26, 2020
5501439
conflict resolved
shuba400 Jan 26, 2020
07b0fdc
Merge branch 'master' into master
shuba400 Jan 29, 2020
ab0dd15
Merge branch 'master' into master
shuba400 Jan 30, 2020
46b3a4d
Merge branch 'master' into master
shuba400 Feb 12, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
261 changes: 196 additions & 65 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@

.bgColor, button:focus{
background-color: #315972;
color: #ffffff;
Expand All @@ -24,6 +25,7 @@ padding-right:0;
#people{
height: 1000px;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
Expand Down Expand Up @@ -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;
Expand All @@ -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 */
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -644,7 +769,9 @@ background-color: white !important;

.ch{
margin-left: 40px;
float: center;

float: left;


}
.probox{
Expand All @@ -671,6 +798,7 @@ background: linear-gradient(to right, #92FE9D, #00C9FF); /* W3C, IE 10+/ Edge, F
}



#participants{
color: #413e66;
font-family: "Montserrat", sans-serif;
Expand Down Expand Up @@ -708,6 +836,8 @@ background: linear-gradient(to right, #92FE9D, #00C9FF); /* W3C, IE 10+/ Edge, F
font-size: 10px;
margin: 1%;
}


/* .box {
height: 300px;

Expand All @@ -718,3 +848,4 @@ background: linear-gradient(to right, #92FE9D, #00C9FF); /* W3C, IE 10+/ Edge, F
position: relative;
border-radius: 25px;
} */

25 changes: 15 additions & 10 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,11 +48,12 @@

<div class="logo float-left">

<h1 class="text-light"><a href="#intro" class="scrollto"><span>OPENCODE'20</span></a></h1>
<h1 class="text-light h1head"><a href="#intro" class="scrollto"><span>OPENCODE'20</span><span class = "navbutton" id="threedash" style="font-size:30px;cursor:pointer" onclick="openNav()">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&#9776;</span></a></h1>
<!-- <a href="#header" class="scrollto"><img src="img/logo.png" alt="" class="img-fluid"></a> -->
</div>

<nav class="main-nav float-right d-none d-lg-block">
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn navbutton" onclick="closeNav()" id = "crossonbigscreen">&times;</a>
<ul>
<li class="active"><a href="#intro">Home</a></li>
<li><a href="#about">About Us</a></li>
Expand All @@ -64,16 +65,16 @@ <h1 class="text-light"><a href="#intro" class="scrollto"><span>OPENCODE'20</span
<li><a href="#">Drop Down 1</a></li>
<li class="drop-down"><a href="#">Drop Down 2</a>
<ul>
<li><a href="#">Deep Drop Down 1</a></li>
<li><a href="#">Deep Drop Down 2</a></li>
<li><a href="#">Deep Drop Down 3</a></li>
<li><a href="#">Deep Drop Down 4</a></li>
<li><a href="#">Deep Drop Down 5</a></li>
<li class = "In_drop_down_second"><a href="#">Deep Drop Down 1</a></li>
<li class = "In_drop_down_second"><a href="#">Deep Drop Down 2</a></li>
<li class = "In_drop_down_second"><a href="#">Deep Drop Down 3</a></li>
<li class = "In_drop_down_second"><a href="#">Deep Drop Down 4</a></li>
<li class = "In_drop_down_second"><a href="#">Deep Drop Down 5</a></li>
</ul>
</li>
<li><a href="#">Drop Down 3</a></li>
<li><a href="#">Drop Down 4</a></li>
<li><a href="#">Drop Down 5</a></li>
<li><a href="#" class = "In_drop_down_first">Drop Down 3</a></li>
<li><a href="#" class = "In_drop_down_first">Drop Down 4</a></li>
<li><a href="#" class = "In_drop_down_first">Drop Down 5</a></li>
</ul>
</li>
<li><a href="#footer">Contact Us</a></li>
Expand All @@ -84,7 +85,11 @@ <h1 class="text-light"><a href="#intro" class="scrollto"><span>OPENCODE'20</span
</li>
</ul>

</div><!-- .main-nav -->


</nav><!-- .main-nav -->


</div>
</header><!-- #header -->
Expand Down
Loading