<link href="//cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="https://cdn3.iconfinder.com/data/icons/happily-colored-snlogo/128/medium.png">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<title>Materialize</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<!-- My CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="grey darken-4">
<div class="nav-wrapper">
<a href="#!" class="brand-logo center"><img src="https://cdn3.iconfinder.com/data/icons/happily-colored-snlogo/128/medium.png"></a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a href="#">Inicio</a></li>
<li><a href="#">Trabajos</a></li>
<li><a href="#">Redes</a></li>
<li><a href="#">Contactos</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li><a href="#">Inicio</a></li>
<li><a href="#">Trabajos</a></li>
<li><a href="#">Redes</a></li>
<li><a href="#">Contactos</a></li>
</ul>
</div>
</nav>
<div class="had-container">
<div class="parallax-container prof-user">
<div class="parallax"><img src="https://alistapart.com/d/438/fig-6--background-blend-mode.jpg"></div>
<div class="row"><br>
<div class="col m4 s8 offset-m4 offset-s2 center">
<h4 class="truncate bg-card-user">
<img src="http://31.media.tumblr.com/tumblr_lw2lhqjrel1qfmi03o9_r1_500.gif" alt="" class="circle responsive-img"> <br>
<a href="#" data-activates="slide-out" class="button-collapse white-text waves-effect waves-light btn">Ver panel!</a>
</h4>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col xl12 l12 m12 s12">
<div class="card-panel center teal">
<span class="white-text">
Yo soy una persona que le gusta experimentar siempre con muchas tecnologías, aprender más, y con cada error cometido es lo mejor para mejorar el aprendizaje y los diseños, ya que nadie nace sabiendo...
</span>
</div>
</div> <!-- fin del .lms12 -->
<!-- Grid de promoción -->
<div class="col xl4 l4 m12 12">
<div class="card-panel center promo blue-grey darken-3 white-text">
<i class="material-icons">flash_on</i>
<p class="promo-caption">Acelera el desarrollo</p>
<p class="light center">Hicimos la mayor parte del trabajo pesado para que usted proporcione a estilos de defecto que incorporan nuestros componentes personalizados . Además, refinamos animaciones y transiciones para proporcionar una experiencia más suave para los desarrolladores.</p>
</div>
</div>
<div class="col xl4 l4 m12 12">
<div class="card-panel center promo blue-grey darken-3 white-text">
<i class="material-icons">group</i>
<p class="promo-caption">Enfocado en el usuario</p>
<p class="light center">Mediante la utilización de elementos y principios de Material Design, hemos sido capaces de crear un framework que incorpora componentes y animaciones que proporcionan más información a los usuarios. Además, un único sistema de respuesta subyacente en todas las plataformas.</p>
</div>
</div>
<div class="col xl4 l4 m12 12">
<div class="card-panel center promo blue-grey darken-3 white-text">
<i class="material-icons">settings</i>
<p class="promo-caption">Fácil de trabajar</p>
<p class="light center">Hemos proporcionado la documentación detallada, así como ejemplos específicos de código para ayudar a los nuevos usuarios a empezar. También estamos siempre abiertos a comentarios y podemos responder a cualquier pregunta que un usuario pueda tener acerca de Materialize.</p>
</div>
</div>
<!-- Grid de promoción -->
</div> <!-- fin del .row -->
<div class="parallax-container">
<div class="parallax"><img src="http://materializecss.com/templates/parallax-template/background3.jpg"></div>
</div>
<div class="row">
<!-- imagenes --> <br>
<div class="col xl3 l3 m3 s12">
<img class="materialboxed" data-caption="Fotografía" width="100%" src="https://lorempixel.com/800/400/nature/4">
</div>
<div class="col xl3 l3 m3 s12">
<img class="materialboxed" data-caption="Fotografía" width="100%" src="https://lorempixel.com/800/400/nature/4">
</div>
<div class="col xl3 l3 m3 s12">
<img class="materialboxed" data-caption="Fotografía" width="100%" src="https://lorempixel.com/800/400/nature/4">
</div>
<div class="col xl3 l3 m3 s12">
<img class="materialboxed" data-caption="Fotografía" width="100%" src="https://lorempixel.com/800/400/nature/4">
</div>
<!-- imagenes -->
<!-- SideNav -->
<ul id="slide-out" class="side-nav">
<li><div class="user-view">
<div class="background">
<img src="https://ak2.picdn.net/shutterstock/videos/23151772/thumb/1.jpg">
</div>
<a href="#!user"><img class="circle" src="http://31.media.tumblr.com/tumblr_lw2lhqjrel1qfmi03o9_r1_500.gif"></a>
<a href="#!name"><span class="white-text name">Joel Miguel Valente</span></a>
<a href="#!email"><span class="white-text email">joemiguelvalente@gmail.com</span></a>
</div></li>
<li><a href="#!"><i class="material-icons">language</i> Demo32.hol.es</a></li>
<li><a href="#!"><i class="material-icons">person_pin</i> Ver perfil</a></li>
<li><div class="divider"></div></li>
<li><a class="subheader">Pricipal</a></li>
<li><a href="#!"><i class="material-icons">notifications</i> Notificaciones</a></li>
<li><a href="#!"><i class="material-icons">email</i> Mensajes</a></li>
<li><a class="subheader">Configuración</a></li>
<li><a href="#!"><i class="material-icons">build</i> Editar perfil</a></li>
</ul>
<!-- SideNav -->
</div> <!-- fin del .row -->
</div> <!-- fin del .container -->
<footer class="page-footer grey darken-4">
<div class="footer-copyright">
<div class="container center">
Copyright © 2017 - Miguel92
</div>
</div>
</footer>
<!-- jQuery first, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</body>
</html>
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
.brand-logo >img {
width: 50px;
height: 50px;
margin-top: 5px;
}
/* PARALLAX */
.prof-user {
height: 270px!important;
}
.parallax >img {
/* opacity: .5;
- Para hacer la imagen, como marca de agua
*/
}
/* Menu - profile */
.bg-card-user {
background: rgba(0,77,64,.5);
padding: 15px 0;
}
.truncate >img {
width: 120px;
}
/* Promoción */
.promo i {
margin: 10px 0;
color: #FFF;
font-size: 7rem;
display: block;
}
.promo-caption {
font-size: 1.7rem;
font-weight: 500;
margin-top: 5px;
margin-bottom: 0;
}
.promo .light {
padding: 2px 10px;
}
/* FOOTER */
footer .foot-text {
margin-top: 10px;
}
$(document).ready(function(){
$('.button-collapse').sideNav({
menuWidth: 300, // Default is 300
edge: 'left', // Choose the horizontal origin
closeOnClick: true, // Closes side-nav on <a> clicks, useful for Angular/Meteor
draggable: true, // Choose whether you can drag to open on touch screens,
onOpen: function(el) { /* Do Stuff*/ }, // A function to be called when sideNav is opened
onClose: function(el) { /* Do Stuff*/ }, // A function to be called when sideNav is closed
}
);
$('.parallax').parallax();
});
