Karanprakash786
diff --git a/‎58. Rotating Text/index.html‎
Lines changed: 24 additions & 0 deletions b/‎58. Rotating Text/index.html‎
Lines changed: 24 additions & 0 deletions
diff --git a/‎58. Rotating Text/style.css‎
Lines changed: 60 additions & 0 deletions b/‎58. Rotating Text/style.css‎
Lines changed: 60 additions & 0 deletions
@@ -0,0 +1,24 @@
+<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>CSS Rotating Text</title>
+ <link rel="stylesheet" href="style.css" />
+ </head>
+ <body>
+ <div class="outer-headings">
+ <h1>
+ I am,
+ <div class="inner-headings">
+ <span>
+ UI/UX Designer <br />
+ Front-End Developer <br />
+ Back-End Developer <br />
+ Full-Stack Developer <br />
+ </span>
+ </div>
+ </h1>
+ </div>
+ </body>
+</html>
@@ -0,0 +1,60 @@
+* {
+ font-family: sans-serif;
+ margin: 0;
+ padding: 0;
+}
+
+.outer-headings {
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+h1 {
+ font-size: 45px;
+}
+
+.inner-headings {
+ border: 0px solid #ddd;
+ height: 50px;
+ line-height: 50px;
+ font-size: 45px;
+ text-transform: uppercase;
+ overflow: hidden;
+}
+
+.inner-headings span {
+ position: relative;
+ color: crimson;
+ animation: animation 10s ease infinite;
+}
+
+@keyframes animation {
+ 0%,
+ 100% {
+ top: 0;
+ }
+ 20% {
+ top: 0;
+ }
+ 25% {
+ top: -50px;
+ }
+ 45% {
+ top: -50px;
+ }
+ 50% {
+ top: -100px;
+ }
+ 70% {
+ top: -100px;
+ }
+ 75% {
+ top: -150px;
+ }
+ 95% {
+ top: -150px;
+ }
+}