Mejorando la presentación de la página.

css/.pydio_id

@@ -0,0 +1 @@
+f96da81ec65a0f711c8e3c108ece4936:25265

css/style.css

@@ -2,6 +2,25 @@
     margin: auto;
 }
 
+body {
+   margin: 0px;
+   padding: 0px;
+   height: 100%;
+}
+
+img{
+  max-width: 100%;
+}
+
+footer{
+  background-color: rgb(84, 84, 84);
+  width: 100%;
+  height: 5%;
+  position: fixed;
+  bottom: 0px;
+  display: flex;
+}
+
 .top-menu{
   border-bottom: 2px solid;
   border-color: rgb(125, 125, 125);
@@ -29,6 +48,13 @@
   color: rgb(0, 0, 0);
 }
 
+.footer-div{
+  font-family: Helvetica;
+  font-size: 0.9em;
+  color: white;
+  text-align: center;
+}
+
 #top-menu-div-buttons{
   width: 79%;
   display: inline-block;
@@ -42,28 +68,36 @@
   margin-left: 0.5%;
 }
 
-#top-github-icon{
+#top-icon{
   width: 2em;
   float: right;
   margin-right: 0.5%;
 }
 
-#top-github-icon:hover{
-  fill: red;
+#top-icon:hover{
+  border-bottom: 2px solid black;
+}
+
+#top-text-logo{
+  font-family: monospace;
 }
 
 #middle-name-web-developer{
-  font-family: Lucida Console;
+  font-family: 'Lucida Console';
   width: 100%;
   margin-top: 3%;
   text-align: center;
 }
 
+#rounded-middle-image{
+  overflow: hidden;
+  border-radius: 50%;
+  right: 0px;
+  position: absolute;
+}
+
 #img-onboard{
   width: 100%;
   height: 500px;
-  background-image: url("../img/mac-on-a-table.jpg");
-  background-repeat: no-repeat;
-  background-attachment: fixed;
-  background-size: cover;
+  overflow: hidden;
 }

css/style.okynos1.css

@@ -0,0 +1,37 @@
+
+.top-menu{
+  border-bottom: 2px solid;
+  border-color: rgb(125, 125, 125);
+}
+
+.top-menu-button-div{
+  background-color: rgb(83, 231, 147);
+  margin: 2%;
+  padding: 1%;
+  border-radius: 5px;
+  text-align: center;
+  line-height: 50px;
+  width: 100px;
+  height: 50px;
+  display: block;
+}
+
+.top-menu-button{
+  text-decoration: none;
+  text-shadow: 1px 1px rgb(143, 143, 143);
+  color: rgb(255, 255, 255);
+}
+
+.top-menu-button:hover{
+  color: rgb(0, 0, 0);
+}
+
+#top-menu-div-buttons{
+  width: 100px;
+  float: right;
+}
+
+#top-text-logo{
+
+  width: 20%;
+}

css/style.okynos2.css

@@ -0,0 +1,46 @@
+*{
+    margin: auto;
+}
+
+.top-menu{
+  border-bottom: 2px solid;
+  border-color: rgb(125, 125, 125);
+  width: 100%;
+  float: left;
+}
+
+.top-menu-button-div{
+  background-color: rgb(221, 129, 198);
+  margin: 0.2%;
+  padding: 1%;
+  border-radius: 5px;
+  text-align: center;
+  width: 100px;
+
+  float: right;
+}
+
+.top-menu-button{
+  font-family: 'Helvetica Neue', Helvetica;
+  white-space: nowrap;
+  font-size: 1em;
+  text-decoration: none;
+  text-shadow: 1px 1px rgb(143, 143, 143);
+  color: rgb(255, 255, 255);
+}
+
+.top-menu-button:hover{
+  color: rgb(0, 0, 0);
+}
+
+#top-menu-div-buttons{
+  width: 79%;
+  display: inline-block;
+  vertical-align: bottom;
+}
+
+#top-menu-h1-div{
+  vertical-align: bottom;
+  display: inline-block;
+  width: 20%;
+}

css/style.okynos3.css

@@ -0,0 +1,47 @@
+*{
+    margin: auto;
+}
+
+.top-menu{
+  border-bottom: 2px solid;
+  border-color: rgb(125, 125, 125);
+  width: 100%;
+  float: left;
+}
+
+.top-menu-button-div{
+  background-color: rgb(89, 205, 18);
+  margin: 0.2%;
+  padding: 0.5%;
+  border-radius: 5px;
+  text-align: center;
+  width: 70px;
+
+  float: right;
+}
+
+.top-menu-button{
+  font-family: 'Helvetica Neue', Helvetica;
+  white-space: nowrap;
+  font-size: 1em;
+  text-decoration: none;
+  text-shadow: 1px 1px rgb(143, 143, 143);
+  color: rgb(255, 255, 255);
+}
+
+.top-menu-button:hover{
+  color: rgb(0, 0, 0);
+}
+
+#top-menu-div-buttons{
+  width: 79%;
+  display: inline-block;
+  vertical-align: bottom;
+}
+
+#top-menu-h1-div{
+  vertical-align: bottom;
+  display: inline-block;
+  width: 20%;
+  margin-left: 0.5%;
+}

img/.pydio_id

@@ -0,0 +1 @@
+f96da81ec65a0f711c8e3c108ece4936:25270

index.html

@@ -11,12 +11,14 @@
         <div id="top-menu-div-buttons">
           <a href="https://makefile.es:3000"><div
             class="top-menu-button-div">Gogs</div></a>
-          <a href="https://makefile.es:3000"><div
+          <a href="index.html"><div
             class="top-menu-button-div">Syncthing</div></a>
           <a href="https://okynos.us.to:1026/pydio"><div
             class="top-menu-button-div">Pydio</div></a>
           <a href="https://github.com/okynos">
-            <img id="top-github-icon" src="img/github-icon.svg"/ alt="okynos github page"></a>
+            <img id="top-icon" src="img/github-icon.svg"/ alt="okynos github page"></a>
+          <a href="https://www.linkedin.com/in/okynos/">
+            <img id="top-icon" src="img/linkedin-icon.png"/ alt="okynos Linked in page"></a>
         </div>
       </div>
     </header>
@@ -26,7 +28,20 @@
       <h3>Ingeniero informático</h3>
     </div>
     <div id="img-onboard">
+      <div id="rounded-middle-image">
+        <img src="img/jose.jpg" alt="José Luis imagen personal"/>
+      </div>
+      <img src="img/mac-on-a-table.jpg" alt="mac on a table image" />
+    </div>
 
+    <div class="bottom-div">
     </div>
   </body>
+
+  <footer>
+    <div class="footer-div">
+      <p>Diseño realizado por José Luis Fernández Aguilera</p>
+      <p>pylott@gmail.com</p>
+    </div>
+  </footer>
 </html>