feat: Create the navigation button component

brunop27 · Jun 11, 2024 · a9afe16 · a9afe16
1 parent 8875dc0
commit a9afe16
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 1 deletion.
diff --git a/css/components/button-arrow.css b/css/components/button-arrow.css
@@ -0,0 +1,26 @@
+.button-arrow{
+    width: 50px;
+    height: 50px;
+    background-color: #F25A70;
+    box-shadow: 5px 5px 0px #000;
+    cursor: pointer;
+}
+
+.button-arrow .content{
+    display: none;
+}
+
+.button-arrow::before{
+    content: '';
+    display: block;
+    box-sizing: border-box;
+    width: 15px;
+    height: 15px;
+    border: 20px solid transparent;
+    border-left: 28px solid #FFF;
+    transform: translateX(12px);
+}
+
+.button-arrow.-left::before{
+    transform: rotate(180deg) translateX(12px);
+}
diff --git a/index.html b/index.html
@@ -22,6 +22,7 @@
     <link rel="stylesheet" href="css/components/card-project.css">
     <link rel="stylesheet" href="css/components/wrapper-card.css">
     <link rel="stylesheet" href="css/components/main-description.css">
+    <link rel="stylesheet" href="css/components/button-arrow.css">
 
 </head>
 <body>
@@ -177,8 +178,10 @@ <h2 class="main-title -second">Projetos</h2>
     </section>
     <section class="main-section -bgSecond -bdBlack">
         <h2 class="main-title -second">Sobre</h2>
+        <button class="button-arrow -left"><span class="content">Voltar</span></button>
+        <button class="button-arrow -right"><span class="content">Avançar</span></button>
         <p class="main-description">Estudante de programação web, hoje, trabalho como freelancer, colaborando com projetos terceiros e pessoais. Minhas fortes habilidades se compoem com FrontEnd(Angular, JavaScript) e backend(MySql, json-server)</p>
-
+        
     </section>
 </body>
 </html>