Materialize Snippet Login Materialize using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>Login!</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="css/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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }
  main {
    flex: 1 0 auto;
  }
.brand-logo >img {
    width: 50px;
    height: 50px;
    margin-top: 5px;
}
/* Menu - profile */
.bg-card-user {
    background: rgba(0,77,64,.5);
    padding: 15px 0;
}
.truncate >img {
    width: 180px;
    margin-top: 6px;
    margin-bottom: 6px;
}
/* FOOTER */
footer .foot-text {
    margin-top: 10px;
}
/* LOGIN */
.logueo {/* PARALLAX */
    height: 650px!important;
}
i.iconis {
    font-size: 1em!important;
    margin-top: 8px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
    $(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();
        });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Login Materialize"
Materialize 0.98.2 Snippet by msurguy

Related: See More

Questions / Comments:

"Login Materialize" Materialize 0.98.2 Snippet by msurguy

Related: See More

Questions / Comments:

"Login Materialize"
Materialize 0.98.2 Snippet by msurguy