CARA MEMBUAT WEBSITE YANG RESPONSIVE DAN MENARIK DENGAN MATERIALIZE
Assalamualaikum kali ini saya mencoba berbagi bagaimana cara membuat website dengan framework materialize,
- Pertama yang harus kita siapkan adalah mendownload materialize klik disini untuk mendownload. Setelah di download ekstrak file tersebut yang didalamnya ada folder css dan js seperti gamabar di bawah ini
- Buat folder dengan nama sesui projek website kalian
- Di dalam folder kopikan file materialize di bungkus dengan folder assets seperti gambar di bawah ini
- Buat file dengan nama index.html di dalam folder web kalian disini saya mencotohkan portal gugus
- Buka file index.html kalian dengan editor kesukaan kalia disini saya menngunakan sublimtext
- Silahkan kopikan script di bawah ini
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="assets/css/materialize.min.css" media="screen,projection"/>
<!--stylekita-->
<link rel="stylesheet" href="assets/css/style.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<title>Web Portal Gugus</title>
<body>
<!--nnavbar-->
<div class="navbar-fixed">
<nav class="blue darken-2">
<div class="container">
<div class="nav-wrapper">
<a href="#!" class="brand-logo">Portal Gugus </a>
<a href="#" data-target="mobile-nav" class="sidenav-trigger"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a href="">Beranda</a></li>
<li><a href="">Sekilas</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="#galeri">Galeri Gugus</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="">Login</a></li>
</ul>
</div>
</div>
</nav>
</div>
<!--nnavbar-->
<ul class="sidenav" id="mobile-nav">
<li><a href="">Beranda</a></li>
<li><a href="">Sekilas</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Galeri Gugus</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Login</a></li>
</ul>
<!--slider-->
<div class="slider">
<ul class="slides">
<li>
<img src="assets/img/slider/1.png">
<div class="caption left-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img src="assets/img/slider/2.png">
<div class="caption right-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img src="assets/img/slider/3.png">
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
</div>
<!-- berita -->
<section id="berita" class="berita">
<div class="container">
<h4 class="center-align light">Berita Terbaru</h4>
<hr>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col s12 m4">
<div class="card">
<div class="card-image">
<img src="assets/img/portfolio/1.png">
<span class="card-title">Berita</span>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="col s12 m4">
<div class="card">
<div class="card-image">
<img src="assets/img/portfolio/2.png">
<span class="card-title">Pengumuman</span>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="col s12 m4">
<div class="card">
<div class="card-image">
<img src="assets/img/portfolio/3.png">
<span class="card-title">Kegiatan Gugus</span>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
<a href="#">Read More</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- prlk -->
<div class="parallax-container">
<div class="parallax"><img src="assets/img/slider/4.png"></div>
<div class="container parthner">
<h3 class="center light white-text">Parthner</h3>
<div class="row">
<div class="col m4 s12 center">
<img src="assets/img/clients/provbanten.png">
</div>
<div class="col m4 s12 center">
<img src="assets/img/clients/tutrwuri.png">
</div>
<div class="col m4 s12 center">
<img src="assets/img/clients/provbanten.png">
</div>
</div>
</div>
</div>
<!-- galeri -->
<section id="galeri" class="galeri">
<div class="container">
<h4 class="center-align light">Galeri Gugus</h4>
<hr>
<div class="row">
<div class="col m3 s12">
<img src="assets/img/portfolio/1.png" class="responsive-img materialboxed">
</div>
<div class="col m3 s12">
<img src="assets/img/portfolio/2.png" class="responsive-img materialboxed">
</div>
<div class="col m3 s12">
<img src="assets/img/portfolio/3.png" class="responsive-img materialboxed">
</div>
<div class="col m3 s12">
<img src="assets/img/portfolio/4.png" class="responsive-img materialboxed">
</div>
</div>
<div class="row">
<div class="col m3 s12">
<img src="assets/img/portfolio/5.png" class="responsive-img materialboxed">
</div>
<div class="col m3 s12">
<img src="assets/img/portfolio/6.png" class="responsive-img materialboxed">
</div>
<div class="col m3 s12">
<img src="assets/img/portfolio/4.png" class="responsive-img materialboxed">
</div>
<div class="col m3 s12">
<img src="assets/img/portfolio/2.png" class="responsive-img materialboxed">
</div>
</div>
</div>
</section>
<!-- contak -->
<section id="contact" class="contact grey lighten-3">
<div class="container">
<h3 class="center light grey-text text-darken-3">Contact</h3>
<div class="row">
<div class="col m5 s12">
<div class="card-panel blue darken-2 center white-text">
<i class="material-icons">email</i>
<h5>Contact</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, in.</p>
</div>
<ul class="collection with-header">
<li class="collection-header"><h4>Our Office</h4></li>
<li class="collection-item">Gugus XX</li>
<li class="collection-item">Jl. Setia Budi No. 23</li>
<li class="collection-item">West Java Indonesia</li>
</ul>
</div>
<div class="col m7 s12">
<form >
<div class="card-panel">
<h5>Please Fill Out This Form</h5>
<div class="input-field">
<input type="text" name="name" id="name">
<label for="name">Name</label>
</div>
<div class="input-field">
<input type="email" name="email" id="email" class="validate">
<label for="email">Email</label>
</div>
<div class="input-field">
<input type="text" name="phone" id="phone">
<label for="phone">Phone Number</label>
</div>
<div class="input-field">
<textarea name="message" id="message" class="materialize-textarea"></textarea>
<label for="message">Message</label>
</div>
<button type="submit" class="btn blue darken-2">Send</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- footer -->
<footer class="page-footer blue darken-2">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Portal Gugus xx</h5>
<p class="grey-text text-lighten-4">Jl. Raya Bandung Boboko no. 5 Bannten</p>
</div>
<div class="col l4 offset-l2 s12">
<h5 class="white-text">Link Terkait</h5>
<ul>
<li><a class="grey-text text-lighten-3" href="#!">Dapodikdasmen</a></li>
<li><a class="grey-text text-lighten-3" href="#!">DIT PSMK</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Takola</a></li>
<li><a class="grey-text text-lighten-3" href="#!">SDM Data</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© 2014 Copyright Text
<a class="grey-text text-lighten-4 right" href="#!">More Links</a>
</div>
</div>
</footer>
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="assets/js/materialize.min.js"></script>
<script>
const Sidenav = document.querySelectorAll('.sidenav');
M.Sidenav.init(Sidenav);
const Slider = document.querySelectorAll('.slider');
M.Slider.init(Slider,{
indicators: false,
height: 500,
transition: 600,
interval: 3000
});
const parallax = document.querySelectorAll('.parallax');
M.Parallax.init(parallax);
const materialbox = document.querySelectorAll('.materialboxed');
M.Materialbox.init(materialbox);
</script>
</body>
</html>- Setelah beres membuat scriptanya silahkan kembali ke folder website kalian lalu di index.html kalian klik kanan open with browser sehingga akan muncul tampilan web design yang keren seperti gamabar di bawah ini
Sekian cara singkat membuat design website menarik dengan menggunakan framework materialize.
Untuk mendapatkan dokumen cara membuat website dengan materialize bisa unduh di sini
