Home » css3 » html5 » Membuat Website Company Profile Dengan HTML5 & CSS3

Membuat Website Company Profile Dengan HTML5 & CSS3

in , - on 03:02 - No comments
Lumayan lama Blog & Note of Nurul Imam tidak mengupdate artikel, sekarang saatnya update artikel dengan membagikan template untuk website company profile dengan menggunakan HTML5 & CSS3. Template ini merupakan web statis yang mana hanya berisi HTML, CSS, dan JavaScript saja. Template ini dinamakan DX Design Studio yang mana dalam konten default menampilkan informasi tentang company profile yang bergerak dalam bidang Web Design Service. Untuk lebih jelasnya, anda bisa melihat demonya & mendownload templatenya melalui link dibawah ini.
DXDesign Studio - Web Design & Development Services
Demo DXDesign Studio   Download DXDesign Studio
Sekilas cara pembuatannya cukup mudah, anda bisa membuat file index.html terlebih dahulu. Setelah sudah dibuat, anda bisa isikan kode html dibawah ini.
<!DOCTYPE html>
<html lang="id">
<head>
<title>DXDesign Studio - Web Design & Development Services</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/bellota.css">
<link rel="stylesheet" type="text/css" href="css/champagne.css">
<link rel="stylesheet" type="text/css" href="css/ellen.css">
<!-- jQuery library (served from Google) -->
<script src="js/jquery.js"></script>
<!-- bxSlider Javascript file -->
<script src="js/jquery.bxslider.js"></script>
<!-- bxSlider CSS file -->
<link href="js/jquery.bxslider.css" rel="stylesheet" />

<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider();
});
</script>

</head>
<body>
    <section class="penuh">
        <section class="tengah">
<header class="logo">
    <h1><a href="index.html">DXDesign Studio</a></h1>
</header>
<nav class="menu">
<ul class="nav">
    <li><a class="current" href="index.html">Home</a></li>
    <li><a href="index.html">About</a></li>
    <li><a href="index.html">Service</a></li>
    <li><a href="index.html">Portfolio</a></li>
    <li><a href="index.html">Contact</a></li>
</ul>
</nav>
<section class="shadow"></section>
<section class="info">
    <header class="jasa">
<h2 class="banten">Banten IT Solutions</h2>
    </header>
<p class="bantenit">Jasa Pembuatan Website Berbasis CMS WordPress, Drupal, ExpressionEngine, CraftCMS, OpenCart atau Custom CMS dengan Framework CodeIgniter & YII Framework dengan MVC (Model View Cotroller).</p>
<p class="bantenit">Kami juga menawarkan jasa memperbaiki & mendesain ulang website anda. Saatnya beralih pada kami Banten IT Solutions yang terpercaya dibidang Web Design & Development.</p>
</section>
<section class="gambar">
<ul class="bxslider">
  <li><img src="images/religi.png" alt="Slide" title="Quotes That Will Free Your Mind" /></li>
  <li><img src="images/blog.png" alt="Slide" title="Blog & Note of Nurul Imam" /></li>
  <li><img src="images/blues.png" alt="Slide" title="Full Moon Blues" /></li>
  <li><img src="images/religi.png" alt="Slide" title="Islamic Quotes" /></li>
  <li><img src="images/grid.png" alt="Slide" title="Blank Grid Framework" /></li>
</ul>
</section>
        </section>
    </section>
<section class="shadow"></section>
        <article class="tengah">
<section class="kotak">
    <h3 class="web">Web Development</h3>
    <p>Jasa Pembuatan Website Berbasis CMS WordPress, Drupal, ExpressionEngine, CraftCMS, OpenCart atau Custom CMS dengan Framework CodeIgniter <em>&</em> YII Framework dengan MVC (Model View Cotroller).</p>
    <section class="bersih"></section>
    <a class="tombol" href="#">Read more</a>
</section>
<section class="kotak">
    <h3 class="multimedia">Graphics Design</h3>
    <p>Jasa Pembuatan Website Berbasis CMS WordPress, Drupal, ExpressionEngine, CraftCMS, OpenCart atau Custom CMS dengan Framework CodeIgniter & YII Framework dengan MVC (Model View Cotroller).</p>
    <section class="bersih"></section>
    <a class="tombol" href="#">Read more</a>
</section>
<section class="kotak">
    <h3 class="program">Desktop Applications</h3>
    <p>Jasa Pembuatan Website Berbasis CMS WordPress, Drupal, ExpressionEngine, CraftCMS, OpenCart atau Custom CMS dengan Framework CodeIgniter & YII Framework dengan MVC (Model View Cotroller).</p>
    <section class="bersih"></section>
    <a class="tombol" href="#">Read more</a>
</section>

    <section class="bersih" style="margin: 50px 0"></section>

<section class="kotak">
    <figure class="project">
<img src="images/3.png" alt="Slide" width="265" />
    </figure>
    <h3 class="a">Web Development</h3>
    <p>Jasa Pembuatan Website Berbasis CMS WordPress, Drupal, ExpressionEngine, CraftCMS, OpenCart atau Custom CMS dengan Framework CodeIgniter & YII Framework dengan MVC (Model View Cotroller).</p>
    <section class="bersih"></section>
    <a class="tombol" href="#">Read more</a>
</section>
<section class="kotak">
    <figure class="project">
<img src="images/2.png" alt="Slide" width="265" />
    </figure>
    <h3 class="b">Graphics Design</h3>
    <p>Jasa Pembuatan Website Berbasis CMS WordPress, Drupal, ExpressionEngine, CraftCMS, OpenCart atau Custom CMS dengan Framework CodeIgniter & YII Framework dengan MVC (Model View Cotroller).</p>
    <section class="bersih"></section>
    <a class="tombol" href="#">Read more</a>
</section>
<section class="kotak">
    <figure class="project">
<img src="images/1.png" alt="Slide" width="265" />
    </figure>
    <h3 class="c">Desktop Applications</h3>
    <p>Jasa Pembuatan Website Berbasis CMS WordPress, Drupal, ExpressionEngine, CraftCMS, OpenCart atau Custom CMS dengan Framework CodeIgniter & YII Framework dengan MVC (Model View Cotroller).</p>
    <section class="bersih"></section>
    <a class="tombol" href="#">Read more</a>
</section>
        </article>

    <section class="bersih" style="margin: 50px 0"></section>

<footer class="bawah">
        <section class="tengah">

<section class="kiri">
<nav class="link">
<ul class="oke">
    <li><a class="current" href="index.html">Home</a></li>
    <li><a href="index.html">About</a></li>
    <li><a href="index.html">Service</a></li>
    <li><a href="index.html">Portfolio</a></li>
    <li><a href="index.html">Contact</a></li>
</ul>
</nav>
</section>

<section class="kanan">
<p class="copy">Copyright &copy; 2013 DXDesign Studio. All rights reserved</p>
</section>
        </section>
</footer>
</body>
</html>
Setelah file html tadi dibuat, jangan lupa download file javascript & gambar untuk melengkapi konten dalam pembuatan template ini. Selanjutnya kita buat style.css untuk memberikan sentuhan desain pada dokumen html tadi. Silahkan anda masukkan kode css dibawah ini.
body {
width:100%;
height:100%;
overflow:auto;
clear:both;
margin:0;
padding:0;
font-family: Champagne;
color:#383838;
letter-spacing:0.03em;
 background: #fff;
}
.penuh {
 width: 100%;
 background-color: #333;
 background-repeat: repeat-x;
 background-image: -moz-linear-gradient(top, #333, #000);
 background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6);
 background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6);
 background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6);
 background-image: linear-gradient(top, #333, #000);
 height: 465px;
}
.tengah {
 width: 1000px;
 margin: 0 auto;
 padding-top: 20px;
}
.logo {
 width: 300px;
 float: left;
 display: inline;
}
.info {
 width: 350px;
 float: left;
 display: inline;
}
header h1 a {
 font-size: 2.4em;
 line-height: 1.6em;
 text-decoration: none;
 color: #ccc;
 text-shadow: 2px 2px #000;
}
header h1 a:hover {
 color: #eee;
 text-shadow: 2px 2px #000;
}
.jasa {
 margin-top: 40px;
 color: #ccc;
}
.banten {
 font-size: 33px;
 line-height: 2em;
}
.bantenit {
 font-size: 15px;
 font-weight: normal;
 color: #01bfd2;
 opacity: 0.7;
 line-height: 1.3em;
 letter-spacing:0.05em;
 margin: 8px 0 0 0;
}
.menu {
 width: 600px;
 float: right;
}
.gambar {
 width: 442px;
 float: right;
 margin: 20px 10px auto 10px;
}
.menu ul {
 margin: 0;
 text-indent: 0;
}
.menu li {
 margin: 0 0 0 7px;
 position: relative;
}
.menu li a,
.menu li {
 display: inline-block;
 text-decoration: none;
}
.menu li a {
 border-bottom: 0;
 padding: 0 9px;
 color: #eee;
 line-height: 2.5em;
 text-transform: uppercase;
 white-space: nowrap;
}
.menu li a:hover {
 background: #333;
 text-shadow: 1px 1px #000;
 padding: 0 9px;
 border-radius: 5px;
 border: none;
}
.menu li a.current {
 background: #333;
 text-shadow: 1px 1px #000;
 padding: 0 9px;
 border-radius: 5px;
 border: none;
}
.nav {
 margin-top: 0;
 margin-bottom: 0;
 text-align: right;
}
.nav li {
 margin-top: 16px;
 font-size: 14px;
}
.shadow {
 width: 100%;
 margin: 0 auto;
 height: 1px;
 clear: both;
 background: url(../images/shadow.png) #fff;
}
.kotak {
 width: 30%;
 margin-left: 3%;
 float: left;
}
.kotak p {
 font-family:'Palatino Linotype',Palatino,'Zapf Calligraphic','Book Antiqua',Georgia,serif;
 font-size: 0.9em;
 line-height: 1.3em;
 letter-spacing: 0.03em;
}
.web, .multimedia, .program {
 font-size: 20px;
 color: #000;
 line-height: 2.4em;
}
.web {
 background:url(../images/a.png) left no-repeat;
 padding-left:52px;
 margin: 10px 0;
}
.program {
 background:url(../images/c.png) left no-repeat;
 padding-left:52px;
 margin: 10px 0;
}
.multimedia {
 background:url(../images/b.png) left no-repeat;
 padding-left:52px;
 margin: 10px 0;
}
.a, .b, .c {
 font-size: 20px;
 padding-left:52px;
 margin: 10px 0;
}
.tombol {
 float: right;
 margin: 5px 32px;
 line-height: 1.7em;
 text-decoration: none;
 color: #222;
 padding: 2px 15px;
 border-radius: 9px;
 border: none;
 background-color: #fff;
 background-repeat: repeat-x;
 background-image: -moz-linear-gradient(top, #fff, #ccc);
 background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6);
 background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6);
 background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6);
 background-image: linear-gradient(top, #fff, #ccc);
}
.tombol:hover {
 background-color: #eee;
 background-repeat: repeat-x;
 background-image: -moz-linear-gradient(top, #eee, #ccc);
 background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6);
 background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6);
 background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6);
 background-image: linear-gradient(top, #eee, #ccc);
}
.bawah {
 width: 100%;
 background-color: #333;
 background-repeat: repeat-x;
 background-image: -moz-linear-gradient(top, #333, #000);
 background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6);
 background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6);
 background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6);
 background-image: linear-gradient(top, #333, #000);
 height: 95px;
}
.kanan, .kiri {
 width: 40%;
 margin: 10px auto;
}
.kiri {
 float: left;
 display: inline;
}
.kanan {
 float: right;
 display: inline;
}
.link {
 margin-left: 27px;
}
.link ul {
 margin: 0;
 text-indent: 0;
}
.link li {
 margin: 0 0 0 1px;
 position: relative;
}
.link li a,
.link li {
 display: inline-block;
 text-decoration: none;
}
.link li a {
 border-bottom: 0;
 padding: 0 9px 2px;
 color: #ccc;
 line-height: 1em;
 text-transform: capitalize;
 white-space: nowrap;
}
.link li a:hover {
 text-shadow: 1px 1px #000;
 padding: 0 9px 2px;
}
.link li a.current {
 text-shadow: 1px 1px #000;
 padding: 0 9px 2px;
}
.project {
 margin-top: 50px;
}
.oke {
 margin-top: 0;
 margin-bottom: 0;
 text-align: left;
}
.oke li {
 margin-top: 12px;
 font-size: 14px;
}
.copy {
 font-size: 14px;
 font-family: Sue Ellen Francisco;
 color: #ccc;
 text-align: right;
 margin: 12px 27px 0 0;
}
Setelah selesai, anda bisa membuka halaman tersebut. Bagi anda yang tidak menginginkan coding, anda bisa langsung mendapatkan template ini secara langsung dengan mendownload template yang sudah saya berikan linknya diatas.
Labels: ,

Post a Comment