Create Login Template Using HTML and CSS MATERIALIZE

Hi Guys.
Welcome back to my blog.

In this post, we will discuss how to make the login template using HMTL and CSS materialize. You already know what CSS is happening?

Yup, the CSS framework is similar to Bootstrap. But it is more manifest in supporting Android. This doesn't only work for CSS. But it can also be used for skin design activities on Android applications.



Return to discussion. Here we will create a login page using html and CSS. What must be prepared is.

  1. Laptop / PC.
  2. Materialize Css (Please download on the official website).
  3. Good intentions.

After everything is prepared. Please make a file named index.html
Then enter the index.html file and the Css Materialize Source Code that was downloaded in one folder.

Then enter the script like below in the index.html file

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Belajar materialize</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!--Import materialize.css--> <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/> </head> <body bgcolor="#f1f2f6"> <body>   <main>     <center>       <h3 class="blue-text lighten-5">Masuk</h3> <h5 class="grey-text lighten-5">Lanjutkan ke <span class="blue-text">G</span><span class="red-text">m</span><span class="yellow-text">a</span><span class="green-text">i</span><span class="red-text">l</span></h5>       <div class="container">         <div class="z-depth-1 grey lighten-4 row" style="display: inline-block; padding: 32px 48px 0px 48px; border: 1px solid #EEE;">           <form class="col s12" method="post">             <div class='row'>               <div class='col s12'> <img src="img/iconUser.png" alt="logo" style="height:100px;width:100px;"> </div>             </div> <div class="row">         <div class="input-field col s12">           <i class="material-icons prefix">account_circle</i>           <input type="text" id="username" class="autocomplete">           <label for="username">enter your username</label>         </div>       </div> <div class="row">         <div class="input-field col s12">           <i class="material-icons prefix">lock</i>           <input type="password" id="password" class="validate">           <label for="password">Enter Your Password</label>         </div>       </div>             <center>               <div class='row'>                 <button type='submit' name='btn_login' class='col s10 offset-s1 waves-effect waves-light btn  blue '>Login</button>               </div>             </center>           </form>         </div>       </div>       <a href="#!">Buat Akun</a>     </center>   </main> <!--Import materialize.js--> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="js/materialize.min.js"></script> </body> </html>

After that, don't forget to save. Then create an img folder and prepare an image for the logo to display on the login page.

After all steps are taken. The following is the appearance of the coding above.



So for the tutorial this time, please practice and develop it. thank you.

Belum ada Komentar untuk "Create Login Template Using HTML and CSS MATERIALIZE"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel