Merge pull request #64 from SevilleCode/sevillecode

Added an animated background color
pulkit-30 · Oct 18, 2021 · 533184c · 533184c
2 parents eb3dab9 + 4dd95ee
commit 533184c
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 0 deletions.
diff --git a/Animated Background Color/index.html b/Animated Background Color/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Animated Background Color</title>
+<link href="style.css" type="text/css" rel="stylesheet">
+</head>
+
+<body>
+	<section><h1>Animated Background Color</h1>
+	<p>The background color here isn't static, but it cycles through several different colors. And it's all accomplished with CSS, no JavaScript in sight!</p>
+	<footer><a href="https://github.com/SevilleCode">SevilleCode</a> October 13, 2021</footer></section>
+</body>
+</html>
diff --git a/Animated Background Color/readme.md b/Animated Background Color/readme.md
@@ -0,0 +1,2 @@
+# Animated Background Color
+<img src="./screenshot.png"/>
diff --git a/Animated Background Color/screenshot.PNG b/Animated Background Color/screenshot.PNG
diff --git a/Animated Background Color/style.css b/Animated Background Color/style.css
@@ -0,0 +1,37 @@
+@charset "utf-8";
+/* CSS Document */
+body{
+	background-color: #010A26;
+	animation-name: colors;
+	animation-duration: 15s;
+	animation-timing-function: ease-in-out;
+	animation-iteration-count: infinite;
+}
+
+@keyframes colors {
+	0% {background-color:#010A26;}
+	25% {background-color:#03318C;}
+	50% {background-color:#023059;}
+	100% {background-color:#1763A6;}
+}
+
+section {
+	width: 95%;
+	margin-right: auto;
+	margin-left: auto;
+	background-color: #DCEEF2;
+	text-align: center;
+	font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
+}
+
+h1 {
+	font-size:50pt;
+}
+
+p {
+	font-size:25pt;
+}
+
+a {
+	color: black;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# Animated Background Color
		<img src="./screenshot.png"/>