From 144f30752d758500ffe93907a7005b1b8ff1e4b3 Mon Sep 17 00:00:00 2001 From: Ceda EI Date: Fri, 21 Jun 2019 00:41:48 +0530 Subject: [PATCH] Add Fonts. Move bar to bottom on phone. Other small fixes. --- index.css | 74 +++++++++++++++++++++++++++++++++++++++++++++++------- index.html | 34 +++++++++++++++---------- 2 files changed, 86 insertions(+), 22 deletions(-) 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

+
+ +