Add files via upload

Initial Commit
pulkit-30 · Sep 13, 2021 · f63b706 · f63b706
1 parent 685fb50
commit f63b706
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 0 deletions.
diff --git a/Automatic Image Slider Animation/image_slider.png b/Automatic Image Slider Animation/image_slider.png
diff --git a/Automatic Image Slider Animation/index.css b/Automatic Image Slider Animation/index.css
@@ -0,0 +1,59 @@
+body {
+    background-color: rgba( 27 , 31 , 34 ,0.85 );
+}
+h1 {
+    font-size: 3vw;
+    line-height: 1.4;
+    letter-spacing: 0.2vw;
+    text-align: center;
+    color: white;
+    margin-top: 5%;
+}
+.maindiv {
+    height: 50%;
+    width: 50%;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    background-image: url('https://source.unsplash.com/featured/?{nature},{forest},{lanscape},{flower}');
+    background-size: 100% 100%;
+    transform: translate(-50% , -50%);
+    box-shadow: 1px 2px 10px 5px white;
+    animation: slider 20s infinite linear;
+}
+@keyframes slider {
+    0%{
+        background-image: url('https://source.unsplash.com/featured/?{flower}');
+    }
+    33%{
+        background-image: url('https://source.unsplash.com/featured/?{nature},{forest},{lanscape}');
+    }
+    66%{
+        background-image: url('https://source.unsplash.com/featured/?{nature}');
+    }
+    100%{
+        background-image: url('https://source.unsplash.com/featured/?{nature},{lanscape},{flower}');
+    }
+}
+footer {
+    position: fixed;
+    bottom: 2px;
+    left: 2px;
+
+}
+.atag {
+    font-size: 1vw;
+    background: none;
+    position: relative;
+    left: -1%;
+    letter-spacing: normal;
+    color: rgb(255, 255, 255);
+}
+p {
+    font-size: 2vw;
+    color: rgb(255, 255, 255);
+}
+.date {
+    font-size: 2vw;
+    color: rgb(255, 255, 255);
+}
diff --git a/Automatic Image Slider Animation/index.html b/Automatic Image Slider Animation/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="index.css">
+</head>
+<body>
+    <h1> Background Image Changing Animation </h1>
+    <div class="maindiv"></div>
+    <footer>
+        <div style = "margin-bottom: -15%"><p>Credit:- <a href="https://github.com/Palaksharma23" class="atag" >Palak Sharma</a></p></div>
+        <div class="date">Date:- 11-09-2021</div>
+    </footer>
+</body>
+</html>
diff --git a/Automatic Image Slider Animation/readme.md b/Automatic Image Slider Animation/readme.md
@@ -0,0 +1,2 @@
+# Image Animation 
+<img src="./image_slider.png"/>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# Image Animation
		<img src="./image_slider.png"/>