From 2ff75577b6b18227bd90c2740b5df02188eb8103 Mon Sep 17 00:00:00 2001 From: Ceda EI Date: Thu, 20 Jun 2019 19:26:19 +0530 Subject: [PATCH] Add navigation bar for desktop --- index.css | 67 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 23 +++++++++++++++++++ 2 files changed, 90 insertions(+) diff --git a/index.css b/index.css index ca93c9b..9a307f2 100644 --- a/index.css +++ b/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; + } } diff --git a/index.html b/index.html index 43b20bb..7952eb4 100644 --- a/index.html +++ b/index.html @@ -11,15 +11,38 @@
+
+ + + Home + + + + Projects + + + + Hosted Services + + + + Contact Us + +
+

Webionite

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.

+ +
+

Projects

+