Design Timeline dengan HTML CSS
Timeline pada sebuah situs gunanya bagi mengetahui histori histori yang telah lalu, tapi disini kita tak belajar guna nya yah teman teman, kini kita akan belajar cara merancang desainnya, seketika saja kita praktekan cara merancang Design Timeline dengan HTML CSS.
Kalian buka text editor kalian dan ketikan kode HTML di bawah ini dan beri nama dengan nama index.html
index.html
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<title>border</title>
<link rel=stylesheet href=style.css>
<link href=https://fonts.googleapis.com/css?family=Bungee|Roboto+Slab rel=stylesheet>
</head>
<body>
<div class=container>
<h1 style=>Timeline Design </h1>
<div class=kotak>
<div class=tahun biru>2017</div>
<div class=bulat></div>
<div class=cover>
<span class=arrow-left></span>
<p class=hijau>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea asperiores nam quisquam expedita eos dolorem facilis perspiciatis, aperiam fugit repellat rerum error, enim ratione. Delectus maxime possimus, cumque quaerat rem!</p>
</div>
<div class=tahun biru>2016</div>
<div class=bulat></div>
<div class=cover>
<span class=arrow-left></span>
<p class=hijau>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea asperiores nam quisquam expedita eos dolorem facilis perspiciatis, aperiam fugit repellat rerum error, enim ratione. Delectus maxime possimus, cumque quaerat rem!</p>
</div>
<div class=tahun biru>2015</div>
<div class=bulat></div>
<div class=cover>
<span class=arrow-left></span>
<p class=hijau>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea asperiores nam quisquam expedita eos dolorem facilis perspiciatis, aperiam fugit repellat rerum error, enim ratione. Delectus maxime possimus, cumque quaerat rem!</p>
</div>
<div class=tahun biru>2014</div>
<div class=bulat></div>
<div class=cover>
<span class=arrow-left></span>
<p class=hijau>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea asperiores nam quisquam expedita eos dolorem facilis perspiciatis, aperiam fugit repellat rerum error, enim ratione. Delectus maxime possimus, cumque quaerat rem!</p>
</div>
<div class=tahun biru>2013</div>
<div class=bulat></div>
<div class=cover>
<span class=arrow-left></span>
<p class=hijau>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea asperiores nam quisquam expedita eos dolorem facilis perspiciatis, aperiam fugit repellat rerum error, enim ratione. Delectus maxime possimus, cumque quaerat rem!</p>
</div>
<br><br>
</div>
<h2 style=border-bottom: 4px solid orange;></h2>
<br><br>
</div>
</body>
</html>
setelah itu kalian ketikan kode css berikut dan beri nama dengan nama style.css
style.css
*{padding: 0;margin: 0;}
body{
font-family: 'Roboto Slab', serif;
background-color:orange;
/*background: url(ahoy.jpg);*/
}
.container{
width: 700px;
margin: auto;
margin-top: 60px;
background: #3E3E3E;
border-radius: 2px;
box-shadow: 2px 2px 8px #000;
}
.container h1{
text-align: center;
font-family: 'Bungee', cursive;
color: orange;
padding-top:30px;
border-bottom: 4px solid orange;
padding-bottom: 20px;
}
.kotak{
border-left:4px solid orange;
width: 500px;
margin: auto;
transition: border 2s, color 2s, height 2s;
}
p{
margin-left: 30px;
padding: 10px;
}
p.hijau{
border: 4px solid orange;
/*border-radius: 5px;*/
/*box-shadow: 0px 0px 3px black;*/
color: orange;
background: #3E3E3E;
}
.cover{
position: relative;
}
.arrow-left{
position: absolute;
left: 10px;
top: 31px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid orange;
}
.bulat{
width: 10px;
height: 10px;
border-radius: 50px;
border: 3px solid orange;
position: relative;
top: 48px;
left: -9px;
background-color: #3E3E3E;
}
.tahun{
border: 3px solid orange;
display: block;
width: 50px;
line-height: 20px;
text-align: center;
position: relative;
top: 68px;
left: -70px;
color: orange;
font-family: 'Bungee', cursive;
}apabila telah selesei karenanya hasilnya akan selaku berikut
demikianlah panduan merancang Design Timeline dengan HTML CSS semoga bermanfaat yah teman teman 😀
Sumber https://kursuswebsite.org
