"Skin Materialize"
Materialize 0.98.2 Snippet by testing223

<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(); });

Related: See More


Questions / Comments: