Realtor last commit

css/components/page/contact.css

@@ -0,0 +1,27 @@
+.contact-form-container-padding {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    width: 100%;
+    padding: 100px 0px;
+}
+.contact-form-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    height: 300px;
+    width: 80%;
+    padding: 20px;
+
+    background: #FCFCFC;
+    box-shadow: 0px 14px 16px rgba(0, 0, 0, 0.06);
+    border-radius: 15px;
+}
+.contact-form-title {
+    font-size: 22px;
+    font-weight: 700;
+    color: #14142B;
+}

css/components/page/results.css

@@ -1,6 +1,6 @@
 .results-container-padding {
     width: 100%;
-    
+    padding: 30px 0px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -9,24 +9,28 @@
 }
 .results-container {
     display: grid;
-    gap: 20px;
+    gap: 20px 10px;
     width: 90%;
     grid-template-columns: 1fr 1fr;
     
     grid-template-rows: repeat(6, calc((90vw / 2) - 20px));
 }
 .result-square {
+    border-radius: 10px;
     background-color: red;
 }
 .result-portrait {
+    border-radius: 10px;
     background-color: blue;
     grid-row: span 2;
 }
 .result-landscape {
+    border-radius: 10px;
     background-color: green;
     grid-column: span 2;
 }
 .result-instagram {
+    border-radius: 10px;
     background-color: yellow;
     grid-column: span 2;
     grid-row: span 2;

index.html

@@ -17,6 +17,7 @@
         <link data-trunk type="text/css" href="css/components/page/agency.css" rel="css" />
         <link data-trunk type="text/css" href="css/components/page/search.css" rel="css" />
         <link data-trunk type="text/css" href="css/components/page/results.css" rel="css" />
+        <link data-trunk type="text/css" href="css/components/page/contact.css" rel="css" />
         
 
         <link data-trunk href="assets/text/robots.txt" rel="copy-file"/>

src/components/page/contact.rs

@@ -2,5 +2,13 @@ use yew::prelude::*;
 
 #[function_component(ContactSection)]
 pub fn contact_section() -> Html {
-    html! {}
+    html! {
+        <div class={"contact-form-container-padding"}>
+            <div class={"contact-form-container"}>
+                <div class={"contact-form-title"}>
+                    {"Contáctame"}
+                </div>
+            </div>
+        </div>
+    }
 }