Skip to content

W
Website
Commit b833c773 authored by sachith.fernando's avatar sachith.fernando
Browse files
Options

nav bar changed

parent a97a0657
Show whitespace changes
Inline Side-by-side
Showing with 527 additions and 475 deletions
assets/css/style.css
View file @ b833c773
......@@ -1489,3 +1489,99 @@ lex-direction: column;
margin-top: auto;
}
a:hover,a:focus{
outline: none;
text-decoration: none;
}
.tab-test .nav-tabs{
border-bottom: none;
position: relative;
}
.tab-test .nav-tabs li{
margin-right: 60px;
z-index: 1;
}
.tab-test .nav-tabs li:after{
content: "";
width: 100%;
border: 1px solid #04476f;
position: absolute;
top: 50%;
right: -60%;
z-index: -1;
}
.tab-test .nav-tabs li:last-child:after{
border: none;
}
.tab-test .nav-tabs li a{
display: block;
/*padding: 15px 20px;*/
background: #fff;
font-size: 15px;
font-weight: 600;
color: #04476f;
/*text-transform: uppercase;*/
border-radius: 0;
margin-right: -32px;
border: 2px solid #04476f;
position: relative;
overflow: hidden;
z-index: 1;
transition: all 0.3s ease 0s;
}
.tab-test .nav-tabs li.active a,
.tab-test .nav-tabs li a:hover{
color: #fff;
border: 2px solid #04476f;
}
.tab-test .nav-tabs li a:after{
content: "";
display: block;
width: 100%;
height: 0;
position: absolute;
top: 0;
left: 0;
z-index: -1;
color: #FFFFFF;
transition: all 0.3s ease 0s;
}
.tab-test .nav-tabs li.active a:after,
.tab-test .nav-tabs li a:hover:after{
height: 100%;
background: #04476f;
color: #FFFFFF;
}
.tab-test .tab-content{
padding: 20px 10px;
margin-top: 0;
font-size: 14px;
color: #2d2d2d;
line-height: 26px;
}
.tab-test .tab-content h3{
font-size: 24px;
margin-top: 0;
}
@media only screen and (max-width: 767px){
.tab-test .nav-tabs li{ margin: 0 25px 0 0; }
}
@media only screen and (max-width: 479px){
.tab-test .nav-tabs li{
width: 100%;
text-align: center;
color: #FFFFFF;
margin: 0 0 10px 0;
}
.tab-test .nav-tabs li:after{
width: 0;
height: 100%;
top: auto;
bottom: -60%;
color: #FFFFFF;
right: 50%;
}
}
index.html
View file @ b833c773
......@@ -123,41 +123,20 @@
<!-- <p data-aos="fade-in">Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>-->
</div>
<!--nav tabs-->
<ul class="nav nav-tabs nav-fill" id="nav_bar" role="tablist">
<li class="nav-item">
<a aria-controls="lit_survey" aria-selected="false" class="nav-link active" data-toggle="tab"
href="#lit_survey"
id="lit-survey-tab" role="tab">Literature Survey</a>
</li>
<li class="nav-item">
<a aria-controls="research_gap" aria-selected="false" class="nav-link" data-toggle="tab"
href="#research_gap" id="research-gap-tab" role="tab">Research Gap</a>
</li>
<li class="nav-item">
<a aria-controls="research_problem" aria-selected="false" class="nav-link" data-toggle="tab"
href="#research_problem" id="research-problem-tab" role="tab">Research Problem</a>
</li>
<li class="nav-item">
<a aria-controls="research_objectives" aria-selected="false" class="nav-link" data-toggle="tab"
href="#research_objectives" id="research-objectives-tab" role="tab">Research Objectives</a>
</li>
<li class="nav-item">
<a aria-controls="methodology" aria-selected="false" class="nav-link" data-toggle="tab"
href="#methodology" id="methodology-tab" role="tab">Methodology</a>
</li>
<li class="nav-item">
<a aria-controls="technologies_used" aria-selected="false" class="nav-link" data-toggle="tab"
href="#technologies_used" id="technologies-used-tab" role="tab">Technologies used</a>
</li>
<div class="tab-test" role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#lit-survey" aria-controls="home" role="tab" data-toggle="tab">Literature Survey</a></li>
<li role="presentation"><a href="#r-gap" aria-controls="profile" role="tab" data-toggle="tab">Research Gap</a></li>
<li role="presentation"><a href="#rp" aria-controls="messages" role="tab" data-toggle="tab">Research Problem</a></li>
<li role="presentation"><a href="#ro" aria-controls="messages" role="tab" data-toggle="tab">Research Objectives</a></li>
<li role="presentation"><a href="#meth" aria-controls="messages" role="tab" data-toggle="tab">Methodology</a></li>
<li role="presentation"><a href="#tu" aria-controls="messages" role="tab" data-toggle="tab">Technologies Used</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content tabs">
<div role="tabpanel" class="tab-pane fade in active" id="lit-survey">
<!--tab content-->
<div class="tab-content" id="tabContentDetails">
<!--literature_survey-->
<div class="tab-pane fade in active" id="lit_survey" role="tabpanel">
<h2>Literature Survey</h2>
<div class="card">
......@@ -303,10 +282,8 @@
</div>
</div>
<!-- end of literature_survey-->
<div role="tabpanel" class="tab-pane fade" id="r-gap">
<!--research gap-->
<div class="tab-pane fade" id="research_gap" role="tabpanel">
<h2>Research Gap</h2>
<!--research gap table-->
......@@ -397,13 +374,9 @@
</tr>
</tbody>
</table>
<!--end of research gap table-->
</div>
<!-- end of research gap-->
<div role="tabpanel" class="tab-pane fade" id="rp">
<!--research problem-->
<div class="tab-pane fade" id="research_problem" role="tabpanel">
<h2>Research Problem</h2>
<ul class="list-group">
......@@ -428,10 +401,7 @@
</li>
</ul>
</div>
<!-- end of research problem-->
<!--research objectives-->
<div class="tab-pane fade" id="research_objectives" role="tabpanel">
<div role="tabpanel" class="tab-pane fade" id="ro">
<h2>Research Objectives</h2>
<!--1st row-->
......@@ -540,13 +510,8 @@
</div>
</div>
<!--end of 2nd row-->
</div>
<!-- end of research objectives-->
<!--methodology-->
<div class="tab-pane fade" id="methodology" role="tabpanel">
<div role="tabpanel" class="tab-pane fade" id="meth">
<h2>Methodology</h2>
<div class="row no-gutters">
......@@ -607,13 +572,8 @@
<!--end of description column-->
</div>
</div>
<!-- end of methodology-->
<!--technologies used-->
<div class="tab-pane fade" id="technologies_used" role="tabpanel">
<div role="tabpanel" class="tab-pane fade" id="tu">
<h2>Domains</h2>
<!-- logos of the domains used-->
......@@ -706,12 +666,8 @@
</div>
<!--end of logos-->
</div>
<!-- end of technologies used-->
</div>
<!--end of tab content-->
</div>
</div>
</section>
<!-- End Research Scope Section -->
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment