subo archivos .php para seguir trabajando, estoy haciendo el hero
This commit is contained in:
@@ -0,0 +1,5 @@
|
||||
<?php
|
||||
include 'views/header.php';
|
||||
include 'views/conf-por-asistir.view.php';
|
||||
include 'views/footer.php';
|
||||
?>
|
||||
+309
@@ -0,0 +1,309 @@
|
||||
*{
|
||||
box-sizing: border-box;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
/* user-select: none; */
|
||||
}
|
||||
|
||||
html{
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 9px;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
::-webkit-scrollbar-track {
|
||||
/* box-shadow: inset 0 0 5px grey; */
|
||||
border-radius: 10px;
|
||||
background-color: #D4F0FC;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: red;
|
||||
border-radius: 10px;
|
||||
background-color: #01303F;
|
||||
border-right: 1.3px solid #D4F0FC;
|
||||
}
|
||||
/* Handle on hover */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(1,48,63,0.9);
|
||||
transition: 2s;
|
||||
}
|
||||
|
||||
/*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%);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.logo-box{
|
||||
position: absolute;
|
||||
top: 4rem;
|
||||
left: 10rem;
|
||||
}
|
||||
|
||||
.logo{
|
||||
height: 110px;
|
||||
animation: moveInLeft 0.6s ease-in;
|
||||
}
|
||||
|
||||
.text-box{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.heading-primary{
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
font-family: 'Share Tech', sans-serif;
|
||||
margin-bottom: 6rem;
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
.heading-primary-main{
|
||||
display: block;
|
||||
font-size: 70px;
|
||||
}
|
||||
|
||||
.heading-primary-sub{
|
||||
display: block;
|
||||
font-size: 60px;
|
||||
}
|
||||
|
||||
@keyframes moveInLeft {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate(-10rem);
|
||||
}
|
||||
|
||||
80%{
|
||||
transform: translate(1rem);
|
||||
}
|
||||
|
||||
100%{
|
||||
opacity: 1;
|
||||
transform: translate(0px);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
ANIMACION PARA EL STICKY MENU
|
||||
@keyframes moveInRight {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate(10rem);
|
||||
}
|
||||
|
||||
80%{
|
||||
transform: translate(-1rem);
|
||||
}
|
||||
|
||||
100%{
|
||||
opacity: 1;
|
||||
transform: translate(0px);
|
||||
}
|
||||
} */
|
||||
|
||||
@keyframes moveInBottom {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(3rem);
|
||||
}
|
||||
|
||||
100%{
|
||||
opacity: 1;
|
||||
transform: translate(0px);
|
||||
}
|
||||
}
|
||||
|
||||
.bot{
|
||||
background-color: #fff;
|
||||
color: #02A9F7;
|
||||
width: 300px;
|
||||
height: 70px;
|
||||
font-size: 20px;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.bot:link,
|
||||
.bot:visited {
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
padding: 23px 40px;
|
||||
display: inline-block;
|
||||
border-radius: 100px;
|
||||
transition: all 0.2s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bot:hover{
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.bot:active{
|
||||
transform: translate(-1px);
|
||||
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.bot::after{
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 100px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left:0;
|
||||
z-index: -1;
|
||||
transition: all .4s;
|
||||
}
|
||||
|
||||
.bot::after{
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.bot:hover::after{
|
||||
transform: scaleX(1.4) scaleY(1.6);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.bot-animated{
|
||||
animation: moveInBottom .4s ease-out .75s;
|
||||
animation-fill-mode: backwards;
|
||||
}
|
||||
|
||||
/*ESTILOS DEL HERO FIN*/
|
||||
|
||||
|
||||
|
||||
/* ESTILOS DEL LOGIN - REGISTER INICIO */
|
||||
.backImg{
|
||||
position: absolute;
|
||||
width: 600px;
|
||||
height: 100vh;
|
||||
}
|
||||
.logo-flisol{
|
||||
position: absolute;
|
||||
height: 86px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
|
||||
.wrapper{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
background-color: #D4F0FC;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.container{
|
||||
width: 450px;
|
||||
margin: 0px auto;
|
||||
padding-top: 120px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
||||
.signup,
|
||||
.login{
|
||||
width: 50%;
|
||||
background-color: rgba(0,0,0,0.42);
|
||||
float: left;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
color: #fff;
|
||||
font-family: 'Lato', sans-serif;
|
||||
}
|
||||
|
||||
.signup-form,
|
||||
.login-form{
|
||||
background: rgba(0,0,0,0.42);
|
||||
padding: 30px 40px;
|
||||
clear: both;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.signup-form{
|
||||
height: 420px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.signup-form i, .login-form i{
|
||||
position: absolute;
|
||||
padding-left: 0px;
|
||||
padding-top: 16px;
|
||||
font-size: 30px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.input{
|
||||
width: 100%;
|
||||
padding: 10px 40px;
|
||||
/* padding-top: 30px; */
|
||||
box-sizing: border-box;
|
||||
margin: 15px 0px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
border-bottom: 2px solid #fff;
|
||||
transform: all 0.5s ease;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.input::placeholder{
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.input:focus{
|
||||
border: none;
|
||||
outline: none;
|
||||
border-bottom: 2px solid #fff;
|
||||
}
|
||||
|
||||
.btn{
|
||||
width: 100%;
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-size: 17px;
|
||||
background: transparent;
|
||||
height: 60px;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
text-transform: uppercase;
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
letter-spacing: 1px;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 30px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.btn:hover{
|
||||
transition: 0.4s;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* ESTILOS DEL LOGIN - REGISTER FIN */
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 498 KiB |
@@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<!-- <link rel="shortcut icon" href="image/png" href="img/favicon.png"> -->
|
||||
|
||||
<title>Flisol 2019</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<div class="logo-box">
|
||||
<img src="img/flisol.png" alt="Logo" class="logo">
|
||||
</div>
|
||||
|
||||
<div class="text-box">
|
||||
<h1 class="heading-primary">
|
||||
<span class="heading-primary-main">Texto principal</span>
|
||||
<span class="heading-primary-sub">texto secundario</span>
|
||||
</h1>
|
||||
|
||||
<a href="#" class="bot bot-white bot-animated">¡Registrate Gratis!</a>
|
||||
</div>
|
||||
</header>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,5 @@
|
||||
<?php
|
||||
include 'views/header.php';
|
||||
include 'views/login.view.php';
|
||||
include 'views/footer.php';
|
||||
?>
|
||||
@@ -0,0 +1,6 @@
|
||||
<body>
|
||||
<div class="contenedor">
|
||||
<h1 class="titulo">Contenido del sitio</h1>
|
||||
<a href="cerrar.php">Cerrar Sesion</a>
|
||||
</div>
|
||||
</body>
|
||||
@@ -0,0 +1 @@
|
||||
</html>
|
||||
@@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<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">
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
$(".login-form").hide()
|
||||
$(".login").css("background", "none")
|
||||
|
||||
$(".login").click(function(){
|
||||
$(".signup-form").hide()
|
||||
$(".login-form").show()
|
||||
$(".signup").css("background", "none")
|
||||
$(".login").css("background", "rgba(0,0,0,0.42)")
|
||||
})
|
||||
|
||||
$(".signup").click(function(){
|
||||
$(".signup-form").show()
|
||||
$(".login-form").hide()
|
||||
$(".signup").css("background", "rgba(0,0,0,0.42)")
|
||||
$(".login").css("background", "none")
|
||||
})
|
||||
|
||||
$(".btn").click(function(){
|
||||
$(".input").val("")
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
@@ -0,0 +1,47 @@
|
||||
<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">
|
||||
|
||||
<div class="signup">Registrate</div>
|
||||
<div class="login">Iniciar Sesión</div>
|
||||
|
||||
<!-- FORMULARIO DE SIGNUP -->
|
||||
|
||||
<form class="signup-form" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="post">
|
||||
|
||||
<i class="far fa-envelope"></i>
|
||||
<input type="text" placeholder="Direccion de correo" class="input" name="correo"><br />
|
||||
|
||||
<i class="far fa-user-circle"></i>
|
||||
<input type="text" placeholder="Nombre completo" class="input" name="usuario"><br />
|
||||
|
||||
<i class="fas fa-lock"></i>
|
||||
<input type="password" placeholder="Contraseña" class="input" name="password"><br />
|
||||
|
||||
<i class="fas fa-lock"></i>
|
||||
<input type="password" placeholder="Confirmar contraseña" class="input" name="password2"><br />
|
||||
|
||||
<input type="submit" class="btn" value="Registrar">
|
||||
</form>
|
||||
|
||||
|
||||
<!-- FORMULARIO DE LOGIN -->
|
||||
<form class="login-form" action="" method="get" name="login">
|
||||
|
||||
<i class="far fa-envelope"></i>
|
||||
<input type="text" placeholder="Direccion de correo" class="input" name="correo"><br />
|
||||
|
||||
<i class="fas fa-lock"></i>
|
||||
<input type="password" placeholder="Contraseña" class="input" name="password"><br />
|
||||
|
||||
<input type="submit" class="btn" value="Entrar">
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
Reference in New Issue
Block a user