Update: Create Blog Section

DiegoReports · May 7, 2024 · 77cbffc · 77cbffc
1 parent f3b1c4b
commit 77cbffc
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 12 deletions.
diff --git a/dist/output.css b/dist/output.css
@@ -1003,15 +1003,15 @@ video {
 }
 
 .bg-departments {
-  background-image: url('../assets/img/departments/bg.svg');
+  background-image: url(../assets/img/departments/bg.svg);
 }
 
 .bg-services {
-  background-image: url('../assets/img/services/services.svg');
+  background-image: url(../assets/img/services/bg.svg);
 }
 
 .bg-testimonials {
-  background-image: url('../assets/img/testimonials/testimonials.svg');
+  background-image: url(../assets/img/testimonials/bg.svg);
 }
 
 .bg-cover {
@@ -1089,6 +1089,16 @@ video {
   padding-bottom: 6px;
 }
 
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
 .pb-4 {
   padding-bottom: 1rem;
 }
@@ -1148,6 +1158,10 @@ video {
   text-transform: uppercase;
 }
 
+.italic {
+  font-style: italic;
+}
+
 .leading-\[190\%\] {
   line-height: 190%;
 }
@@ -1195,6 +1209,10 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.underline {
+  text-decoration-line: underline;
+}
+
 .shadow-2xl {
   --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
   --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);

diff --git a/index.html b/index.html
@@ -722,24 +722,66 @@ <h2 class=" blog__title h2 mb-[50px] text-center xl:text-left">Nossos posts rece
             <!-- badge -->
             <div
               class="bg-accent-tertiary absolute bottom-0 left-0 text-white text-base tracking-[2.24px] font-medium uppercase py-[6px] px-[18px]">
-              Medical</div>
+              Alimentação</div>
           </div>
           <!-- text -->
-          <div>
+          <div class="px-5 py-6">
             <!-- date -->
-            <div>Jan 2, 2023</div>
-            <h4>10 alimentos á evitar para a saúde do coração</h4>
+            <div>Jan 2, 2024</div>
+            <h4 class="h4 mb-[10px]">10 alimentos á evitar para a saúde do coração</h4>
             <!-- description -->
-            <p></p>
+            <p class="font-light">É normal sentir ansiedade, preocupação e tristeza sempre que você é diagnosticado com
+              uma condição que
+              certamente...
+              <a href="#" class="italic underline text-[#4c5354]">Leia mais</a>
+            </p>
           </div>
         </div>
         <!-- post 2 -->
-        <div>
-          post 2
+        <div class="blog__post max-w-[420px] shadow-custom2 rounded-[10px] overflow-hidden cursor-pointer group">
+          <!-- img -->
+          <div class="relative overflow-hidden">
+            <img class="group-hover:scale-110 transition-all duration-500" src="./assets/img/blog/img-2.png"
+              alt="Imagem duas mãos formando um coração" />
+            <!-- badge -->
+            <div
+              class="bg-accent-tertiary absolute bottom-0 left-0 text-white text-base tracking-[2.24px] font-medium uppercase py-[6px] px-[18px]">
+              Hábitos</div>
+          </div>
+          <!-- text -->
+          <div class="px-5 py-6">
+            <!-- date -->
+            <div>Mar 19, 2024</div>
+            <h4 class="h4 mb-[10px]">Benefícios da caminhada para você e sua Família</h4>
+            <!-- description -->
+            <p class="font-light">Sabemos que desenvolver um novo hábito, não é uma tarefa fácil. Mas ficará surpreso de
+              saber que ...
+              <a href="#" class="italic underline text-[#4c5354]">Leia mais</a>
+            </p>
+          </div>
         </div>
         <!-- post 3 -->
-        <div>
-          post 3
+        <div class="blog__post max-w-[420px] shadow-custom2 rounded-[10px] overflow-hidden cursor-pointer group">
+          <!-- img -->
+          <div class="relative overflow-hidden">
+            <img class="group-hover:scale-110 transition-all duration-500" src="./assets/img/blog/img-3.png"
+              alt="Imagem duas mãos formando um coração" />
+            <!-- badge -->
+            <div
+              class="bg-accent-tertiary absolute bottom-0 left-0 text-white text-base tracking-[2.24px] font-medium uppercase py-[6px] px-[18px]">
+              Saúde</div>
+          </div>
+          <!-- text -->
+          <div class="px-5 py-6">
+            <!-- date -->
+            <div>Dez 4, 2024</div>
+            <h4 class="h4 mb-[10px]">Fique atento a sua saúde bucal.</h4>
+            <!-- description -->
+            <p class="font-light">Todos nós desejamos exibir um belo e harmonioso sorriso. Que medidas preventivas
+              pode-se adotar para ...
+              <a href="#" class="italic underline text-[#4c5354]">Leia mais</a>
+            </p>
+          </div>
         </div>
       </div>
     </div>