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 @@
+
+
+
+
+
+ Document
+
+
+
+ ..........
+ ..........
+ ..........
+ ..........
+ ..........
+ ..........
+ ..........
+ ..........
+ ..........
+ ..........
+ ..........
+ ..........
+ ..........
+ ..........
+ ..........
+ ..........
+ ..........
+ ..........
+ ..........
+ ..........
+ ..........
+ ..........
+ ..........
+ ..........
+ ..........
+ ..........
+ ..........
+ ..........
+ ..........
+ ..........
+ ..........
+ ..........
+ ..........
+ Hello friend
+
+
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