From 94a81f5a19fbc7aaf381c3e0e30aa05865515798 Mon Sep 17 00:00:00 2001
From: Shreyans2004 <128773151+Shreyans2004@users.noreply.github.com>
Date: Wed, 9 Aug 2023 16:14:31 +0000
Subject: [PATCH] Hello-Friend animation added

---
 .../Hello-friend animation/index.html         | 45 +++++++++++++++++++
 .../Hello-friend animation/styles.css         | 38 ++++++++++++++++
 2 files changed, 83 insertions(+)
 create mode 100644 Frontend-Projects/Hello-friend animation/index.html
 create mode 100644 Frontend-Projects/Hello-friend animation/styles.css

diff --git a/Frontend-Projects/Hello-friend animation/index.html b/Frontend-Projects/Hello-friend animation/index.html
new file mode 100644
index 0000000000..e168c925eb
--- /dev/null
+++ b/Frontend-Projects/Hello-friend animation/index.html	
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <div id="main">..........</div>
+    <div id="main">..........</div>
+    <div id="main">..........</div>
+    <div id="main">..........</div>
+    <div id="main">..........</div>
+    <div id="main">..........</div>
+    <div id="main">..........</div>
+    <div id="main">..........</div>
+    <div id="main">..........</div>
+    <div id="main">..........</div>
+    <div id="main">..........</div>
+    <div id="main">..........</div>
+    <div id="main">..........</div>
+    <div id="main">..........</div>
+    <div id="main">..........</div>
+    <div id="main">..........</div>
+    <div id="main">..........</div>
+    <div id="main">..........</div>
+    <div id="main">..........</div>
+    <div id="main">..........</div>
+    <div id="main">..........</div>
+    <div id="main">..........</div>
+    <div id="main">..........</div>
+    <div id="main">..........</div>
+    <div id="main">..........</div>
+    <div id="main">..........</div>
+    <div id="main">..........</div>
+    <div id="main">..........</div>
+    <div id="main">..........</div>
+    <div id="main">..........</div>
+    <div id="main">..........</div>
+    <div id="main">..........</div>
+    <div id="main">..........</div>
+    <div id="main">Hello friend</div>
+  </body>
+</html>
diff --git a/Frontend-Projects/Hello-friend animation/styles.css b/Frontend-Projects/Hello-friend animation/styles.css
new file mode 100644
index 0000000000..09fe8b546b
--- /dev/null
+++ b/Frontend-Projects/Hello-friend animation/styles.css	
@@ -0,0 +1,38 @@
+body{
+    width:100vw;
+height: 100vh;
+display: flex;
+justify-content: center;
+align-items: center;
+overflow: hidden;
+
+
+}
+#main{
+    
+    display: flex;
+justify-content: center;
+align-items: center;
+flex-direction: column;
+
+font-size: 0.1rem;
+  
+    height: 300px;
+  animation: animate 6s ease-in-out infinite  ;
+border-radius: 30%;
+background-size: 4em 4em;
+
+  background-image: repeating-conic-gradient(deeppink 0deg,	deeppink,90deg,white 90deg ,white 180deg,	deeppink 180deg,	deeppink 270deg,white 270deg ,white 360deg);
+}
+@keyframes animate {
+    0%{
+ transform: rotateY(0deg) ;
+    }
+    50%{
+        transform: rotateZ(180deg) translateX(-200px);
+    }
+    100%{
+        transform: rotateZ(360deg) translateZ(200px) scale(100);
+    }
+    
+}
\ No newline at end of file