Ketika ingin membuat sebuah website, kita seringkali kebingungan untuk membuat suatu desain website dari nol. Ini membuat proses pembuatan website menjadi lebih lama daripada biasanya.
Nah, berikut ini terdapat contoh coding web sederhana lengkap dengan HTML dan CSS yang sudah jadi dan bisa membuat website kita menjadi lebih keren.
Langsung saja, berikut contoh coding yang bisa langsung saja kita gunakan untuk memperbagus tampilan website milik kita!
Contoh Coding HTML dan CSS
Berikut ini terdapat contoh coding web dalam bentuk HTML dan juga CSS untuk bisa menghasilkan tampilan dari beberapa komponen pada website dengan tampilan sederhana yang sudah jadi. Silahkan gunakan contoh kode dari desain web berikut ini untuk membuat desain website kita menjadi tampak lebih keren.
1. Website Portofolio
Untuk tampilan website portfolio yang kami miliki seperti ini: (demo bisa dilihat di profile.makinrajin.com)
<!DOCTYPE html>
<html>
<head>
<title>Alexandromeo's Profile</title>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="shortcut icon" href="img/favicon.jpg">
</head>
<body>
<nav class="navbar navbar-expand-lg nafbar-biru" id="home">
<div class="container">
<a class="navbar-brand" href="#"><img src="img/logo.png" style="width: 200px;"></a>
<div>
<ul class="navbar-nav">
<li class="nav-item active">
<span class="nav-link text-white">+(62) 882 1606 8813</span>
</li>
</ul>
</div>
</div>
</nav>
<div style="background-color: rgb(77,191,218); height: 400px;">
<div class="container navbar navbar-expand-lg nafbar-biru-2 mb-5">
<div class="container">
<a class="navbar-brand" href="#"></a>
<div class="py-2">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="fa fa-bars text-white"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<ul class="navbar-nav">
<li class="nav-item pr-4">
<a class="nav-link text-white js-scroll-trigger" href="#about">About</a>
</li>
<li class="nav-item pr-4">
<a class="nav-link text-white js-scroll-trigger" href="#skills">Skills</a>
</li>
<li class="nav-item pr-4">
<a class="nav-link text-white" href="https://makinrajin.com">My Website</a>
</li>
<li class="nav-item pr-4">
<a class="nav-link text-white js-scroll-trigger" href="#experience">Experience</a>
</li>
<li class="nav-item pr-4">
<a class="nav-link text-white js-scroll-trigger" href="#education">Education</a>
</li>
<li class="nav-item pr-4">
<a class="nav-link text-white js-scroll-trigger" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item pr-4">
<a class="nav-link text-white js-scroll-trigger" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="background-gambar text-center px-4">
<img src="img/face.jpeg" class="area-gambar mt-5" style="width: 150px; border-radius: 50%; margin-right: 20px;">
<h2 class="mt-5"><b>I'm Alexandromeo L.G</b></h2>
<p style="font-size: 14px;">Web Developer, Internet Marketer, SEO Enthusiast, Machine Learning Engineer, Professional Writer</p>
<div class="div-icon" style="font-size: 25px">
<a target="_blank" href="https://facebook.com/alexandromeo000"><i class="fa icon-fa fa-facebook-square"></i></a>
<a target="_blank" href="https://github.com/Alexandromeo"><i class="fa icon-fa fa-github-square"></i></a>
<a target="_blank" href="https://instagram.com/alexandromeo_"><i class="fa icon-fa fa-instagram"></i></a>
<a target="_blank" href="https://linkedin.com/in/alexandromeo"><i class="fa icon-fa fa-linkedin"></i></a>
</div>
<button class="mr-3 px-5 py-3 mt-3 action-button">Hire Me</button>
<button class="mr-3 px-5 py-3 mt-3 action-button"><a class="text-white" href="https://profile.makinrajin.com/Resume_Alexandromeo L.G.pdf" target="_blank">Download CV</a></button>
</div>
<div class="bg-white pt-5 pb-5 mb-4 px-md-5 px-4" id="about">
<div class="row">
<div class="col-md-6">
<h3>About</h3>
<p style="font-size: 14px; text-align: justify;">Hello, i am Alexandromeo, web developer, internet marketer, SEO enthusiast, Machine Learning Engineer, and Professional Writer. Every day, I spend my time to improve my skills to become a professional.</p>
</div>
<div class="col-md-1"></div>
<div class="col-md-5">
<h3>Basic Information</h3>
<table style="font-size: 14px;">
<tr>
<th>Address</th>
<td>Jl. Tambakbayan 5 no. 4</td>
</tr>
<tr>
<th>Date of Birth</th>
<td>6 February, 2000</td>
</tr>
<tr>
<th>Place of Birth</th>
<td>Magelang, Indonesia</td>
</tr>
<tr>
<th>Gender</th>
<td>Male</td>
</tr>
<tr>
<th>Phone Number</th>
<td>+62 882 1606 8813</td>
</tr>
</table>
</div>
</div>
</div>
<div class="bg-white pt-5 pb-5 mb-4 px-md-5 px-4" id="skills">
<h3>My Skills</h3><!-- 318 == 100% -->
<div class="row">
<div class="col-md-4 mt-5">
HTML
<div class="progress">
<div class="progress-bar" id="pro-1" style="width: 0%"></div>
</div><br/>
CSS
<div class="progress">
<div class="progress-bar" id="pro-2" style="width: 0%"></div>
</div><br/>
Javascript
<div class="progress">
<div class="progress-bar" id="pro-3" style="width: 0%"></div>
</div><br/>
PHP
<div class="progress">
<div class="progress-bar" id="pro-4" style="width: 0%"></div>
</div><br/>
</div>
<div class="col-md-4 mt-5">
Bootstrap
<div class="progress">
<div class="progress-bar" id="pro-5" style="width: 0%"></div>
</div><br/>
JQuery
<div class="progress">
<div class="progress-bar" id="pro-6" style="width: 0%"></div>
</div><br/>
Vue.JS
<div class="progress">
<div class="progress-bar" id="pro-7" style="width: 0%"></div>
</div><br/>
CodeIgniter
<div class="progress">
<div class="progress-bar" id="pro-8" style="width: 0%"></div>
</div>
</div>
<div class="col-md-4 mt-5">
Laravel
<div class="progress">
<div class="progress-bar" id="pro-9" style="width: 0%"></div>
</div><br/>
WordPress
<div class="progress">
<div class="progress-bar" id="pro-10" style="width: 0%"></div>
</div><br/>
SEO
<div class="progress">
<div class="progress-bar" id="pro-11" style="width: 0%"></div>
</div><br/>
Writing
<div class="progress">
<div class="progress-bar" id="pro-12" style="width: 0%"></div>
</div>
</div>
</div>
</div>
<div class="bg-white pt-5 pb-2 mb-4 px-md-5 px-5 pb-5 text-md-left text-justify" id="experience">
<h3>Work Experience</h3>
<div class="row mt-5">
<div class="col-md-2 bg-biru text-white experience text-center pt-md-5 pt-5 pb-5"><span>January 2019 - Present</span></div>
<div class="experience-detail col-md-10 px-4 py-4">
<span style="font-weight: bolder; font-size: 18px">Web Developer</span> / <span style="font-size: 14px; color: rgb(66,180,205);">rangkingkelas.com</span>
<p style="font-size: 14px" class="mt-3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium magnam consectetur vel in deserunt aspernatur est reprehenderit sunt hic. Nulla tempora soluta ea et odio, unde doloremque repellendus iure, iste!
</p>
</div>
</div>
<div class="row mt-5">
<div class="col-md-2 bg-biru text-white experience text-center pt-md-5 pt-5 pb-5"><span>February 2016 - Present</span></div>
<div class="experience-detail col-md-10 px-4 py-4">
<span style="font-weight: bolder; font-size: 18px">CEO</span> / <span style="font-size: 14px; color: rgb(66,180,205);">makinrajin.com</span>
<p style="font-size: 14px" class="mt-3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium magnam consectetur vel in deserunt aspernatur est reprehenderit sunt hic. Nulla tempora soluta ea et odio, unde doloremque repellendus iure, iste!
</p>
</div>
</div>
<div class="row mt-5">
<div class="col-md-2 bg-biru text-white experience text-center pt-md-5 pt-5 pb-5"><span>March 2017 - January 2018</span></div>
<div class="experience-detail col-md-10 px-4 py-4">
<span style="font-weight: bolder; font-size: 18px">Professional Writer</span> / <span style="font-size: 14px; color: rgb(66,180,205);">Babe Baca Berita</span>
<p style="font-size: 14px" class="mt-3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium magnam consectetur vel in deserunt aspernatur est reprehenderit sunt hic. Nulla tempora soluta ea et odio, unde doloremque repellendus iure, iste!
</p>
</div>
</div>
</div>
<div class="bg-white pt-5 pb-5 mb-4 px-5 text-md-left text-justify" id="education">
<h3>Education</h3>
<div class="row mt-5">
<div class="col-md-2 bg-biru text-white experience text-center pt-md-5 pt-5 pb-5"><span>Bachelor's Degree</span></div>
<div class="experience-detail col-md-10 px-4 py-4">
<span style="font-weight: bolder; font-size: 18px">Yogyakarta Veteran National Development University </span>
<p style="font-size: 14px; color: rgb(66,180,205);">Faculty of Engineering Industrial, Informatics, 2018 - present</p>
<p style="font-size: 14px" class="mt-3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium magnam consectetur vel in deserunt aspernatur est reprehenderit sunt hic. Nulla tempora soluta ea et odio, unde doloremque repellendus iure, iste!
</p>
</div>
</div>
<div class="row mt-5">
<div class="col-md-2 bg-biru text-white experience text-center pt-md-5 pt-5 pb-5"><span>High School</span></div>
<div class="experience-detail col-md-10 px-4 py-4">
<span style="font-weight: bolder; font-size: 18px">Vocational High School 1 Wonosobo</span>
<p style="font-size: 14px; color: rgb(66,180,205);">Software Engineering, 2016 - 2018</p>
<p style="font-size: 14px" class="mt-3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium magnam consectetur vel in deserunt aspernatur est reprehenderit sunt hic. Nulla tempora soluta ea et odio, unde doloremque repellendus iure, iste!
</p>
</div>
</div>
</div>
<div class="bg-white pt-5 pb-5 mb-4 px-md-5 px-4" id="portfolio">
<h3>Portfolio</h3>
<div class="row mt-4">
<div class="col-md-4 p-3">
<div class="port-detail" id="portfolio-1">
<img src="img/teach.jpg" style="width: 100%">
<div class="port-text">
<h5 style="font-weight: bold;"><a class="port-link" href="https://rental.makinrajin.com" target="_blank">Cars Rental System</a></h5>
<p style="font-size: 14px">An car rent with online system.</p>
</div>
</div>
</div>
<div class="col-md-4 p-3">
<div class="port-detail" id="portfolio-1">
<img src="img/bank.jpg" style="width: 100%">
<div class="port-text">
<h5 style="font-weight: bold;"><a class="port-link" href="https://github.com/Alexandromeo/perbankan" target="_blank">Banking System</a></h5>
<p style="font-size: 14px">Banking system like create bank account, transaction, investment, etc.</p>
</div>
</div>
</div>
<div class="col-md-4 p-3">
<div class="port-detail" id="portfolio-1">
<img src="img/writer.jpg" style="width: 100%">
<div class="port-text">
<h5 style="font-weight: bold;"><a class="port-link" href="https://writer.makinrajin.com" target="_blank">Writer Management</a></h5>
<p style="font-size: 14px">Writer and job management system based on FCFS.</p>
</div>
</div>
</div>
</div>
</div>
<!--<div class="bg-white pt-5 pb-5 mb-4 px-md-5 px-4" id="contact">
<h3>Feel Free to Contact Me</h3>
<div class="col-md-6 mt-4">
<input type="text" id="nama" placeholder=" Name" class="input-form">
</div>
<div class="col-md-6 mt-4">
<input type="text" id="email" placeholder=" Email" class="input-form">
</div>
<div class="col-md-6 mt-4">
<input type="text" id="phone" placeholder=" Phone Number" class="input-form">
</div>
<div class="col-md-6 mt-md-0 mt-4" style="float: right;">
<textarea placeholder="Message" id="message" class="input-form" style="margin-top: -50000px; margin-bottom: 15px;"></textarea>
</div>
<div class="col-md-6 mt-4">
<button class="px-5 py-3 mt-4 action-button contact-button" id="send" style="margin-left: 179%;">Send</button>
</div>
</div>-->
</div>
<p class="text-center py-3" style="font-size: 14px;">© Copyright 2021 Alexandromeo</p>
<div class="scroll-top hide js-scroll-trigger">
<center><i class="fa fa-chevron-up fa-lg text-white mt-3"></i></center>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js"></script>
<script src="js/style.js"></script>
</html>Anda harus memasukkan kode CSS nya juga supaya menghasilkan style tampilan yang lebih menarik. Berikut kodenya:
@media screen and (max-width: 768px)
{
.action-button, .div-icon, .area-gambar{margin-left: 10px;}
.background-gambar{height: 530px !important}
.contact-button{margin-left: 48% !important;}
textarea{margin-top: 0px !important;}
table tr td{padding-left: 20px !important;}
.experience
{
box-shadow: 1px 1px 3px 1px rgba(0.9,0.9,0.9, 0.2) !important;
}
.experience-detail
{
box-shadow: 1px 1px 3px 1px rgba(0.9,0.9,0.9, 0.2) !important;
}
}
*{font-family: 'Roboto'}
body{background-color: rgb(229,229,229)}
.nafbar-biru
{
background-color: rgb(66,180,205);
border-radius: 0;
}
.nafbar-biru-2
{
background-color: rgb(75,190,217);
border-radius: 0;
box-shadow: 0.5px 0.5px 3px 0.5px rgba(0.9,0.9,0.9, 0.2);
}
.background-gambar
{
background: url('../img/plane.jpg');
background-size: cover;
background-repeat: no-repeat;
height: 480px;
color: white;
}
.icon-fa{color: white; transition: 1s; padding-right: 15px;}
.icon-fa:hover{color: rgb(77, 191, 217)}
.action-button
{
background-color: rgb(67, 181, 207);
color: white;
border: none;
transition: 1.5s;
}
.hide{display: none;}
.action-button:hover
{
background-color: rgb(6,120,145);
}
.scroll-top
{
background-color: rgb(6,120,145);
width:50px;
height:50px;
position:fixed;
bottom:20px;
right: 20px;
z-index:99;
cursor:pointer;
border-radius:100px;
transition:all .5s;
}
.scroll-top:hover
{
background-color: rgb(37, 151, 177);
}
.exp{transition: 0.5s;}
.experience
{
width: 100%;
font-weight: bold;
box-shadow: 1px 1px 3px 1px rgba(0.9,0.9,0.9, 0.2);
}
.experience-detail
{
box-shadow: 1px 1px 3px 1px rgba(0.9,0.9,0.9, 0.2);
}
.bg-abu-abu
{
background-color: rgb(241,241,241);
}
.bg-biru
{
background-color: rgb(66,180,205);
}
.input-form
{
padding: 10px;
font-size: 14px;
outline-style: none;
border: 1px solid #aaa;
width: 100%;
}
textarea
{
max-width: 100%;
height: 178px;
max-height: 178px;
}
table tr td
{
padding-left: 100px;
}
.progress-bar{width: '0px'}
.shadow-pulse
{
animation-name: shadowPulse;
animation-duration: 0.5s;
animation-iteration-count: 1;
animation-timing-function: linear;
}
.port-detail
{
height: 350px;
box-shadow: 0.5px 0.5px 3px 0.5px rgba(0.9,0.9,0.9, 0.2);
}
.port-text{padding: 30px;}
.port-link:hover{text-decoration: none;}Setelah itu, Anda juga perlu memasukkan kode JavaScriptnya juga:
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function()
{
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname)
{
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length)
{
$('html, body').animate(
{
scrollTop: (target.offset().top - 71)
}, 1000, "easeInOutExpo");
return false;
}
}
});
$(document).scroll(function()
{
let scrollDistance = $(this).scrollTop();
if (scrollDistance > 100)
$('.scroll-top').fadeIn();
else
$('.scroll-top').fadeOut();
});
$('.scroll-top').click(function()
{
$('html, body').animate({scrollTop: 0}, 500)
});
$('.input-form').focus(function()
{
$(this).css("box-shadow", "2px 2px 3px 0.5px rgba(0.9,0.9,0.9, 0.2)");
$(this).css("border-color", "rgb(66,180,205)");
});
$('.input-form').blur(function()
{
$(this).css("box-shadow", "0px 0px 0px 0px #fff");
$(this).css("border-color", "#aaa");
});
$(document).scroll(function()
{
let scrollDistance = $(this).scrollTop();
let a = true;
if (scrollDistance > 580 && a)
{
$("#pro-1").animate({width: '90%'}, 50);
$("#pro-2").animate({width: '80%'}, 50);
$("#pro-3").animate({width: '88%'}, 50);
$("#pro-4").animate({width: '90%'}, 50);
$("#pro-5").animate({width: '90%'}, 50);
$("#pro-6").animate({width: '85%'}, 50);
$("#pro-7").animate({width: '80%'}, 50);
$("#pro-8").animate({width: '92%'}, 50);
$("#pro-9").animate({width: '45%'}, 50);
$("#pro-10").animate({width: '80%'}, 50);
$("#pro-11").animate({width: '83%'}, 50);
$("#pro-12").animate({width: '85%'}, 50);
a = false;
}
});
$(document).ready(function()
{
let scrollDistance = $(document).scrollTop();
let a = true;
if (scrollDistance > 580 && a)
{
$("#pro-1").animate({width: '90%'}, 50);
$("#pro-2").animate({width: '80%'}, 50);
$("#pro-3").animate({width: '88%'}, 50);
$("#pro-4").animate({width: '90%'}, 50);
$("#pro-5").animate({width: '90%'}, 50);
$("#pro-6").animate({width: '85%'}, 50);
$("#pro-7").animate({width: '80%'}, 50);
$("#pro-8").animate({width: '92%'}, 50);
$("#pro-9").animate({width: '45%'}, 50);
$("#pro-10").animate({width: '80%'}, 50);
$("#pro-11").animate({width: '83%'}, 50);
$("#pro-12").animate({width: '85%'}, 50);
a = false;
}
});
2. Form Registrasi dan Login
Untuk kode HTML nya seperti ini:
<!DOCTYPE html>
<html>
<head>
<title>Form Registrasi Dan Login Makinrajin.com</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box register">
<div class="header">
<h2>Form Register</h2>
<hr>
</div>
<form action="#" method="post">
<div class="form-input">
<label for="email">Email</label>
<input type="text">
</div>
<div class="form-input">
<label for="username">Username</label>
<input type="text">
</div>
<div class="form-input">
<label for="phone">Phone Number</label>
<input type="text">
</div>
<div class="form-input">
<label for="password">Password</label>
<input type="password">
</div>
<div class="form-input">
<label for="re-type">Re-Type Password</label>
<input type="password">
</div>
<div class="agreements">
<input type="checkbox">
<label for="agreements">I agree with all terms and conditions</label>
</div>
<div class="button-input">
<button type="submit">Register</button>
</div>
</form>
</div>
<div class="box login">
<div class="header">
<h2>Form Login</h2>
<hr>
</div>
<form action="#" method="post">
<div class="form-input">
<label for="username">Username</label>
<input type="text">
</div>
<div class="form-input">
<label for="password">Password</label>
<input type="password">
</div>
<div class="agreements">
<input type="checkbox">
<label for="agreements">Remember me</label>
</div>
<div class="button-input">
<button type="submit">Login</button>
</div>
</form>
</div>
</body>
</html>Setelah itu, Anda bisa coba tambahkan kode CSS di bawah ini supaya user interface website Anda lebih menarik:
body{
height: 100%;
display: flex;
justify-content: center;
align-self: center;
font-size: 18px;
font-family: Arial;
}
.register {
width: 500px !important;
}
.login {
width: 300px !important;
height: fit-content;
margin-left: 10px;
}
.box {
width: fit-content;
border: solid 1px white;
box-shadow: 5px 5px 10px cornflowerblue;
padding: 20px;
padding-top: 5px;
background-color: cornflowerblue;
}
.box .header {
color: white;
}
.form-input {
display: grid;
margin-top: 10px;
}
.form-input label {
margin-bottom: 10px;
color: white;
}
.form-input input {
height: 25px;
border: solid 1px white;
}
.button-input{
display: grid;
height: 40px;
margin-top: 30px;
}
.button-input button{
background-color: limegreen;
color: white;
font-size: 15px;
border: none;
}
.button-input button:hover{
background-color: rgb(0, 195, 0);
transition: 0.5s;
}
label[for="agreements"]{
margin-left: 5px;
}
.agreements{
color: white;
margin-top: 20px;
}
3. Landing Page Sederhana
Untuk membuat landing page seperti di atas, berikut contoh coding HTML nya:
<!DOCTYPE html>
<html>
<head>
<title>Landing Page Makinrajin.com</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navbar">
<div class="left">
<div class="icon">
Makinrajin
</div>
<div class="menu">
Home | Our Services | About | Contact Us
</div>
</div>
<div class="button">
<a href="" class="order">Order Now!</a>
</div>
</div>
<div class="background">
<div class="backdrop"></div>
</div>
<div class="jumbotron">
<h2>This is A Simple Landing Page!</h2>
<p>Let's Explore My Website. Find something new on search bar below!</p>
<form action="" method="post">
<input type="text" class="search">
<button type="submit">Search</button>
</form>
</div>
</body>
</html>Jangan lupa menambahkan css di file style.css dengan coding berikut:
body {
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
}
.navbar {
color: white;
display: flex;
justify-content: space-between;
background-color: rgb(0, 174, 255);
margin: -10px;
padding: 20px 150px;
}
.left {
width: 500px;
display: flex;
justify-content: space-between;
}
.background{
position: absolute;
z-index: -1;
margin-left: -10px;
background-image: url(https://images.pexels.com/photos/4347119/pexels-photo-4347119.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
width: 100%;
height: 100%;
}
.backdrop{
position: absolute;
margin-left: -10px;
width: 100%;
height: 100%;
background-color:rgba(0, 0, 0, 0.8);
}
.jumbotron {
color: white;
text-align: center;
}
.jumbotron h2{
margin-top: 200px;
font-size: 60px;
}
form input{
width: 500px;
height: 30px;
}
form button{
border: none;
width: 100px;
height: 36px;
margin-left: -5px;
font-size: 16px;
background-color: rgb(0, 174, 255);
color: white;
font-weight: bold;
}
a.order {
border: solid 1px;
text-decoration: none;
padding: 5px;
transition: 0.5s;
}
a.order:hover{
border-radius: 100px;
background-color: white;
color: rgb(0, 174, 255);
transition: 0.5s;
padding: 5px 20px;
}
Itulah Contoh HTML yang Bisa Anda Coba
Untuk menggunakan contoh coding html di atas, pastikan kita sudah menggunakan nama css yang sesuai yaitu style.css. Hal ini akan berpengaruh terhadap terhubung atau tidaknya file html kita dengan file css nantinya.
Dengan terhubungnya kedua file HTML dan CSS ini, kita bisa mendapatkan hasil desain web keren sesuai dengan contoh coding html website sederhana yang sudah jadi di atas. Tentunya, sekarang Anda sudah lebih dapat gambaran terkait contoh tampilan website yang akan Anda rancang ke depannya. Semoga artikel ini membantu!
I’m an experienced SEO Specialist who can grow a website through organic channel. I’m also passionate about digital marketing and web development