Feat: Functional "DOCUMENTAÇÃO" and "WEB SITE" buttons

The "DOCUMENTAÇÃO" and "WEB SITE" buttons became functional. The first downloads a .zip folder that contains the initial documentation for the main website and the second takes the user to the future main website which is still under construction.
PET-foundation · Aug 29, 2023 · 9929974 · 9929974
1 parent ac1ad5a
commit 9929974
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 13 deletions.
diff --git a/construction.html b/construction.html
@@ -3,9 +3,18 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>Pata Amiga</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="shortcut icon" href="images/favcon.png" type="image/x-icon">
 </head>
 <body>
-
+    <div class="adjustable-image" style="display: flex; align-items: center; justify-content: center; flex-wrap: wrap;">
+        <img src="images/gatoPedreiro.png" alt="">
+    </div>
+    <div style="display: flex; align-items: center; justify-content: center; flex-wrap: wrap;">
+        <a href="index.html" target="_self" >
+            <button id="webSite">← Voltar</button>
+        </a>
+    </div>
 </body>
-</html>
+</html>
diff --git a/documentation/documentation.zip b/documentation/documentation.zip
diff --git a/images/gatoPedreiro.png b/images/gatoPedreiro.png
diff --git a/index.html b/index.html
@@ -26,8 +26,12 @@
             </p>
         </div>
         <div class="button-container">
-            <input type="button" value="Documentação" id="documentation">
-            <input type="button" value="Web Site" id="webSite">
+            <a href="documentation/documentation.zip"_blank">
+                <button id="documentation">Documentação</button>
+            </a>
+            <a href="construction.html" target="_self">
+                <button id="webSite">Web Site</button>
+            </a>
         </div>
         <div>
             <img style="width: auto;" class="floatText" src="images/dog1.png" alt="">

diff --git a/style.css b/style.css
@@ -18,10 +18,6 @@ html, body {
     max-width: 100%;
 }
 
-img {
-    width: 100%;
-}
-
 header {
     background-color: #0CBFDE;
     border-radius: 0px 0px 20px 20px;
@@ -97,7 +93,7 @@ section#presentation > div > #paLogo {
     }
 }
 
-input {
+button {
     margin-top: 20px;
     font-family: 'Bungee';
     font-size: 10pt;
@@ -118,14 +114,24 @@ input {
     flex-wrap: wrap;
 }
 
-input#documentation {
+button#documentation {
     background-color: #0CBFDE;
 }
 
-input#webSite {
+#documentation:hover {
+    cursor: pointer;
+    background-color: #fedd598c;
+  }
+
+button#webSite {
     background-color: #FEDD59;
 }
 
+#webSite:hover {
+    cursor: pointer;
+    background-color: #0cbfde79;
+}
+
 section#about{
     background-color: #FEDD59;
     border-top: 1px solid black;
@@ -397,4 +403,24 @@ text-decoration: underline;
 
 a:visited { 
     color: black; 
-}
+}
+
+.adjustable-image {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    overflow: hidden; /* Impede que a imagem vaze */
+}
+
+.adjustable-image img {
+    max-width: 100%; /* A imagem terá no máximo a largura do seu contêiner */
+    height: auto; /* Mantém a proporção da imagem */
+}
+
+/* Ajuste para telas pequenas */
+@media (max-width: 767px) {
+    .adjustable-image img {
+        max-width: 90%; /* Ajuste o tamanho da imagem para telas pequenas */
+    }
+}