Feat: Added floating animal pictures

Added floating pictures of animals and changed name logo from png to text.
PET-foundation · Aug 27, 2023 · 3b41c55 · 3b41c55
1 parent 3f3b156
commit 3b41c55
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 14 deletions.
diff --git a/images/cat1.png b/images/cat1.png
diff --git a/images/cat2.png b/images/cat2.png
diff --git a/images/dog1.png b/images/dog1.png
diff --git a/images/dog2.png b/images/dog2.png
diff --git a/index.html b/index.html
@@ -10,7 +10,8 @@
 </head>
 <body>
     <header>
-        <img src="images/PataAmiga.png" alt="Pata Amiga">
+        <span style="color: #0CBFDE">PATA </span>
+        <span style="color: #FEDD59">AMIGA</span>
     </header>
     <section id="presentation">
         <div>
@@ -26,17 +27,17 @@
             <input type="button" value="Web Site" id="webSite">
         </div>
         <div id="catchphrase">
-            <p>
-                😊 Tornando a jornada para encontrar seu fiel amigo mais simples e amorosa 😊
-            </p>
+
+        </div>
+        <div>
+            <img style="width: auto;" class="floatText" src="images/dog1.png" alt="">
         </div>
     </section>
     <section id="about">
         <div id="cards">
-            <div id="card" data-aos="fade-up" data-aos-delay="50" data-aos-duration="1000">
-                <h1>FUNCIONALIDADES</h1>
+            <div class="floatText" id="cat1" data-aos="fade-up" data-aos-delay="50" data-aos-duration="1000">
                 <p>
-                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque illum quos dolore praesentium eius quia, repellendus autem, in quibusdam explicabo earum voluptatem voluptatum mollitia, reprehenderit enim sapiente aperiam saepe ratione.
+                    Simples, intuitivo e acessível!
                 </p>
             </div>
             <div id="card" data-aos="fade-up" data-aos-delay="50" data-aos-duration="1000">
@@ -46,6 +47,19 @@ <h1>USABILIDADE</h1>
                 </p>
             </div>
         </div>
+        <div id="cards">
+            <div id="card" data-aos="fade-up" data-aos-delay="50" data-aos-duration="1000">
+                <h1>FUNCIONALIDADES</h1>
+                <p>
+                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque illum quos dolore praesentium eius quia, repellendus autem, in quibusdam explicabo earum voluptatem voluptatum mollitia, reprehenderit enim sapiente aperiam saepe ratione.
+                </p>
+            </div>
+            <div class="floatText" id="cat2" data-aos="fade-up" data-aos-delay="50" data-aos-duration="1000">
+                <p>
+                    Simples, intuitivo e acessível!
+                </p>
+            </div>
+        </div>
     </section>
 
     <section id="technologies">

diff --git a/style.css b/style.css
@@ -7,25 +7,30 @@
 * {
     margin: 0px;
     padding: 0px;
+
 }
 
 html, body {
     min-height: 100vh;
 }
 
 header {
+    font-family: "Bungee";
     background-color: #0CBFDE;
     text-align: center;
-    padding: 25px;
     border-radius: 0px 0px 20px 20px;
     border-bottom: 3px solid rgb(0, 0, 0);
+    -webkit-text-stroke-width: 2px;
+    -webkit-text-stroke-color: black;
+    text-shadow: 3px 3px black;
+    font-size: 45px;
 }
 
 section#presentation {
-    height: 450px;
     text-align: center;
     color: rgb(0, 0, 0);
     font-family: 'Bungee';
+    display: contents;
 }
 
 section#presentation > div > #paLogo{
@@ -45,6 +50,7 @@ input {
     text-align: center;
     text-decoration: none;
     display: inline-block;
+    margin: 8px;
 }
 
 input#documentation {
@@ -64,13 +70,12 @@ section#about{
     background-color: #FEDD59;
     border-top: 1px solid black;
     border-bottom: 1px solid black;
-    height: 450px;
+    height: 900px;
 }
 
-section#about{
-    border-top: 1px solid black;
-    border-bottom: 1px solid black;
-    height: 450px;
+section#about > *{
+    margin-left: 100px;
+    margin-right: 100px;
 }
 
 #cards {
@@ -113,6 +118,37 @@ section#about{
     border-radius: 0px 0px 8px 8px;
 }
 
+.floatText {
+    font-size: 32px;
+    line-height: 37px;
+    margin: auto;
+    border-radius: 10px;
+    height: 250px;
+    text-align: center;
+    font-family: 'Bungee';
+    width: 300px;
+    display: flex;
+    flex-direction: column;
+    color: #0CBFDE;
+    -webkit-text-stroke-width: 2px;
+    -webkit-text-stroke-color: black;
+    background-size: cover;
+    background-attachment: fixed;
+    background-position: bottom;
+    background-repeat: no-repeat;
+}
+
+.floatText#cat1 {
+    background-image: url(images/cat1.png);
+    background-size: 100%;
+}
+
+.floatText#cat2 {
+    background-image: url(images/cat2.png);
+    background-size: 100%;
+    background-position: center;
+}
+
 footer {
     font: normal 15pt arial;
     background-color: #0CBFDE;