BEKIR-Kuscu-London10-HTML-CSS-Challenges

Form-Controls/index.html

@@ -14,14 +14,43 @@ <h1>Product Pick</h1>
   </header>
   <main>
   <form>
-    <!-- write your html here-->
-    <!-- try writing out the requirements first-->
+    <label for="name">Name:</label>
+  <input type="text" id="name" name="name" required pattern="[a-zA-Z\s]+">
+  <br>
+
+  <label for="email">Email:</label>
+  <input type="email" id="email" name="email" required>
+  <br>
+
+  <label for="color">T-shirt color:</label>
+  <select id="color" name="color" required>
+    <option value="red">Red</option>
+    <option value="blue">Blue</option>
+    <option value="green">Green</option>
+  </select>
+  <br>
+
+  <label for="size">T-shirt size:</label>
+  <select id="size" name="size" required>
+    <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>
+  <br>
+
+  <label for="delivery-date">Delivery date:</label>
+  <input type="date" id="delivery-date" name="delivery-date" required min="<?= date('Y-m-d') ?>" max="<?= date('Y-m-d', strtotime('+4 weeks')) ?>">
+  <br>
+
+  <button type="submit">Submit</button>
   </form>
 
   </main>
   <footer>
-    <!-- change to your name-->
-    <h2>By HOMEWORK SOLUTION</h2>
+    <h2>By Bekir Kuscu</h2>
   </footer>
 </body>
 

Form-Controls/styles.css

@@ -0,0 +1,41 @@
+label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: bold;
+  }
+
+  /* Style the form input elements */
+  input,
+  select {
+    display: block;
+    width: 100%;
+    padding: 10px;
+    border: 2px solid #ccc;
+    border-radius: 4px;
+    font-size: 16px;
+    margin-bottom: 15px;
+  }
+
+  /* Style the submit button */
+  button[type="submit"] {
+    background-color: #4CAF50;
+    color: white;
+    padding: 12px 20px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 16px;
+  }
+
+  /* Style the form inputs when focused */
+  input:focus,
+  select:focus {
+    outline: none;
+    border-color: #4CAF50;
+  }
+
+  /* Style the form input labels when focused */
+  input:focus + label,
+  select:focus + label {
+    color: #4CAF50;
+  }

Two-Truths-One-Lie/index.html

@@ -15,10 +15,24 @@
       <h1>Two Truths, One Lie</h1>
   </header>
   <main>
-    <!-- how will you mark up your media objects -->
+    <section class="grid-section">
+      <h2>Two Truths and a Lie</h2>
+      <article class="grid-article">
+          <h3>Truth or Lie #1</h3>
+          <p>I am 4782 years old.</p>
+      </article>
+      <article class="grid-article">
+          <h3>Truth or Lie #2</h3>
+          <p>Red is a bigger number than white.</p>
+      </article>
+      <article class="grid-article">
+          <h3>Truth or Lie #3</h3>
+          <p>Apples can fall off trees.</p>
+      </article>
+  </section>
   </main>
   <footer>
-    <h3>By YOUR NAMES HERE</h3>
+    <h3>By BEKIR KUSCU</h3>
   </footer>
     </body>
 </html>

Two-Truths-One-Lie/styles.css

@@ -30,4 +30,60 @@
 
 body {
   font: 100% "Poppins", sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+/* Header styles */
+header {
+  background-color: #333;
+  color: #fff;
+  padding: 1em;
+}
+
+h1 {
+  margin: 0;
+}
+
+/* Main styles */
+main {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding: 1em;
+}
+
+.grid-section {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 1em;
+  margin-bottom: 2em;
+}
+
+.grid-article {
+  background-color: #f0f0f0;
+  border: 1px solid #ccc;
+  padding: 1em;
+}
+
+.grid-article h3 {
+  margin-top: 0;
+}
+
+/* Footer styles */
+footer {
+  background-color: #333;
+  color: #fff;
+  padding: 1em;
+}
+
+/* Media query styles */
+@media screen and (max-width: 768px) {
+  main {
+      display: block;
+  }
+
+  .grid-section {
+      grid-template-columns: repeat(2, 1fr);
+  }
 }

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">

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 {