Skip to content

Instantly share code, notes, and snippets.

@rodrigo-frenk

rodrigo-frenk/plantillaHome-ejemplo-ux

Created April 4, 2017 02:12
Show Gist options
  • Save rodrigo-frenk/3312d7a430fdd6ea6b4229f68c25d59e to your computer and use it in GitHub Desktop.
Save rodrigo-frenk/3312d7a430fdd6ea6b4229f68c25d59e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
plantillaHome-ejemplo-ux
<!DOCTYPE html>
<html lang="es">
<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">
<title>Ejemplo Landing</title>
<link rel="stylesheet" href="recursos/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="recursos/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="recursos/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/landing.css">
</head>
<body>
<!-- #cabecera.container-fluid -->
<header id="cabecera" class="container-fluid">
<!-- .col-xs-4.col-md-3.col-lg-2*2 -->
<div id="logotipo" class="col-xs-4 col-md-3 col-lg-2">
<img src="http://fakeimg.pl/150x60?text=LOGO" alt="">
</div>
<nav id="menu-usuarios" class="col-xs-8 col-md-3 col-lg-2 col-md-offset-6 col-lg-offset-8 text-right">
<a href="#" class="float-right">
<div class="p-1">
<!-- i.fa.fa-user -->
<i class="fa fa-user-plus"></i>
</div>
<span class="text-center">
Regístrate
</span>
</a>
<a href="#" class="float-right">
<div class="p-1">
<!-- i.fa.fa-user -->
<i class="fa fa-user"></i>
</div>
<span class="text-center">
Ingresa
</span>
</a>
</nav>
</header>
<!-- section#portada.container-fluid.h-3x -->
<section id="portada" class="container-fluid h-xs-3x h-md-4x rel p-0">
<!-- img.wh-100.abs.z-1 -->
<div class="imgLiquidFill wh-100 abs z-1">
<img src="http://unsplash.it/1200x600?random=1" alt="">
</div>
<div class="cortina wh-100 abs z-1"></div>
<div class="texto container h-100">
<!-- .col-md-5>h1{Título}+h4>lorem9 -->
<div class="col-md-5">
<h1>Título</h1>
<h4>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis!
</h4>
</div>
<!-- .col-md-5.col-md-offset-2 -->
<div class="col-md-5 col-md-offset-2">
<!-- p>lorem15 -->
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, esse, rem odit beatae iure officia!
</p>
<!-- a[#].button.btn-primary{Regístrate} -->
<a href="#" class="btn btn-primary">
Regístrate
</a>
</div>
</div>
</section>
<!-- section#puntos-principales.container -->
<section id="puntos-principales" class="container">
<!-- .punto-principal.col-md-4.h-xs-3x -->
<div class="punto-principal col-md-4 h-xs-3x text-center">
<!-- img.imagen+h4.titulo+p.texto -->
<!-- .imagen.imgLiquidNoFill.h-xs-1x -->
<div class="imagen imgLiquidNoFill h-xs-1x">
<img src="http://unsplash.it/400/300?random=2" alt="">
</div>
<h4 class="titulo">
Título del Punto Principal
</h4>
<p class="texto">
<!-- lorem13 -->
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla quas, commodi odit esse.
</p>
</div>
</section>
<!-- section#texto-introduccion.container -->
<section id="texto-introduccion" class="container">
<!-- .col-md-6.col-md-offset-3>((p>lorem13)*2) -->
<div class="col-md-6 col-md-offset-3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et repellendus, animi quos nisi!</p>
<p>Quasi dolores fugiat dicta, officia, possimus incidunt cumque vel a necessitatibus ipsam. Quod.</p>
</div>
</section>
<!-- section#registro-invitacion.container -->
<section id="registro-invitacion" class="container">
<div class="col-md-6">
<!-- h2{Registro} -->
<h2>Registro</h2>
<!-- p>lorem18 -->
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aperiam qui, tempora quia veritatis quae dolores recusandae praesentium.
</p>
</div>
<div class="col-md-6">
<!-- a[#].btn.btn-primary{Regístrate} -->
<a href="#" class="btn btn-primary">
Regístrate
</a>
</div>
</section>
<!-- footer#pie-pagina.container-fluid -->
<footer id="pie-pagina" class="container-fluid">
<!-- .col-md-4*2 -->
<div class="col-md-4">
Copyright 2017
</div>
<div class="col-md-4 col-md-offset-4 text-xs-center text-md-right">
<!-- (.col-xs-4>a[#]{i})*3 -->
<div class="col-xs-4">
<a href="#" target="_blank">
<i class="fa fa-facebook"></i>
</a>
</div>
<div class="col-xs-4">
<a href="#" target="_blank">
<i class="fa fa-twitter"></i>
</a>
</div>
<div class="col-xs-4">
<a href="#" target="_blank">
<i class="fa fa-instagram"></i>
</a>
</div>
</div>
</footer>
<script src="recursos/jquery/jquery-3.2.0.min.js"></script>
<script src="recursos/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="recursos/imgLiquid-master/js/imgLiquid-min.js"></script>
<script src="js/landing.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment