sumber : https://www.ansoriweb.com/2020/04/cara-membuat-web-profil-perusahaan.html
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.
Komentar Terbaru