Merge pull request #5 from liloo2040/dev

juan-carlos-correa · web-flow · commit bf8dd27a2fb1 · 2018-10-28T21:24:12.000-06:00
anadido mas diseno a la rama con css
diff --git a/app/views/Home/Home.php b/app/views/Home/Home.php
@@ -3,15 +3,19 @@
 <html>
 <head>
   <title>Home</title>
+  <meta charset="utf-8" />
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> 
+  <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet"> 
+  <link rel="stylesheet" type="text/css" href="main.css" />
 </head>
 <body>
   <!-- Main jumbotron for a primary marketing message or call to action -->
-  <div class="jumbotron">
+  <div class="jumbotron header">
     <div class="container text-center">
       <h1>Hola, <?= $nombre ?>!</h1>
       <p>Este es un ejemplo de MVC con Php vanilla hecho desde cero.</p>
-      <p><a class="btn btn-primary btn-lg" target="_blank" href="https://github.com/Developero-oficial/php-mvc" role="button">Código fuente &raquo;</a></p>
+      <p><a class="btn btn-primary btn-lg button" target="_blank" href="https://github.com/Developero-oficial/php-mvc" role="button">Código fuente &raquo;</a></p>
     </div>
   </div>
 </body>
diff --git a/main.css b/main.css
@@ -0,0 +1,71 @@
+body{
+    margin: 0 auto;
+    font-family: 'Raleway', sans-serif;
+    color: #ffffff;
+}
+
+h1{
+    font-family: 'Quicksand', sans-serif;
+    text-shadow: 1px 2px #660066;
+}
+
+.button{
+    background-color: #fff;
+    text-transform: uppercase;
+    color: #000009;
+    border: 1px solid #fff;
+}
+
+.button :hover{
+    background: #000009;
+    opacity: 0.5;
+    font-weight: bold;
+}
+
+.button :visited{
+    background: #000225;
+    opacity: 1;
+}
+.header {
+    background: linear-gradient(-90deg, #33ccff, #000066,#9999ff, #660066);
+    -webkit-animation: header 20s ease infinite;
+    -moz-animation: header 20s ease infinite;
+    animation: header 20s ease infinite;
+    background-size: 500% 500%;
+}
+
+@-webkit-keyframes header{
+    0%{
+        background-position: 0% 50%;
+    }
+    50%{
+        background-position: 100% 100%;
+    }
+    100%{
+        background-position: 50% 0%;
+    }
+}
+
+@-moz-keyframes header{
+    0%{
+        background-position: 0% 50%;
+    }
+    50%{
+        background-position: 100% 100%;
+    }
+    100%{
+        background-position: 50% 0%;
+    }
+}
+
+@keyframes header{
+    0%{
+        background-position: 0% 50%;
+    }
+    50%{
+        background-position: 100% 100%;
+    }
+    100%{
+        background-position: 50% 0%;
+    }
+}
