February 2020 – HaTechnology

Assalamualaikum Wr. Wb.

Membuat sebuah Web Profile adalah hal wajib untuk seorang Programmer, nah maka dari itu saya membuatnya atas arahan atau tugas dari dosen saya.
Berikut ini adalah source code html dan css Web Profile saya.

Di bawah ini adalah 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">Myprofile</a>
  
        <ul>
            <li role="presentation"><a href="profil.html">Home</a></li>
            <li role="presentation"><a href="https://instagram.com/hbbdy_?igshid=ovih54stzjuf" target="_blank">Instagram</a></li>
            <li role="presentation"><a href="#"><i class="glyphicon glyphicon-search"></i></a></li>
        </ul>

    </nav>
<!--navbar-->   

<!--middle-->
  
<div class="container" id ="about">
    <img class="gambar" src="images/budy.jpg"><br />
        <h1>Halo!</h1>
        <h1>Saya Muhammad Budy H.</h1>
        <p>Mahasiswa Politeknik Harapan Bersama Tegal, Prodi Sarjana Terapan Teknik Informatika (D4 Teknik Informatika) Angkatan 2018.
        Penggemar game online, musik, fotografi dan codding tentunya. 
        Untuk di segi codding saya lebih suka mendalami Web Programming, dan sekarang 
        sedang mendalami bahasa pemrograman, diantaranya : HTML5, CSS, PHP, JS.</p>
</div>
<!--middle-->  

<!--footer-->
<footer>
    
  <p>Copyright @ 2020</p> 
  <p>Created by Budy</p>

</footer>    
<!--footer-->  
</body>
</html>

Kemudian dibawah ini adalah code CSS nya:

body, html{
    height: 100%;
    margin: 0%;
    color: rgb(0, 0, 0);
    font-family: 'Montserrat';
}

a {
    
    text-decoration: none;
}

body {
    background: url('../images/web32.svg')no-repeat;
    background-size: cover;

}

#left {
    position: absolute;
    top: 60;
}

#right {
    position: absolute;
    top: 20%;
    right: 0;
    z-index: 1;
}

nav {
    padding: 50px;

}

nav ul {
    list-style-type: none;
    float: right;


}

nav ul li {
    float: left;

}

nav ul li a {
    color: rgb(39, 0, 39);
    padding: 0 30px;

}

#logo {
    font-size: 2em;
    color: rgb(29, 35, 39);
  
}

.container {
    background: url("budy.jpg");
    text-align: center;
    width: 60%;
    margin: 270px;
    margin-top: 108px;
    
}
.gambar {
    width: 15%;
    margin: auto;

}

p{
    font-size: 18px;
    color: rgb(0, 0, 0);
    
}

footer{
    font-family: 'Libre Franklin', sans-serif;
    background-color:rgb(255, 255, 255);
    text-align: center;
    
}

Dan inilah hasil dari source code html dan css tersebut :

Baik, sekian sharing ilmu pembuatan Web Profile dari saya,
semoga bermanfaat untuk kalian semua, dan semoga bisa dikembangkan lagi.
Wassalamualaikum Wr. Wb.