CodeYourFuture · H-BAHDON · May 30, 2023
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5502
+}
diff --git a/Form-Controls/index.html b/Form-Controls/index.html
@@ -12,13 +12,40 @@
   <header>
     <h1>Product Pick</h1>
   </header>
-  <main>
-  <form>
-    <!-- write your html here-->
-    <!-- try writing out the requirements first-->
-  </form>
-
-  </main>
+  <body>
+    <h1>T-Shirt Order Form</h1>
+    <form>
+      <label for="name">Name:</label>
+      <input type="text" id="name" name="name" required>
+
+      <label for="email">Email:</label>
+      <input type="email" id="email" name="email" required>
+
+      <label for="color">Color:</label>
+      <select id="color" name="color" required>
+        <option value="">Choose a color</option>
+        <option value="red">Red</option>
+        <option value="blue">Blue</option>
+        <option value="green">Green</option>
+      </select>
+
+      <label for="size">Size:</label>
+      <select id="size" name="size" required>
+        <option value="">Choose a size</option>
+        <option value="XS">XS</option>
+        <option value="S">S</option>
+        <option value="M">M</option>
+        <option value="L">L</option>
+        <option value="XL">XL</option>
+        <option value="XXL">XXL</option>
+      </select>
+
+      <label for="delivery-date">Delivery Date:</label>
+      <input type="date" id="delivery-date" name="delivery-date" min="2023-06-01" max="2023-06-30" required>
+
+      <input type="submit" value="Submit">
+    </form>
+  </body>
   <footer>
     <!-- change to your name-->
     <h2>By HOMEWORK SOLUTION</h2>

diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css
@@ -0,0 +1,33 @@
+form {
+    max-width: 400px;
+    margin: 0 auto;
+  }
+
+  label {
+    display: block;
+    margin-bottom: 10px;
+  }
+
+  input[type="text"],
+  input[type="email"],
+  select {
+    width: 100%;
+    padding: 8px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-sizing: border-box;
+    margin-bottom: 10px;
+  }
+
+  input[type="submit"] {
+    background-color: #4CAF50;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+
+  input[type="submit"]:hover {
+    background-color: #45a049;
+  }
diff --git a/Two-Truths-One-Lie/index.html b/Two-Truths-One-Lie/index.html
@@ -14,11 +14,30 @@
   <header> 
       <h1>Two Truths, One Lie</h1>
   </header>
+
   <main>
-    <!-- how will you mark up your media objects -->
+    <div class="card">
+      <img src="image1.jpg" alt="Image 1">
+      <h2>Card 1</h2>
+      <p>
+        <strong>Truth:</strong> I have traveled to over 10 countries.<br>
+        <strong>Truth:</strong> I can play three musical instruments.<br>
+        <strong>Lie:</strong> I have climbed Mount Everest.
+      </p>
+    </div>
+
+    <div class="card">
+      <img src="image2.jpg" alt="Image 2">
+      <h2>Card 2</h2>
+      <p>
+        <strong>Truth:</strong> I have a black belt in karate.<br>
+        <strong>Truth:</strong> I have written a book.<br>
+        <strong>Lie:</strong> I have won a Nobel Prize in Physics.
+      </p>
+    </div>
   </main>
   <footer>
-    <h3>By YOUR NAMES HERE</h3>
+    <h3> By Hussein bahdon</h3>
   </footer>
     </body>
 </html>
diff --git a/Two-Truths-One-Lie/styles.css b/Two-Truths-One-Lie/styles.css
@@ -29,5 +29,44 @@
 */
 
 body {
-  font: 100% "Poppins", sans-serif;
+  font-family: Arial, sans-serif;
 }
+
+header {
+  background-color: #f2f2f2;
+  padding: 20px;
+  text-align: center;
+}
+
+h1 {
+  margin: 0;
+}
+
+main {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 20px;
+  padding: 20px;
+}
+
+.card {
+  background-color: #f9f9f9;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 20px;
+  text-align: center;
+  width: 300px;
+}
+
+.card img {
+  width: 100%;
+  height: auto;
+  border-radius: 8px;
+}
+
+footer {
+  background-color: #f2f2f2;
+  padding: 20px;
+  text-align: center;
+}
diff --git a/zoo-css-challenge/index.html b/zoo-css-challenge/index.html
@@ -21,6 +21,9 @@
  	<main>
  		<section class="introduction">
  			<h1>Birmingham Zoo</h1>
+			<p>‘The zoo is open every day of the year and features three major biomes: the Tropic Zone, Temperate Territory, 
+				and the Polar Circle. From tropical birds, to snow leopards, grizzly bears,
+				and one of the nation’s largest colonies of Antarctic penguins, there are animals to enjoy in every season.’</p>
  		</section>
 
  		<div id="badge">

diff --git a/zoo-css-challenge/style.css b/zoo-css-challenge/style.css
@@ -1,7 +1,12 @@
 * {
+  letter-spacing: 0.2em;
   font-family: sans-serif;
 }
 
+#logo {
+  border: none;
+}
+
 header {
   background-color: #211a1d;
   color: #ffffff;
@@ -76,6 +81,7 @@ footer {
 }
 
 .introduction {
+  background-color: white;
 }
 
 #badge {
@@ -192,4 +198,4 @@ footer {
 
 .programs .card {
   display: block;
-}
+}