Assalamualaikum Wr. Wb.
Bagi suatu perusahaan, entah itu perusahaan jasa atau perusahaan produk pasti menginginkan usahanya bisa lebih terkenal agar bisa berkembang dengan baik. Untuk mengenalkan perusahaan yang diperlukan suatu media atau perantara yang lazim disebut Web Company Profile atau Web Profil Perusahaan dan ada juga Web Profile
Namun yang akan saya share di sini hanya Web Profile saja. Nah, di sini saya menggunkan bahasa pemrograman HTML dan disertai CSS, mari kita belajar !.
Dibawah ini adalah script code HTML nya :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Budy Hartanto</title>
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
<!--navbar-->
<nav>
<a href="profil.html" id="logo">H.B</a>
<ul>
<li role="presentation"><a href="https://instagram.com/hbbdy_?igshid=ovih54stzjuf" class="menu" target="_blank">INSTAGRAM</a></li>
<li role="presentation"><a href="#WRAPPER" class="menu">YOUTUBE</a></li>
<li role="presentation"><a href="#my" class="menu">SKILLS</a></li>
<li role="presentation"><a href="#logo" class="menu">HOME</a></li>
<li role="presentation"><a href="#"><i class="glyphicon glyphicon-search"></i></a></li>
</ul>
</nav>
<!--navbar-->
<!--middle-->
<div class="container">
<img class="gambar" src="images/budy.jpg"><br />
<h1 class="halo">Hi!</h1>
<h1>I'm Muhammad Budy H.</h1>
<p class="budy">Harapan Bersama Polytechnic Students Tegal City, Bachelor of Applied Informatics Engineering (D4 Informatics Engineering) Class of 2018. Fans of online games, music, photography and codding, of course. In terms of codding, I prefer to go into Web Programming, and now I'm studying programming languages, including: HTML5, CSS, JQUERY, JAVASCRIPT.
</p>
</div>
<h1 id="my" class="My">My Skills</h1>
<div class="skills">
<li>
<h3>HTML5</h3>90%<span class="bar"><span class="html"></span></span>
</li>
<li>
<h3>CSS3</h3> 90%<span class="bar"><span class="css"></span></span>
</li>
<li>
<h3>JQUERY</h3>75%<span class="bar"><span class="jquery"></span></span>
</li>
<li>
<h3>JAVASCRIPT</h3>80%<span class="bar"><span class="javascript"></span></span>
</li>
</div>
<!--middle-->
<div class="kotak">
</div>
<p>
</p>
<div id="WRAPPER" class="wrapper">
<h1 class="Youtube">My Youtube Channel</h1>
<div class="videowrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/k_NNCFNTDhY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<!--footer-->
<footer>
<div class="footer">
<div class="footer-content">
<div class="footer-section about"></div>
<div class="footer-section-link"></div>
<div class="footer-section contact-form"></div>
</div>
<div class="footer-bottom">
© hartanto.com | Designed by Muhammad Budy H.
</div>
</div>
</footer>
<!--//footer-->
</body>
</html>
Selanjutnya untuk dibawah ini adalah script code CSS nya :
body, html{
height: 100%;
margin: 0%;
font-family: 'Montserrat';
background: url('../images/web32.svg')no-repeat;
background-size: cover;
}
#logo {
font-size: 2em;
color: rgb(29, 35, 39);
text-decoration: none;
}
.menu {
font-style: normal;
font-size: 18px;
text-decoration: none;
}
nav {
padding: 39px;
}
nav ul {
list-style-type: none;
float: right;
}
nav ul li {
float: right;
}
nav ul li a {
color: rgb(39, 0, 39);
padding: 0 30px;
}
.container {
background: url("budy.jpg");
text-align: center;
width: 60%;
margin: 270px;
margin-top: 108px;
}
.halo {
font-size: 40px;
font-style: normal;
font-family: sans-serif;
}
.gambar {
width: 165px;
height: 165px;
margin: auto;
border-radius: 50%;
position: relative;
overflow: hidden;
max-width: 100%;
}
.budy{
font-size: 18px;
color: rgb(0, 0, 0);
font-family: sans-serif;
}
footer{
font-family: 'Libre Franklin', sans-serif;
background-color:rgb(255, 255, 255);
text-align: center;
}
@keyframes animasiKotak{
0% {
width: 500px;
height: 180px;
text-align: center;
}
50% {
width: 550px;
height: 400px;
text-align: center;
}
100% {
width: 550px;
height: 400px;
text-align: center;
}
}
*{
font-family: sans-serif;
list-style: none;
padding: 0;
}
.My {
text-align: center;
font-family: sans-serif;
}
.skills{
font-family: sans-serif;
margin: 30px auto;
color: rgb(0, 0, 0);
height: 250px;
width: 500px;
background-color:#34e7e4;
animation: animasiKotak 3s ease inherit alternate forwards;
}
.skills li {
margin: 10px;
}
.bar{
background: #5e3b08;
display: block;
height: 2px;
border: 1px solid rgba(0,0,0,0,3);
border-radius: 3px;
overflow: hidden;
}
.bar span{
height: 2px;
float: left;
background: #fa9600;
}
.html {
width: 90%;
animation: css 2s;
font-family: sans-serif;
}
.css {
width: 90%;
animation: css 2s;
font-family: sans-serif;
}
.jquery{
width: 78%;
animation: jquery 2s;
font-family: sans-serif;
}
.javascript {
width: 80%;
animation: javascript 2s;
font-family: sans-serif;
}
.footer-bottom {
height: 20px;
padding-top: 10px;
}
@keyframes html {
0%{
width: 0%;
}
100%{
width: 90%;
}
}
@keyframes css {
0%{
width: 0%;
}
100%{
width: 90%;
}
}
@keyframes jquery {
0%{
width: 0%;
}
100%{
width: 78%;
}
}
@keyframes javascript {
0%{
width: 0%;
}
100%{
width: 80%;
}
}
* {
margin: 0;
padding: 0;
}
.wrapper {
margin: 0 auto;
width: 60%;
text-align: center;
}
.videowrapper {
position: relative;
padding-bottom: 56.25%;
padding-top:25px;
height: 0px;
}
.videowrapper iframe {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
height: 95%;
width: 100%;
}
.Youtube {
text-align: center;
margin: auto;
padding-bottom: 20px;
font-family: sans-serif;
}
Dan inilah hasil dari script code HTML yang disertai CSS tersebut :
Download file disini.
Demikian yang bisa share tentang Web Profile, semoga bermanfaat.
Wassalamualaikum Wr. Wb.
HaTechnology 