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

+