Cara Membuat Web Profil dengan HTML dan CSS
Cara Membuat Web Profil dengan HTML dan CSS
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 Profil
Panduan lengkap untuk membuat sebuah web profil sederhana dan keren sebagai berikut.
1. Membuat Folder Baru : HTML - Nama Kamu
Langkah pertama yang anda lakukan adalah membuat sebuah folder baru di folder Data-Data (D) dan beri nama "HTML - madun"
2. Membuat File : profil.html
Langkah kedua yang anda lakukan adalah membuka text editor, dan buat sebuah file "profil.html" berekstansi .html (hypertext markup language). Jika sudah silahkan anda copy dan tempelkan kode script dibawah ini.
<!DOCTYPE html>
<html>
<head>
<title>SMPIT HQBS</title>
<link rel="icon" href="gambar/logo.png">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="landing">
<div class="header">
<a href="" class="logo">
<img src="gambar/logo.png" width="24px;" alt="">
</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="gambar/asrama.JPG" />
<div class="content">
<h3>SMPIT HQBS BANJARBARU</h3>
<p>Merupakan sebuah sekolah yang membangun karakter anak.</p>
<a href="" class="button button-blue">Daftar</a>
</div>
</div>
<input class="slide" type="radio" name="slider-1" id="s-1-2" /><label for="s-1-2"></label>
<div>
<img src="gambar/dapur.jpg" />
<div class="content">
<h3>SMPIT HQBS BANJARBARU</h3>
<p>Buktikan dan datang kesekolah ini, 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="gambar/hqbs.JPG" />
<div class="content">
<h3>SMPIT HQBS BANJARBARU</h3>
<p>Melayani dengan tulus sepenuh hati.</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="feature">
<img class="picture" src="gambar/daftar.jpeg" />
<h4 class="caption">Daftar</h4>
<p class="summary">Alur pendaftaran adalah proses-proses pendaftaran yang harus dilalui oleh calon peserta didik baru ketika melakukan
pendaftaran suatu seleksi masuk.</p>
</div>
<div class="feature">
<img class="picture" src="gambar/belajar.jpeg" />
<h4 class="caption">Belajar</h4>
<p class="summary">Belajar adalah perubahan yang relatif permanen dalam potensi perilaku sebagai hasil dari pengalaman atau latihan yang
diperkuat.</p>
</div>
<div class="feature">
<img class="picture" src="gambar/sukses.jpeg" />
<h4 class="caption">Sukses</h4>
<p class="summary">Sukses merupakan pencapaian terhadap keinginan yang sudah diniatkan untuk Anda capai.</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="gambar/dapur.jpg" />
</div>
<input class="slide" type="radio" name="slider-2" id="s-2-2" checked /><label for="s-2-2"></label>
<div>
<img src="gambar/asrama.JPG" />
</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">
Segera Daftarkan Anak Kesayangan Anda di Sekolah Kami!
<br />
<a href="" class="button button-green">DAFTAR SEKARANG</a>
</div>
<div class="footer">
</div>
<div class="copyright">
<div class="social">
<a href="">Muhammaddun</a>
<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 baru dengan nama "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 : gambar
Setelah selesai semua silahkan anda membuat folder baru "gambar" dan taruh di folder "HTML -madun" untuk asset gambarnya anda bisa download disini:
5. Simpan dan Lihat Tampilan
Setelah semua selesai dilakukan langkah terakhir adalah menyimpan semua file yang dibuat tadi. Kemudian silahkan anda klik dua kali pada file "profil.html"
Jika benar / tidak mengalami error maka akan muncul tampilan seperti dibawah ini
Kesimpulan
Jadi itulah tadi tentang Cara Membuat Web Profil dengan HTML dan CSS.
Apabila ada pertanyaan baik saran dan kritik, silahkan berkomentar dibawah ini. Saya senang jika ada orang yang mau meninggalkan jejak berarti ini bermanfaat, terima kasih.
Selamat mencoba dan balajar 😊😊
kontak saya: 083141025824
Komentar
Posting Komentar