add functions

SanekxArcs · Nov 30, 2022 · dfb738a · dfb738a
1 parent da18979
commit dfb738a
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 24 deletions.
diff --git a/index.html b/index.html
@@ -19,13 +19,14 @@
                 <img src="https://media-exp1.licdn.com/dms/image/D4D35AQHx2zZ0YD3hhw/profile-framedphoto-shrink_400_400/0/1669812339341?e=1670418000&v=beta&t=YxdE1PPn1Gs15tSxxoHWcnAtt_nxDNHVAP9uJcDUGcU" class="hoverZoomLink" alt="Click on the profile photo to send Mail to me.">
             </a>
             <h1>
+                <a target="_blank" href="CV_Oleksandr_Dzisiak_PL.pdf" download="" class="cv-download tooltip" data-tooltip="Click to download my CV">
+                    <i class="bi bi-file-earmark-person-fill"></i>
+                </a>
                 Oleksandr Dzisiak
             </h1>
             <h2>
-                Front-end Developer<br/>
-                <a target="_blank" href="CV_Oleksandr_Dzisiak_PL.pdf" download="" class="cv-download">
-                    <i class="bi bi-file-earmark-person-fill"></i>
-                </a>
+                Front-end Developer
+
             </h2>
         </header>
 
@@ -36,16 +37,6 @@ <h2>
         </div>
 
         <ul class="profile-social-links">
-            <li>
-                <a target="_blank" href="https://www.facebook.com/sanekx.arcs">
-                <i class="bi bi-whatsapp"></i>
-                </a>
-            </li>
-            <li>
-                <a target="_blank" href="https://twitter.com/sanekxarcs">
-                <i class="bi bi-envelope-at"></i>
-                </a>
-            </li>
             <li>
                 <a target="_blank" href="https://github.com/SanekxArcs">
                 <i class="bi bi-github"></i>
@@ -58,22 +49,32 @@ <h2>
                 </a>
             </li>
             <li>
-                <a target="_blank" href="#">
-                <i class="bi bi-envelope-at"></i>
+                <a target="_blank" href="https://www.instagram.com/sanekx_arcs/">
+                <i class="bi bi-instagram"></i>
+                </a>
+            </li>
+            <li>
+                <a target="_blank" href="https://discordapp.com/users/Sanekx%20Arcs#2895">
+                    <i class="bi bi-discord"></i>
                 </a>
             </li>
             <li>
-                <a target="_blank" href="">
+                <a target="_blank" href="https://t.me/Sanekx_Arcs">
                 <i class="bi bi-telegram"></i>
                 </a>
             </li>
             <li>
-                <a target="_blank" href="#">
-                <i class="bi bi-instagram"></i>
+                <a target="_blank" href="mailto: oleksandr.dzisiak@gmail.com">
+                <i class="bi bi-envelope-at"></i>
+                </a>
+            </li>
+            <li>
+                <a target="_blank" href="https://wa.me/qr/DISE7CCEVP5JJ1">
+                <i class="bi bi-whatsapp"></i>
                 </a>
             </li>
             <li>
-                <a target="_blank" href="https://twitter.com/sanekxarcs">
+                <a target="_blank" href="https://m.me/sanekx.arcs">
                 <i class="bi bi-messenger"></i>
                 </a>
             </li>

diff --git a/style.css b/style.css
@@ -187,6 +187,9 @@ p {
   -webkit-border-radius: 50%;
   border-radius: 50%;
 }
+.profile-social-links li a:hover {
+  color: red;
+}
 
 .profile-social-links li a i {
   position: relative;
@@ -198,6 +201,60 @@ p {
   width: 24px;
 }
 
+.cv-download {
+  margin: 0 !important;
+  color: #e56b6f;
+}
+.cv-download:hover {
+  margin: 0 !important;
+  color: #ff0008;
+}
+
+.tooltip {
+  position: relative;
+}
+
+/* Tooltip box */
+.tooltip:before {
+  content: attr(data-tooltip); 
+  position: absolute;
+  width: 80px;
+  background-color: #062b45;
+  color: #fff;
+  text-align: center;
+  padding: 5px;
+  line-height: 1.2;
+  border-radius: 6px;
+  z-index: 1;
+  opacity: 0;
+  transition: opacity .6s;
+  bottom: 125%;
+  left: 100%;
+  margin-left: -60px;
+  font-size: 0.4em;
+  visibility: hidden;
+}
+
+/* Tooltip arrow */
+.tooltip:after {
+  content: "";
+  position: absolute;
+  bottom: 75%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  opacity: 0;
+  transition: opacity .6s;
+  border-color: #062b45 transparent transparent transparent;
+  visibility: hidden;
+}
+
+.tooltip:hover:before, .tooltip:hover:after {
+  opacity: 1;
+  visibility: visible;
+}
+
 @-webkit-keyframes init {
   0% {
     width: 0px;
@@ -328,7 +385,7 @@ p {
     -webkit-border-radius: 4px;
   }
   100% {
-    width: 480px;
+    width: 500px;
     height: 300px;
     background: #FFFFFF;
     -webkit-border-radius: 4px;
@@ -343,7 +400,7 @@ p {
     border-radius: 4px;
   }
   100% {
-    width: 480px;
+    width: 500px;
     height: 300px;
     background: #FFFFFF;
     border-radius: 4px;
@@ -479,7 +536,7 @@ p {
     }
     100% {
       width: 300px;
-      height: 480px;
+      height: 500px;
       background: #FFFFFF;
       -webkit-border-radius: 10px;
     }
@@ -493,7 +550,7 @@ p {
     }
     100% {
       width: 300px;
-      height: 480px;
+      height: 500px;
       background: #FFFFFF;
       border-radius: 10px;
     }