Add navigation bar for desktop
This commit is contained in:
parent
ddb8975b06
commit
2ff75577b6
67
index.css
67
index.css
|
@ -64,6 +64,69 @@ a.icon {
|
|||
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) {
|
||||
.right-pane {
|
||||
position: absolute;
|
||||
|
@ -82,4 +145,8 @@ a.icon {
|
|||
.left-pane {
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.selectors {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
23
index.html
23
index.html
|
@ -11,15 +11,38 @@
|
|||
<body>
|
||||
<div class="top-body">
|
||||
<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://git.webionite.com/ceda_ei/"><i class="fa fa-gitea"></i></a>
|
||||
</div>
|
||||
<div class="left-pane">
|
||||
<a name="home"></a>
|
||||
<div class="page">
|
||||
<img src="images/webionite.svg" class="title-image"/>
|
||||
<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>
|
||||
</div>
|
||||
<a name="projects"></a>
|
||||
<div class="page">
|
||||
<h1>Projects</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
Loading…
Reference in New Issue