CodeYourFuture · OlhaDanylevska · Apr 6, 2023 · Apr 20, 2023 · Apr 20, 2023
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
diff --git a/Form-Controls/README.md b/Form-Controls/README.md
@@ -31,22 +31,22 @@ Do not write a form action for this project.
 
 Let's write out our testable criteria:
 
-- [ ] I have used HTML and CSS only.
+- [V] I have used HTML and CSS only.
 
 ### HTML
 
-- [ ] My form is semantic html.
-- [ ] All inputs have associated labels.
+- [V] My form is semantic html.
+- [V] All inputs have associated labels.
 - [ ] My Lighthouse Accessibility score is 100.
-- [ ] I require a valid name. I have defined a valid name as a text string of two characters or more.
-- [ ] I require a valid email.
-- [ ] I require one colour from a defined set of 3 colours.
-- [ ] I require one size from a defined set of 6 sizes.
-- [ ] I require one date from a constrained date range.
+- [V] I require a valid name. I have defined a valid name as a text string of two characters or more.
+- [V] I require a valid email.
+- [V] I require one colour from a defined set of 3 colours.
+- [V] I require one size from a defined set of 6 sizes.
+- [V] I require one date from a constrained date range.
 
 ### CSS
 
-- [ ] I show which element is focused.
+- [V] I show which element is focused.
 - [ ] My Lighthouse Accessibility score is 100.
 
 ## Extension Task

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
@@ -16,6 +16,32 @@ <h1>Product Pick</h1>
   <form>
     <!-- write your html here-->
     <!-- try writing out the requirements first-->
+    <label for="name">Name</label>
+    <input tupe="text" id="name" name="name" placeholder="Name" pattern="[a-z]" required>
+    <br>
+    <label for="email">Email</label>
+    <input tupe="text" id="email" name="email" placeholder="email" pattern="[a-z],{@}" type="email address" required>
+    <br>
+    <label for="colour">T-shirt colour</label>
+    <select id="colour" name="colour" required>
+      <option value="red">Red</option>
+      <option value="green">Green</option>
+      <option value="black">Black</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="date">Delivery date</label>
+    <input type="date" id="date" name="date" value="2023-04-06" min="2023-04-06" max="2023-05-04" required>
+
   </form>
 
   </main>

diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css
@@ -0,0 +1,13 @@
+#name:focus {
+    background: rgb(224, 224, 224);
+    color: rgb(0, 0, 0);
+}
+#email:focus {
+    background: rgb(201, 201, 201);
+    color: rgb(0, 0, 0);
+}
+
+#date:focus, #colour:focus, #size:focus {
+    background: rgb(201, 201, 201);
+    color: rgb(0, 0, 0);
+}
diff --git a/Two-Truths-One-Lie/index.html b/Two-Truths-One-Lie/index.html
@@ -13,12 +13,42 @@
     <body>
   <header> 
       <h1>Two Truths, One Lie</h1>
+      <p id="subtitle">Can you guess which statement is false</p>
   </header>
   <main>
     <!-- how will you mark up your media objects -->
+    <div id="container-for-sections">
+        <section>
+          <div class="container">
+            <img src="https://c1.wallpaperflare.com/preview/243/736/906/alone-back-view-beautiful-cap.jpg" id="image">
+            <p id="name">Olha Danylevska</p>
+          </div>
+          <ol>
+            <li id="list">I don't like Ice Cream</li>
+            <li id="list">I have never been to USA</li>
+            <li id="list">I have never dyed my hair</li>
+          </ol>
+
+        </section>
+
+        <section>
+          <div class="container">
+            <img src="https://c1.wallpaperflare.com/preview/243/736/906/alone-back-view-beautiful-cap.jpg" id="image">
+            <p id="name">Olha Danylevska</p>
+          </div>
+          <ol>
+            <li id="list">I don't like Ice Cream</li>
+            <li id="list">I have never been to USA</li>
+            <li id="list">I have never dyed my hair</li>
+          </ol>
+
+        </section>
+    </div>
+
+
   </main>
   <footer>
-    <h3>By YOUR NAMES HERE</h3>
+    <h5>By Olha Danylevska</h5>
   </footer>
     </body>
 </html>
diff --git a/Two-Truths-One-Lie/styles.css b/Two-Truths-One-Lie/styles.css
@@ -30,4 +30,50 @@
 
 body {
   font: 100% "Poppins", sans-serif;
+  background-color: rgb(178, 186, 125);
+  margin: 0 auto;
+}
+
+.container {
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 1rem;
+}
+
+section {
+background-color: rgb(220, 234, 194);
+  width: 30%;
+  height: 16rem;
+  padding: 1rem;
+}
+
+#container-for-sections{
+  display: flex;
+  justify-content: center;
+  margin-top: 3rem;
+  gap: 3rem
+}
+
+ol{
+  margin-left: -1rem;
+
+}
+
+#image {
+height: 10rem;
+width: auto;
+}
+
+header {
+  text-align: center;
+}
+
+footer{
+  position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 4rem;
+    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">
@@ -52,14 +55,14 @@ <h2>Bears</h2>
 
 		<section class="tigers">
 			<h2>Tiger</h2>
-			<h3>Top 5 Tiger Facts</h3>
-			<ol>
+			<h3>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">
@@ -90,6 +93,11 @@ <h4>Helping wild turtles in Seychelles</h4>
 				<h4>Learning about the rainforest</h4>
 				<a>Find out More</a>
 			</div>
+			<div class="card">
+				<time>2023-04-21</time>
+				<h4>Which big cat are you?</h4>
+				<a>Find out More</a>
+			</div>
 		</section>
 
 		<section class="education">
@@ -108,18 +116,21 @@ <h2>Are there any benefits or discounts for members?</h2>
 
 		<section class="programs">
 			<h2>Programs</h2>
-			<div class="card">
-				<h4>Children and Family Programs</h4>
-				<a>Find out More</a>
-			</div>
-			<div class="card">
-				<h4>Adult Programs</h4>
-				<a>Find out More</a>
-			</div>
-			<div class="card">
-				<h4>Youth and young adults</h4>
-				<a>Find out More</a>
-			</div>
+			<section>
+				<div class="card">
+					<h4>Children and Family Programs</h4>
+					<a>Find out More</a>
+				</div>
+				<div class="card">
+					<h4>Adult Programs</h4>
+					<a>Find out More</a>
+				</div>
+				<div class="card">
+					<h4>Youth and young adults</h4>
+					<a>Find out More</a>
+				</div>
+			</section>
+
 			<h3>Useful Links</h3>
 			<p>
 			</p>

diff --git a/zoo-css-challenge/style.css b/zoo-css-challenge/style.css
@@ -29,8 +29,9 @@ section {
   background-color: #f8f0fb;
 }
 
-img {
-  border: 5px solid #8075ff;
+.introduction {
+ background-color: white;
+ line-height: 2;
 }
 
 h1,
@@ -39,7 +40,7 @@ h3,
 h4,
 h5 {
   /*Purple*/
-  color: #6320ee;
+  color: #9FE9EA;
   margin-bottom: 1em;
 }
 
@@ -66,6 +67,14 @@ button {
   color: #fff;
 }
 
+.education-container button{
+  font-size: 16px;
+}
+
+.education-container button:hover {
+  background-color: #211a1d;
+}
+
 footer {
   background-color: #211a1d;
   color: #ffffff;
@@ -75,8 +84,7 @@ footer {
   justify-content: space-between;
 }
 
-.introduction {
-}
+
 
 #badge {
   height: 120px;
@@ -85,7 +93,7 @@ footer {
   border-radius: 50%;
   display: inline-block;
   position: fixed;
-  bottom: 20px;
+  top: 20px;
   right: 20px;
 
   display: flex;
@@ -96,20 +104,28 @@ footer {
 
 #badge:hover {
   background-color: yellow;
+  transition: 0.3s;
 }
 
 #badge p {
   text-align: center;
   font-size: 125%;
 }
 
+.image-container{
+  display: flex;
+  justify-content: baseline;
+  gap: 1rem;
+}
+
 .image-container img {
   vertical-align: top;
-  border: 5px solid #747c92;
+  border: 3px solid #b8bcfe;
+
 }
 
 .image-container img:first-of-type {
-  vertical-align: bottom;
+
 }
 
 .tigers {
@@ -118,12 +134,12 @@ footer {
 }
 
 .giraffe {
-  background-color: #465775;
-  color: #56e39f;
+  background-color: #483C46;
+  color: #BEEE62;
 }
 
-.giraffe h2 {
-  color: #ef6f6c;
+.giraffe h2, h3 {
+  color: #F4743B;
 }
 
 .card {
@@ -136,6 +152,10 @@ footer {
   border-radius: 10px;
 }
 
+.news h2{
+  text-align: center;
+}
+
 .card h4 {
   margin-bottom: 1em;
 }
@@ -166,6 +186,7 @@ footer {
   background-color: rgba(255, 255, 255, 0.75);
   padding: 50px;
   max-width: 400px;
+  border-radius: 5px;
 }
 
 .education-container h3,
@@ -178,6 +199,8 @@ footer {
 .membership {
   text-align: center;
   background-color: #fffffc;
+  max-width: 700px;
+  margin: auto ;
 }
 
 .membership h2 {
@@ -190,6 +213,8 @@ footer {
 
 /*Programs*/
 
-.programs .card {
-  display: block;
+.programs section {
+  display: flex;
+  flex-direction: row;
+  gap:2rem
 }