Add basic structure and CSS

5 years ago · c0cb72e683
commit c0cb72e683
3 changed files with 65 additions and 0 deletions
--- a/images/ceda.jpg
+++ b/images/ceda.jpg
--- a/index.css
+++ b/index.css
@ -0,0 +1,41 @@
+body {
+  margin: 0;
+  background-color: #0b0a16;
+  color: #FFF;
+}
+
+a, a:visited {
+  color: #FFF;
+}
+
+a:hover {
+  color: #CCC;
+}
+
+.container {
+  text-align: justify;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100vh;
+  padding: 20%;
+  box-sizing: border-box;
+}
+
+.container img {
+  display: block;
+  width: 20%;
+  border-radius: 50%;
+  margin: 1em;
+}
+
+.links {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  font-size: 4em;
+  margin-top: 0.5 em;
+}
+
--- a/index.html
+++ b/index.html
@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title> Ceda EI </title>
+    <link rel="stylesheet" type="text/css" href="index.css">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
+  </head>
+  <body>
+    <div class="container">
+      <img src="images/ceda.jpg">
+      <h1>Ceda EI</h1>
+      <p>Lorem ipsum dolor set amet Lorem ipsum dolor set ameLorem ipsum dolor set ameLorem ipsum dolor set ameLorem ipsum dolor set ameLorem ipsum dolor set ameLorem ipsum dolor set ameLorem ipsum dolor set ameLorem ipsum dolor set ameLorem ipsum dolor set ameLorem ipsum dolor set ameLorem ipsum dolor set ameLorem ipsum dolor set ameLorem ipsum dolor set ameLorem ipsum dolor set ameLorem ipsum dolor set ameLorem ipsum dolor set ameLorem ipsum dolor set ameLorem ipsum dolor set ameLorem ipsum dolor set amettttttttttttttttttt</p>
+      <div class="links">
+        <a href="https://gitlab.com/ceda_ei/"><i class="fab fa-gitlab"></i></a>
+        <a href="https://telegram.me/ceda_ei/"><i class="fab fa-telegram"></i></a>
+        <a href="https://twitter.com/ceda_ei/"><i class="fab fa-twitter"></i></a>
+        <a href="https://fosstodon.org/@ceda_ei"><i class="fab fa-mastodon"></i></a>
+      </div>
+    </div>
+  </body>
+</html>
+
+
+