Terms and Conditions

By signing up and using our platform, you agree to the collection, use, and protection of your personal information in accordance with our policies. This includes:

- Your name (first, middle, and last)

- Your email address

- Your organization details

- Your account type (student or educator)

- Any uploaded profile pictures

- Your interactions with tutorials, exercises, and classes

This data is collected to:

- Create and manage your account

- Facilitate participation in classes and exercises

We store this data securely and will not share it with third parties, except with your consent or when required by law. The data is retained for as long as you maintain an account on our platform.

Your Rights

In accordance with the Data Privacy Act of 2012, you have the right to:

- Be informed of how your data is collected and used

- Access and correct your data

- Request the deletion of your data

- Request portability of your data

To exercise any of these rights, please contact us at visualwebbits@gmail.com.

Data Security

We use encryption and security best practices to protect your data. However, no method of transmission over the internet is 100% secure.

By using our platform, you acknowledge that you have read and understood this Data Privacy Statement and agree to the collection and use of data as described.

Live Source Code

HTML

<!doctype html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel = "stylesheet" href="style.css">
	<title>Animated History Timeline</title>
</head>
<body>
	<div class = "timeline">
	
		<div class = "container left-container">
			<img src="https://imgur.com/iYn6TjT.png">
			<div class="text-box">
				<h2>Colegio Filipino</h2>
				<small>1900</small>
				<p>Don Mariano Fortunato Jhocson founded the 
				first non-sectarian, co-educational institution 
				in Manila, promoting leadership and values through 
				Dynamic Filipinism.</p>
				<span class="left-container-arrow"></span>
			</div>
		</div>
		
		<div class = "container right-container">
			<img src="https://imgur.com/iYn6TjT.png">
			<div class="text-box">
				<h2>Colegio Mercantil</h2>
				<small>1905</small>
				<p>The school introduced business courses, 
				later renamed Colegio Mercantil, 
				offering bookkeeping and accounting diplomas.</p>
				<span class="right-container-arrow"></span>
			</div>
		</div>
		
		<div class = "container left-container">
			<img src="https://imgur.com/iYn6TjT.png">
			<div class="text-box">
				<h2>Philippine Law School</h2>
				<small>1905</small>
				<p>Don Mariano collaborated with the Lacson brothers 
				to create the Philippine Law School, 
				emphasizing youth leadership and self-government.</p>
				<span class="left-container-arrow"></span>
			</div>
		</div>
		
		<div class = "container right-container">
			<img src="https://imgur.com/iYn6TjT.png">
			<div class="text-box">
				<h2>National Academy</h2>
				<small>1916</small>
				<p>The institution continued to grow, 
				adding Liberal Arts and preparing for new disciplines.</p>
				<span class="right-container-arrow"></span>
			</div>
		</div>
		
		<div class = "container left-container">
			<img src="https://imgur.com/zuUAiDn.png">
			<div class="text-box">
				<h2>National University</h2>
				<small>1921</small>
				<p>The Board renamed it National University, 
				and Senator Camilo Osias was installed as president.</p>
				<span class="left-container-arrow"></span>
			</div>
		</div>
		
		<div class = "container right-container">
			<img src="https://imgur.com/vnZkd43.png">
			<div class="text-box">
				<h2>Expansion of Colleges</h2>
				<small>1922-1939</small>
				<p>New colleges including Pharmacy, Dentistry, 
				Civil and Sanitary Engineering were established.</p>
				<span class="right-container-arrow"></span>
			</div>
		</div>
		
		<div class = "container left-container">
			<img src="https://imgur.com/0PTMOwe.png">
			<div class="text-box">
				<h2>Engineering and Architecture</h2>
				<small>1945</small>
				<p>Expanded offerings to include various 
				engineering disciplines and architecture, 
				meeting industry demands.</p>
				<span class="left-container-arrow"></span>
			</div>
		</div>
		
		<div class = "container right-container">
			<img src="https://imgur.com/LtoO3Qu.png">
			<div class="text-box">
				<h2>Tech Programs</h2>
				<small>1990-2009</small>
				<p>Responded to modern technology needs by offering Computer Science, 
				Marine, Computer, and Electronics Engineering, later adding Nursing, 
				HRM, and IT.</p>
				<span class="right-container-arrow"></span>
			</div>
		</div>
		
		<div class = "container left-container">
			<img src="https://imgur.com/iYn6TjT.png">
			<div class="text-box">
				<h2>Fire Disaster</h2>
				<small>1998</small>
				<p>A fire destroyed four university buildings, 
				but restoration allowed reopening within three weeks.</p>
				<span class="left-container-arrow"></span>
			</div>
		</div>
		
		<div class = "container right-container">
			<img src="https://imgur.com/g5hiBNw.png">
			<div class="text-box">
				<h2>SM Group</h2>
				<small>2008</small>
				<p>The SM Group took majority ownership, 
				leading to infrastructure and academic improvements.</p>
				<span class="right-container-arrow"></span>
			</div>
		</div>
		
		<div class = "container left-container">
			<img src="https://imgur.com/TtSo2om.png">
			<div class="text-box">
				<h2>UAAP and International Affiliations</h2>
				<small>Present</small>
				<p>National University is a founding UAAP member 
				and part of several international educational associations.</p>
				<span class="left-container-arrow"></span>
			</div>
		</div>
		
	</div>

</body>
</html>

CSS

*{
	margin: 0;
	padding: 0;
	font-family: 'Poppins', sans-serif;
	box-sizing: border-box;
}

body{
	background: #071678;
}

.timeline{
	position: relative;
	max-width: 1200px;
	margin: 100px auto;
}

.container {
	padding: 10px 50px;
	position: relative;
	width: 50%;
	animation: movedown 1s linear forwards;
	opacity: 0;
}

@keyframes movedown{
	0%{
		opacity: 0;
		transform: translateY(-30px);
	}
	100%{
		opacity: 1;
		transform: translateY(0px);
		
	}
}

.container:nth-child(1){
	animation-delay: 0s;
}
.container:nth-child(2){
	animation-delay: 1s;
}
.container:nth-child(3){
	animation-delay: 2s;
}
.container:nth-child(4){
	animation-delay: 3s;
}
.container:nth-child(5){
	animation-delay: 4s;
}
.container:nth-child(6){
	animation-delay: 5s;
}
.container:nth-child(7){
	animation-delay: 6s;
}
.container:nth-child(8){
	animation-delay: 7s;
}
.container:nth-child(9){
	animation-delay: 8s;
}
.container:nth-child(10){
	animation-delay: 9s;
}
.container:nth-child(11){
	animation-delay:10s;
}

.text-box {
	padding: 20px 30px;
	background: #eddc24;
	position: relative;
	border-radius: 6px;
	font-size: 15px;
}

.left-container{
	left: 0;
}

.right-container{
	left: 50%;
}

.container img {
	position: absolute;
	width: 40px;
	border-radius: 50%;
	right: -20px;
	top: 32px;
	z-index: 10;
}

.right-container img {
	left: -20px;
}

.timeline::after{
	content: '';
	position: absolute;
	width: 6px;
	height: 100%;
	background: #00072e;
	top: 0;
	left: 50%;
	margin-left: -3px;
	z-index: -1;
	animation: moveline 6s linear forwards;
}
@keyframes moveline {
	0%{
		height:0;
	}
	100%{
		height: 100%;
	}
}

.text-box h2{
	font-weight: 600;
	color: #001066
}

.text-box small {
	display: inline-block;
	margin-bottom: 15px;
}

.left-container-arrow {
	height: 0;
	width: 0;
	position: absolute;
	top: 28px;
	z-index: 1;
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	border-left: 15px solid #eddc24;
	right: -14px;
}

.right-container-arrow {
	height: 0;
	width: 0;
	position: absolute;
	top: 28px;
	z-index: 1;
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	border-right: 15px solid #eddc24;
	left: -14px;
}

@media screen and (max-width: 600px){
	.timeline{
		margin: 50px auto;
	}
	.timeline::after{
		left: 31px;
	}
	.container{
		width: 100%;
		padding-left: 80px;
		padding-right: 25px;
	}
	.text-box{
		font-size: 13px;
	}
	.text-box small{
		margin-bottom: 10px;
	}
	.right-container{
		left: 0;
	}
	.left-container img, .right-container img {
		left: 10px;
	}
	.left-container-arrow, .right-container-arrow{
		border-right: 15px solid #eddc24;
		border-left: 0;
		left: -14px;
	}
}

Live Source Code

HTML

CSS

JS

Animated History Timeline

Live Preview

Sign Up

Login

Terms and Conditions

Your Rights

Data Security

Live Source Code

HTML

CSS

JS

Animated History Timeline

Live Preview

Animated History Timeline

HTML Explanation

CSS Explanation

Javascript Explanation

HTML

CSS

JavaScript

Combine Tutorial

Oh no!😱