Need help on this personal project

1

image
image1366×768 102 KB

On this page I want that the pink and yellow are extended equally. This was the idea that I was looking for. I just want a guide to what Im doing wrong.

image
image1366×768 96.4 KB

This is my codification.

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Cabrera Realty</title>
  <!--Link for the nav-img style-->
  <link rel="stylesheet" href="stylesheet.css">
  <!--Link for the page style-->
  <link rel="stylesheet" href="contactostyle.css">
  <!--Link for icons-->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
</head>

<!--Start coding from img & nav-bar -->
<body>
    <nav>
      <div class="menu">
        <div class="logo">
          <a href="inicio.html">Cabrera Realty</a>
        </div>
        <ul>
          <li><a href="inicio.html">Inicio</a></li>
          <li><a href="agente.html">Agente</a></li>
          <li><a href="galeria.html">Galeria</a></li>
          <li><a href="contacto.html">Contacto</a></li>
        </ul>
      </div>
    </nav>
    <div class="img"></div>
    <div class="center">
      <div class="title">Create Amazing Memories</div>
      <div class="sub_title">Contacto</div>
        </div>
<!--End the coding from img & nav-bar -->


<div class="reservacion">
  <div class="contacto">
    <p>Estas listo para obtener una lista o no esta desidido
      de lo que necesitas? Estoy disponible para ayudar
      en cualquier etapa en la que se encuentre</p>
      <h2>Marie Cabrera</h2>
        <p>email@gmail.com</p>
          <p>XXX-XXX-XXXX</p>

    <!--(Start) Icons Links-->
    <a href="https://facebook.com/MarielynnetteCabrera"
      <i class="bi bi-facebook"></i>
    </a>
      <br>
    <a href="https://instagram.com/cabrerarealty1"
      <i class="bi bi-instagram"></i>
    </a>
      <br>
    <a href="https://wa.me/17877105960"
      <i class="bi bi-whatsapp"></i>
    </a>
      <br>
    <!--(End) Icons Links-->
  </div>

<!-- (start) Form area -->
  <div class="appointment">
    <div class="reservaciones">
     <h2>Reservaciones</h2>
     <p>Favor de dejar su informacion y me pondre en contacto con usted.</p>
    </div>
   <div class="container">
     <form action="/action_page.php">
       <label for="fname">Nombre</label>
       <input type="text" id="fname" name="firstname" placeholder="Nombre">

       <label for="lname">Apellidos</label>
       <input type="text" id="lname" name="lastname" placeholder="Apellidos">

       <label for="tel">Numero de Telefono</label>
       <input type="tel" id="phone" placeholder="Numero de Telefono">

       <label for="fecha">Cita</label>
       <input type="datetime-local" id="appointment">

       <input type="submit" value="Submit">
     </form>
    </div>
  </div>
</div>
<!-- (end) Form area -->


</body>
</html>

And here is the CSS

/*(Start coding for form)*/
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}
input[type=tel], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=datetime-local], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;

  max-width: 500px;
}

.appointment{
  background-color:yellow;
}

.contacto{
  display: block;
  background-color: pink;
  max-width: 50%;
  padding-left: 25px;
}

a{
  cursor: pointer;
}
/*Make both area align beside the other*/
.reservacion{
  display: flex;
}
.reservaciones {
  text-align: center;
}
2

It would be helpful if you told us how the sections are called within the code.
Anyway, if you want objects to have a specific width or height, you should specify those.
You have a max-width for the pink bock, which it only achieves because you wrote some long text in there and thus it’s expanding to fit it in, but ends at max-width.
The yellow block itself has no width given, so it just grows as big as to fit it’s content.

Give both a width of 50% and they should cover half the screen.
Keep in mind it will look horrible on mobile devices and it’s recommended you at least look into Bootstrap to create a more responsive design.
There you would also find a grid-system, which would allow to achieve the same effect, while also having some options so for example on mobile devices, the block would rearrange themself to no longer be side by side.

As you seem to be a beginner with these, I highly recommend going through the FCC curriculum to learn these methods.

1 Like
3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.