Cara Membuat Web Profil Perusahaan dengan HTML dan CSS

Konten [Tampil]
Cara Membuat Web Profil Perusahaan dengan HTML dan CSS
Cara Membuat Web Profil Perusahaan dengan HTML dan CSS - Pada artikel ini saya akan membahas pembuatan website profil perusahaan (company profil) menggunakan HTML dan CSS. Untuk tampilan dari web sederhana dan keren yang bisa dijadikan referensi untuk tugas anda. Untuk script ini saya dapatkan di codepen.io.

Sebelum melanjutkan, berikut software dan hardware yang perlu anda siapkan.
  • Komputer/Laptop/Android. Jika tidak punya silahkan pinjam ke teman anda.
  • Aplikasi Text Editor. Bisa memakai notepad, notepad++, sublime text, visual studio code, dan lainnya.
  • Browser. Untuk membuka/eksekusi file.
  • Koneksi Internet. Soalnya ada gambar yang terhubung ke internet.
  • Niat yang Tulus. Tanpa niat usahamu ini akan sia-sia.

Langkah Membuat Web Company Profile

Panduan lengkap untuk membuat sebuah web company profile sederhana dan keren sebagai berikut.

1. Membuat Folder Baru : profil-perusahaan

Langkah pertama yang anda lakukan adalah membuat sebuah folder baru dan beri nama "profil-perusahaan" cara membuatnya dengan CTRL + N atau klik kanan pada mouse dan pilih baru/new lalu new folder/folder baru.

2. Membuat File : company-profile.html

Langkah kedua yang anda lakukan adalah membuka text editor, dan buat sebuah file "company-profile.html" berekstansi .html (hypertext markup language). Jika sudah silahkan anda copy dan tempelkan kode script dibawah ini.


<!DOCTYPE html>
<html>
<head>
 <title>Company Profil - www.ansoriweb.com</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="landing">
 
  <div class="header">
    <a href="#" class="logo">Playphone Developers</a>
    <a href="#" class="button">Create Account</a>
    <a href="#" class="login">Login</a>
  </div>
  <div class="slider slider-1">
    <img class="ratio" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAEALAAAAAABAAEAAAIBTAA7" />
    <input class="slide" type="radio" name="slider-1" id="s-1-1" /><label for="s-1-1"></label>
    <div>
      <img src="img/bg1.jpg" />
      <div class="content">
        <h3>PT. Sandiwara Cinta</h3>
        <p>Merupakan sebuah perusahaan yang menyediakan kebutuhan pakar cinta untuk orang jomblo.</p>
        <a href="#" class="button button-blue">Mulai</a>
      </div>
    </div>
    <input class="slide" type="radio" name="slider-1" id="s-1-2" /><label for="s-1-2"></label>
    <div>
      <img src="img/bg2.jpg" />
      <div class="content">
        <h3>PT. Sandiwara Cinta</h3>
        <p>Buktikan dan datang ketempat kami, semoga anda mendapatkan pilihan yang tepat!</p>
        <a href="#" class="button button-orange">Alamat</a>
      </div>
    </div>
    <input class="slide" type="radio" name="slider-1" id="s-1-3" checked /><label for="s-1-3"></label>
    <div>
      <img src="img/bg3.jpg" />
      <div class="content">
        <h3>PT. Sandiwara Cinta</h3>
        <p>Melayani dengan tulus sepenuh hati sampai ketemu jodoh anda masing-masing.</p>
        <a href="#" class="button button">Coba Sekarang</a>
      </div>
    </div>
    <style type="text/css">
      #landing .slider-1 img.ratio {padding:0 33%;}
      #landing .slider-1 .content {max-width:33%; margin:5% 0 0 18%;}
      #landing .slider-1 .content h3 {color:#fff; font-size:2.125em; font-weight:normal; margin:0 0 4%;}
      #landing .slider-1 .content p {color:#fff; font-size:1.1em; font-weight:normal;}
      #landing .slider-1 .button {position:absolute; bottom:17%; min-width:12.5em; font-size:.95em; font-weight:normal; border-width:.14em;}
    </style>
  </div>
  <div class="menu">
    <a href="#">About</a><a href="#">Kontak</a><a href="#">Testimoni</a><a href="#">Review</a>
  </div>
  <div class="feature">
    <img class="picture" src="img/img1.png" />
    <h4 class="caption">Daftar</h4>
    <p class="summary">The Playphone SDK is built for mobile game developers. It is extremely lightweight and takes minutes to integrate. Further, you need to integrate only once.</p>
  </div>
  <div class="feature">
    <img class="picture" src="img/img2.png" />
    <h4 class="caption">Ketemu</h4>
    <p class="summary">Playphone is a games-only network fostering an ecosystem of highly qualified users that love playing mobile games. You won't find a better way to reach untapped mobile gamers globally</p>
  </div>
  <div class="feature">
    <img class="picture" src="img/img3.png" />
    <h4 class="caption">Nikah</h4>
    <p class="summary">In high-growth emerging markets, we partner with the leading local OEMs, carriers and distributors in to drive installs for your games where Google Play can't</p>
  </div>
  <div class="slider slider-2">
    <img class="ratio" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAEALAAAAAABAAEAAAIBTAA7" />
    <input class="slide" type="radio" name="slider-2" id="s-2-1" /><label for="s-2-1"></label>
    <div>
      <img src="img/bg1.jpg" />
      <div class="content">
        <h3>What they say</h3>
        <p>
          Integration the Playphone SDK
          was extremely developer friendly.
          It's lean and easy to integrate and
          test. We got it out there in less
          than a day.
        </p>
        <small>
          Alok Kumar<br />
          Director of game development<br />
          June Software Inc
        </small>
      </div>
    </div>
    <input class="slide" type="radio" name="slider-2" id="s-2-2" checked /><label for="s-2-2"></label>
    <div>
      <img src="img/bg5.jpg" />
      <div class="content">
        <h3>What they say</h3>
        <p>
          Playphone integration has been easy with its
          simple SDK and we've been able to leverage its
          real-time dashboard to show results immediately.
          Playphone's support team is very efficient and is
          always available with answers and advice.
          Because of our Leaderboard integration we are
          seeing strong revenue conversion %'s.
        </p>
        <small>
          Kevin Roberts<br />
          CEO<br />
          Mobile Mob
        </small>
      </div>
    </div>
    <style type="text/css">
      #landing .slider-2 img.ratio {padding:0 30.4%;}
      #landing .slider-2 {margin-top:6em;}
      #landing .slider-2 .content h3 {font-size:1.125em; margin:0 0 3em; color:#99ce45; text-transform:uppercase; font-weight:normal;}
      #landing .slider-2 .content p {font-size:1.3em; color:#fff;}
      #landing .slider-2 .content small {font-size:1.125em; margin:3em 0 0; display:block; color:#fff; text-transform:uppercase; font-weight:normal;}
      #landing .slider-2 #s-2-1 + label + div > .content {max-width:30%; margin:8% 0 0 17%;}
      #landing .slider-2 #s-2-1 + label + div > .content p {font-size:1.6em}
      #landing .slider-2 #s-2-2 + label + div > .content {max-width:35%; margin:8% 0 0 16%;}
    </style>
  </div>
  <div class="extra">
    Ayo yang jomblo segera merapat!
    <br />
    <a href="#" class="button button-green">Get Started</a>
  </div>
  <div class="footer">
    <div class="column">
      <a href="#">Mulai</a>
      <a href="#">Profil Perusahaan</a>
      <a href="#">Blog</a>
    </div>
    <div class="column">
      <a href="#">About</a>
      <a href="#">Kontak</a>
      <a href="#">Alamat</a>
      <a href="#">Review</a>
    </div>
    <div class="column">
      <a href="#">Instagram</a>
      <a href="#">Facebook</a>
      <a href="#">WhatsApp</a>
    </div>
    <form class="column subscribe" action="javascript:void(0)">
      <h4 class="caption">Subscribe for updates</h4>
      <p class="summary">Stay informed on Playphone news, announcements and developer features!</p>
      <input class="email" type="email" placeholder="Enter your email" />
      <button type="submit">Submit</button>
    </form>
  </div>
  <div class="copyright">
    <span>www.ansoriweb.com</span>
    <a href="#">Terms of Use</a>
    <a href="#">EULA</a>
    <a href="#">Privacy Policy</a>
    <div class="social">
      <a href="#" class="fa fa-youtube-play"></a>
      <a href="#" class="fa fa-twitter"></a>
      <a href="#" class="fa fa-facebook"></a>
    </div>
  </div>
</div>
<script type="text/javascript">
 function doSlide (slider) {
  var id, o = slider.querySelectorAll("input.slide"), last = o.length-1, current = slider.querySelector("input.slide:checked");
  for (var i=0; i<o.length; i++) if (o[i] === current) {id = i; break;}
  o[id >= last ? 0 : id + 1].click();
}
function onSlide (e) {
  var o = e.target.parentNode;
  clearTimeout(o.autoslider);
  o.autoslider = setTimeout(function(){doSlide(o);}, 7e3);
}
$(function(){
  $(document).on("click", "input.slide", onSlide);
  $(".slider").each(function(){doSlide(this)});
});
</script>
</body>
</html>


3. Buat File : style.css

Langkah ketiga adalah membuat file "style.css" dan kemudian silahkan anda copy dan tempelkan ke file tersebut.

html, body {margin:0; padding:0;}
#landing, #landing *, #landing :before, #landing :after {
  position:relative;
  margin:0;
  padding:0;
  box-sizing:border-box;
  vertical-align:middle;
  text-overflow:ellipsis;
  font-family:Montserrat, Arial, Helvetica, Tahoma, Verdana, sans-serif;
}
#landing {
  width:1500px;
  font-size:16px;
  padding-top:4.0625em;
  background:#fff;
  text-align:center;
}
#landing {font-size:1.061vw; width:auto;}
#landing > * {text-align:left;}
#landing .button {
  display:inline-block;
  padding:.75em 1.4em;
  border-radius:2em;
  font-weight:bold;
  line-height:normal;
  text-align:center;
  text-decoration:none;
  text-transform:uppercase;
  background-color:#99ce45;
  border:.125em solid #99ce45;
  color:#fff;
  transition:background .4s, color .4s, border-color .4s;
}
#landing .button:hover {background:transparent; color:#99ce45;}
#landing .button:active {opacity:.5;}
#landing .button-blue {background:#01b0fe; border-color:#01b0fe;}
#landing .button-blue:hover {background:transparent; color:#01b0fe;}
#landing .button-orange {background:#fe8f4f; border-color:#fe8f4f;}
#landing .button-orange:hover {background:transparent; color:#fe8f4f;}
#landing > .header {
  position:fixed;
  left:0;
  right:0;
  top:0;
  height:4.0625em;
  z-index:100;
  background:rgba(255,255,255,.9);
  padding:.9em 1.25em;
  line-height:2em;
  text-align:right;
  border-bottom:1px solid rgba(0,0,0,.1);
  word-spacing:2.5em;
}
#landing > .header > * {display:inline-block; word-spacing:normal;}
#landing > .header > .logo {
  display:inline-block;
  position:absolute;
  left:2em;
  width:12.66%;
  max-width:11.8em;
  letter-spacing:-.5em;
  white-space:nowrap;
  color:transparent;
  overflow:hidden;
  background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALgAAAAiCAMAAADbEOPQAAAAWlBMVEUAAAABr/4Br/4Br/4Br/4Br/4Br/4Br/4Br/4Br/4Br/4Br/4Br/4Br/4Br/4Br/4Br/4Br/4Br/4Br/4Br/4Br/4Br/4Br/4Br/4Br/4Br/4Br/4Br/4Br/4y9ToAAAAAHXRSTlMAQL9/7xAfn8/fYI8vcK9QJVnIpzb3tGlJCdeGenCNtI0AAAN9SURBVFjD7ZjpUuMwDIAd33au0hZ6LHr/19xIPlQ3lJYZZofOoj/YUiV/VmQ5QWy28LlsN+JHiod74sWPFLgv4kfKL/gd+QX/EFyOe3Myw+HtucAnbnx29xC46YYvLtd13w7+Ghv9rB8A70B+ebnvBn/FVJzidNbn3Qsa9vo5wBH2GPLkvMfZU4DvluELcN0cl7l7BvDlXA6vwKKtEDYrPmYeWnB769S1NoC1lhWmPfmmtQ9Zby/A35ZR6YH8CHa3wIcJ96ZMBVdYZJ5INNj8qxHclY3BTa9RG8uTU2L2ABBKh8jTMXtJcqBo6CdjAT8s+6XBn5dyJk2pnTV41BB6JcHPCdx4CEo5gIiREZckwNDaGHygCJMGbzJ4TCGLswPdq4XVZXDjE0i/REO/PoMPCw0NOmG39bRuVuBl1ZGWCzqBT+CyvsMEaFMOQGtjcJsjWA8y/dTnkBpUeljepIyoBD6BsugAgTKljKjp/ZPB8wg9TmvwxDnWHchCyKiOkkt/WxuDO+JBggCRjDUkYKUZTZuvA9AQc5S+UFS2voILiaOeja2YnFL0YdJcHIbSJ2pyWhuBNxFi3nqgGTmMqHV1OqNXmVvQ3TX4ewKvW3jHBUjWPbAdSohdEk/+Hgaq9XFtI3COUBWcyIhDBX32Ss8GYKgbgaBsAz5n8I2vNb5/DDwASydKvoI2rY3BI6hrcNWEdMCi2iYafepRDH7SVCBR5ytoWXZ8NONzV4RKAAtzJvrW9kjG55RxVb0wvc3no40SIDI4nkkWWnZ7q8bFVY3P7S/UEncCK9jWclqu8flGjfeNF2+0eIULcBOubs79jStflhZguaskMVkP3pJubQNIEVSJVboKh+Suwl5yhXDZODaBufec8BV4l2+TwQeQKYxLBj2WtE2U6bUN4PImMA58ihhSSOtTrhV4k+bOXILP0paOdclmy6F4s+R8AxzvKq/U1N6cqNBD7cb07Ne2HC1qjNAHvjkdKhzAxDfnMs/9GyQ3Fbn4aZgZfE/oo3vbvdMSh08+JLrU6eu7ilF0pCd7VU1rW83RBOl1p76rRHzeoZQQTvkV56IdkF+YBYPL5jyc+s8/3ez1Nxh1DZb7NtPxd19qhwMqWAbqKGvJfgwO5xfB+/1HH8sM/iVpwQG0Oxy742GnAZ4LvMov+MPy/4D7Cv5k/2bebAv4c/1j/y/QxJrPygnbMwAAAABJRU5ErkJggg==") no-repeat center left;
  background-size:contain;
}
#landing > .header > .button {font-size:.75em; border-width:.18em;}
#landing > .header > .login {
  font-size:.875em;
  color:#03b4fe;
  font-weight:bold;
  text-decoration:none;
  text-transform:uppercase;
  transition:all .2s;
  border:0 solid transparent;
}
#landing > .header > .login:before {
  content:"";
  display:inline-block;
  width:1.429em;
  height:1.429em;
  margin:-.2em .5em 0 0;
  background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAAUVBMVEUAAAABsP4BsP4BsP4BsP4BsP4BsP4BsP4BsP4BsP4BsP4BsP4BsP4BsP4BsP4BsP4BsP4BsP4BsP4BsP4BsP4BsP4BsP4BsP4BsP4BsP4BsP4pJ89bAAAAGnRSTlMA3etU5rMKqwaJW0hPRNAR88qUaybCgWI/MCVqoPAAAAC5SURBVBjTTZBXssMwDAOpZsmOS9or2fsfNBgqynh/RGKIIURzWqqBa6ip2ZcUgJyBkIY2Q1kns2ktMA8tXuzDJXY1EZ96Xr/zv55nJGlHZlOzIh4qNnKzhWIiIIKJwmKV1URGRHNP1cikaooueikD2cSBc3STXeURBVG8jLjdl4rNPvZKT77D3vNTRyS7wc1GpJY1Ov3tnvNxaDA3/2bhy08k9YOcGWe6c+J+PrLjRx60pQYpdWnevgG0mRAe7+n/PQAAAABJRU5ErkJggg==") no-repeat center center;
  background-size:contain;
}
#landing > .header > .login:hover {
  border:.166em solid #03b4fe;
  border-radius:2em;
  padding:0 1em;
}
#landing > .menu {
  text-align:center;
  background:#01b0fe;
  font-size:1.125em;
  padding:1.278em 0;
}
#landing > .menu > a {
  display:inline-block;
  width:12.5em;
  height:2em;
  line-height:2em;
  border:0 solid #0097db;
  border-width:0 2px;
  margin-left:-2px;
  color:#fff;
  text-decoration:none;
  text-transform:uppercase;
  transition:border-color .5s, color .1s;
}
#landing > .menu > a:first-child {border-left:0 none;}
#landing > .menu > a:last-child {border-right:0 none;}
#landing > .menu > a:hover {
  z-index:50;
  text-transform:none;
  font-size:1.335em;
  color:#0a5070;
  width:9.3635em;
  height:1.5em;
  line-height:1.5em;
  border-color:#01b0fe;
}
#landing > .feature {
  display:inline-block;
  width:23.75em;
  margin-top:5.125em;
  padding:0 1.625em;
  text-align:center;
  vertical-align:top;
}
#landing > .feature > .picture {width:11.9375em; max-width:191px; margin-bottom:2.25em;}
#landing > .feature > .caption {
  font-size:1.4em;
  font-weight:normal;
  margin-bottom:.8em;
  min-height:2.43em;
  color:#3e4e5c;
  text-align:left;
}
#landing > .feature > .summary {color:#737d85; font-size:.86em; text-align:left;}
#landing > .extra {display:inline-block; text-align:center; color:#3e4e5c; font-size:2.25em; width:13.333em; margin:1.5em 0 3em;}
#landing > .extra .button {font-size:.65em; padding:.62em 2.612em; text-transform:none; font-weight:normal; margin-top:1.5em;}
#landing > .footer {
  display:table;
  width:100%;
  padding:0 6em;
}
#landing > .footer > * {display:table-cell; vertical-align:top; line-height:2;}
#landing > .footer a {color:#01affe; text-decoration:none;}
#landing > .footer a:hover {color:#3e4e5c;}
#landing > .footer > .column:nth-child(1) a,
#landing > .footer > .column:nth-child(2) a,
#landing > .footer > .column:nth-child(3) a {display:block; font-size:.875em;}
#landing > .footer > .column:nth-child(1) a {font-size:1.125em;}
#landing > .footer > .subscribe {width:50%; top:-.5em;}
#landing > .footer > .subscribe > .caption {font-size:1.125em; font-weight:normal; color:#3e4e5c;}
#landing > .footer > .subscribe > .summary {font-size:.875em; color:#8e9ea9; margin-bottom:.5em;}
#landing > .footer > .subscribe > .email {
  width:83%;
  font-size:.875em;
  border:.125em solid #e4ebec;
  border-radius:3px;
  appearance:none;
  line-height:3em;
  padding:0 1em;
}
#landing > .footer > .subscribe > .email + button {
  width:17%;
  font-size:.875em;
  border:0;
  border-radius:3px;
  appearance:none;
  line-height:3em;
  padding:0 1em;
  text-align:center;
  text-transform:uppercase;
  background:#01affe;
  color:#fff;
  cursor:pointer;
  margin-left:-.4em;
}
#landing > .copyright {font-size:.875em; border-top:2px solid #eee; margin:2em 6.8em 0; padding:2em 0; color:#8e9ea9; word-spacing:1.5em;}
#landing > .copyright:after {content:""; display:block; height:0; overflow:hidden; float:none; clear:both;}
#landing > .copyright > * {word-spacing:normal;}
#landing > .copyright a {color:#01affe; text-decoration:none;}
#landing > .copyright a:hover {color:#3e4e5c;}
#landing > .copyright > .social {float:right; word-spacing:1.5em;}
#landing > .copyright > .social > * {word-spacing:normal;}
#landing > .copyright > .social > .ico:before {font-family:"ico"; font-size:1.8em;}
#landing > .copyright > .social > .fa:before {
  display: inline-block;
  font: normal normal normal 1.8em FontAwesome;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#landing .slider {position:relative; overflow:hidden; text-align:center;}
#landing .slider .content {text-shadow:0 0 1px rgba(0,0,0,.2)}
#landing .slider > img.ratio {display:inline-block; position:relative; box-sizing:border-box; width:100%; border:0 none; outline:0 none; margin:0; /* data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAEALAAAAAABAAEAAAIBTAA7 */}
#landing .slider > input.slide {position:absolute; width:0; height:0; margin:0; padding:0; border:0; opacity:0; overflow:hidden;}
#landing .slider > input.slide + label {display:inline-block; width:3.32em; height:3.125em; margin-top:-3.125em; padding:1.5em .25em 0; top:-.5em; cursor:pointer; z-index:100;}
#landing .slider > input.slide + label:before {content:""; display:block; border:1px solid rgba(255,255,255,.3); transition:border-color .2s;}
#landing .slider > input.slide + label:hover:before {border-color:rgba(255,255,255,.4);}
#landing .slider > input.slide:checked + label:before {border-color:rgba(255,255,255,1);}
#landing .slider > input.slide + label + div,
#landing .slider > input.slide + label + div > img:first-child,
#landing .slider > input.slide + label + div > img:first-child + div {position:absolute; z-index:0; top:0; left:0; right:0; bottom:0; text-align:left; overflow:hidden;}
#landing .slider > input.slide + label + div > img:first-child {width:100%; height:100%; opacity:.9;}
#landing .slider > input.slide + label + div {transition:opacity 1s, transform 1.5s; opacity:0; transform:scale(1.5); background:rgba(0,0,0,.8);}
#landing .slider > input.slide:checked + label + div {z-index:50; opacity:1; transform:scale(1);}
#landing .slider > input.slide + label + div:before {
  content:"";
  display:block;
  position:absolute;
  bottom:1px;
  left:0;
  width:0;
  opacity:0;
  z-index:100;
  background:#0097db;
  height:2px;
  transition:width 6.8s linear, opacity 3s 1s linear;
  box-shadow:0 0 2px rgba(0,0,0,.5);
}
#landing .slider > input.slide:checked + label + div:before {width:100%; opacity:1}

4. Buat Folder Baru : img

Setelah selesai semua silahkan anda membuat folder baru "img" dan taruh di folder "profil-perusahaan" untuk asset gambarnya anda bisa download disini.

5. Simpan dan Lihat Tampilan

Setelah semua selesai dilakukan langkah terakhr adalah menyimpan semua file yang dibuat tadi. Kemudian silahkan anda tarik file "company-profile.html" ke dalam browser yang telah disiapkan.

Jika benar / tidak mengalami error maka akan muncul tampilan seperti dibawah ini.
Cara Membuat Web Profil Perusahaan dengan HTML dan CSS
Cara Membuat Web Profil Perusahaan dengan HTML dan CSS
Cara Membuat Web Profil Perusahaan dengan HTML dan CSS

Kesimpulan

Jadi itulah tadi tentang Cara Membuat Web Profil Perusahaan dengan HTML dan CSS. Artikel ini semoga bisa menjadi referensi untuk tugas sekolah yang diberikan oleh guru anda.

Apabila ada pertanyaan baik saran dan kritik, silahkan berkomentar dibawah ini. Saya senang jika ada orang yang mau meninggalkan jejak berarti artikel ini bermanfaat, terima kasih.

Selamat mencoba dan balajar...

4 Responses to "Cara Membuat Web Profil Perusahaan dengan HTML dan CSS"

  1. Gan , ada databasenya gak untuk , PHP , SQL untuk website diatas min ?

    ReplyDelete
    Replies
    1. Kalau itu ada di subdomain: sourcecode.ansoriweb.com

      Web tersebut menyediakan source code gratis dan lengkap :D

      Silahkan bagikan informasi ini keteman-teman anda, terima kasih.

      Delete
  2. Terima kasih sangat membantu min🙏

    ReplyDelete
Bebas berkomentar asalkan sopan.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel