From ceb3e3a53339f77b9089e6d676d991046add011b Mon Sep 17 00:00:00 2001
From: AdrianIlovan <62564810+AdrianIlovan@users.noreply.github.com>
Date: Thu, 13 Apr 2023 00:34:34 +0300
Subject: [PATCH 1/5] Form Ready- 1/3

---
 Form-Controls/index.html | 60 +++++++++++++++++++++++-----------------
 1 file changed, 34 insertions(+), 26 deletions(-)
diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 4344b144..50161676 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -1,28 +1,36 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <title>My form exercise</title>
-  <meta name="description" content="">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-  <header>
-    <h1>Product Pick</h1>
-  </header>
-  <main>
-  <form>
-    <!-- write your html here-->
-    <!-- try writing out the requirements first-->
-  </form>
-
-  </main>
-  <footer>
-    <!-- change to your name-->
-    <h2>By HOMEWORK SOLUTION</h2>
-  </footer>
-</body>
-
-</html>
\ No newline at end of file
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>My form exercise</title>
+    <meta name="description" content="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <h1>Product Pick</h1>
+    </header>
+    <main>
+      <form>
+        <!-- write your html here-->
+        <div>
+          <label for="name">Name:</label>
+          <input
+            type="text"
+            id="name"
+            name="name"
+            required
+            pattern="[A-Za-z]{2,}"
+          />
+        </div>
+        <!-- try writing out the requirements first-->
+      </form>
+    </main>
+    <footer>
+      <!-- change to your name-->
+      <h2>By HOMEWORK SOLUTION</h2>
+    </footer>
+  </body>
+</html>

From 7f8112a0bbd1ff527902a6e71a673ba854572e96 Mon Sep 17 00:00:00 2001
From: AdrianIlovan <62564810+AdrianIlovan@users.noreply.github.com>
Date: Thu, 13 Apr 2023 00:36:16 +0300
Subject: [PATCH 2/5] First step done

---
 Form-Controls/index.html | 31 ++++++++++++++++++++++++++++++-
 Form-Controls/styles.css | 36 ++++++++++++++++++++++++++++++++++++
 2 files changed, 66 insertions(+), 1 deletion(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 50161676..1f9430d9 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -25,7 +25,36 @@ <h1>Product Pick</h1>
             pattern="[A-Za-z]{2,}"
           />
         </div>
-        <!-- try writing out the requirements first-->
+        <div>
+          <label for="email">Email:</label>
+          <input type="email" id="email" name="email" required />
+        </div>
+        <div>
+          <label for="color">Choose a color:</label>
+          <select name="color" id="color" required>
+            <option value="">Please choose a color--</option>
+            <option value="red">Red</option>
+            <option value="blue">Blue</option>
+            <option value="green">Green</option>
+          </select>
+        </div>
+        <div>
+          <label for="size">Choose a size:</label>
+          <select name="size" id="size" required>
+            <option value=""></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>
+        </div>
+        <div>
+          <label for="date">Delivery Date</label>
+          <input type="date" name="date" required min="<?php echo date('Y-m-d');?>" max="<?php echo date('Y-m-d', strtotime('+4 weeks'));?>">
+        </div>
+        <button type="submit">Submit</button>
       </form>
     </main>
     <footer>
diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css
index e69de29b..9a7cd198 100644
--- a/Form-Controls/styles.css
+++ b/Form-Controls/styles.css
@@ -0,0 +1,36 @@
+form {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin: 2rem auto;
+    max-width: 600px;   
+    padding: 2rem;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    font-family: Arial, sans-serif;
+}
+
+label {
+    font-weight: bold;
+}
+
+input, select {
+    padding: 0.5rem;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    font-size: 1rem;
+}
+
+button[type="submit"] {
+    padding: 0.5rem;
+    border:none;
+    border-radius: 3px;
+    background-color: rgb(152, 152, 152);
+    color: rgb(67, 68, 68);
+    font-size: 1rem;
+    cursor: pointer;
+}
+
+button[type="submit"]:hover {
+    background-color: rgb(48, 48, 48);
+}
\ No newline at end of file

From 174809d8921b44b483d8ba84a50bcc0117176c80 Mon Sep 17 00:00:00 2001
From: AdrianIlovan <62564810+AdrianIlovan@users.noreply.github.com>
Date: Fri, 14 Apr 2023 22:58:10 +0300
Subject: [PATCH 3/5]  Form-Controls Done

---
 Form-Controls/index.html | 3 ++-
 Form-Controls/styles.css | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 1f9430d9..ead8653e 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -52,7 +52,8 @@ <h1>Product Pick</h1>
         </div>
         <div>
           <label for="date">Delivery Date</label>
-          <input type="date" name="date" required min="<?php echo date('Y-m-d');?>" max="<?php echo date('Y-m-d', strtotime('+4 weeks'));?>">
+          <input type="date" name="date" required aria-required="true" min="<?php echo date('Y-m-d');?>
+          "max="<?php echo date('Y-m-d', strtotime('+4 weeks'));?>"step="1"title="Please enter a date in the format DD-MM-YYYY."/>
         </div>
         <button type="submit">Submit</button>
       </form>
diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css
index 9a7cd198..eee357a0 100644
--- a/Form-Controls/styles.css
+++ b/Form-Controls/styles.css
@@ -25,8 +25,8 @@ button[type="submit"] {
     padding: 0.5rem;
     border:none;
     border-radius: 3px;
-    background-color: rgb(152, 152, 152);
-    color: rgb(67, 68, 68);
+    background-color: rgb(0, 7, 15);
+    color: rgb(243, 242, 242);
     font-size: 1rem;
     cursor: pointer;
 }

From 99afc92dbd2d32461f88a00a509c7f9dcd954594 Mon Sep 17 00:00:00 2001
From: AdrianIlovan <62564810+AdrianIlovan@users.noreply.github.com>
Date: Sat, 15 Apr 2023 13:13:44 +0300
Subject: [PATCH 4/5] Two-Truths-One-Lie Done!

---
 Two-Truths-One-Lie/index.html | 25 +++++++++-
 Two-Truths-One-Lie/styles.css | 88 +++++++++++++++++++++++++++++++++++
 zoo-css-challenge/style.css   |  4 ++
 3 files changed, 115 insertions(+), 2 deletions(-)

diff --git a/Two-Truths-One-Lie/index.html b/Two-Truths-One-Lie/index.html
index 37cdbfa1..219f6f86 100644
--- a/Two-Truths-One-Lie/index.html
+++ b/Two-Truths-One-Lie/index.html
@@ -11,14 +11,35 @@
         <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;700&display=swap" rel="stylesheet">
     </head>
     <body>
-  <header> 
+  <header class="header"> 
       <h1>Two Truths, One Lie</h1>
+      <h2>Can you guess which one is a lie?</h2>
   </header>
   <main>
     <!-- how will you mark up your media objects -->
+    <div class="container">
+      <div class="box">
+        <h2>Bekir</h2>
+        <p>I am younger then 30 years old.</p>
+        <p>I like javascript functions.</p>
+        <p>I am not Turkish</p>
+      </div>
+      <div class="box2">
+        <h2>Adrian</h2>
+        <p>I am not over 30 years old.</p>
+        <p>I am Romanian.</p>
+        <p>I don't have kids.</p>
+      </div>
+      <div class="img-container">
+        <img src="https://images.pexels.com/photos/5197130/pexels-photo-5197130.jpeg?auto=compress&cs=tinysrgb&w=800&lazy=load" alt="" width="500px" height="500px">
+      </div>
+      <div>
+        <img src="https://images.pexels.com/photos/2499769/pexels-photo-2499769.jpeg?auto=compress&cs=tinysrgb&w=600" alt="My Image" width="500px" height="500px" >
+      </div>
+    </div>
   </main>
   <footer>
-    <h3>By YOUR NAMES HERE</h3>
+    <h3>By Adrian Ilovan</h3>
   </footer>
     </body>
 </html>
\ No newline at end of file
diff --git a/Two-Truths-One-Lie/styles.css b/Two-Truths-One-Lie/styles.css
index b8e36944..3387b81e 100644
--- a/Two-Truths-One-Lie/styles.css
+++ b/Two-Truths-One-Lie/styles.css
@@ -30,4 +30,92 @@
 
 body {
   font: 100% "Poppins", sans-serif;
+  display: flex;
+  background-color: aquamarine;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 60vh;
+  margin: 0;
 }
+.header {
+  display: grid;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+.header h1, .header h2 {
+  margin: 0;  
+  text-align: center;
+}
+.container {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 20px;
+  position: relative;
+  width: 900px;
+  height: 400px;
+  box-shadow: 5px 5px 5px #888888;
+}
+.box {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color:aliceblue;
+}
+.box2 {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color:aliceblue;
+}
+.img-container {
+  object-fit: cover;
+  width: 20%;
+  height: 20%;
+}
+
+footer {
+  position: fixed;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  width: 35%;
+  background-color: lightblue;
+  padding: 0.5px;
+  text-align: center;
+  font-size: 13px;
+}
+
+/* Media query for mobile devices */
+
+@media screen and (max-width: 768px) {
+  body {
+    height: auto;
+  }
+
+  .container {
+    grid-template-columns: 1fr;
+    width: 90%;
+    height: auto;
+    box-shadow: none;
+    margin-bottom: 80px;
+  }
+
+  .img-container {
+    width: 100%;
+    height: auto;
+    margin-top: 20px;
+  }
+
+  .box, .box2 {
+    margin: 20px 0;
+  }
+
+  footer {
+    position: relative;
+    bottom: auto;
+  }
+}
\ No newline at end of file
diff --git a/zoo-css-challenge/style.css b/zoo-css-challenge/style.css
index b9007645..8c7db505 100644
--- a/zoo-css-challenge/style.css
+++ b/zoo-css-challenge/style.css
@@ -9,6 +9,10 @@ header {
   padding: 20px;
 }
 
+header > .logo {
+  background-color: ;
+}
+
 nav {
   display: inline-block;
   width: 100%;

From 4d05fd513d07f4732b0f37f70b9f2ab772c96c45 Mon Sep 17 00:00:00 2001
From: AdrianIlovan <62564810+AdrianIlovan@users.noreply.github.com>
Date: Sun, 16 Apr 2023 12:22:07 +0300
Subject: [PATCH 5/5] Finished all 3 Tasks

---
 Two-Truths-One-Lie/index.html |  4 +--
 zoo-css-challenge/index.html  | 43 ++++++++++++++++++++------
 zoo-css-challenge/style.css   | 58 +++++++++++++++++++++++++++--------
 3 files changed, 81 insertions(+), 24 deletions(-)

diff --git a/Two-Truths-One-Lie/index.html b/Two-Truths-One-Lie/index.html
index 219f6f86..6ddd9104 100644
--- a/Two-Truths-One-Lie/index.html
+++ b/Two-Truths-One-Lie/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
     <head>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -31,7 +31,7 @@ <h2>Adrian</h2>
         <p>I don't have kids.</p>
       </div>
       <div class="img-container">
-        <img src="https://images.pexels.com/photos/5197130/pexels-photo-5197130.jpeg?auto=compress&cs=tinysrgb&w=800&lazy=load" alt="" width="500px" height="500px">
+        <img src="https://images.pexels.com/photos/5197130/pexels-photo-5197130.jpeg?auto=compress&cs=tinysrgb&w=800&lazy=load" alt="My Second Image" width="500px" height="500px">
       </div>
       <div>
         <img src="https://images.pexels.com/photos/2499769/pexels-photo-2499769.jpeg?auto=compress&cs=tinysrgb&w=600" alt="My Image" width="500px" height="500px" >
diff --git a/zoo-css-challenge/index.html b/zoo-css-challenge/index.html
index 0892fd58..63e28237 100644
--- a/zoo-css-challenge/index.html
+++ b/zoo-css-challenge/index.html
@@ -21,6 +21,7 @@
  	<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">
@@ -31,18 +32,20 @@ <h1>Birmingham Zoo</h1>
 			<h2>Bears</h2>
 			<p>Did you know that a bear's closest relative is the seal? Or that bears can smell over 2,000 times better than humans?</p>
 			<div class="image-container">
-				<img
+				<img class="bear1"
 					src="https://placebear.com/200/300"
 					alt="Grizzly Bear"
 					width="200"
 					height="300"
 				>
-				<img src="https://placebear.com/400/300"
+				<img class="bear2" 
+					src="https://placebear.com/400/300"
 					alt="Grizzly Bear"
 					width="400"
 					height="300"
 				>
-				<img src="https://placebear.com/200/400"
+				<img class="bear3" 
+					src="https://placebear.com/200/400"
 					alt="Grizzly Bear"
 					width="200"
 					height="400"
@@ -51,15 +54,15 @@ <h2>Bears</h2>
 		</section>
 
 		<section class="tigers">
-			<h2>Tiger</h2>
-			<h3>Top 5 Tiger Facts</h3>
-			<ol>
+			<h2 class="tigerh2">Tiger</h2>
+			<h3 class="tigerh3">Top 5 Tiger Facts</h3>
+			<ul>
 				<li>Tigers are the largest cat species in the world reaching up to 3.3 meters in length and weighing up to 670 pounds!
 				<li>Tigers are easily recognizable with their dark vertical stripes and reddish/orange fur.
 				<li>The Bengal tiger is the most common tiger.
 				<li>Tigers live between 20-26 years in the wild.
 				<li>Unlike most other cats, tigers are great swimmers and actually like the water.
-			</ol>
+			</ul>
 		</section>
 
 		<section class="giraffe">
@@ -77,6 +80,21 @@ <h3>Height and Size</h3>
 
 			<p>Giraffes use their height to good advantage and browse on leaves and buds in treetops that few other animals can reach (acacias are a favorite). Even the giraffe's tongue is long! The 21-inch tongue helps them pluck tasty morsels from branches. Giraffes eat most of the time and, like cows, regurgitate food and chew it as cud. A giraffe eats hundreds of pounds of leaves each week and must travel miles to find enough food.</p>
 		</section>
+		<section class="ryno">
+			<h2>Ryno</h2>
+
+			<p>Ryno's are the world's strongest mammals, thanks to their big legs and fat necks.</p>
+
+			<h3>Behavior</h3>
+
+			<p>Typically, these fascinating animals roam the open grasslands in small groups of about half a dozen.</p>
+
+			<p>Bulls sometimes battle one another by butting their long necks and heads. Such contests aren't usually dangerous and end when one animal submits and walks away.</p>
+
+			<h3>Height and Size</h3>
+
+			<p>Rynos use their height to good advantage and browse on leaves and buds in treetops that few other animals can reach (acacias are a favorite). Even the giraffe's tongue is long! The 21-inch tongue helps them pluck tasty morsels from branches. Giraffes eat most of the time and, like cows, regurgitate food and chew it as cud. A giraffe eats hundreds of pounds of leaves each week and must travel miles to find enough food.</p>
+		</section>
 
 		<section class="news">
 			<h2>News</h2>
@@ -90,6 +108,11 @@ <h4>Helping wild turtles in Seychelles</h4>
 				<h4>Learning about the rainforest</h4>
 				<a>Find out More</a>
 			</div>
+			<div class="card">
+				<time>2010-04-12</time>
+				<h4>Which big cat are you?</h4>
+				<a>Find out More</a>
+			</div>
 		</section>
 
 		<section class="education">
@@ -110,15 +133,15 @@ <h2>Are there any benefits or discounts for members?</h2>
 			<h2>Programs</h2>
 			<div class="card">
 				<h4>Children and Family Programs</h4>
-				<a>Find out More</a>
+				<a href="www.google.com">Find out More</a>
 			</div>
 			<div class="card">
 				<h4>Adult Programs</h4>
-				<a>Find out More</a>
+				<a href="www.google.com">Find out More</a>
 			</div>
 			<div class="card">
 				<h4>Youth and young adults</h4>
-				<a>Find out More</a>
+				<a href="www.google.com">Find out More</a>
 			</div>
 			<h3>Useful Links</h3>
 			<p>
diff --git a/zoo-css-challenge/style.css b/zoo-css-challenge/style.css
index 8c7db505..5efd2a90 100644
--- a/zoo-css-challenge/style.css
+++ b/zoo-css-challenge/style.css
@@ -9,8 +9,8 @@ header {
   padding: 20px;
 }
 
-header > .logo {
-  background-color: ;
+#logo {
+  border: none;
 }
 
 nav {
@@ -23,6 +23,7 @@ header ul {
   padding: 0;
 }
 
+
 header ul li {
   display: inline-block;
   margin-right: 10px;
@@ -61,13 +62,19 @@ h3 {
 
 button {
   display: inline-block;
-  border-radius: 3px;
+  border-radius: 25px;
   cursor: pointer;
   padding: 10px 20px;
   box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
   background-color: #372772;
   border: 2px solid black;
   color: #fff;
+  font-size: large;
+}
+button:hover {
+  background-color: black;
+  transition: 0.7s;
+  color: #56e39f;
 }
 
 footer {
@@ -80,6 +87,9 @@ footer {
 }
 
 .introduction {
+  background-color: white;
+  padding: 20px;
+  margin-bottom: 30px;
 }
 
 #badge {
@@ -89,17 +99,18 @@ footer {
   border-radius: 50%;
   display: inline-block;
   position: fixed;
-  bottom: 20px;
+  bottom: 872px;
   right: 20px;
 
   display: flex;
   justify-content: center;
-  align-content: center;
+  align-items: center;
   flex-direction: column;
 }
 
 #badge:hover {
   background-color: yellow;
+  transition: 0.7s;
 }
 
 #badge p {
@@ -109,7 +120,9 @@ footer {
 
 .image-container img {
   vertical-align: top;
-  border: 5px solid #747c92;
+  border: 5px solid #0734b2;
+  display: flex;
+  align-items: flex-start;
 }
 
 .image-container img:first-of-type {
@@ -120,14 +133,25 @@ footer {
   background-color: #0b3c49;
   color: #f0e100;
 }
-
-.giraffe {
-  background-color: #465775;
+.tigerh2, 
+.tigerh3 {
+  color: #f8f0fb;
+}
+.giraffe, .ryno {
+  background-color: #483C46;
   color: #56e39f;
 }
 
-.giraffe h2 {
-  color: #ef6f6c;
+.giraffe, .ryno h2, h3 {
+  color: #F4743B;
+}
+
+.giraffe p {
+  color: #BEEE62;
+}
+
+.news {
+  text-align: center;
 }
 
 .card {
@@ -192,8 +216,18 @@ footer {
   color: #ff7f11;
 }
 
+.membership p {
+  width: 700px;
+  margin: auto;
+}
+
 /*Programs*/
 
 .programs .card {
-  display: block;
+  display: inline-block;
+}
+
+.programs .card a {
+  color: #211a1d;
 }
+
