diff --git a/css/style.css b/css/estilos.css
similarity index 72%
rename from css/style.css
rename to css/estilos.css
index 41305d3..77c892f 100644
--- a/css/style.css
+++ b/css/estilos.css
@@ -9,6 +9,15 @@ html{
font-size: 10px;
}
+body{
+ /* font-family: 'Lato', sans-serif;
+ font-weight: 400; */
+ /* font-size: 16px; */
+ /* line-height: 1.7;
+ color: #777;
+ padding: 3rem; */
+}
+
::-webkit-scrollbar {
width: 9px;
}
@@ -35,29 +44,35 @@ html{
/*ESTILOS DEL HERO INICIO*/
+
.header{
height: 95vh;
background-image: url(../img/hero.jpg);
background-size: cover;
background-position: top;
- clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
+ /* clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%); */
+ clip-path: polygon(0 0, 100% 0, 100% 95%, 0 83%);
position: relative;
}
+.back-black{
+ height: 95vh;
+ background-color: rgba(0,0,0,0.45);
+}
.logo-box{
position: absolute;
top: 4rem;
- left: 10rem;
+ left: 5rem;
}
.logo{
- height: 110px;
+ height: 120px;
animation: moveInLeft 0.6s ease-in;
}
.text-box{
position: absolute;
- top: 50%;
+ top: 55%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
@@ -98,7 +113,7 @@ html{
}
/*
- ANIMACION PARA EL STICKY MENU
+ ANIMACION PARA EL sticky navbar
@keyframes moveInRight {
0% {
opacity: 0;
@@ -181,7 +196,7 @@ html{
}
.bot-animated{
- animation: moveInBottom .4s ease-out .75s;
+ animation: moveInBottom .6s ease-out .25s;
animation-fill-mode: backwards;
}
@@ -217,9 +232,9 @@ html{
position: absolute;
}
-
.signup,
-.login{
+.login,
+{
width: 50%;
background-color: rgba(0,0,0,0.42);
float: left;
@@ -232,6 +247,7 @@ html{
border-top-right-radius: 10px;
color: #fff;
font-family: 'Lato', sans-serif;
+ font-size: 16px;
}
.signup-form,
@@ -307,3 +323,101 @@ html{
}
/* ESTILOS DEL LOGIN - REGISTER FIN */
+
+
+/* MEDIA QUERIES INICIO */
+
+@media only screen and (max-width: 480px) {
+ .logo{
+ height: 80px;
+
+ }
+ .text-box{
+ top: 45%;
+ }
+ .logo-box{
+ left:2rem;
+ }
+ .heading-primary-main{
+ font-size: 38px;
+ }
+
+ .heading-primary-sub{
+ font-size: 33px;
+ }
+
+ .bot{
+ width: 250px;
+ font-size: 17px;
+ height: 55px;
+ }
+ .bot:link{
+ padding-top:18px;
+ }
+ .heading-primary{
+ margin-bottom: 4rem;
+ }
+
+}
+
+
+@media only screen and (min-width: 481px) and (max-width: 768px){
+ .logo{
+ height: 90px;
+
+ }
+ .text-box{
+ top: 47%;
+ }
+ .logo-box{
+ left:3rem;
+ }
+ .heading-primary-main{
+ font-size: 45px;
+ }
+
+ .heading-primary-sub{
+ font-size: 40px;
+ }
+ .heading-primary{
+ margin-bottom: 3rem;
+ }
+ .bot{
+ width: 300px;
+ font-size: 20px;
+ height: 55px;
+ }
+ .bot:link{
+ padding-top:18px;
+ }
+
+}
+
+@media only screen and (min-width: 769px) and (max-width: 920px){
+ .logo{
+ height: 120px;
+ }
+ .logo-box{
+ left:3rem;
+ }
+ .heading-primary-main{
+ font-size: 58px;
+ }
+
+ .heading-primary-sub{
+ font-size: 48px;
+ }
+ .heading-primary{
+ margin-bottom: 5rem;
+ }
+ .bot{
+ width: 300px;
+ font-size: 22px;
+ height: 65px;
+ }
+ .bot:link{
+ padding-top:20px;
+ }
+
+}
+/* MEDIA QUERIES FIN */
diff --git a/index.php b/index.php
index aee050e..89b0b35 100644
--- a/index.php
+++ b/index.php
@@ -7,15 +7,17 @@
-
+
Flisol 2019
+
+