2º Commit

Finalização do Projeto - Término do HTML (Criação das Sections Health e Sponsors; Criação do Footer) - Término da Estilização CSS - Estilo responsivo para dispositivos FULL HD (1920 x 1080), HD (1024x768) e dispositivos com 750px de Largura.
Ollieveira · Jul 19, 2023 · 765b79c · 765b79c
1 parent ed24a75
commit 765b79c
Show file tree

Hide file tree

Showing 13 changed files with 494 additions and 65 deletions.
diff --git a/assets/americanas.png b/assets/americanas.png
diff --git a/assets/background-health-desktop.png b/assets/background-health-desktop.png
diff --git a/assets/background-health-mobile.png b/assets/background-health-mobile.png
diff --git a/assets/background-health.png b/assets/background-health.png
diff --git a/assets/background-relax-desktop.png b/assets/background-relax-desktop.png
diff --git a/assets/background-relax-mobile.png b/assets/background-relax-mobile.png
diff --git a/assets/background-relax.png b/assets/background-relax.png
diff --git a/assets/background-welcome-desktop.png b/assets/background-welcome-desktop.png
diff --git a/assets/background-welcome-mobile.png b/assets/background-welcome-mobile.png
diff --git a/assets/background-welcome.png b/assets/background-welcome.png
diff --git a/assets/havaianas.png b/assets/havaianas.png
diff --git a/index.html b/index.html
@@ -21,41 +21,116 @@
   </head>
   <body>
     <header>
-      <figure class="container">
-        <img
-          class="logo"
-          src="./assets/pata-logo.png"
-          alt="logo-da-pagina-pata-de-cachorro"
-        />
-        <h2>Fantastika</h2>
-      </figure>
-      <nav class="socialMedias">
-        <a href="#" target="_blank"><i class="ph ph-instagram-logo"></i></a>
-        <a href="#" target="_blank"><i class="ph-fill ph-youtube-logo"></i></a>
-        <a href="#" target="_blank"><i class="ph ph-whatsapp-logo"></i></a>
-      </nav>
-    </header>
-    <main>
-      <section class="welcome">
-        <h1>Boas vindas à nossa inauguração</h1>
-        <figure>
+      <section>
+        <figure class="container">
           <img
-            src="./assets/pata.png"
-            alt="pata-de-cachorro-do-banner-de-boas-vindas"
+            class="logo"
+            src="./assets/pata-logo.png"
+            alt="logo-da-pagina-pata-de-cachorro"
           />
+          <h2>Fantastika</h2>
         </figure>
+        <nav class="socialMedias">
+          <a href="#" target="_blank"><i class="ph ph-instagram-logo"></i></a>
+          <a href="#" target="_blank"
+            ><i class="ph-fill ph-youtube-logo"></i
+          ></a>
+          <a href="#" target="_blank"><i class="ph ph-whatsapp-logo"></i></a>
+        </nav>
+      </section>
+    </header>
+    <main>
+      <section class="welcome">
+        <div class="container">
+          <h1>Boas vindas à nossa inauguração</h1>
+          <figure>
+            <img
+              src="./assets/pata.png"
+              alt="pata-de-cachorro-do-banner-de-boas-vindas"
+            />
+          </figure>
+        </div>
       </section>
       <section class="relax">
-        <h2>Só banho e tosa?</h2>
-        <p>
-          O cuidado com seu cão é prioridade para nós. Possuímos toda estrutura
-          necessária para cuidar da saúde, higiene e bem estar emocional do seu
-          pet.
-        </p>
-        <input type="button" value="Fale conosco" />
+        <div class="container">
+          <h2>Só banho e tosa?</h2>
+          <p>
+            O cuidado com seu cão é prioridade para nós. Possuímos toda
+            estrutura necessária para cuidar da saúde, higiene e bem estar
+            emocional do seu pet.
+          </p>
+          <input type="button" value="Fale conosco" />
+        </div>
+      </section>
+      <section class="health">
+        <div class="container">
+          <h2>Mordomia Saudável</h2>
+          <p>
+            Temos um espaço dedicado a saúde e higiene canina, com ambientes
+            para interação social entre cães com período monitorado, massagem e
+            terapia.
+          </p>
+          <input type="button" value="Fale conosco" />
+        </div>
+      </section>
+      <section class="sponsors">
+        <div class="container">
+          <p>apoio:</p>
+          <figure>
+            <img src="./assets/havaianas.png" alt="logomarca-havaianas" />
+            <img src="./assets/americanas.png" alt="logomarcas-americanas" />
+          </figure>
+        </div>
       </section>
-      <section class="health"></section>
-      <section class="sponsors"></section>
     </main>
+    <footer>
+      <div class="container">
+        <section class="mobile-display">
+          <figure class="figure-container">
+            <img
+              class="footer-logo"
+              src="./assets/pata-logo.png"
+              alt="logo-da-pagina-pata-de-cachorro"
+              />
+              <h2>Fantastika</h2>
+          </figure>
+          <nav class="socialMedias">
+            <a href="#" target="_blank"><i class="ph ph-instagram-logo"></i></a>
+            <a href="#" target="_blank"
+              ><i class="ph-fill ph-youtube-logo"></i
+            ></a>
+            <a href="#" target="_blank"><i class="ph ph-whatsapp-logo"></i></a>
+          </nav>
+        </section>
+
+        <section class="services card">
+          <h3>Atendimento</h3>
+          <ul>
+            <li>Chat Virtual</li>
+            <li>WhatsApp</li>
+            <li>Telefone</li>
+            <li>Email</li>
+          </ul>
+        </section>
+        <section class="about card">
+          <h3>Sobre</h3>
+          <ul>
+            <li>Nosso trabalho</li>
+            <li>Infraestrutura</li>
+            <li>Nossas unidades</li>
+            <li>Especialistas</li>
+          </ul>
+        </section>
+        <section class="units card">
+          <h3>Unidades</h3>
+          <ul>
+            <li>Clínica RJ</li>
+            <li>Clínica SP</li>
+            <li>Clínica ES</li>
+            <li>Clínica SC</li>
+          </ul>
+        </section>
+      </div>
+    </footer>
   </body>
 </html>