adding my animation (#2428)

Co-authored-by: Sophia Brandt <16630701+sophiabrandt@users.noreply.github.com>
zero-to-mastery · Nov 12, 2023 · d046110 · d046110
1 parent 718d76b
commit d046110
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 1 deletion.
diff --git a/Art/daniloslovic17/danimation.gif b/Art/daniloslovic17/danimation.gif
diff --git a/Art/daniloslovic17/index.html b/Art/daniloslovic17/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Danimation</title>
+	<link rel="stylesheet" href="style.css">
+</head>
+<body>
+	<div class="dvd">
+		<div class="box">
+			<h1>DVD</h1>
+			<div class="video-background">
+				<h2>VIDEO</h2>
+			</div>
+		</div>
+	</div>
+</body>
+</html>
diff --git a/Art/daniloslovic17/style.css b/Art/daniloslovic17/style.css
@@ -0,0 +1,76 @@
+body{
+	margin: 0;
+	display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    min-height: 100vh;
+}
+
+.box{
+	border-radius: 30px;
+	width: 230px;
+	height: 175px;
+    background: blueviolet;
+    position: absolute;
+    -webkit-animation: moveX 2s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
+    -moz-animation: moveX 2s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
+    -o-animation: moveX 2s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
+    animation: moveX 2s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
+}
+
+.dvd{
+	margin: 0 auto;
+	background-color: #0078D7;
+	position: relative;
+	width: 711px;
+    height: 509px;
+}
+
+h1{
+	font-size: 54px;
+    font-weight: 900;
+    font-style: italic;
+    margin-bottom: 16px;
+}
+
+h2{
+	font-size: 27px;
+    font-weight: 900;
+    font-style: italic;
+    margin: 0;
+    color: blueviolet;
+}
+
+.video-background{
+	border-radius: 100%;
+    background: black;
+    width: 80%;
+    margin: 0 auto;
+}
+
+@-webkit-keyframes moveX {
+  from { left: 0; } to { left: 480px; }
+}
+@-moz-keyframes moveX {
+  from { left: 0; } to { left: 480px; }
+}
+@-o-keyframes moveX {
+  from { left: 0; } to { left: 480px; }
+}
+@keyframes moveX {
+  from { left: 0; } to { left: 480px; }
+}
+
+@-webkit-keyframes moveY {
+  from { top: 0; } to { top: 333px; }
+}
+@-moz-keyframes moveY {
+  from { top: 0; } to { top: 333px; }
+}
+@-o-keyframes moveY {
+  from { top: 0; } to { top: 333px; }
+}
+@keyframes moveY {
+  from { top: 0; } to { top: 333px; }
+}
diff --git a/include.js b/include.js
@@ -2855,7 +2855,13 @@ let cards = [
     githubLink: 'https://github.com/daniel-badura'
   },
   {
-    artName: 'Animated', 
+    artName: 'Danimation',
+    pageLink: './Art/daniloslovic17/index.html',
+    imageLink: './Art/daniloslovic17/danimation.gif',
+    author: 'Danilo Slovic',
+    githubLink: 'https://github.com/daniloslovic17'
+  },
+  {    artName: 'Animated', 
     pageLink: './Art/Nyrkn10/index.html',
     imageLink: './Art/Nyrkn10/set.gif',
     author: 'Nyariki Kevin',