Webionite
/
webionite.com
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add navigation bar for desktop

This commit is contained in:
Ceda EI 2019-06-20 19:26:19 +05:30
parent ddb8975b06
commit 2ff75577b6
2 changed files with 90 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
index.css
View File

@ -64,6 +64,69 @@ a.icon {
vertical-align: center; vertical-align: center;
} }
a.icon:hover {
color: #325090;
background-color: #FFF;
}
.selectors {
position: fixed;
right: 0;
top: 0;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: flex-end;
}
.selector {
background-color: #325090;
color: #FFF;
border-radius: 10% 0 0 10%;
width: 15em;
margin-right: -12em;
text-align: left;
padding: 0;
transition-property: all;
transition-duration: 0.2s;
}
.selector i {
margin-left: 1em;
height: 4em;
line-height: 4em;
font-size: 1.5em;
}
.selector span {
display: none;
font-size: 1.5em;
height: 4em;
line-height: 4em;
}
.selector:hover span {
display: inline-block;
}
.selector:hover {
width: 15em;
padding: 0 1em;
text-align: center;
padding: 0;
border-radius: 10% 0 0 10%;
transition-property: all;
transition-duration: 0.2s;
margin-right: 0;
color: #325090;
background-color: #FFF;
}
.selector:hover i {
display: none;
}
@media (max-width: 900px) { @media (max-width: 900px) {
.right-pane { .right-pane {
position: absolute; position: absolute;
@ -82,4 +145,8 @@ a.icon {
.left-pane { .left-pane {
width: 100vw; width: 100vw;
} }
.selectors {
display: none;
}
} }

23
index.html
View File

@ -11,15 +11,38 @@
<body> <body>
<div class="top-body"> <div class="top-body">
<div class="right-pane"> <div class="right-pane">
<div class="selectors">
<a href="#home" class="selector">
<i class="fa fa-angle-left"></i>
<span>Home</span>
</a>
<a href="#projects" class="selector">
<i class="fa fa-angle-left"></i>
<span>Projects</span>
</a>
<a href="#hosted" class="selector">
<i class="fa fa-angle-left"></i>
<span>Hosted Services</span>
</a>
<a href="#contact" class="selector">
<i class="fa fa-angle-left"></i>
<span>Contact Us</span>
</a>
</div>
<a class="icon" href="https://gitlab.com/ceda_ei/"><i class="fa fa-gitlab"></i></a> <a class="icon" href="https://gitlab.com/ceda_ei/"><i class="fa fa-gitlab"></i></a>
<a class="icon" href="https://git.webionite.com/ceda_ei/"><i class="fa fa-gitea"></i></a> <a class="icon" href="https://git.webionite.com/ceda_ei/"><i class="fa fa-gitea"></i></a>
</div> </div>
<div class="left-pane"> <div class="left-pane">
<a name="home"></a>
<div class="page"> <div class="page">
<img src="images/webionite.svg" class="title-image"/> <img src="images/webionite.svg" class="title-image"/>
<h1>Webionite</h1> <h1>Webionite</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec augue risus. Praesent at lectus ante. Maecenas volutpat purus et eros vehicula, vitae scelerisque turpis iaculis. Pellentesque iaculis lectus at erat fermentum ultricies. Curabitur est ante, accumsan in tortor vitae, molestie elementum ante. Duis tristique tellus eu molestie porta. Mauris euismod id sem ut ultrices. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec augue risus. Praesent at lectus ante. Maecenas volutpat purus et eros vehicula, vitae scelerisque turpis iaculis. Pellentesque iaculis lectus at erat fermentum ultricies. Curabitur est ante, accumsan in tortor vitae, molestie elementum ante. Duis tristique tellus eu molestie porta. Mauris euismod id sem ut ultrices. </p>
</div> </div>
<a name="projects"></a>
<div class="page">
<h1>Projects</h1>
</div>
</div> </div>
</div> </div>
</body> </body>