Timeline Design CSS Responsive

Timeline Design CSS Responsive

Description Code

Code Candil Kuya - Hallo Sobat pengunjung Candil Code, hari ini di blog ini, kita akan belajar membuat desain timeline vertikal responsif menggunakan HTML dan CSS flexbox. Sebelumnya, saya telah membagikan banyak cuplikan tentang contoh animasi CSS, CSS HTML, Javascript, implementasi Plugin Jquery, dll.

apa itu timeline CSS atau timeline HTML atau Timeline responsif HTML CSS? Garis waktu adalah bagan yang mencantumkan peristiwa penting untuk tahun-tahun progresif dalam periode sejarah tertentu. Ada dua jenis timeline CSS yang kita lihat saat ini. Salah satunya adalah garis waktu Horizontal dan, yang lainnya adalah Garis Waktu Vertikal. 

Di Garis Waktu Horizontal, Daftar bagan akan sejajar dalam arah-X. Di Garis Waktu Vertikal, Bagan akan sejajar dengan arah Y. Garis waktu adalah bagian penting dari situs web apa pun dan, setiap situs web memiliki caranya sendiri untuk menunjukkan kemajuannya dalam bagan garis waktu.

Dalam Desain Garis Waktu Vertikal ini, ada garis waktu yang sejajar secara vertikal ditampilkan informasi yang berbeda. Ini adalah tahun, nama perusahaan, penunjukan, dan beberapa teks. Garis waktu ini dirancang untuk tujuan resume tetapi Anda dapat menambahkan teks lain dan ikon font-mengagumkan untuk memodifikasinya. Saya telah menyertakan empat kotak berbeda dan dua di setiap sisi.

Untuk mendesain timeline CSS responsif, saya telah menggunakan properti CSS flexbox. Anda juga dapat membuat cuplikan ini menggunakan properti float CSS. Tapi menurut saya dengan menggunakan CSS Flexbox, akan mudah bagi kita untuk menyelaraskan elemen-elemen dari project ini. Untuk membuat proyek ramah seluler, saya telah menggunakan Kueri Media CSS. Di perangkat yang lebih kecil, semua kotak akan sejajar ke sisi kanan dan, kotak tahun akan sejajar ke kiri.

Membuat Timeline Design CSS Responsive

Tutorial Membuat Timeline Design CSS Responsive

Untuk Membuat Proyek ini ( Timeline Design CSS Responsive ), Kita harus membuat dua file. Salah satunya adalah file HTML dengan ekstensi .html dan yang lainnya adalah file CSS dengan ekstensi .css. Setelah itu, tautkan CSS eksternal dalam file HTML, jika tidak, proyek akan mendapatkan gaya yang diperlukan. Sekarang salin kode di bawah ini dan rekatkan ke file yang sesuai dan simpan.

<!DOCTYPE html>
<html lang="en">
<!--code.candilkuya.com-->
<head>
	<meta charset="UTF-8">
	<title>Responsive CSS vertical timeline Design</title>
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="container">
		<div class="single-box">
			<div class="custom"></div>
			<div class="date-area">
				<span>2012</span>
			</div>
			<div class="content">
				<h2>Google Inc.</h2>
				<h3>Digital Marketer</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, iusto?</p>
			</div>
		</div>
		<div class="single-box box-right">
			<div class="custom"></div>
			<div class="date-area">
				<span>2008</span>
			</div>
			<div class="content">
				<h2>Yahoo Inc</h2>
				<h3>Senior Marketer</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, iusto?</p>
			</div>
		</div>
		<div class="single-box">
			<div class="custom"></div>
			<div class="date-area">
				<span>2006</span>
			</div>
			<div class="content">
				<h2>Bing</h2>
				<h3>Junior Marketing officer</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, iusto?</p>
			</div>
		</div>
		<div class="single-box box-right">
			<div class="custom"></div>
			<div class="date-area">
				<span>2000</span>
			</div>
			<div class="content">
				<h2>Youtube</h2>
				<h3>Search Engine Optimizer</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, iusto?</p>
			</div>
		</div>
	</div>
</body>
</html>

* {
	box-sizing: border-box;
}
body {
	background: #e7e7e7;
}
.container {
	font-family: 'Roboto', sans-serif;
	display: flex;
	flex-wrap: wrap;
	max-width: 800px;
	margin: 0 auto;
}
.single-box {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	width: 100%;
}
.date-area {
	display: flex;
	background: linear-gradient(to right, #e7e7e7 45%, #000 45%, #000 45%, #e7e7e7 50%);
	order: 2;
	text-align: center;
	color: #fff;
	font-size: 28px;
	flex-basis: 100px;
}
.date-area>span {
	font-size: 20px;
	line-height: 70px;
	margin: auto;
	background: #14b6c1;
	width: 70px;
	height: 70px;
	border-radius: 50%;
}
.content {
	text-align: center;
	padding: 20px;
	border-radius: 25px;
	color: #858585;
	order: 3;
	width: 80%;
	padding-left: 10px;
	background: #fff;
}
.content {
	margin-bottom: 3%;
}
.content h2 {
	margin: 0;
	font-size: 14px;
	text-transform: uppercase;
}
.content h3 {
	margin: 5px;
	font-size: 14px;
	color: #000;
}
@media (min-width: 640px) {
	.content, .custom {
		width: 40%;
	}
	.box-right .content {
		order: 1;
		padding-right: 10px;
		border-radius: 25px;
	}
	.box-right .custom {
		order: 3;
	}
}

Penutup

Note : Silahkan disimak dan dipelajari tutorial membuat Timeline Design menggunakan CSS dengan Layout Responsive. Thanks Semoga Bermanfaat.

Incoming search terms :

  • source code website
  • source code aplikasi
  • download source code aplikasi
  • perancangan aplikasi
  • source code sistem informasi berbasis web
  • contoh source code aplikasi
Baca juga :