diff --git a/index.css b/index.css index 9a307f2..e1041da 100644 --- a/index.css +++ b/index.css @@ -27,8 +27,23 @@ body { background-size: cover; height: 100vh; display: flex; - align-items: flex-end; - justify-content: flex-start; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.right-pane p { + margin-top: 32em; + font-size: 0.8em; +} + +.right-pane p a, .right-pane p a:visited { + color: #FFF; + text-decoration: none; +} + +.right-pane p a:hover { + text-decoration: underline; } .page { @@ -37,7 +52,7 @@ body { flex-direction: column; align-items: center; justify-content: center; - padding: 3em; + padding: 10em; } .title-image { @@ -45,10 +60,15 @@ body { } h1 { - font-family: D3 Euronism; + font-family: Comfortaa Light; font-weight: 100; font-size: 4em; - line-height: 0; + text-align: center; +} + +.icons { + padding: 1em; + display: flex; } a.icon { @@ -56,7 +76,7 @@ a.icon { background-color: #325090; color: #FFF; border-radius: 50%; - font-size: 3em; + font-size: 2em; width: 1.6em; height: 1.6em; line-height: 1.6em; @@ -76,7 +96,7 @@ a.icon:hover { height: 100vh; display: flex; flex-direction: column; - justify-content: space-evenly; + justify-content: center; align-items: flex-end; } @@ -84,12 +104,17 @@ a.icon:hover { background-color: #325090; color: #FFF; border-radius: 10% 0 0 10%; + border-style: solid; + border-right-style: none; + border-color: #325090; + box-shadow: 2px 2px 2px rgba(50, 80, 144, 0.5); width: 15em; margin-right: -12em; text-align: left; padding: 0; transition-property: all; transition-duration: 0.2s; + margin-top: 1em; } .selector i { @@ -127,16 +152,47 @@ a.icon:hover { display: none; } +@media (max-width: 1100px) and (min-width: 900px) { + .right-pane { + width: 30%; + } + .left-pane { + width: 70%; + } + .page { + padding: 5em; + } +} + @media (max-width: 900px) { .right-pane { - position: absolute; + position: fixed; + bottom: 0; width: 100vw; height: 3em; background-color: #325090; background-image: none; + display: flex; + flex-direction: row; + justify-content: space-between; + align-content: center; + align-items: center; } - a.icon { + .right-pane p { + /* display: none; */ + margin: 0 1em; + } + + .title-image { + width: 200px; + } + + .page { + padding: 2em; + } + + a.icon, .hamburger label { font-size: 2em; width: 1.5em; height: 1.5em; diff --git a/index.html b/index.html index 7952eb4..c488156 100644 --- a/index.html +++ b/index.html @@ -5,11 +5,28 @@ Ceda EI +
+
+
+ +

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

+
+
+

Hosted Services

+
+
+

Contact Us

+
+
@@ -29,19 +46,10 @@ 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

+

Part of libreho.st network

+
+ +