Addition of Loading/retro computer loader #888

Original file line number	Diff line number	Diff line change
Expand Up		@@ -411,6 +411,7 @@ Your browser does not support the video tag.
		[<img src="images/loader10.png" height="230" title="Demo 10">](https://codepen.io/Sahil-Patil-the-sans/pen/WNPbVqK)
		[<img src="images/loader11.gif" height="230" title="Demo 11">](https://codepen.io/sugeng-sulistiyawan/pen/PoyjPWd)
		[<img src="images/loader12.gif" height="230" title="Demo 12">](http://codepen.io/rcjasub/pen/zxrddOP)
	[<img src="images/Screenshot (43).png" height="230" title="Demo 13">](https://codepen.io/Guarionex-Tavares/pen/emJVdgN)

		[⬆ back to top](#quick-links)

Expand Down Expand Up		@@ -509,6 +510,7 @@ Your browser does not support the video tag.
		---

		## <a id="mondrian-composition"></a>Mondrian Composition

		[<img src="images/mondrian_composition.png" height="230" title="Mondrian Art Demo">](https://codepen.io/VINAY-MADIVAL/pen/VYerdxY)

		[⬆ back to top](#quick-links)
Expand Down

Binary file added images/Screenshot (43).png

Show comments View file Open in desktop

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

15 changes: 15 additions & 0 deletions retro-loader/index.html

Show comments View file Open in desktop

Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,15 @@
	<!DOCTYPE html>
	<head>
	<title>Retro Loader</title>
	<link rel="stylesheet" href="style.css" />
	<link rel="icon" type="image/gif" href="https://i.pinimg.com/originals/8b/c9/32/8bc932d9b88b0ba632c09c0a0f422ca5.gif" />
	</head>
	<body>
	<div class="loader-container">
	<img
	src="https://i.pinimg.com/originals/8b/c9/32/8bc932d9b88b0ba632c09c0a0f422ca5.gif"
	alt="Retro Computer Loading"
	/>
	</div>
	</body>
	</html>

38 changes: 38 additions & 0 deletions retro-loader/style.css

Show comments View file Open in desktop

Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,38 @@
	html,
	body {
	height: 100%;
	margin: 0;
	background-color: #f3a5f9;

	/* Center content horizontally and vertically */
	display: flex;
	justify-content: center;
	align-items: center;
	}

	.loader-container {
	background: white;
	padding: 20px;
	border-radius: 25px;

	/* Shadow for depth */
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);

	/* Smooth pop animation: scales up and down forever */
	animation: pop 1.5s ease-in-out infinite alternate;
	}

	img {
	width: 220px;
	height: auto;
	border-radius: 12px;
	}

	@keyframes pop {
	0% {
	transform: scale(1);
	}
	100% {
	transform: scale(1.05);
	}
	}

Navigation Menu