Better contact page

FornesBorja · Jun 1, 2024 · d5064f8 · d5064f8
1 parent bb9a345
commit d5064f8
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 17 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -1,49 +1,69 @@
 @import url("https://fonts.googleapis.com/css2?family=Lobster+Two:ital,wght@0,400;0,700;1,400;1,700&display=swap");
+
 * {
-  padding: 0 ; 
+  padding: 0;
   margin: 0;
 }
-body{
+
+body {
   height: 100vh;
   width: 100vw;
 }
-#container {
+
+.btn-send {
+  background-color: #22223B;
+  color: #f2e9e4;
+}
+
+#content-contact-right {
+  background-color: #c9ada7;
+}
+
+.container-general {
   background-color: #c9ada7;
   height: 100vh;
   width: 100vw;
 }
-#description{
+
+#description {
   margin-top: 2em;
   background-color: #f2e9e4;
   border: 0.2em solid #4A4E69;
   border-radius: 1em;
 }
-#footer{
+
+#footer {
   border-radius: 1em;
 }
+
 #image {
   display: flex;
   align-items: center;
   justify-content: center;
 }
+
 .isabelline {
   background-color: #f2e9e4;
 }
+
 .lobster-two-regular {
   font-family: "Lobster Two", sans-serif;
   font-weight: 400;
   font-style: normal;
 }
+
 #local {
   width: 30vw;
   height: 30vh;
 }
+
 #main-logo {
   width: 2.5em;
   height: 2.5em;
 }
+
 #us {
   font-size: 2em;
   color: #22223b;
   text-shadow: -0.1em -0.3em 1em #9a8c98;
-}
+}
diff --git a/index.html b/index.html
@@ -15,7 +15,7 @@
     <title>Home</title>
   </head>
   <body>
-    <div id="container" class="d-flex flex-column">
+    <div class="container-general" class="d-flex flex-column">
       <nav class="navbar navbar-expand-lg isabelline">
         <div class="container-fluid">
           <a class="navbar-brand" href="#"

diff --git a/pages/contact.html b/pages/contact.html
@@ -12,7 +12,7 @@
 </head>
 
 <body>
-  <div id="container">
+  <div class="container-general d-flex flex-column ">
     <nav class="navbar navbar-expand-lg isabelline">
       <div class="container-fluid">
         <a class="navbar-brand" href="#"><img src="../imgs/logo.png" id="main-logo"></a>
@@ -30,10 +30,10 @@
         </div>
       </div>
     </nav>
-    <div id="content-contact" class="container-fluid d-flex flex-column">
+    <div id="content-contact" class="container-fluid h-100 ">
       <div class="row h-100">
         <div id="content-contact-left" class="col-md-12 col-lg-8 ">
-          <form class="row g-3">
+          <form class="row g-3 p-5">
             <div class="col-md-6">
               <label for="inputName4" class="form-label">Nombre</label>
               <input type="text" class="form-control" id="imputName4">
@@ -42,20 +42,22 @@
               <label for="inputEmail4" class="form-label">Email</label>
               <input type="email" class="form-control" id="inputEmail4">
             </div>
-            
+
             <div class="col-12">
               <label for="inputTelephone" class="form-label">Teléfono</label>
               <input type="number" class="form-control" id="inputTelephone" placeholder="+34">
             </div>
             <div class="col-12">
-              <button type="submit" class="btn btn-primary">Sign in</button>
+              <button type="submit" class="btn btn-send">Enviar</button>
             </div>
           </form>
         </div>
-        <div id="content-contact-right" class="col-lg-4">
-          <div id="text-contact">Mándanos tus datos si quieres que te resolvamos alguna duda, o contáctanos :
-            <div id="whatsapp">+34 000000000</div>
-            <div id="email">[email protected]</div>
+        <div id="content-contact-right" class="col-lg-4 ">
+          <div class="text p-5">
+            <div id="text-contact">Mándanos tus datos si quieres que te resolvamos alguna duda, o contáctanos :
+              <div id="whatsapp">+34 000000000</div>
+              <div id="email">[email protected]</div>
+            </div>
           </div>
         </div>
       </div>

diff --git a/pages/menu.html b/pages/menu.html
@@ -13,7 +13,7 @@
 </head>
 
 <body>
-  <div id="container">
+  <div class="container-general ">
     <nav class="navbar navbar-expand-lg isabelline">
       <div class="container-fluid">
         <a class="navbar-brand" href="#"><img src="../imgs/logo.png" id="main-logo"></a>