Repository: dianadeayer/codespaces-blank
Pull request #1: Buttons and contact photo
Author: login: dianadeayer
Created: 2025-04-15T00:08:29Z | Merged: 2025-04-25T00:15:05Z

Added save button, favorite icon and contact photo.
Added flex box to buttons and fixed the style.

![Screenshot 2025-04-15 at 17-02-38 Formulario](https://github.com/user-attachments/assets/1e043b7b-dc8b-42a4-a818-5efeabeaaca2)




Diff:
diff --git a/index.html b/index.html
index 332f636..4ea439a 100644
--- a/index.html
+++ b/index.html
@@ -1,10 +1,178 @@
 <!DOCTYPE html>
 <html lang="en">
-  <link rel="stylesheet" href="style.css" />
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Formulario</title>
+    <link rel="stylesheet" href="style.css" />
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet"
+    />
   </head>
 
-  
\ No newline at end of file
+  <body>
+    <div class="container">
+      <div class="form-container">
+        <form class="my-form">
+          <!-- header -->
+          <div class="form-header">
+            <div class="back-button">
+              <span class="material-icons">arrow_back</span>
+            </div>
+            <div class="form-save">
+              <span class="material-icons">star</span>
+              <button type="button" class="btn-save">Save</button>
+            </div>
+          </div>
+
+          <!-- user pic -->
+          <div class="contact-photo-container">
+            <div class="contact-photo">
+              <img
+                class="contact-photo"
+                src="https://www.gstatic.com/identity/boq/profilepicturepicker/photo_silhouette_e02a5f5deb3ffc173119a01bc9575490.png"
+                alt="Contact Photo"
+                data-iml="8656"
+              />
+              <div class="photo-add">
+                <button class="btn-photo">
+                  <span class="material-icons">add</span>
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <!-- nombre -->
+          <div class="form-row">
+            <div class="input-group">
+              <span class="material-icons">person</span>
+              <div class="floating-label-container">
+                <input type="text" id="first-name" placeholder="" required />
+                <label for="first-name">First name</label>
+              </div>
+            </div>
+          </div>
+
+          <!-- apellidos -->
+          <div class="form-row">
+            <div class="input-group">
+              <span class="material-icons empty-icon"></span>
+              <div class="floating-label-container">
+                <input type="text" id="last-name" placeholder="" required />
+                <label for="las-name">Last Name</label>
+              </div>
+            </div>
+          </div>
+
+          <!-- segunda fila -->
+          <div class="form-row">
+            <div class="input-group">
+              <span class="material-icons">domain</span>
+              <div class="floating-label-container">
+                <input type="text" id="company" placeholder="" required />
+                <label for="company">Company</label>
+              </div>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="input-group">
+              <span class="material-icons empty-icon"></span>
+              <div class="floating-label-container">
+                <input type="text" id="job-title" placeholder="" />
+                <label for="job-title">Job Title</label>
+              </div>
+            </div>
+          </div>
+
+          <div class="form-row">
+            <div class="input-group">
+              <span class="material-icons">mail</span>
+              <div class="floating-label-container">
+                <input type="email" id="email" placeholder="" required />
+                <label for="email">Email</label>
+              </div>
+            </div>
+          </div>
+          <div class="add-buttons">
+            <button type="button" class="btn-secondary">
+              <span class="material-icons">add</span>Add Email
+            </button>
+          </div>
+
+          <!-- tercera fila -->
+          <div class="form-row">
+            <div class="input-group phone-group">
+              <span class="material-icons">call</span>
+              <div class="floating-label-select">
+                <select class="country-code" id="country-code" required>
+                  <option value="MX">🇲🇽 +52</option>
+                  <option value="US">🇺🇸 +1</option>
+                  <option value="GB">🇬🇧 +44</option>
+                </select>
+              </div>
+              <div class="floating-label-container">
+                <input type="tel" id="phone" placeholder=" " required />
+                <label for="phone">Phone Number</label>
+              </div>
+            </div>
+          </div>
+
+          <div class="add-buttons">
+            <button type="button" class="btn-secondary">
+              <span class="material-icons">add</span>Add Phone
+            </button>
+            <button type="button" class="btn-secondary">
+              <span class="material-icons">location_on</span>Add Address
+            </button>
+          </div>
+
+          <div class="form-row">
+            <div class="input-group">
+              <span class="material-icons">cake</span>
+              <div class="floating-label-select">
+                <select id="month" required>
+                  <option value="" disabled selected hidden>Month</option>
+                  <option>January</option>
+                  <option>February</option>
+                  <option>March</option>
+                  <option>April</option>
+                  <option>May</option>
+                  <option>June</option>
+                  <option>July</option>
+                  <option>August</option>
+                  <option>September</option>
+                  <option>October</option>
+                  <option>November</option>
+                  <option>December</option>
+                </select>
+              </div>
+            </div>
+            <div class="input-group">
+              <div class="floating-label-container">
+                <input type="text" id="day" placeholder="" />
+                <label for="day">Day</label>
+              </div>
+            </div>
+            <div class="input-group">
+              <div class="floating-label-container">
+                <input type="text" id="year" placeholder="" />
+                <label for="year">Year</label>
+              </div>
+            </div>
+          </div>
+
+          <div class="form-row">
+            <div class="input-group">
+              <span class="material-icons">description</span>
+              <div class="floating-label-container">
+                <textarea id="notes" placeholder=""></textarea>
+                <label for="notes">Notes</label>
+              </div>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..4f8ea42
--- /dev/null
+++ b/style.css
@@ -0,0 +1,303 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --primary-color: #1a73e8;
+  --light-bg: #f1f3f4;
+  --border-color: #dadce0;
+  --text-color: #202124;
+  --font-family: "Roboto", sans-serif;
+}
+
+body {
+  font-family: var(--font-family);
+  background-color: #f5f5f5;
+}
+
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.form-container {
+  background: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  width: 100%;
+  max-width: 500px;
+}
+
+/*header*/
+.form-header {
+  align-items: center;
+  background-color: white;
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  top: 0;
+  position: sticky;
+  z-index: 1;
+}
+
+.back-button {
+  cursor: pointer;
+}
+
+.btn-save {
+  background-color: #0b57d0;
+  color: #f5f5f5;
+  padding: 10px 15px;
+  border: none;
+  border-radius: 9999px;
+  cursor: pointer;
+  will-change: opacity;
+}
+
+.contact-photo {
+  border-radius: 50%;
+  cursor: pointer;
+  height: 162px;
+  width: 162px;
+}
+
+.my-form {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.form-row {
+  display: flex;
+  gap: 10px;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.photo-add {
+  line-height: inherit;
+  position: relative;
+}
+
+.btn-photo {
+  background-color: #0b57d0;
+  border-radius: 9999px;
+  color: #fff;
+  cursor: pointer;
+  border: none;
+  position: absolute;
+  height: 48px;
+  bottom: 0;
+  right: 0;
+  width: 48px;
+}
+
+.btn-photo .material-icons {
+  font-size: 28px;
+  color: white;
+}
+
+.input-group {
+  align-items: center;
+  display: flex;
+  flex: 1;
+  width: 100%;
+}
+
+/*empty span en los input groups que no llevan icono*/
+.empty-icon::before {
+  content: "";
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  visibility: hidden;
+}
+
+.input-group input {
+  width: 100%;
+  padding: 10px 10px 10px 10px;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  font-size: 14px;
+  outline: none;
+  transition: border-color 0.2s ease-in-out;
+}
+
+.floating-label-container {
+  flex: 1;
+  margin-top: 4px;
+  position: relative;
+}
+
+.floating-label-container label {
+  position: absolute;
+  left: 40px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 16px;
+  color: #5f6368;
+  background-color: white;
+  padding: 0 4px;
+  pointer-events: none;
+  transition: all 0.2s ease;
+}
+
+/*animacion label*/
+.floating-label-container input:focus + label,
+.floating-label-container input:not(:placeholder-shown) + label {
+  top: 3px;
+  left: 36px;
+  font-size: 12px;
+  color: var(--primary-color);
+}
+
+/*animacion bordes*/
+.input-group input:focus,
+.input-group input:not(:placeholder-shown) {
+  border-color: var(--primary-color);
+}
+
+.material-icons {
+  color: #757575;
+}
+
+.add-buttons {
+  align-items: flex-end;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: auto;
+}
+
+.btn-secondary {
+  align-items: center;
+  background-color: #f0f4f9;
+  color: #0b57d0;
+  display: flex;
+  font-size: 14px;
+  gap: 8px;
+  padding: 10px 15px;
+  border: none;
+  border-radius: 9999px;
+  cursor: pointer;
+  height: auto;
+  justify-content: center;
+  min-width: 195px;
+  width: 90%;
+}
+
+.btn-secondary .material-icons {
+  font-size: 20px;
+  color: #0b57d0;
+}
+
+.phone-group {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  width: 100%;
+}
+
+.floating-label-select select,
+.floating-label-container input {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 14px 10px 4px;
+  font-size: 16px;
+  border: 2px solid #ccc;
+  border-radius: 4px;
+  background-color: transparent;
+  outline: none;
+}
+
+.floating-label-container textarea {
+  width: 100%;
+  min-height: 40px;
+  resize: vertical;
+  padding: 10px 10px 10px 10px;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+}
+
+/*Media queries */
+/*1200px */
+@media (max-width: 1200px) {
+  .form-container {
+    max-width: 450px;
+  }
+
+  .my-form {
+    gap: 10px;
+  }
+
+  .form-row {
+    flex-direction: column;
+  }
+
+  .input-group {
+    gap: 8px;
+  }
+}
+
+/* 900px */
+@media (max-width: 900px) {
+  .form-container {
+    max-width: 400px;
+    padding: 15px;
+  }
+
+  .my-form {
+    gap: 8px;
+  }
+
+  .form-row {
+    flex-direction: column;
+  }
+
+  .input-group {
+    gap: 6px;
+  }
+
+  .btn-save {
+    width: 100%;
+    padding: 12px;
+  }
+}
+
+/* 600px */
+@media (max-width: 600px) {
+  .form-container {
+    max-width: 350px;
+    padding: 10px;
+  }
+
+  .my-form {
+    gap: 6px;
+  }
+
+  .form-row {
+    flex-direction: column;
+  }
+
+  .input-group {
+    gap: 4px;
+  }
+
+  .btn-save {
+    padding: 10px;
+  }
+
+  .contact-photo {
+    width: 120px;
+    height: 120px;
+  }
+
+  .btn-photo {
+    height: 40px;
+    width: 40px;
+  }
+}


Reviews:
user: login: josuemonroy2023
body: There are some issues with the styles. Lets  make sure that we work on that.
state: CHANGES_REQUESTED
author_association: NONE
submitted_at: 2025-04-15T15:27:12Z
user: login: josuemonroy2023
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-15T15:30:03Z
user: login: dianadeayer
state: COMMENTED
author_association: OWNER
submitted_at: 2025-04-16T23:37:12Z
user: login: dianadeayer
state: COMMENTED
author_association: OWNER
submitted_at: 2025-04-16T23:37:48Z
user: login: dianadeayer
state: COMMENTED
author_association: OWNER
submitted_at: 2025-04-22T00:43:28Z
user: login: dianadeayer
state: COMMENTED
author_association: OWNER
submitted_at: 2025-04-22T15:50:58Z
user: login: josuemonroy2023
body: It looks good. There are a few style considerations to do, but we can review those later.
state: APPROVED
author_association: NONE
submitted_at: 2025-04-23T19:32:04Z
user: login: dianadeayer
state: COMMENTED
author_association: OWNER
submitted_at: 2025-04-24T22:23:02Z

Review comments:
diff_hunk: @@ -1,10 +1,115 @@
 <!DOCTYPE html>
 <html lang="en">
-  <link rel="stylesheet" href="style.css" />
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Formulario</title>
+    <link rel="stylesheet" href="style.css" />
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet"
+    />
   </head>
 
-  
\ No newline at end of file
+  <body>
+    <div class="form-container">
+      <form class="my-form">
+        
+        <!-- primera fila -->
+        <div class="form-row">
+          <div class="input-group">
+            <span class="material-icons">person</span>
+            <input
+              type="text"
+              id="first-name"
+              placeholder="First Name"
+              required
+            />
+          </div>
+          <div class="input-group">
+            <input
+              type="text"
+              id="last-name"
+              placeholder="Last Name"
+              required
+            />
+          </div>
+        </div>
+
+        <!-- segunda fila -->
+        <div class="form-row">
+          <div class="input-group">
+            <span class="material-icons">domain</span>
+            <input type="text" id="company" placeholder="Company" required />
+          </div>
+          <div class="input-group">
+            <span class="material-icons">mail</span>
+            <input type="email" id="email" placeholder="Email" required />
+          </div>
+        </div>
+
+        <!-- tercera fila -->
+        <div class="form-row">
+          <div class="input-group">
+            <input type="text" id="job-title" placeholder="Job Title" />
+          </div>
+          <div class="input-group phone-group">
+            <span class="material-icons">call</span>
+            <select class="country-code">
+              <option value="+52" selected>🇲🇽 +52</option>
path: index.html
user: login: josuemonroy2023
body: We need to change the value of the options. We can use the short version of each country.
created_at: 2025-04-15T15:13:06Z
author_association: NONE
diff_hunk: @@ -1,10 +1,115 @@
 <!DOCTYPE html>
 <html lang="en">
-  <link rel="stylesheet" href="style.css" />
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Formulario</title>
+    <link rel="stylesheet" href="style.css" />
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet"
+    />
   </head>
 
-  
\ No newline at end of file
+  <body>
+    <div class="form-container">
+      <form class="my-form">
+        
+        <!-- primera fila -->
+        <div class="form-row">
+          <div class="input-group">
+            <span class="material-icons">person</span>
+            <input
+              type="text"
+              id="first-name"
+              placeholder="First Name"
+              required
+            />
+          </div>
+          <div class="input-group">
+            <input
+              type="text"
+              id="last-name"
+              placeholder="Last Name"
+              required
+            />
+          </div>
+        </div>
+
+        <!-- segunda fila -->
+        <div class="form-row">
+          <div class="input-group">
+            <span class="material-icons">domain</span>
+            <input type="text" id="company" placeholder="Company" required />
+          </div>
+          <div class="input-group">
+            <span class="material-icons">mail</span>
+            <input type="email" id="email" placeholder="Email" required />
+          </div>
+        </div>
+
+        <!-- tercera fila -->
+        <div class="form-row">
+          <div class="input-group">
+            <input type="text" id="job-title" placeholder="Job Title" />
+          </div>
+          <div class="input-group phone-group">
+            <span class="material-icons">call</span>
+            <select class="country-code">
+              <option value="+52" selected>🇲🇽 +52</option>
+              <option value="+1">🇺🇸 +1</option>
+              <option value="+44">🇬🇧 +44</option>
+            </select>
+            <input type="tel" id="phone" placeholder="Phone Number" />
+          </div>
+        </div>
+
+        <div class="add-buttons">
+          <button type="button" class="btn-secondary">Add Phone</button>
+          <button type="button" class="btn-secondary">Add Address</button>
+        
+        </div>
+
+        <div class="form-row">
+        <div class="input-group">
path: index.html
user: login: josuemonroy2023
body: We need to fix the indentation.
created_at: 2025-04-15T15:14:59Z
author_association: NONE
diff_hunk: @@ -1,10 +1,115 @@
 <!DOCTYPE html>
 <html lang="en">
-  <link rel="stylesheet" href="style.css" />
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Formulario</title>
+    <link rel="stylesheet" href="style.css" />
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet"
+    />
   </head>
 
-  
\ No newline at end of file
+  <body>
+    <div class="form-container">
+      <form class="my-form">
+        
+        <!-- primera fila -->
+        <div class="form-row">
+          <div class="input-group">
+            <span class="material-icons">person</span>
+            <input
+              type="text"
+              id="first-name"
+              placeholder="First Name"
+              required
+            />
+          </div>
+          <div class="input-group">
+            <input
+              type="text"
+              id="last-name"
+              placeholder="Last Name"
+              required
+            />
+          </div>
+        </div>
+
+        <!-- segunda fila -->
+        <div class="form-row">
+          <div class="input-group">
+            <span class="material-icons">domain</span>
+            <input type="text" id="company" placeholder="Company" required />
+          </div>
+          <div class="input-group">
+            <span class="material-icons">mail</span>
+            <input type="email" id="email" placeholder="Email" required />
+          </div>
+        </div>
+
+        <!-- tercera fila -->
+        <div class="form-row">
+          <div class="input-group">
+            <input type="text" id="job-title" placeholder="Job Title" />
+          </div>
+          <div class="input-group phone-group">
+            <span class="material-icons">call</span>
+            <select class="country-code">
+              <option value="+52" selected>🇲🇽 +52</option>
+              <option value="+1">🇺🇸 +1</option>
+              <option value="+44">🇬🇧 +44</option>
+            </select>
+            <input type="tel" id="phone" placeholder="Phone Number" />
+          </div>
+        </div>
+
+        <div class="add-buttons">
+          <button type="button" class="btn-secondary">Add Phone</button>
+          <button type="button" class="btn-secondary">Add Address</button>
+        
+        </div>
+
+        <div class="form-row">
+        <div class="input-group">
+          <span class="material-icons">cake</span>
+          <input type="text" id="day" placeholder="Day">
+       
path: index.html
user: login: josuemonroy2023
body: We need to be sure the Prettier is used to fix the styles.
created_at: 2025-04-15T15:16:09Z
author_association: NONE
diff_hunk: @@ -0,0 +1,173 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --primary-color: #1a73e8;
+  --light-bg: #f1f3f4;
+  --border-color: #dadce0;
+  --text-color: #202124;
+  --font-family: "Roboto", sans-serif;
+}
+
+body {
+  font-family: Arial, sans-serif;
+  background-color: #f5f5f5;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.form-container {
+  background: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  width: 100%;
+  max-width: 500px;
+}
+
+.my-form {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.form-row {
+  display: flex;
+  gap: 10px;
+}
+
+.input-group {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex: 1;
+}
+
+.input-group input,
+.input-group select {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.input-group input:focus,
+.input-group select:focus {
+  border-color: #4285f4;
+  outline: none;
+}
+
+.input-group label {
+  position: relative;
+  display: block;
+  width: 100%;
+}
+
+.input-group label span {
+  position: absolute;
+  top: 50%;
+  left: 10px;
+  transform: translateY(-50%);
path: style.css
user: login: josuemonroy2023
body: Why are you using this transform with the translateY?
created_at: 2025-04-15T15:30:03Z
author_association: NONE
diff_hunk: @@ -1,10 +1,115 @@
 <!DOCTYPE html>
 <html lang="en">
-  <link rel="stylesheet" href="style.css" />
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Formulario</title>
+    <link rel="stylesheet" href="style.css" />
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet"
+    />
   </head>
 
-  
\ No newline at end of file
+  <body>
+    <div class="form-container">
+      <form class="my-form">
+        
+        <!-- primera fila -->
+        <div class="form-row">
+          <div class="input-group">
+            <span class="material-icons">person</span>
+            <input
+              type="text"
+              id="first-name"
+              placeholder="First Name"
+              required
+            />
+          </div>
+          <div class="input-group">
+            <input
+              type="text"
+              id="last-name"
+              placeholder="Last Name"
+              required
+            />
+          </div>
+        </div>
+
+        <!-- segunda fila -->
+        <div class="form-row">
+          <div class="input-group">
+            <span class="material-icons">domain</span>
+            <input type="text" id="company" placeholder="Company" required />
+          </div>
+          <div class="input-group">
+            <span class="material-icons">mail</span>
+            <input type="email" id="email" placeholder="Email" required />
+          </div>
+        </div>
+
+        <!-- tercera fila -->
+        <div class="form-row">
+          <div class="input-group">
+            <input type="text" id="job-title" placeholder="Job Title" />
+          </div>
+          <div class="input-group phone-group">
+            <span class="material-icons">call</span>
+            <select class="country-code">
+              <option value="+52" selected>🇲🇽 +52</option>
path: index.html
user: login: dianadeayer
body: Values changed
created_at: 2025-04-16T23:37:12Z
author_association: OWNER
diff_hunk: @@ -1,10 +1,115 @@
 <!DOCTYPE html>
 <html lang="en">
-  <link rel="stylesheet" href="style.css" />
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Formulario</title>
+    <link rel="stylesheet" href="style.css" />
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet"
+    />
   </head>
 
-  
\ No newline at end of file
+  <body>
+    <div class="form-container">
+      <form class="my-form">
+        
+        <!-- primera fila -->
+        <div class="form-row">
+          <div class="input-group">
+            <span class="material-icons">person</span>
+            <input
+              type="text"
+              id="first-name"
+              placeholder="First Name"
+              required
+            />
+          </div>
+          <div class="input-group">
+            <input
+              type="text"
+              id="last-name"
+              placeholder="Last Name"
+              required
+            />
+          </div>
+        </div>
+
+        <!-- segunda fila -->
+        <div class="form-row">
+          <div class="input-group">
+            <span class="material-icons">domain</span>
+            <input type="text" id="company" placeholder="Company" required />
+          </div>
+          <div class="input-group">
+            <span class="material-icons">mail</span>
+            <input type="email" id="email" placeholder="Email" required />
+          </div>
+        </div>
+
+        <!-- tercera fila -->
+        <div class="form-row">
+          <div class="input-group">
+            <input type="text" id="job-title" placeholder="Job Title" />
+          </div>
+          <div class="input-group phone-group">
+            <span class="material-icons">call</span>
+            <select class="country-code">
+              <option value="+52" selected>🇲🇽 +52</option>
+              <option value="+1">🇺🇸 +1</option>
+              <option value="+44">🇬🇧 +44</option>
+            </select>
+            <input type="tel" id="phone" placeholder="Phone Number" />
+          </div>
+        </div>
+
+        <div class="add-buttons">
+          <button type="button" class="btn-secondary">Add Phone</button>
+          <button type="button" class="btn-secondary">Add Address</button>
+        
+        </div>
+
+        <div class="form-row">
+        <div class="input-group">
path: index.html
user: login: dianadeayer
body: Prettier was not working because of a syntax error, fiexed.
created_at: 2025-04-16T23:37:48Z
author_association: OWNER
diff_hunk: @@ -1,10 +1,115 @@
 <!DOCTYPE html>
 <html lang="en">
-  <link rel="stylesheet" href="style.css" />
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Formulario</title>
+    <link rel="stylesheet" href="style.css" />
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet"
+    />
   </head>
 
-  
\ No newline at end of file
+  <body>
+    <div class="form-container">
+      <form class="my-form">
+        
+        <!-- primera fila -->
+        <div class="form-row">
+          <div class="input-group">
+            <span class="material-icons">person</span>
+            <input
+              type="text"
+              id="first-name"
+              placeholder="First Name"
+              required
+            />
+          </div>
+          <div class="input-group">
+            <input
+              type="text"
+              id="last-name"
+              placeholder="Last Name"
+              required
+            />
+          </div>
+        </div>
+
+        <!-- segunda fila -->
+        <div class="form-row">
+          <div class="input-group">
+            <span class="material-icons">domain</span>
+            <input type="text" id="company" placeholder="Company" required />
+          </div>
+          <div class="input-group">
+            <span class="material-icons">mail</span>
+            <input type="email" id="email" placeholder="Email" required />
+          </div>
+        </div>
+
+        <!-- tercera fila -->
+        <div class="form-row">
+          <div class="input-group">
+            <input type="text" id="job-title" placeholder="Job Title" />
+          </div>
+          <div class="input-group phone-group">
+            <span class="material-icons">call</span>
+            <select class="country-code">
+              <option value="+52" selected>🇲🇽 +52</option>
+              <option value="+1">🇺🇸 +1</option>
+              <option value="+44">🇬🇧 +44</option>
+            </select>
+            <input type="tel" id="phone" placeholder="Phone Number" />
+          </div>
+        </div>
+
+        <div class="add-buttons">
+          <button type="button" class="btn-secondary">Add Phone</button>
+          <button type="button" class="btn-secondary">Add Address</button>
+        
+        </div>
+
+        <div class="form-row">
+        <div class="input-group">
+          <span class="material-icons">cake</span>
+          <input type="text" id="day" placeholder="Day">
+       
path: index.html
user: login: dianadeayer
body: prettier fixed
created_at: 2025-04-22T00:43:28Z
author_association: OWNER
diff_hunk: @@ -0,0 +1,173 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --primary-color: #1a73e8;
+  --light-bg: #f1f3f4;
+  --border-color: #dadce0;
+  --text-color: #202124;
+  --font-family: "Roboto", sans-serif;
+}
+
+body {
+  font-family: Arial, sans-serif;
+  background-color: #f5f5f5;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.form-container {
+  background: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  width: 100%;
+  max-width: 500px;
+}
+
+.my-form {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.form-row {
+  display: flex;
+  gap: 10px;
+}
+
+.input-group {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex: 1;
+}
+
+.input-group input,
+.input-group select {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.input-group input:focus,
+.input-group select:focus {
+  border-color: #4285f4;
+  outline: none;
+}
+
+.input-group label {
+  position: relative;
+  display: block;
+  width: 100%;
+}
+
+.input-group label span {
+  position: absolute;
+  top: 50%;
+  left: 10px;
+  transform: translateY(-50%);
path: style.css
user: login: dianadeayer
body: To move the label up the input container when focus is on
created_at: 2025-04-22T15:50:57Z
author_association: OWNER
diff_hunk: @@ -1,10 +1,176 @@
 <!DOCTYPE html>
 <html lang="en">
-  <link rel="stylesheet" href="style.css" />
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Formulario</title>
+    <link rel="stylesheet" href="style.css" />
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet"
+    />
   </head>
 
-  
\ No newline at end of file
+  <body>
+    <div class="container">
+      <div class="form-container">
+        <form class="my-form">
+          <!-- header -->
+          <div class="form-header">
+            <div class="back-button">
+              <span class="material-icons">arrow_back</span>
+            </div>
+            <div class="form-save">
+              <span class="material-icons">star</span>
+              <button type="button" class="btn-save">Save</button>
+            </div>
+          </div>
+
+          <!-- user pic -->
+          <div class="contact-photo-container">
+            <div class="contact-photo">
+              <img
+                class="contact-photo"
+                src="https://www.gstatic.com/identity/boq/profilepicturepicker/photo_silhouette_e02a5f5deb3ffc173119a01bc9575490.png"
+                alt="Contact Photo"
+                data-iml="8656"
path: index.html
user: login: josuemonroy2023
body: What are we using this property for?
created_at: 2025-04-23T19:06:41Z
author_association: NONE
diff_hunk: @@ -1,10 +1,176 @@
 <!DOCTYPE html>
 <html lang="en">
-  <link rel="stylesheet" href="style.css" />
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Formulario</title>
+    <link rel="stylesheet" href="style.css" />
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet"
+    />
   </head>
 
-  
\ No newline at end of file
+  <body>
+    <div class="container">
+      <div class="form-container">
+        <form class="my-form">
+          <!-- header -->
+          <div class="form-header">
+            <div class="back-button">
+              <span class="material-icons">arrow_back</span>
+            </div>
+            <div class="form-save">
+              <span class="material-icons">star</span>
+              <button type="button" class="btn-save">Save</button>
+            </div>
+          </div>
+
+          <!-- user pic -->
+          <div class="contact-photo-container">
+            <div class="contact-photo">
+              <img
+                class="contact-photo"
+                src="https://www.gstatic.com/identity/boq/profilepicturepicker/photo_silhouette_e02a5f5deb3ffc173119a01bc9575490.png"
+                alt="Contact Photo"
+                data-iml="8656"
path: index.html
user: login: dianadeayer
body: At first when I was looking for he source of the image in the goolge form code I thought it was part of it, as if it was something that "helped the image appear" but then I looked it up and from I understan its part of the google front end library and the number "8656" helps as an indicator of loading priority.
created_at: 2025-04-24T22:23:01Z
author_association: OWNER

PR comments:
user: login: dianadeayer
created_at: 2025-04-15T22:52:51Z
body: Added save button, favorite icon and contact photo.
Added flex box to buttons and fixed the style.

author_association: OWNER
user: login: dianadeayer
created_at: 2025-04-16T23:41:36Z
body: 
![image](https://github.com/user-attachments/assets/6dd7537c-e32c-4c03-ba40-c26ff131e69c)

Buttons now have the correct size of icons.
Added animation in labels, but the spaces between divs are now too close.
Indentation fixed.
Need to fix the font and padding of the labels.
Add button closer to photo card.




author_association: OWNER
user: login: dianadeayer
created_at: 2025-04-21T23:04:42Z
body: > There are some issues with the styles. Lets make sure that we work on that.

styles fixed
author_association: OWNER
user: login: dianadeayer
created_at: 2025-04-21T23:07:33Z
body: ![image](https://github.com/user-attachments/assets/fe5e7373-6a52-4b54-a202-1b882926e412)

Fixed animations, inputs alignments and paddings
author_association: OWNER
user: login: dianadeayer
created_at: 2025-04-22T20:00:12Z
body: ![image](https://github.com/user-attachments/assets/7792c45e-c197-4726-b915-a25d4c0951ea)

1.-Fixed issues with body.
2.- Added arrow on header, but the header is not static yet. 
3.- Styles on select buttons are not fixed yet.
4.- Animations are completed, just need to fix the place holder of the birthday section.
author_association: OWNER
user: login: dianadeayer
created_at: 2025-04-24T23:01:57Z
body: ![image](https://github.com/user-attachments/assets/1189c6f1-0492-489d-8a4e-584660e20e13)

I fixed the header, now when you scroll it keeps showing at the top of the page.
also changed my add buttons to flex end so they are more aligned with the input containers.

I checked my css to clean stuff that I wasnt using anymore from previews attempts from when I was trying to make the label animation work. 
author_association: OWNER