finalização de estilo

andressablima · Jun 8, 2023 · a09ae22 · a09ae22
1 parent d711fed
commit a09ae22
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 19 deletions.
diff --git a/images/github.png b/images/github.png
diff --git a/images/linkedin.png b/images/linkedin.png
diff --git a/index.html b/index.html
@@ -10,7 +10,7 @@
   <link rel="stylesheet" href="./styles/index.css">
 </head>
 <body>
-  <header>
+  <header id="header">
     <img src="./images/logo1.png">
     <menu>
       <ul>
@@ -26,6 +26,7 @@
   <main class="content">
     <section id="testimonials-sec">
       <div class="container-slider">
+       <img class="patern" src="./images/pattern-bg.svg"> 
        <!--<button id="prev-button"><img src="./images/icon-prev.svg"></button> Comentado por conta de bug no js que ainda nao corrigi-->
         <div class="container-test">
           <div class="testimonials">
@@ -90,7 +91,7 @@ <h3>Contact Us</h3>
           </div>
           <div class="full-box">
             <label for="coment">Coment</label>
-            <textarea id="coment" name="coment" rows="10" cols="67" placeholder="Tell us your suggestions, questions or concerns"></textarea>
+            <textarea id="coment" name="coment" rows="10" cols="50" placeholder="Tell us your suggestions, questions or concerns"></textarea>
           </div>
           <div class="full-box">
             <input type="submit" id="btn-submit" value="SEND">
@@ -101,9 +102,11 @@ <h3>Contact Us</h3>
   </main>
 
   <footer>
-    <div class="attribution">
-      Coded by <a href="https://www.linkedin.com/in/andressablima/">Andressa Lima</a> | 
-      <a href="https://github.com/andressablima">GitHub </a>
+    <a href="#header"><img class="bot-logo" src="./images/logo1.png"></a> 
+    <div class="attribution">Coded by: Andressa Lima</div>
+    <div cladd="icons">
+      <a href="https://www.linkedin.com/in/andressablima/"><img class="linkedin" src="./images/linkedin.png"></a>
+      <a href="https://github.com/andressablima"><img class="github" src="./images/github.png"></a>
     </div>
   </footer>  
 

diff --git a/styles/index.css b/styles/index.css
@@ -27,7 +27,7 @@ header{
     align-items: center;
 }
 
-header img{
+header img, .bot-logo{
     width: auto;
     height: 50px;
 }
@@ -48,23 +48,28 @@ ul > li a{
 ul > li a:hover{
     color: #2E6D84; 
 }
-/* Banner */
+/* Banner #2E6D84*/
 .banner{
     grid-area: banner;
 }
 #banner{
     width: 100vw;
 }
+
 /* Slider CSS */
+section{
+    margin-top: 5vh;
+}
 .container-slider{
     display: flex;
     width: 100%;
     height: 100vh;
+    position: relative;
     align-items: center;
     justify-content: center;
     gap: 1rem;
     grid-area: slider;
-    background-color: #2E6D84;
+    background-color: white; 
 }
 
 .container-test{
@@ -74,6 +79,8 @@ ul > li a:hover{
     justify-content: center;
     width: 500px;
     height: 80vh;
+    left: -30vw;
+
 }
 #test{
     position: absolute;
@@ -85,7 +92,7 @@ ul > li a:hover{
     width: 300px;
     height: 300px;
     position: relative;
-    left: 8vw;
+    left: 3vw;
     border-radius: 15px;
 }
 .slider{
@@ -101,9 +108,11 @@ ul > li a:hover{
 }
 
 #prev-button, #next-button{
-    width: 20px;
-    height: 20px;
-    border: none;
+    width: 40px;
+    height: 40px;
+    position: relative;
+    left: -25vw;
+    border: none ;
     background-color: transparent;
     cursor: pointer;
 }
@@ -114,17 +123,27 @@ ul > li a:hover{
 }
 
 .testm{
-    color: white;
+    color: black;
     font-weight: 500;
     line-height: 3.5vh;
+    width: 27vw;
+    margin-top: 5px;
 }
 .info{
-    color:white;
+    color:black;
     padding-top: 8px;
 }
 .info span{
     font-weight: 700;
 }
+
+.patern{
+   transform: rotate(-60deg); 
+   position: relative;
+   width: 100%;
+   height: fit-content;
+   left: 13vw;
+} 
 /* Sidebar */
 aside{
     margin: 5px 20px;
@@ -183,12 +202,20 @@ textarea[id="coment"]:focus{
     border: none;
     border-bottom: 2px solid hsl(240, 52%, 49%);
 }
-.attribution { 
-    font-size: 11px; 
-    text-align: center; 
+
+footer{
     grid-area: footer;
+    display: flex;
+    align-items: center;
+    justify-content: center ;
+    font-size: 9px;
+}
+.linkedin, .github{
+    gap: 5px;
+    width: 18px;
 }
-.attribution a { 
-    color: hsl(228, 45%, 44%); 
+
+.attribution{
+    margin: 6px;
 }