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>

BACA JUGA:   Komputasi kuantum akan memicu 'Armageddon keamanan siber', kata IBM

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;
}

BACA JUGA:   HP Enterprise mengungkap peretasan yang diduga dilakukan oleh peretas Rusia yang didukung negara

#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 pada layar anda.

Jadi itulah Cara Membuat Web Profil Perusahaan dengan HTML dan CSS. Artikel ini semoga bisa menjadi referens.

BACA JUGA:   Setelah riset 3 dekade, Natal 2021 NASA cs luncurkan teleskop canggih James Webb Space Telescope untuk amati semesta awal

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…
——————————
Sumber http: https://www.ansoriweb.com/2020/04/cara-membuat-web-profil-perusahaan.html

Leave a Comment