hero actualizado
This commit is contained in:
@@ -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 */
|
||||
@@ -7,15 +7,17 @@
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="stylesheet" href="css/estilos.css">
|
||||
<!-- <link rel="shortcut icon" href="image/png" href="img/favicon.png"> -->
|
||||
|
||||
<title>Flisol 2019</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="header">
|
||||
<div class="back-black"></div>
|
||||
<div class="logo-box">
|
||||
<img src="img/flisol.png" alt="Logo" class="logo">
|
||||
<a href="index.php"> <img src="img/flisol.png" alt="Logo" class="logo"> </a>
|
||||
</div>
|
||||
|
||||
<div class="text-box">
|
||||
|
||||
+1
-1
@@ -5,7 +5,7 @@
|
||||
<title>Flisol</title>
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
|
||||
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="css/styles.css" type="text/css">
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<body>
|
||||
|
||||
<div class="wrapper">
|
||||
|
||||
|
||||
<img src="img/back-log.jpg" class="backImg" width="200px" alt="">
|
||||
<img src="img/flisol.png" class="logo-flisol" alt="">
|
||||
<div class="container">
|
||||
@@ -43,5 +43,5 @@
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user