add git logo

README.md

@@ -1,2 +1,7 @@
 
-> for css learning and html javascript
+> for css learning and html javascript
+
+#### how to use
+1. install vscode
+2. install live server extension
+3. open code and go live ....

index.html

@@ -13,11 +13,20 @@
 </head>
 
 <body>
+
+    <div class="git-logo">
+        <div class="line1"></div>
+        <div class="line2"></div>
+    </div>
+
     <div class="container">
         <ul>
             <li><a class="slidinglink" href="#">Sliding Link</a></li>
             <li><a href="#" class="swappinlink" data-replace="See"><span>Go</span></a></li>
             <li><a href="#" class="growinglink"> Cool </a></li>
+            <li><a href="#" class="colorswapping"> Color Swapping </a></li>
+            <li><a href="#" class="rainbowlink"> Rainbow Underline</a></li>
+            <li><a href="#" class="passinglink"> Passing Underline</a></li>
         </ul>
         
      </div>

styles/style.css

@@ -11,6 +11,69 @@ a {
     font-weight: 700;
 }
 
+/* git logo */
+
+.git-logo {
+    height: 150px;
+    width: 150px;
+    background-color: #f06033;
+    border-radius: 15px;
+    position: relative;
+    transform: rotate(45deg);
+}
+
+.line1 {
+    width: 110px;
+    background-color: white;
+    height: 10px;
+    top: 40px;
+    position: absolute;
+}
+
+.line1::before {
+    content: "";
+    position: absolute;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    background-color: white;
+    top: -8px;
+    left: 30px;
+}
+
+.line1::after {
+    content: "";
+    position: absolute;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    background-color: white;
+    top: -8px;
+    left: 90px;
+}
+
+.line2 {
+    width: 90px;
+    background-color: white;
+    height: 12px;
+    top: 70px;
+    left: 30px;
+    position: absolute;
+    transform: rotate(45deg);
+}
+
+.line2::after {
+    content: "";
+    width: 30px;
+    background-color: white;
+    height: 30px;
+    border-radius: 50%;
+    top: -8px;
+    left: 70px;
+    position: absolute;
+    transform: rotate(45deg);
+}
+
 /* sliding effect */
 .slidinglink  {
     line-height: 1.5;
@@ -100,4 +163,98 @@ a {
 .growinglink:hover::before {
     bottom: 0;
     height: 100%;
+}
+
+/* r2l color swapping link */
+.colorswapping {
+    background-image: linear-gradient(
+        to right,
+        #54b3d6,
+        #54b3d6 50%,
+        #000 50%
+    );
+    background-size: 200% 100%;
+    background-clip: text;
+    background-position: -100%;
+    display: inline-block;
+    padding: 5px 0;
+    position: relative;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    transition: all 0.3s ease-in-out;
+}
+
+.colorswapping::before {
+    content: '';
+    background: #54b3d6;
+    display: block;
+    position: absolute;
+    bottom: 0px;
+    left: 0;
+    width: 0;
+    height: 2px;
+    transition: all 0.3s ease-in-out;
+}
+
+.colorswapping:hover {
+    background-position: 0;
+}
+
+.colorswapping:hover::before {
+    width: 100%;
+}
+
+/* the rainbow link */
+
+
+.rainbowlink {
+    color: inherit;
+    text-decoration: none;
+}
+
+.rainbowlink {
+    background:
+        linear-gradient(
+            to right,
+            rgba(100, 200, 200, 1),
+            rgba(100, 200, 200, 1)
+        ),
+        linear-gradient(
+            to right,
+            rgba(255, 0, 0, 1),
+            rgba(255, 0, 180, 1),
+            rgba(0, 100, 200, 1)
+    );
+    background-size: 100% 3px, 0 3px;
+    background-position: 100% 100%, 0 100%;
+    background-repeat: no-repeat;
+    transition: background-size 400ms;                              
+}
+  
+.rainbowlink:hover {
+    background-size: 0 3px, 100% 3px;
+}
+
+/* passing underline */
+.passinglink {
+    position: relative;
+}
+
+.passinglink::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 4px;
+    border-radius: 4px;
+    background-color: aqua;
+    bottom: 0;
+    left: 0;
+    transform-origin: right;
+    transform: scaleX(0);
+    transition: transform .3s ease-in-out;
+}
+
+.passinglink:hover::before {
+    transform-origin: left;
+    transform: scaleX(1);
 }