index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Animation</title>
	<link rel="stylesheet" href="css/style.css">
	<link rel="shortcut icon" type="image/x-icon" href="images/favicon.png">
</head>
<body>
	

<!--CSS Layout Design Default-->
<section class="element-section">
	<div class="element-contain bg-color-1">
		<div class="title">
			<h2>CSS Layout Design Default</h2>
		</div>
		<div class="flex-container">

			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>


		</div>
	</div>
</section>





<!--Layout Display Flex-->
<section class="element-section">
	<div class="element-contain bg-color-1">
		<div class="title">
			<h2>Display Flex</h2>
		</div>
		<div class="flex-container-1">

			<div class="item1 item-1">1</div>
			<div class="item1 item-2">2</div>
			<div class="item1 item-3">3</div>


		</div>
	</div>
</section>

<!--Layout Display Inline Flex-->
<section class="element-section">
	<div class="element-contain bg-color-1">
		<div class="title">
			<h2>Display Inline Flex</h2>
		</div>
		<div class="flex-container-2">

			<div class="item2 item-1">Flex Item 1</div>
			<div class="item2 item-2">Flex Item 2</div>
			<div class="item2 item-3">Flex Item 3</div>
			<div class="item2 item-4">Flex Item 4</div>
			<div class="item2 item-5">Flex Item 5</div>
			<div class="item2 item-6">Flex Item 6</div>
			

		</div>
	</div>
</section>







<!--Flex Direction-->
<section class="element-section">
	<div class="element-contain bg-color-1">
		<div class="title">
			<h2>Flex-Direction: row | row-reverse | column | column-reverse</h2>
		</div>
		<div class="flex-container-direction1">

			<div class="item3 item-1">Flex Item 1</div>
			<div class="item3 item-2">Flex Item 2</div>
			<div class="item3 item-3">Flex Item 3</div>
			<div class="item3 item-4">Flex Item 4</div>
			<div class="item3 item-5">Flex Item 5</div>
			<div class="item3 item-6">Flex Item 6</div>
			

		</div>
	</div>
</section>

<!--Flex Wrap-->
<section class="element-section">
	<div class="element-contain bg-color-1">
		<div class="title">
			<h2>Flex-wrap: nowrap | wrap (Usigning Box Responsive)</h2>
		</div>
		<div class="flex-container-wrap">

			<div class="item4 item-1">Flex Item 1</div>
			<div class="item4 item-2">Flex Item 2</div>
			<div class="item4 item-3">Flex Item 3</div>
			<div class="item4 item-4">Flex Item 4</div>
			<div class="item4 item-5">Flex Item 5</div>
			

		</div>
	</div>
</section>

<!--Flex flow-->
<section class="element-section">
	<div class="element-contain bg-color-1">
		<div class="title">
			<h2>Flex-flow: flex-direction & flex-wrap for the dhorthand property</h2>
		</div>
		<div class="flex-container-flow">

			<div class="item5 item-1">Flex Item 1</div>
			<div class="item5 item-2">Flex Item 2</div>
			<div class="item5 item-3">Flex Item 3</div>
			<div class="item5 item-4">Flex Item 4</div>
			<div class="item5 item-5">Flex Item 5</div>
			

		</div>
	</div>
</section>






<!--Justify Content-->
<section class="element-section">
	<div class="element-contain bg-color-1">
		<div class="title">
			<h2>justify-content: flex-start | flex-end | center | space-around</h2>
		</div>
		<div class="flex-container-jcontent">

			<div class="item6 item-1">Flex Item 1</div>
			<div class="item6 item-2">Flex Item 2</div>
			<div class="item6 item-3">Flex Item 3</div>
			<div class="item6 item-4">Flex Item 4</div>
			<div class="item6 item-5">Flex Item 5</div>
			

		</div>
	</div>
</section>

<!--align item-->
<section class="element-section">
	<div class="element-contain bg-color-1">
		<div class="title">
			<h2>align-item: flex-start | flex-end | center | baseline | stretch</h2>
		</div>
		<div class="flex-container-aitem">

			<div class="item7 item-1">Flex Item 1</div>
			<div class="item7 item-2">Flex Item 2</div>
			<div class="item7 item-3">Flex Item 3</div>
			<div class="item7 item-4">Flex Item 4</div>
			<div class="item7 item-5">Flex Item 5</div>
			

		</div>
	</div>
</section>

<!--align content-->
<section class="element-section">
	<div class="element-contain bg-color-1">
		<div class="title">
			<h2>align-content: flex-start | flex-end | center | spcae-between | space-around | stretch</h2>
		</div>
		<div class="flex-container-acontent">

			<div class="item8 item-1">Flex Item 1</div>
			<div class="item8 item-2">Flex Item 2</div>
			<div class="item8 item-3">Flex Item 3</div>
			<div class="item8 item-4">Flex Item 4</div>
			<div class="item8 item-5">Flex Item 5</div>
			

		</div>
	</div>
</section>








<!--Flexbox order-->
<section class="element-section">
	<div class="element-contain bg-color-1">
		<div class="title">
			<h2>order: number</h2>
		</div>
		<div class="flex-container-order">

			<div class="item-order order-1">Flex Item 1</div>
			<div class="item-order order-2">Flex Item 2</div>
			<div class="item-order order-3">Flex Item 3</div>
			<div class="item-order order-4">Flex Item 4</div>
			<div class="item-order order-5">Flex Item 5</div>
			

		</div>
	</div>
</section>


<!--Flexbox flex-grow-->
<section class="element-section">
	<div class="element-contain bg-color-1">
		<div class="title">
			<h2>Flex-Grow: number</h2>
		</div>
		<div class="flex-container-grow">

			<div class="item-grow grow1">
				<h2>Box One</h2>
			</div>
			<div class="item-grow grow2">
				<h2>Box Two</h2>
			</div>
			<div class="item-grow grow3">
				<h2>Box Three</h2>
			</div>
			<div class="item-grow grow4">
				<h2>Box Four</h2>
			</div>

		</div>
	</div>
</section>


<!--Flexbox Flex 01-->
<section class="element-section">
	<div class="element-contain bg-color-1">
		<div class="title">
			<h2>Flex:number</h2> 
		</div>
		<div class="flex-container-1">

			<div class="item-flex1">
				<h2>Box One</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, necessitatibus!</p>
			</div>
			<div class="item-flex2">
				<h2>Box Two</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, necessitatibus!</p>
			</div>
			<div class="item-flex3">
				<h2>Box Three</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, necessitatibus!</p>
			</div>
			

		</div>
	</div>
</section>
<!--Flexbox Flex 02-->
<section class="element-section">
	<div class="element-contain bg-color-1">
		<div class="title">
			<h2>Flex:number</h2> 
		</div>
		<div class="flex-container-2">

			<div class="flex-item1">
				<h2>Box One</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, necessitatibus!</p>
			</div>
			<div class="flex-item2">
				<h2>Box Two</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, necessitatibus!</p>
			</div>
			<div class="flex-item3">
				<h2>Box Three</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, necessitatibus!</p>
			</div>
			

		</div>
	</div>
</section>


<!--Flexbox Flex-basis-->
<section class="element-section">
	<div class="element-contain bg-color-1">
		<div class="title">
			<h2>Flex-basis: percentage</h2>
		</div>
		<div class="basis-container-1">

			<div class="basis-item1">
				<h2>Box One</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, necessitatibus!</p>
			</div>
			<div class="basis-item2">
				<h2>Box Two</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, necessitatibus!</p>
			</div>
			<div class="basis-item3">
				<h2>Box Three</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, necessitatibus!</p>
			</div>
			

		</div>
	</div>
</section>





</body>
</html>