Nurul Imam Studio

Belajar HTML, CSS, JavaScript, PHP & MySQL untuk pemula & tingkat lanjut

Jasa Pembuatan Website Profesional

Membuat Website Landing Page Sederhana

Sudah lama sekali saya tidak mengupdate blog ini. Ada kesibukan apa ? Entahlah hanya belum ada ide buat artikel apa. Inilah nasib blog dengan konten sendiri (bukan copy paste) yang mana frekuensi updatenya sangat jarang sekali. Kok jadi curhat gini yah :D Hayuk lanjut ke topik pembahasan kali ini yang mana saya akan membagikan source code dari template sederhana untuk membuat sebuah website sederhana.

Kebanyakan website yang beredar mempunyai banyak konten (blog) yang mungkin dibagi beberapa kolom. Tapi kali ini saya akan membuat sebuah website statis simple untuk landing page. Biasanya digunakan untuk promosi, halaman about, bahkan informasi web sedang dalam perbaikan. Contoh penampilannya bisa dilihat dibawah ini.

Nurul Imam Studio - Web Design & Development Services
Demo   Download

Cara pembuatannya cukup mudah, hanya perlu membuat folder terlebih dahulu. Contohnya folder dengan nama web. Kemudian dalam folder itu kita buat file dengan nama index.html seperti yang sudah dipost di artikel sebelumnya. Lalu ketikkan atau copy paste kode dibawah ini.

<!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" lang="en-US"
   xmlns="http://www.w3.org/1999/xhtml" 
 xmlns:og="http://ogp.me/ns#" 
 xmlns:fb="http://www.facebook.com/2008/fbml" >
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" lang="en-US"
   xmlns="http://www.w3.org/1999/xhtml" 
 xmlns:og="http://ogp.me/ns#" 
 xmlns:fb="http://www.facebook.com/2008/fbml" >
<![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!-->
<html lang="en-US"
  xmlns="http://www.w3.org/1999/xhtml" 
 xmlns:og="http://ogp.me/ns#" 
 xmlns:fb="http://www.facebook.com/2008/fbml" >
<!--<![endif]-->
<head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nurul Imam Studio - Nurulimam.com</title>

<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="author" content="Nurul Imam | Phone : 0819-678-048" />
<meta name="dcterms.creator" content="Nurul Imam | Web : www.nurulimam.com">
<meta name="dc.language" content="Indonesian">
<meta name="dcterms.title" content="Nurul Imam Studio">
<meta name="description" content="Membuat Website Menjadi Jauh Lebih Mudah. Belajar membuat website dengan PHP, MySQL, HTML5, CSS3, JavaScript bersama Nurul Imam Studio" />
<meta name="keywords" content="mudah membuat website, membuat website yang baik, belajar membuat website, belajar php mysql, belajar html css, membangun web standar" />
<meta name="rating" content="General">
<meta name="robots" content="index,follow">
<meta name="googlebot" content="index,follow">
<meta name="revisit-after" content="1 days">
<meta property="og:title" content="Nurul Imam Studio" />
<meta property="og:type" content="blog" />
<meta property="og:url" content="http://www.nurulimam.com/" />
<meta property="og:image" content="http://www.nurulimam.com/wp-content/themes/h95vs4/images/photos/imam.png" />
<meta property="og:site_name" content="Nurul Imam Studio" />
<meta property="fb:admins" content="100002559811276" />
<meta property="og:description" content="Membuat Website Menjadi Jauh Lebih Mudah. Belajar membuat website dengan PHP, MySQL, HTML5, CSS3, JavaScript bersama Nurul Imam Studio" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:description" content="Membuat Website Menjadi Jauh Lebih Mudah. Belajar membuat website dengan PHP, MySQL, HTML5, CSS3, JavaScript bersama Nurul Imam Studio" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="author" href="https://plus.google.com/117725050291729125241/about">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="coming-soon">
<h1>Nurul Imam Studio</h1>
<p>Jasa Pembuatan Website Berbasis CMS WordPress, Drupal, ExpressionEngine, OpenCart atau menggunakan Script CMS buatan kami seperti OS Cart untuk e-commerce atau sesuai dengan permintaan anda.</p>
<p>Kami juga menawarkan jasa memperbaiki & mendesain ulang website anda. Saatnya beralih pada kami Nurul Imam Studio yang memperhatikan kualitas desain unik & sesuai web standar W3C.</p>
<form method="post" action="http://www.nurulimam.com/hubungi-kami/">
<div id="subscribe">
<input type="text" placeholder="Masukkan email anda...">
<input type="submit" value="Pesan">
<div class="clear"></div>
</div>
</form>
</div>
</body>
</html>

Setelah membuat file html diatas, buatlah file dengan nama style.css dan copy paste kode dibawah ini.

body, html  { height: 100%; }html, body, div, span, applet, object, iframe,/*h1,2, h3, h4, h5, h6,*/ p, blockquote, pre,a, abbr, acronym, address,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}body { line-height: 1; }ol, ul { list-style: none; }blockquote, q { quotes: none; }blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }:focus { outline: 0; }del { text-decoration: line-through; }table {border-spacing: 0; }
.clear {clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;}

body{
 color: #e9e2ee;
 font-size: 14px;
    font-family: sans-serif;
    line-height: 20px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.75);
    background: #55575c url(bg.jpg);
    -webkit-box-shadow: inset 0 0 300px rgba(0,0,0,0.5);
       -moz-box-shadow: inset 0 0 300px rgba(0,0,0,0.5);
            box-shadow: inset 0 0 300px rgba(0,0,0,0.5);
}
a,
a:link,
a:visited {
   color: #c6eaf7;
 font-weight: bold;
  text-decoration:none;
}
a:active,
a:hover {
    color: #d8f3fd;
 text-shadow: 0 1px 1px rgba(0,0,0,0.75), 0 0 5px rgba(198,234,247,0.4);
}
p{
  margin-bottom: 0.3em;
}
.center,
img.center {
  text-align: center;
 clear: both;
    display: block;
 margin-left: auto;
  margin-right: auto;
}
#coming-soon{
   background: rgba(0,0,0,0.0);
    display: block;
 position: absolute;
 width: 800px;
   height: 280px;
  top: 50%;
   left: 50%;
  margin: -160px 0 0 -400px;
}
#coming-soon h1{
 text-align: center;
 font-size: 35px;
}
#coming-soon img{
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}
#coming-soon p{
  text-align: center;
}

/*Submit Form*/
#subscribe{
  width: 552px;
   display: block;
 margin: 20px auto 40px auto;
    padding: 4px;
   background: rgba(0,0,0,0.1);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
         border-radius: 4px;
}
#subscribe input{
   display: block;
 font-size: 13px;
    font-weight: bold;
  float: left;
    border: 0;
  -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
         border-radius: 3px;
 padding: 0 10px;
    height: 35px;
}
#subscribe input[type="text"],
#subscribe input[type="email"]{
 color: #c4c4c4;
 margin: 0 4px 0 0;
  width: 443px;
   -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.3);
       -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.3);
            box-shadow: inset 0 1px 1px rgba(0,0,0,0.3);
}
#subscribe input[type="submit"]{
 margin:0;
   width: 85px;
    color: #5d7731;
 text-shadow: 0 1px 0 rgba(255,255,255,0.4);
 background: #b6d76f;
    background: -webkit-gradient(linear, left top, left bottom, from(#cae285), to(#9dc954));
    background: -moz-linear-gradient(top,  #cae285,  #9dc954);
  -webkit-box-shadow: inset 0px 1px 2px rgba(255,255,255,1), 0 1px 1px rgba(0,0,0,0.3);
      -moz-box-shadow: inset 0px 1px 2px rgba(255,255,255,1), 0 1px 1px rgba(0,0,0,0.3);
           box-shadow: inset 0px 1px 2px rgba(255,255,255,1), 0 1px 1px rgba(0,0,0,0.3);
}
#subscribe input[type="submit"]:hover{
  cursor: pointer;
    -webkit-box-shadow: inset 0px 1px 2px rgba(255,255,255,1), 0 1px 1px rgba(0,0,0,0.3), 0 0 5px rgba(255,255,190,0.5);
       -moz-box-shadow: inset 0px 1px 2px rgba(255,255,255,1), 0 1px 1px rgba(0,0,0,0.3), 0 0 5px rgba(255,255,190,0.5);
            box-shadow: inset 0px 1px 2px rgba(255,255,255,1), 0 1px 1px rgba(0,0,0,0.3), 0 0 5px rgba(255,255,190,0.5);
}
#subscribe input[type="submit"]:active{
  cursor: pointer;
    position: relative;
 top: 1px;
   text-shadow: 0 -1px 0 rgba(255,255,255,0.4);
    background: #9dc954;
    background: -webkit-gradient(linear, left top, left bottom, from(#9dc954), to(#cae285));
    background: -moz-linear-gradient(top,  #9dc954,  #cae285);
  -webkit-box-shadow: inset 0 0 0 transparent, inset 0 0 0 transparent;
      -moz-box-shadow: inset 0 0 0 transparent, inset 0 0 0 transparent;
           box-shadow: inset 0 0 0 transparent, inset 0 0 0 transparent;
}

Setelah selesai, tinggal carilah gambar untuk background websitenya dan copy kan gambar tersebut ke dalam folder web yang sudah dibuat tadi. Lalu ganti nama filenya menjadi bg.jpg. Jika ingin langsung melihat source code dan gambar aslinya, silahkan download melalui link diatas. Semoga bermanfaat :)

23 Comments

  1. IrfanReply

    Keren euy websitenya

    • Nurul ImamReply

      Terimakasih :)

  2. Rudhi MayaReply

    Trus email subscribe lari kemana mas..? :)

    • Nurul ImamReply

      Silahkan coba sendiri :D

  3. Fuadi MukhlisReply

    Busyet.. rumit bener kodenya mas. :-)

    • Nurul ImamReply

      Copy Paste aja :D

  4. pondokgueReply

    dan sayapun mupeng baca kodenya mas..
    but tutorialnya jelas banget! (y)

    • Nurul ImamReply

      Jelas ? Yakin dibaca nih :p

  5. agusReply

    itu copas code-code nya di mana? mksd nya bikin nya di cpanel atau di page? tepok jidat maklum newbie.

    • Nurul ImamReply

      Di cPanel mas :)

  6. DzikriReply

    Link Mati Lagi mas :3

    • Nurul ImamReply

      Hehehe nanti saya perbaiki :)

  7. Basri AbdullahReply

    Website yang punya konten yang bagus-bagus, saya akan sering mampir disini untuk belajar. makasih sudah berbagi

    • Nurul ImamReply

      Iya sama-sama :)

  8. Jasa Website, SEO MuReply

    Good artikel and keep post :D

    • Nurul ImamReply

      Sipp gan :)

  9. itrainingReply

    Terimaksih

  10. triyaReply

    baguss sekali kaka :) semoga menjadi programmer

  11. nuridinReply

    masih keder nih gan

  12. heruReply

    berapa mas harganya kalau bikin website baru ? :)

  13. grosir batik pekalonReply

    saya malah bingung sendiri gan

  14. Firman PratamaReply

    Bikin Web Lebih Seneng Pake Sublime mas ?? Mantap Nih Web nya :D

  15. rooveeReply

    konten websitenya berkelas, tampilan menarik, bikin mudeng. gak banyak iklan pihak ketiga lagi. :D joss bgt deh. ane demen. tapi link pada mati om

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>