Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
1 change: 1 addition & 0 deletions MakkalaJagriti
Submodule MakkalaJagriti added at 9a3306
1 change: 1 addition & 0 deletions MakkalaJagriti-1
Submodule MakkalaJagriti-1 added at 6e22bd
22 changes: 22 additions & 0 deletions src/navbar/nav.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<head>
<title>Makkala Jagriti</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
</head>
<body>

<nav>
<ul class="container">
<img class="logo" src="mj_logo_color1.png">
<div class="topnavright">
<li><i class="fa fa-home"></i>HOME</li>
<li><i class="fas fa-users"></i>WHO WE ARE</li>
<li><i class="fas fa-street-view"></i>OUR WORK</li>
<li><i class="fas fa-chalkboard-teacher"></i>STORIES OF CHANGE</li>
<li><i class="fas fa-hands-helping"></i>GET INVOLVED</li>
<li><i class="fas fa-donate"></i>DONATE</li>
</div>
</ul>
</nav>
</body>
</html>
65 changes: 65 additions & 0 deletions src/navbar/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
ul {
background-color:rgb(14, 36, 110);
overflow: hidden;
position:fixed;
top:0;
width:100%;
}

li {
float: left;
color:rgb(221, 209, 209);
text-align: center;
padding: 10px;
text-decoration: underline;
font-size: 30px;
}

.search
{
display: inline-flex;
flex: 1 1 300px;
position: relative;
overflow: hidden;
}
.searchButton {
background: #538AC5;
border: 0;
color: white;
padding: 2px;
border-radius: 0;
}

li:hover {
background-color:gray;
color: white;
}

.container {
display: flex;
}
.search {
flex: 1;
}
.container > li {
flex: 1;
}
@media all and (max-width: 600px) {

.container {
flex-wrap: wrap;
}

.container > li {
flex-basis: 50%;
}
}
@media all and (max-width: 400px) {
.container > li {
flex-basis: 100%;
}
.search {
order: 1;
}
}