Cara Membuat Web Design untuk Pemula
Cara Membuat Web Design untuk Pemula - Kali ini saya akan share tutorial Cara Membuat Web Design untuk Pemula. Cara membuat website ini saya share agar bermanfaat bagi kita semua. Untuk membuat web design bahasa pemograman yang harus anda kuasai cukup html, css, dan javascript.
Di tutorial kali ini saya akan mempraktekan membuat web design yang pernah saya buat untuk lomba dengan tema "Ayo Gunakan Startup dalam Negeri". Penasaran? Langsung saja simak sampai akhir.
Untuk web design yang akan saya buat seperti: http://startupindonesia.my.id/. yang merupakan salah satu website statis.
Sebelum membuat halaman web design apa saja hal-hal yang wajib anda perhatikan?
Berikut Cara Membuat Web Design untuk Pemula
Sebelum membuat halaman website design anda wajib mempersiapkan hal-hal berikut:1. Laptop/Komputer : disarankan memakai pc/sendiri, jika belum punya silahkan pinjam tetangga anda.
2. Aplikasi Text Editor : bisa memakai notepad, notepad++, Visual Studio Code, Sublime Text, dan sebagainya.
3. Niat yang Tulus : sebelum membuat design web diwajibkan anda mempunyai niat yang tulus, tidak setengah-setangah dalam membuatnya.
Setelah mempersiapkan hal-hal diatas mari kita melangkah ke sesi selanjutnya.
Langkah 1: Membuat Folder, File HTML, dan CSS
Langkah pertama yang perlu anda lakukan adalah membuat sebuah folder dan didalamnya buat file dengan notepad, dan simpan dengan nama: "index.html", "keuangan.html", "pendidikan.html", "pertanian.html", "toko-online.html", "transportasi.html", "style.css", dan buat sebuah folder "img", untuk menyimpan gambar. Seperti:
Langkah 2: Copy dan Pastekan Kode
Setelah mengikuti langkah 1, disini sudah mulai ke langkah 2. Dilangkah ini copy dan pastekan kode yang sudah saya sediakan ke file yang sudah dibuat tadi. Untuk gambarnya anda bisa download disini (password: www.ansoriweb.com).Baca Juga: Cara Membuat Web Sekolah dengan HTML dan CSS
File CSS: "style.css"
Copy dan pastekan kode dibawah ini ke file "style.css" yang sudah dibuat tadi.
html {box-sizing: border-box; font-family: "Poppins", sans-serif; } body {margin: 0; padding:0;} #menu {width: 100%;color: white; background: #008B8B; height: 85vh;justify-items: center; position: static; justify-content: space-around;} #menu ul{display: flex; float: right; margin : 30px; } #menu ul li{list-style: none;} h1:hover {cursor: pointer;} #menu ul li a{margin: 15px; text-decoration: none; color: white; cursor: pointer; display: block;} #menu ul li a:hover{text-decoration: underline;} #menu .fb {width: 13px;} #menu .logo {display: block; float: left; font-size: 35px; margin : 25px;} #menu .logo a{text-decoration: none; color: white;cursor: pointer;} #menu .content1 {margin: auto;text-align: center; padding: 15%; } .icon {padding: 4%; position: block;} .icon img:hover{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.19);} .icon img {width: 20px; margin: 10px;} .content1 h1{font-size: 50px; font-weight: lighter;} .content1 h1 span{font-weight: bold;} .content1 p{font-size: 18px;} .content1 p span {font-weight: bold;} .button {font-weight: lighter; padding: 4px;border-radius:4px; background: #008B8B;color: white; text-decoration: none; cursor: pointer;} .grid { font-weight: lighter; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr ;} .item-grid{ border-radius: 10px; width: 200px; height: 250px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.19); } .item-grid:hover {border:1px solid #008B8B; } .item-grid a:hover{ background: #20B2AA; } .grid img{width: 100%; height:50%; border-radius: 8px 8px 0 0; } #info {text-align: center; width: 80%; margin:auto; } #info h1 {font-weight: lighter;} .grid h1{font-size: 25px;} #grafik {text-align: center; width: 100%; position: relative; } #grafik h1 {font-weight: lighter;} #grafik span{font-weight: bold;} #grafik a{text-decoration: none; color: black;} .grafik-item{cursor: pointer; border-radius:8px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.19);} .grafik1{background-color: peru; margin:10px;} /*www.ansoriweb.com*/ .grafik2{background-color: blue; margin:10px;} .grafik3{background-color: darkcyan; margin:10px;} .grafik4{background-color: darkorchid; margin:10px;} .grafik5{background-color: green; margin:10px;} .item-grafik {width: 70%; text-align: center; color: white; font-weight: lighter; margin:auto; } #grafik a:hover{text-decoration: underline;} .informasi { margin:auto; font-weight: lighter; display: grid; grid-template-columns: 1fr 1fr; width: 100%; height: 280px; } .item-grid1 img{width: 200px; margin-top:auto; margin-bottom:auto;} .item-grid1 p{text-align: left; } .item-grid1 h2 { font-size: 25px; color: #008B8B; text-align: left; font-weight: lighter;} .item-grid1 { justify-content: space-around; padding: 30px ; border-radius: 10px; margin: 5px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.19);} .item-grid1:hover {border: 1px solid #008B8B;} .item-grid1 p span{color: #008B8B;} .item-grid1 a{text-decoration: none; color: black; cursor: pointer;} .item-grid1 a:hover{text-decoration: underline;} .item-grid1 {height: 70%; position: static;} #gambar {text-align: center; padding: 10px; } #gambar img {width: 100px;} #gambar h1{ font-weight: lighter;} .gambar1 { width: 80%; margin: auto; } #gambar span{font-weight: bold;} #footer {background:#008B8B; padding: 20px; text-align: center; position: relative; } #footer span{color: white; margin:auto;} #footer .copy {margin:15px;} #footer .copy a{text-decoration: none; color: white;} #footer .copy a:hover{text-decoration: underline;} #footer p{color: white;} /* Media Kuy*/ @media (max-width: 768px) { #menu .logo {font-size: 30px; margin: auto; text-align: center; width: 100%; } #container {margin: 0;} h1{font-size: 20px;} h2{font-size: 18px;} p {font-size: 11px;} .content1 h1{font-size: 20px;} .content1 p{font-size: 11px;} #menu{height: 50vh; width: 100%; text-align: center; display: block; width: 100%;} #menu ul li {margin:auto;} #menu .nav {position: fixed; background: #008B8B; } #menu ul{ justify-content: space-around; margin: auto; width: 100%; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.19); } #menu ul li a{padding: 10px;font-size: 15px; text-align: center; margin:auto; display: block; } #menu .icon img{width: 10px; margin: 5px;} #menu .content1 {margin: auto;text-align: center; padding-top: 28%;} #info h2 {font-size: 16px;} #info {font-size: 11px; width: 100%; margin: auto; } .informasi { display:grid; grid-template-columns: 1fr 1fr; } .item-grid1 {padding: 25px; justify-content: space-around; align-items: center;} #grafik {font-size: 11px; position: static; } .grafik-item{width: 90%; margin: auto;} .item-grafik {width: 100%; } #info .grid img{width: 100%; height: 130px; } .grid {display: grid; grid-template-columns: 1fr; } #info .item-grid1 img {width: 100px; align-items: center;} .item-grid {width: 60%; margin:5px auto;} .grid h1{font-size: 18px;} #gambar .gambar1 img{width: 60px;} #footer {font-size: 15px;} }File HTML: "index.html"
Copy dan pastekan kode dibawah ini ke file "index.html" yang sudah dibuat tadi.
<html>
<head>
<title>Startup Indonesia</title>
<meta name="description" content="Ayo gunakan STARTUP dalam Negeri, Setiap tahun bahkan setiap bulan banyak startup baru bermunculan, Sekarang ini setidaknya terdapat lebih dari 2000 startup lokal yang ada di Indonesia."/>
<link href='img/favicon.ico' rel='icon' type='image/x-icon'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<meta http-equiv='X-UA-Compatible' content="ie=edge"/>
<meta charset="UTF-8"/>
<meta name='viewport'/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800&display=swap"/>
<link rel='stylesheet' href='style.css'/>
</head>
<body>
<div id="container">
<div id="menu">
<div class='nav'>
<span class='logo'><a href='index.html' title='Startup Indonesia'>Startup Indonesia</a></span>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#info'>Informasi</a></li>
<li><a href='#grafik'>Rangking</a></li>
<li><a href='#gambar'>Contoh</a></li>
</ul>
</div>
<div class="content1">
<h1>Ayo gunakan <span>STARTUP</span> dalam Negeri</h1>
<p>"Setiap tahun bahkan setiap bulan banyak startup baru bermunculan, Sekarang <br>ini setidaknya terdapat lebih dari <span>2000 startup lokal</span> yang ada di Indonesia."</p>
</div>
</div>
<div id="info">
<h1 title='Informasi'>Informasi</h1>
<div class='grid'>
<div class='item-grid'>
<img src='img/pendidikan.jpg'>
<h1>Pendidikan</h1>
<a class='button' href ='pendidikan.html' title="Baca Selengkapnya">For More</a>
</div>
<div class='item-grid'>
<img src='img/toko-online.jpg'>
<h1>Toko Online</h1>
<a class='button' href ='toko-online.html' title="Baca Selengkapnya">For More</a>
</div>
<div class='item-grid'>
<img src='img/transportasi.jpg'>
<h1>Transportasi</h1>
<a class='button' href ='transportasi.html' title="Baca Selengkapnya">For More</a>
</div>
<div class='item-grid'>
<img src='img/keuangan.jpg'>
<h1>Keuangan</h1>
<a class='button' href ='keuangan.html' title="Baca Selengkapnya">For More</a>
</div>
<div class='item-grid'>
<img src='img/pertanian.jpg'>
<h1>Pertanian</h1>
<a class='button' href ='pertanian.html' title="Baca Selengkapnya">For More</a>
</div>
</div>
</div>
<div id="grafik">
<h1 title='Rangking Pengguna'>Startup Rangking</h1>
<div class='item-grafik'>
<div class="grafik-item">
<div class="grafik1" style='width:90%;' title='United States 47,156 ribu+'>United States 47,156 ribu+</div>
</div>
<div class="grafik-item">
<div class="grafik2" style='width:60%;' title='India 6,826 ribu+'>India 6,826 ribu+</div>
</div>
<div class="grafik-item">
<div class="grafik3" style='width:55%;' title="United Kingdom 5,025 ribu+">United Kingdom 5,025 ribu+</div>
</div>
<div class="grafik-item">
<div class="grafik4" style='width:40%;' title='Canada 2,552 ribu+'>Canada 2,552 ribu+</div>
</div>
<div class="grafik-item">
<div class="grafik5" style='width:38%;' title='Indonesia 2,140 ribu+'>Indonesia 2,140 ribu+</div>
</div>
</div>
<p>Jumlah <span>Startup Indonesia </span>Terbanyak No.5 di Dunia, by <a href='https://startupranking.com' target='_blank' title="Startup Rangking">startupranking.com</a></p>
</div>
<div id="gambar">
<h1 title='Contoh Startup Indonesia'>Contoh Startup Indonesia</h1>
<div class='gambar1'>
<img src='img/icon-bukalapak.png'>
<img src='img/icon-gojek.png'>
<img src='img/icon-danamas.png'>
<img src='img/icon-ruangguru.png'>
<img src='img/icon-crowde.png'>
</div>
<p>Gambar diatas merupakan beberapa contoh <span>Startup</span> yang ada di Indonesia.</p>
</div>
<div id="footer">
<div class="copy">
<span>Copyright © 2019<a href='index.html' title='Startup Indonesia'> Startup Indonesia</a> | Created by <a href=https://www.ansoriweb.com/' target='_blank' title='AnsoriWeb.com'>AnsoriWeb.com</a></span>
</div>
</div>
</div>
</body>
</html>File HTML: "keuangan.html"
Copy dan pastekan kode dibawah ini ke file "keuangan.html" yang sudah dibuat tadi.<html>
<head>
<title>Contoh Startup Keuangan | Startup Indonesia</title>
<meta name="description" content="Berikut ini merupakan contoh, informasi, grafik, pendiri Startup Keuangan yang paling banyak digunakan di Indonesia."/>
<link href='img/favicon.ico' rel='icon' type='image/x-icon'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<meta http-equiv='X-UA-Compatible' content="ie=edge"/>
<meta charset="UTF-8"/>
<meta name='viewport'/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800&display=swap"/>
<link rel='stylesheet' href='style.css'/>
</head>
<body>
<div id="container">
<div id="menu">
<div class='nav'>
<span class='logo'><a href='index.html' title='Startup Indonesia'>Startup Indonesia</a></span>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#info'>Informasi</a></li>
<li><a href='#grafik'>Rangking</a></li>
<li><a href='mailto:admin@startupindonesia.my.id'>Contact</a></li>
</ul>
</div>
<div class="content1">
<h1>Contoh <span>STARTUP</span> Keuangan</h1>
<p>Berikut ini merupakan contoh <span>Startup Keuangan</span> yang paling banyak digunakan di Indonesia.</p>
<div class="icon">
<a href='https://www.facebook.com/sharer.php?u=http://startupindonesia.my.id/keuangan.html' target='_blank' title='Bagikan dengan Facebook' ><img class='fb' src='img/icon-fb.png' ></a>
<a href='https://www.linkedin.com/shareArticle?mini=true&url=http://startupindonesia.my.id/keuangan.html&title=Contoh Startup Keuangan Terbaik di Indonesia' target='_blank' title='Bagikan dengan LinkedIn'><img src='img/icon-in.png'></a>
<a href='http://twitter.com/share?url=http://startupindonesia.my.id/keuangan.html' target='_blank' title='Bagikan dengan Twitter'><img src='img/icon-tw.png'></a>
<a href='whatsapp://send?text=Contoh Startup Keuangan Terbaik di Indonesi%20%2D%20http://startupindonesia.my.id/keuangan.html' target='_blank' title='Bagikan dengan Whatsapp' ><img src='img/icon-wa.png'></a>
</div>
</div>
</div>
<div id='info'>
<div class="info">
<h1 title='Informasi'>Informasi</h1>
</div>
<div class="informasi">
<div class='item-grid1' title="Investree">
<img src='img/icon-investree.png' >
</div>
<div class='item-grid1' title='Informasi'>
<h2>Investree</h2>
<p><span>Pendiri:</span> Aida Sutanto & Adrian Gunadi<br>
<span>Didirikan:</span> 2015<br>
<span>Pengguna:</span> 10.000+<br>
<span>Rating Konten:</span> 3+<br>
<span>Website:</span><a href='https://www.investree.id/' target='_blank' title='Investree.id'> Investree.id</a>
</p>
</div>
</div>
<div class="informasi">
<div class='item-grid1' title="Amartha">
<img src='img/icon-amartha.png' >
</div>
<div class='item-grid1' title='Informasi'>
<h2>Amartha</h2>
<p><span>Pendiri:</span> Andi Taufan Garuda Putra<br>
<span>Didirikan:</span> 2010<br>
<span>Pengguna:</span> 10.000+<br>
<span>Rating Konten:</span> 3+<br>
<span>Website:</span><a href='http://amartha.com/' target='_blank' title='Amartha.com'> Amartha.com</a>
</p>
</div>
</div>
<div class="informasi">
<div class='item-grid1' title="Danamas">
<img src='img/icon-danamas.png' >
</div>
<div class='item-grid1' title='Informasi'>
<h2>Danamas P2P</h2>
<p><span>Pendiri:</span> Dani Lihardja<br>
<span>Didirikan:</span> 2000<br>
<span>Pengguna:</span> 100.000+<br>
<span>Rating Konten:</span> 3+<br>
<span>Website:</span><a href='http://www.danamas.co.id/' target='_blank' title='Danamas.co.id'> Danamas.co.id</a>
</p>
</div>
</div>
<div class="informasi">
<div class='item-grid1' title="Dompet Kilat">
<img src='img/icon-dompetkilat.png' >
</div>
<div class='item-grid1' title='Informasi'>
<h2>Dompet Kilat</h2>
<p><span>Pendiri:</span> Sunu Widyatmoko<br>
<span>Didirikan:</span> 2017<br>
<span>Pengguna:</span> 10.000+<br>
<span>Rating Konten:</span> 3+<br>
<span>Website:</span><a href='https://www.dompetkilat.co.id/' target='_blank' title='Dompetkilat.co.id'> Dompetkilat.co.id</a>
</p>
</div>
</div>
<div class="informasi">
<div class='item-grid1' title="Kimo">
<img src='img/icon-kimo.jpg' >
</div>
<div class='item-grid1' title='Informasi'>
<h2>Kimo</h2>
<p><span>Pendiri:</span> Bernard Martian<br>
<span>Didirikan:</span> 2016<br>
<span>Pengguna:</span> 50.000+<br>
<span>Rating Konten:</span> 3+<br>
<span>Website:</span><a href='http://kimo.co.id/' target='_blank' title='Kimo.co.id'> Kimo.co.id</a>
</p>
</div>
</div>
</div>
<div id="grafik">
<h1 title='Rangking Pengguna'>Rangking Pengguna</h1>
<div class='item-grafik'>
<div class="grafik-item">
<div class="grafik1" style='width:95%;' title='Danamas 100.000 ribu+'>Danamas 100.000 ribu+</div>
</div>
<div class="grafik-item">
<div class="grafik2" style='width:60%;' title='Kimo 50.000 ribu+'>Kimo 50.000 ribu+</div>
</div>
<div class="grafik-item">
<div class="grafik3" style='width:30%;' title='Amartha 10.000 ribu+'>Amartha 10.000 ribu+</div>
</div>
<div class="grafik-item">
<div class="grafik4" style='width:30%;' title='Investree 10.000 ribu+'>Investree 10.000 ribu+</div>
</div>
<div class="grafik-item">
<div class="grafik5" style='width:30%;' title='Dompet Kilat 10.000 ribu+'>Dompet Kilat 10.000 ribu+</div>
</div>
</div>
<p><span>Data Startup </span>diatas berdasarkan Jumlah Download Pengguna <a href='https://play.google.com/store/' target='_blank' title="Google Play">Google Play</a></p>
</div>
<div id="footer">
<div class="copy">
<span>Copyright © 2019<a href='index.html' title='Startup Indonesia'> Startup Indonesia</a> | Created by <a href=https://www.ansoriweb.com/' target='_blank' title='AnsoriWeb.com'>AnsoriWeb.com</a></span>
</div>
</div>
</div>
</body>
</html>File HTML: "pendidikan.html"
Copy dan pastekan kode dibawah ini ke file "pendidikan.html" yang sudah dibuat tadi.
<html>
<head>
<title>Contoh Startup Pendidikan | Startup Indonesia</title>
<meta name="description" content="Berikut ini merupakan contoh, informasi, grafik, pendiri Startup Pendidikan yang paling banyak digunakan di Indonesia."/>
<link href='img/favicon.ico' rel='icon' type='image/x-icon'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<meta http-equiv='X-UA-Compatible' content="ie=edge"/>
<meta charset="UTF-8"/>
<meta name='viewport'/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800&display=swap"/>
<link rel='stylesheet' href='style.css'/>
</head>
<body>
<div id="container">
<div id="menu">
<div class='nav'>
<span class='logo'><a href='index.html' title='Startup Indonesia'>Startup Indonesia</a></span>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#info'>Informasi</a></li>
<li><a href='#grafik'>Rangking</a></li>
<li><a href='mailto:admin@startupindonesia.my.id'>Contact</a></li>
</ul>
</div>
<div class="content1">
<h1>Contoh <span>STARTUP</span> Pendidikan</h1>
<p>Berikut ini merupakan contoh <span>Startup Pendidikan</span> yang paling banyak digunakan di Indonesia.</p>
<div class="icon">
<a href='https://www.facebook.com/sharer.php?u=http://startupindonesia.my.id/pendidikan.html' target='_blank' title='Bagikan dengan Facebook'><img class='fb' src='img/icon-fb.png'></a>
<a href='https://www.linkedin.com/shareArticle?mini=true&url=http://startupindonesia.my.id/pendidikan.html&title=Contoh Startup Pendidikan Terbaik di Indonesia' target='_blank' title='Bagikan dengan LinkedIn'><img src='img/icon-in.png'></a>
<a href='http://twitter.com/share?url=http://startupindonesia.my.id/pendidikan.html' target='_blank' title='Bagikan dengan Twitter'><img src='img/icon-tw.png' ></a>
<a href='whatsapp://send?text=Contoh Startup Pendidikan Terbaik di Indonesia%20%2D%20http://startupindonesia.my.id/pendidikan.html' target='_blank' title='Bagikan dengan Whatsapp'><img src='img/icon-wa.png'></a>
</div>
</div>
</div>
<div id='info'>
<div class="info">
<h1 title='Informasi'>Informasi</h1>
</div>
<div class="informasi">
<div class='item-grid1' title='Ruang Guru'>
<img src='img/icon-ruangguru.png' >
</div>
<div class='item-grid1' title='Informasi'>
<h2>Ruang Guru</h2>
<p><span>Pendiri:</span> Adamas Belva Syah Devara & Muh Imam Usman<br>
<span>Didirikan:</span> 2014<br>
<span>Pengguna:</span> 5.000.000+<br>
<span>Rating Konten:</span> 3+<br>
<span>Website:</span><a href='https://ruangguru.com/' target='_blank' title='Ruangguru.com'> Ruangguru.com</a>
</p>
</div>
</div>
<div class="informasi">
<div class='item-grid1' title="Zenius Education">
<img src='img/icon-zenius.png' >
</div>
<div class='item-grid1' title='Informasi'>
<h2>Zenius Education</h2>
<p><span>Pendiri:</span> Sabda PS & Medy Suharta<br>
<span>Didirikan:</span> 2014<br>
<span>Pengguna:</span> 100.000+<br>
<span>Rating Konten:</span> 3+<br>
<span>Website:</span><a href='https://www.zenius.net/' target='_blank' title='Zenius.net'> Zenius.net</a>
</p>
</div>
</div>
<div class="informasi">
<div class='item-grid1' title='Kelase'>
<img src='img/icon-kelase.png' >
</div>
<div class='item-grid1' title='Informasi'>
<h2>Kelase</h2>
<p><span>Pendiri:</span> Winastwan Gora & Brimy Laksmana<br>
<span>Didirikan:</span> 2014<br>
<span>Pengguna:</span> 1.000+<br>
<span>Rating Konten:</span> 12+<br>
<span>Website:</span><a href='http://www.kelase.com/' target='_blank' title='Kelase.com'> Kelase.com</a>
</p>
</div>
</div>
<div class="informasi">
<div class='item-grid1' title='HarukaEdu'>
<img src='img/icon-harukaedu.png' >
</div>
<div class='item-grid1' title='Informasi'>
<h2>HarukaEdu</h2>
<p><span>Pendiri:</span> Novistiar Rustandi, Tovan Krisdianto, Gerald Ariff<br>
<span>Didirikan:</span> 2013<br>
<span>Pengguna:</span> 5.000+<br>
<span>Rating Konten:</span> 3+<br>
<span>Website:</span><a href='http://harukaedu.com/' target='_blank' title='Harukadu.com'> Harukadu.com</a>
</p>
</div>
</div>
<div class="informasi">
<div class='item-grid1' title='Indonesiax'>
<img src='img/icon-indonesiax.png' >
</div>
<div class='item-grid1' title='Informasi'>
<h2>IndonesiaX</h2>
<p><span>Pendiri:</span> Lucy Pandjaitan Mangoendipoero <br>
<span>Didirikan:</span> 2015<br>
<span>Pengguna:</span> 10.000+<br>
<span>Rating Konten:</span> 3+<br>
<span>Website:</span><a href='https://www.indonesiax.co.id/' target='_blank'> IndonesiaX.co.id</a>
</p>
</div>
</div>
</div>
<div id="grafik">
<h1 title='Rangking Pengguna'>Startup Rangking</h1>
<div class='item-grafik'>
<div class="grafik-item">
<div class="grafik1" style='width:90%;' title='Ruang Guru 5.000.000 jt+'>Ruang Guru 5.000.000 jt+</div>
</div>
<div class="grafik-item">
<div class="grafik2" style='width:50%;' title='Zenius Education 100.000 ribu+'>Zenius Education 100.000 ribu+</div>
</div>
<div class="grafik-item">
<div class="grafik3" style='width:40%;' title='IndonesiaX 10.000 ribu+'>IndonesiaX 10.000 ribu+</div>
</div>
<div class="grafik-item">
<div class="grafik4" style='width:30%;' title='HarukaEdu 5.000 ribu+'>HarukaEdu 5.000 ribu+</div>
</div>
<div class="grafik-item">
<div class="grafik5" style='width:25%;' title="Kelase 1.000 ribu+">Kelase 1.000 ribu+</div>
</div>
</div>
<p><span>Data Startup </span>diatas berdasarkan Jumlah Download Pengguna <a href='https://play.google.com/store/' target='_blank' title="Google Play">Google Play</a></p>
</div>
<div id="footer">
<div class="copy">
<span>Copyright © 2019<a href='index.html' title='Startup Indonesia'> Startup Indonesia</a> | Created by <a href='https://www.ansoriweb.com/' target='_blank' title='AnsoriWeb.com'>AnsoriWeb.com</a></span>
</div>
</div>
</div>
</body>
</html>File HTML: "pertanian.html"
Copy dan pastekan kode dibawah ini ke file "pertanian.html" yang sudah dibuat tadi.
<html>
<head>
<title>Contoh Startup Pertanian | Startup Indonesia</title>
<meta name="description" content="Berikut ini merupakan contoh, informasi, grafik, pendiri Startup Pertanian yang paling banyak digunakan di Indonesia."/>
<link href='img/favicon.ico' rel='icon' type='image/x-icon'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<meta http-equiv='X-UA-Compatible' content="ie=edge"/>
<meta charset="UTF-8"/>
<meta name='viewport'/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800&display=swap"/>
<link rel='stylesheet' href='style.css'/>
</head>
<body>
<div id="container">
<div id="menu">
<div class='nav'>
<span class='logo'><a href='index.html' title='Startup Indonesia'>Startup Indonesia</a></span>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#info'>Informasi</a></li>
<li><a href='#grafik'>Rangking</a></li>
<li><a href='mailto:admin@startupindonesia.my.id'>Contact</a></li>
</ul>
</div>
<div class="content1">
<h1>Contoh <span>STARTUP</span> Pertanian</h1>
<p>Berikut ini merupakan contoh <span>Startup Pertanian</span> yang paling banyak digunakan di Indonesia.</p>
<div class="icon">
<a href='https://www.facebook.com/sharer.php?u=http://startupindonesia.my.id/pertanian.html' target='_blank' title='Bagikan dengan Facebook'><img class='fb' src='img/icon-fb.png' ></a>
<a href='https://www.linkedin.com/shareArticle?mini=true&url=http://startupindonesia.my.id/pertanian.html&title=Contoh Startup Pertanian Terbaik di Indonesia' target='_blank' title='Bagikan dengan LinkedIn'><img src='img/icon-in.png'></a>
<a href='http://twitter.com/share?url=http://startupindonesia.my.id/pertanian.html' target='_blank' title='Bagikan dengan Twitter'><img src='img/icon-tw.png'></a>
<a href='whatsapp://send?text=Contoh Startup Pertanian Terbaik di Indonesi%20%2D%20http://startupindonesia.my.id/pertanian.html' target='_blank' title='Bagikan dengan Whatsapp'><img src='img/icon-wa.png'></a>
</div>
</div>
</div>
<div id='info'>
<div class="info">
<h1 title='Informasi'>Informasi</h1>
</div>
<div class="informasi">
<div class='item-grid1' title="iGrow">
<img src='img/icon-igrow.png' >
</div>
<div class='item-grid1' title='Informasi'>
<h2>iGrow</h2>
<p><span>Pendiri:</span> Andreas Senjaya & Muhaimin Iqbal<br>
<span>Didirikan:</span> 2014<br>
<span>Pengguna:</span> 50.000+<br>
<span>Rating Konten:</span> 3+<br>
<span>Website:</span><a href='https://igrow.asia/' target='_blank' title='iGrow.asia'> iGrow.asia</a>
</p>
</div>
</div>
<div class="informasi">
<div class='item-grid1' title="Eragano">
<img src='img/icon-eragano.png' >
</div>
<div class='item-grid1' title='Informasi'>
<h2>Eragano</h2>
<p><span>Pendiri:</span> Stephanie Jesselyn<br>
<span>Didirikan:</span> 2015 <br>
<span>Pengguna:</span> 500+<br>
<span>Rating Konten:</span> 3+<br>
<span>Website:</span><a href='http://eragano.com/' target='_blank' title='Eragano.com'> Eragano.com</a>
</p>
</div>
</div>
<div class="informasi">
<div class='item-grid1' title="Petani">
<img src='img/icon-petani.png' >
</div>
<div class='item-grid1' title='Informasi'>
<h2>Petani</h2>
<p><span>Pendiri:</span> Sanny Gadaffi<br>
<span>Didirikan:</span> 2012 <br>
<span>Pengguna:</span> 50.000+<br>
<span>Rating Konten:</span> 12+<br>
<span>Website:</span><a href='http://8villages.com/' target='_blank' title='8villages.com'> 8villages.com</a>
</p>
</div>
</div>
<div class="informasi">
<div class='item-grid1' title="Tanihub">
<img src='img/icon-tanihub.png'>
</div>
<div class='item-grid1' title='Informasi'>
<h2>Tanihub</h2>
<p><span>Pendiri:</span> Ivan Arie Sustiawan<br>
<span>Didirikan:</span> 2015<br>
<span>Pengguna:</span> 100.000+<br>
<span>Rating Konten:</span> 3+<br>
<span>Website:</span><a href='https://tanihub.com/' target='_blank' title='Tanihub.com'> Tanihub.com</a>
</p>
</div>
</div>
<div class="informasi">
<div class='item-grid1' title="Crowde">
<img src='img/icon-crowde.png' >
</div>
<div class='item-grid1' title='Informasi'>
<h2>Crowde</h2>
<p><span>Pendiri:</span> Yohanes Sugihtono Nugroho<br>
<span>Didirikan:</span> 2015<br>
<span>Pengguna:</span> 10.000+<br>
<span>Rating Konten:</span> 3+<br>
<span>Website:</span><a href='http://crowde.co/' target='_blank' title='Crowde.co'> Crowde.co</a>
</p>
</div>
</div>
</div>
<div id="grafik">
<h1 title='Rangking Pengguna'>Rangking Pengguna</h1>
<div class='item-grafik'>
<div class="grafik-item">
<div class="grafik1" style='width:90%;' title='TaniHub 100.000 ribu+'>TaniHub 100.000 ribu+</div>
</div>
<div class="grafik-item">
<div class="grafik2" style='width:70%;' title='Petani 50.000 ribu+'>Petani 50.000 ribu+</div>
</div>
<div class="grafik-item">
<div class="grafik3" style='width:70%;' title='iGrow 50.000 ribut+'>iGrow 50.000 ribut+</div>
</div>
<div class="grafik-item">
<div class="grafik4" style='width:40%;' title='Crowde 10.000 ribu+'>Crowde 10.000 ribu+</div>
</div>
<div class="grafik-item">
<div class="grafik5" style='width:20%;' title='Eragano 500+'>Eragano 500+</div>
</div>
</div>
<p><span>Data Startup </span>diatas berdasarkan Jumlah Download Pengguna <a href='https://play.google.com/store/' target='_blank' title="Google Play">Google Play</a></p>
</div>
<div id="footer">
<div class="copy">
<span>Copyright © 2019<a href='index.html' title='Startup Indonesia'> Startup Indonesia</a> | Created by <a href=https://www.ansoriweb.com/' target='_blank' title='AnsoriWeb.com'>AnsoriWeb.com</a></span>
</div>
</div>
</div>
</body>
</html>Copy dan pastekan kode dibawah ini ke file "toko-online.html" yang sudah dibuat tadi.
<html>
<head>
<title>Contoh Startup Toko Online | Startup Indonesia</title>
<meta name="description" content="Berikut ini merupakan contoh, informasi, grafik, pendiri Startup Toko Online yang paling banyak digunakan di Indonesia."/>
<link href='img/favicon.ico' rel='icon' type='image/x-icon'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<meta http-equiv='X-UA-Compatible' content="ie=edge"/>
<meta charset="UTF-8"/>
<meta name='viewport'/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800&display=swap"/>
<link rel='stylesheet' href='style.css'/>
</head>
<body>
<div id="container">
<div id="menu">
<div class='nav'>
<span class='logo'><a href='index.html' title='Startup Indonesia'>Startup Indonesia</a></span>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#info'>Informasi</a></li>
<li><a href='#grafik'>Rangking</a></li>
<li><a href='mailto:admin@startupindonesia.my.id'>Contact</a></li>
</ul>
</div>
<div class="content1">
<h1>Contoh <span>STARTUP</span> Toko Online</h1>
<p>Berikut ini merupakan contoh <span>Startup Toko Online</span> yang paling banyak digunakan di Indonesia.</p>
<div class="icon">
<a href='https://www.facebook.com/sharer.php?u=http://startupindonesia.my.id/toko-online.html' target='_blank' title='Bagikan dengan Facebook'><img class='fb' src='img/icon-fb.png'></a>
<a href='https://www.linkedin.com/shareArticle?mini=true&url=http://startupindonesia.my.id/toko-online.html&title=Contoh Startup Toko Online Terbaik di Indonesia' target='_blank' title='Bagikan dengan LinkedIn'><img src='img/icon-in.png'></a>
<a href='http://twitter.com/share?url=http://startupindonesia.my.id/toko-online.html' target='_blank' title='Bagikan dengan Twitter'><img src='img/icon-tw.png'></a>
<a href='whatsapp://send?text=Contoh Startup Toko Online Terbaik di Indonesi%20%2D%20http://startupindonesia.my.id/toko-online.html' target='_blank' title='Bagikan dengan Whatsapp'><img src='img/icon-wa.png'></a>
</div>
</div>
</div>
<div id='info'>
<div class="info">
<h1 title='Informasi'>Informasi</h1>
</div>
<div class="informasi">
<div class='item-grid1' title='Bukalapak'>
<img src='img/icon-bukalapak.png' >
</div>
<div class='item-grid1' title='Informasi'>
<h2>Bukalapak</h2>
<p><span>Pendiri:</span> Achmad Zaky<br>
<span>Didirikan:</span> 2010<br>
<span>Pengguna:</span> 10.000.000+<br>
<span>Rating Konten:</span> 3+<br>
<span>Website:</span><a href='https://www.bukalapak.com/' target='_blank' title='Bukalapak.com'> Bukalapak.com</a>
</p>
</div>
</div>
<div class="informasi">
<div class='item-grid1' title="Blibli">
<img src='img/icon-blibli.png' >
</div>
<div class='item-grid1' title='Informasi'>
<h2>Blibli</h2>
<p><span>Pendiri:</span> Kusumo Martono<br>
<span>Didirikan:</span> 2010<br>
<span>Pengguna:</span> 10.000.000+<br>
<span>Rating Konten:</span> 3+<br>
<span>Website:</span><a href='http://blibli.com/' target='_blank' title='Blibli.com'> Blibli.com</a>
</p>
</div>
</div>
<div class="informasi">
<div class='item-grid1' title="Tokopedia">
<img src='img/icon-tokopedia.png' >
</div>
<div class='item-grid1' title='Informasi'>
<h2>Tokopedia</h2>
<p><span>Pendiri:</span> William Tanuwijaya & Leontinus Alpha Edison<br>
<span>Didirikan:</span> 2009<br>
<span>Pengguna:</span> 50.000.000+<br>
<span>Rating Konten:</span> 3+<br>
<span>Website:</span><a href='http://www.tokopedia.com/' target='_blank' title='Tokopedia.com'> Tokopedia.com</a>
</p>
</div>
</div>
<div class="informasi">
<div class='item-grid1' title='Elevenia'>
<img src='img/icon-elevenia.png' >
</div>
<div class='item-grid1' title='Informasi'>
<h2>Elevenia</h2>
<p><span>Pendiri:</span> James Lee<br>
<span>Didirikan:</span> 2014<br>
<span>Pengguna:</span> 5.000.000+<br>
<span>Rating Konten:</span> 3+<br>
<span>Website:</span><a href='http://www.elevenia.co.id/' target='_blank' title='Elevenia.co.id'> Elevenia.co.id</a>
</p>
</div>
</div>
<div class="informasi">
<div class='item-grid1' title="Blanja.com">
<img src='img/icon-blanjacom.png' >
</div>
<div class='item-grid1' title='Informasi'>
<h2>Blanja.com</h2>
<p><span>Pendiri:</span> Jemy Confido<br>
<span>Didirikan:</span> 2012<br>
<span>Pengguna:</span> 1.000.000+<br>
<span>Rating Konten:</span> 3+<br>
<span>Website:</span><a href='https://www.blanja.com/' target='_blank' title='Blanja.com'> Blanja.com</a>
</p>
</div>
</div>
</div>
<div id="grafik">
<h1 title='Rangking Pengguna'>Rangking Pengguna</h1>
<div class='item-grafik'>
<div class="grafik-item">
<div class="grafik1" style='width:90%;' title='Tokopedia 50 jt+'>Tokopedia 50 jt+</div>
</div>
<div class="grafik-item">
<div class="grafik2" style='width:60%;' title='Bukalapak 10 jt+'>Bukalapak 10 jt+</div>
</div>
<div class="grafik-item">
<div class="grafik3" style='width:60%;' title='Blibli 10 jt+'>Blibli 10 jt+</div>
</div>
<div class="grafik-item">
<div class="grafik4" style='width:40%;' title='Elevenia 5 jt+'>Elevenia 5 jt+</div>
</div>
<div class="grafik-item">
<div class="grafik5" style='width:20%;' title='Blanja.com 1 jt+'>Blanja.com 1 jt+</div>
</div>
</div>
<p><span>Data Startup </span>diatas berdasarkan Jumlah Download Pengguna <a href='https://play.google.com/store/' target='_blank' title="Google Play">Google Play</a></p>
</div>
<div id="footer">
<div class="copy">
<span>Copyright © 2019<a href='index.html' title='Startup Indonesia'> Startup Indonesia</a> | Created by <a href=https://www.ansoriweb.com/' target='_blank' title='AnsoriWeb.com'>AnsoriWeb.com</a></span>
</div>
</div>
</div>
</body>
</html>File HTML: "transportasi.html"
Copy dan pastekan kode dibawah ini ke file "transportasi.html" yang sudah dibuat tadi.
<html>
<head>
<title>Contoh Startup Transportasi | Startup Indonesia</title>
<meta name="description" content="Berikut ini merupakan contoh, informasi, grafik, pendiri Startup Transportasi yang paling banyak digunakan di Indonesia."/>
<link href='img/favicon.ico' rel='icon' type='image/x-icon'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<meta http-equiv='X-UA-Compatible' content="ie=edge"/>
<meta charset="UTF-8"/>
<meta name='viewport'/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800&display=swap"/>
<link rel='stylesheet' href='style.css'/>
</head>
<body>
<div id="container">
<div id="menu">
<div class='nav'>
<span class='logo'><a href='index.html' title='Startup Indonesia'>Startup Indonesia</a></span>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#info'>Informasi</a></li>
<li><a href='#grafik'>Rangking</a></li>
<li><a href='mailto:admin@startupindonesia.my.id'>Contact</a></li>
</ul>
</div>
<div class="content1">
<h1>Contoh <span>STARTUP</span> Transportasi</h1>
<p>Berikut ini merupakan contoh <span>Startup Transportasi</span> yang paling banyak digunakan di Indonesia.</p>
<div class="icon">
<a href='https://www.facebook.com/sharer.php?u=http://startupindonesia.my.id/transportasi.html' target='_blank' title='Bagikan dengan Facebook'><img class='fb' src='img/icon-fb.png' ></a>
<a href='https://www.linkedin.com/shareArticle?mini=true&url=http://startupindonesia.my.id/transportasi.html&title=Contoh Startup Transportasi Terbaik di Indonesia' target='_blank' title='Bagikan dengan LinkedIn'><img src='img/icon-in.png'></a>
<a href='http://twitter.com/share?url=http://startupindonesia.my.id/transportasi.html' target='_blank' title='Bagikan dengan Twitter' ><img src='img/icon-tw.png'></a>
<a href='whatsapp://send?text=Contoh Startup Transportasi Terbaik di Indonesi%20%2D%20http://startupindonesia.my.id/transportasi.html' target='_blank' title='Bagikan dengan Whatsapp'><img src='img/icon-wa.png'></a>
</div>
</div>
</div>
<div id='info'>
<div class="info">
<h1 title='Informasi'>Informasi</h1>
</div>
<div class="informasi">
<div class='item-grid1' title="Gojek">
<img src='img/icon-gojek.png' >
</div>
<div class='item-grid1' title='Informasi'>
<h2>Gojek</h2>
<p><span>Pendiri:</span> Nadiem Makarim, Kevin Aluwi, Michaelangelo Moran<br>
<span>Didirikan:</span> 2010<br>
<span>Pengguna:</span> 50.000.000+<br>
<span>Rating Konten:</span> 3+<br>
<span>Website:</span><a href='http://www.go-jek.com/' target='_blank' title='Go-jek.com'> Go-jek.com</a>
</p>
</div>
</div>
<div class="informasi">
<div class='item-grid1' title="Anterin">
<img src='img/icon-anterin.png' >
</div>
<div class='item-grid1' title='Informasi'>
<h2>Anterin</h2>
<p><span>Pendiri:</span> Imron Hamzah & Rachmat Efendi<br>
<span>Didirikan:</span> 2016<br>
<span>Pengguna:</span> 100.000+<br>
<span>Rating Konten:</span> 3+<br>
<span>Website:</span><a href='https://anterin.id/' target='_blank' title='Anterin.id'> Anterin.id</a>
</p>
</div>
</div>
<div class="informasi">
<div class='item-grid1' title="Traveloka">
<img src='img/icon-traveloka.png' >
</div>
<div class='item-grid1' title='Informasi'>
<h2>Traveloka</h2>
<p><span>Pendiri:</span> Ferry Unardi, Derianto Kusuma, Albert Zhang<br>
<span>Didirikan:</span> 2012<br>
<span>Pengguna:</span> 10.000.000+<br>
<span>Rating Konten:</span> 3+<br>
<span>Website:</span><a href='http://www.traveloka.com/' target='_blank' title='Traveloka.com'> Traveloka.com</a>
</p>
</div>
</div>
<div class="informasi">
<div class='item-grid1' title="Bonceng">
<img src='img/icon-bonceng.png' >
</div>
<div class='item-grid1' title='Informasi'>
<h2>Bonceng</h2>
<p><span>Pendiri:</span> Faiz Noufal<br>
<span>Didirikan:</span> 2018<br>
<span>Pengguna:</span> 50,000+<br>
<span>Rating Konten:</span> 3+<br>
<span>Website:</span><a href='http://www.bonceng.id/' target='_blank' title='Bonceng.id'> Bonceng.id</a>
</p>
</div>
</div>
<div class="informasi">
<div class='item-grid1' title="My Blue Bird">
<img src='img/icon-bluebird.png' >
</div>
<div class='item-grid1' title='Informasi'>
<h2>My Blue Bird</h2>
<p><span>Pendiri:</span> Mutiara Djokosoetono<br>
<span>Didirikan:</span> 1972<br>
<span>Pengguna:</span> 1.000.000+<br>
<span>Rating Konten:</span> 3+<br>
<span>Website:</span><a href='http://www.bluebirdgroup.com/' target='_blank' title='Bluebirdgroup.com'> Bluebirdgroup.com</a>
</p>
</div>
</div>
</div>
<div id="grafik">
<h1 title='Rangking Pengguna'>Rangking Pengguna</h1>
<div class='item-grafik'>
<div class="grafik-item">
<div class="grafik1" style='width:90%;' title='Gojek 50 jt+'>Gojek 50 jt+</div>
</div>
<div class="grafik-item">
<div class="grafik2" style='width:65%;' title='Traveloka 10 jt+'>Traveloka 10 jt+</div>
</div>
<div class="grafik-item">
<div class="grafik3" style='width:45%;' title='My Blue Bird 1 jt+'>My Blue Bird 1 jt+</div>
</div>
<div class="grafik-item">
<div class="grafik4" style='width:35%;' title='Anterin 100 ribu+'>Anterin 100 ribu+</div>
</div>
<div class="grafik-item">
<div class="grafik5" style='width:20%;' title='Boceng 50 ribu+'>Boceng 50 ribu+</div>
</div>
</div>
<p><span>Data Startup </span>diatas berdasarkan Jumlah Download Pengguna <a href='https://play.google.com/store/' target='_blank' title="Google Play">Google Play</a></p>
</div>
<div id="footer">
<div class="copy">
<span>Copyright © 2019<a href='index.html' title='Startup Indonesia'> Startup Indonesia</a> | Created by <a href=https://www.ansoriweb.com/' target='_blank' title='AnsoriWeb.com'>AnsoriWeb.com</a></span>
</div>
</div>
</div>
</body>
</html>Baca Juga: Cara Membuat Web Surat Izin Sekolah yang Keren dan Menarik
Ilmu yang berguna itu tidak bisa dinilai dengan rupiah, saya sangat tertarik untuk membaca artikel agan, sangat berfaedah buat saya, sukses selalu agan
https://sewarentallaptopkomputer.com
Terimakasih mas atas dukungannya :)
keren mas, mantap dan sukses selalu buat mas nya dan jangan berhenti untuk terus berkarya _^
Wah siap mas, terima kasih 👍