colocando borda animada no card sociais

rickreisme · Mar 25, 2024 · 1c96b94 · 1c96b94
1 parent c376b79
commit 1c96b94
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 15 deletions.
diff --git a/assets/styles/contato-footer-scroll.css b/assets/styles/contato-footer-scroll.css
@@ -18,16 +18,19 @@
   .colunas {
     display: flex;
     flex-direction: row;
-    justify-content: space-evenly;
-    margin: 0 7%;
+    justify-content: space-between;
+    margin: 10%;
     align-items: center;
+
   }
 
   .colunaE {
+    flex: 1;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    margin: 0 10px;
   }
 
   .colunaE h3 {
@@ -41,6 +44,33 @@
     animation-timeline: view();
     animation-range: cover 0% cover 40%;
   }
+
+  .colunaM{
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: 0 10px;
+  }
+
+  .colunaM h3{
+    font-size: 17px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    color: #FFF;
+    text-align: center;
+  }
+
+  .colunaD{
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: 0 10px;
+  }
 
   .btn6 {
     display: flex;
@@ -80,6 +110,7 @@
 
   .sociais {
     display: flex;
+    position: relative;
     flex-direction: column;
     align-items: center;
     justify-content: center;
@@ -92,6 +123,25 @@
     animation: appear3 forwards;
     animation-timeline: view();
     animation-range: cover 0% cover 50%;
+    overflow: hidden;
+  }
+
+  .sociais::before {
+    content: "";
+    position: absolute;
+    background-color: #4dff00;
+    width: 480px;
+    height: 150px;
+    border-radius: 50px;
+    animation: barra 6s linear infinite normal none running;
+  }
+
+  .sociais::after {
+    content: "";
+    position: absolute;
+    background: var(--verde-quaternario);
+    inset: 4px;
+    border-radius: 43px;
   }
 
   .sociais h3 {
@@ -100,7 +150,7 @@
     font-weight: 600;
     line-height: normal;
     padding-bottom: 20px;
-    ;
+    z-index: 1;
   }
 
   .redes {
@@ -112,6 +162,7 @@
 
   .redes a {
     cursor: pointer;
+    z-index: 1;
   }
 
   #gith,
@@ -134,12 +185,8 @@
   #avaRick {
     display: flex;
     width: 350px;
-    padding: 16.884px 23.052px 0px 21.828px;
     justify-content: center;
     align-items: center;
-    animation: appear2 forwards;
-    animation-timeline: view();
-    animation-range: cover 0% cover 50%;
   }
 
   footer {

diff --git a/assets/styles/intro-sobre.css b/assets/styles/intro-sobre.css
@@ -101,20 +101,40 @@
 
   .btn {
     display: flex;
+    position: relative;
     flex-direction: row;
     align-items: center;
     justify-content: space-around;
     padding-left: 10%;
-    width: 140px;
-    height: 33px;
+    width: auto;
+    height: 40px;
     border-radius: 19.5px;
-    background: var(--verde-quaternario);
+    background: #187618;
     box-shadow: 0px 4px 1px 0px #FFF;
     cursor: pointer;
     transition: background-color 0.5s ease, color 0.5s ease, width 0.5s ease, height 0.5s ease;
     text-decoration: none;
+    overflow: hidden;
   }
-
+
+  .btn::before{
+    content: "";
+    position: absolute;
+    background-color:  #4dff00;
+    width: 300px;
+    height: 40px;
+    border-radius: 30px;
+    animation: 6s linear 0s infinite normal none running barra;
+  }
+
+  .btn::after{
+    content: "";
+    position: absolute;
+    background: var(--verde-quaternario);
+    inset: 3px;
+    border-radius: 30px;
+  }
+
   .btn:hover {
     background-color: var(--verde-cinco);
     box-shadow: 0px 3px 1px 0px #FFF;
@@ -128,4 +148,9 @@
     text-align: center;
     padding-left: 10px;
     transition: color 0.5s ease;
+    z-index: 1;
+  }
+
+  .btn i{
+    z-index: 1;
   }
diff --git a/index.html b/index.html
@@ -79,7 +79,7 @@ <h2 class="h2s">&#123;rickreisme&#47;<span>sobre</span>&#125;</h2>
 
         <a class='btn' href="https://flowcv.com/resume/di16gfcff3" target="_blank">
           <i class="fa-solid fa-arrow-up-right-from-square fa-xs" style="color: #ffffff;"></i>
-          <h2>Currículo</h2>
+          <h2>Veja o meu Currículo</h2>
         </a>
       </div>
 
@@ -260,7 +260,7 @@ <h2>&#123;rickreisme&#47;<span>contato</span>&#125;</h2>
 
       <div class='colunas'>
         <div class='colunaE'>
-          <h3>
+          <h3 class="estou">
             Estou procurando oportunidades no mercado de <br />
             trabalho, entre em contato comigo por e-mail clicando no <br>
             botão abaixo ou pelo LinkedIn para propostas.<br />
@@ -270,7 +270,7 @@ <h3>
           <a class='btn6' href='mailto:[email protected]' target='_blank' rel="noreferrer">
             <h4>Enviar Mensagem</h4>
           </a>
-
+          
           <div class='sociais'>
             <h3>Me acompanhe nas redes sociais</h3>
             <div class='redes'>
@@ -293,7 +293,12 @@ <h3>Me acompanhe nas redes sociais</h3>
           </div>
         </div>
 
-        <img src="./assets/SVGs/AvatarMaker.svg" id='avaRick'></img>
+        <div class="colunaM">
+        </div>
+
+        <div class="colunaD">
+          <img src="./assets/SVGs/AvatarMaker.svg" id='avaRick'></img>
+        </div>
       </div>
     </div>
   </main>