social media icons

dezoliveira · Feb 2, 2024 · 2cfe878 · 2cfe878
1 parent 57707c9
commit 2cfe878
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 9 deletions.
diff --git a/css/style.css b/css/style.css
@@ -14,6 +14,10 @@ a {
   text-decoration: none;
 }
 
+body {
+  position: relative;
+}
+
 .navbar {
   display: flex;
   align-items: center;
@@ -27,6 +31,10 @@ a {
 
 .navbar .logo {
   color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
 }
 
 .navbar ul {
@@ -407,6 +415,8 @@ section.contact {
 } 
 
 footer.footer {
+  position: relative;
+
   display: flex;
   align-items: center;
   justify-content: center;
@@ -418,20 +428,31 @@ footer.footer {
   color: #fff;
 }
 
+.float-button {
+  position: fixed;
+  right: 30px;
+  bottom: 30px;
+}
+
+.float-button i {
+  font-size: 80px;
+  color: #22c55e;
+  background-color: #fff;
+  transition: 0.2s all;
+}
+
+.float-button i:hover {
+  cursor: pointer;
+  font-size: 85px;
+}
+
 .select-box select:disabled {
   padding: 8px 12px;
   border: 1px solid;
   border-radius: 5px;
   background-color: crimson;
 }
 
-/* .select-box select {
-  -moz-appearance:none; 
-  -webkit-appearance:none;
-  appearance:none;
-}
-*/
-
 .select-box i {
   font-size: 45px;
 }

diff --git a/index.html b/index.html
@@ -12,11 +12,14 @@
   <!-- <div class="teste"></div> -->
   <navbar class="navbar">
     <div class="logo">
+      <a href="https://www.linkedin.com/in/dezoliveira" target="_blank">
+        <i class="fa-brands fa-linkedin"></i>
+        Linkedin
+      </a>
       <a href="https://www.github.com/dezoliveira" target="_blank">
         <i class="fa-brands fa-github-alt"></i>
-        @MyGit
+        @dezoliveira
       </a>
-      <!-- <i class="fa-regular fa-hand-back-fist"> -->
     </div>
     <nav>
       <ul>
@@ -70,6 +73,13 @@ <h1 class="title">Contato</h1>
   <footer class="footer">
     <p>Powered by @githubAPI</p>
   </footer>
+  <div class="float-button">
+    <a 
+      href="https://api.whatsapp.com/send?phone=+5519992282130&text=Olá Andrés!"
+      target="blank">
+      <i class="fa-brands fa-square-whatsapp"></i>
+    </a>
+  </div>
   <script src="script.js"></script>
   <script src="https://smtpjs.com/v3/smtp.js"></script>
 </body>