CodeYourFuture · dotdashdon · Jul 12, 2021 · Jul 12, 2021 · Jul 12, 2021 · Jul 12, 2021
diff --git a/.DS_Store b/.DS_Store
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
@@ -7,13 +7,59 @@
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="styles.css">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
 </head>
 <body>
   <header>
     <h1>Product Pick</h1>
+
   </header>
   <main>
+
   <form>
+     <label for="name">Name</label>
+      <input type="text" class="name" minlength="3" maxlength="12" id="name" name="name" required><br>
+      <label for="email">Email</label>
+      <input type="email" class="email" id="email" name="name">
+<br><br>
+<fieldset>
+<legend >Select a colour:</legend> 
+    <input type="radio" name="colours" value="red" id="option-1">Red
+    <input type="radio" name="colours" value="white" id="option-2">White
+    <input type="radio"  name="colours" value="blue" id="option-3">Blue
+</fieldset>
+</div>
+<br>
+<br>
+<label for="delivery" class="delivery" >Choose your delivery date</label>
+<input type="date" id="delivery" name="delivery" min="2021-08-05" max="2021-09-05" defaultValue="2021-08-05">
+
+<!-- 
+<label for="dates">Delivery date</label>
+<select name="dates" id="dates">
+  <option value="d1">06/08/2021</option>
+  <option value="d2">07/08/2021</option>
+  <option value="d3">08/08/2021</option>
+  <option value="d4">09/08/2021</option>
+  <option value="d5">10/08/2021</option>
+  <option value="d6">11/08/2021</option>
+  <option value="d7">12/08/2021</option>
+  <option value="d8">13/08/2021</option>
+  <option value="d9">14/08/2021</option>
+  <option value="d10">15/08/2021</option>
+  <option value="d11">16/08/2021</option>
+  <option value="d12">17/08/2021</option>
+  <option value="d13">18/08/2021</option>
+  <option value="d14">19/08/2021</option>
+  <option value="d15">20/08/2021</option>
+</select> -->
+<br>
+<br>
+<div class="submit">
+<input type="submit"  value="Click here to place order">
+  </div>
     <!-- write your html here-->
     <!-- try writing out the requirements first-->
   </form>

diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css
@@ -0,0 +1,53 @@
+*{
+    box-sizing: border-box;
+}
+
+body {
+    background: linear-gradient(110deg,#E63946 60%, #f1faee 60%);
+    color:#192f4d;
+    font-family: 'Open Sans', sans-serif;;
+}
+
+h1 {
+font-size: 3em;
+letter-spacing: 1em;
+margin-left:.2em;
+}
+
+label{
+    margin-left: 2em;
+}
+input {
+    padding: .8em;
+    border-radius: 12px;
+    margin:1em;
+    border:none;
+    padding-right: 3em;
+}
+
+fieldset {
+    border: none;
+    padding-left: 2em;
+    width: 30%;
+}
+
+footer {
+    text-align: end;
+}
+
+
+.delivery {
+    margin-left: 2em;
+}
+
+.submit {
+ margin-bottom: 1em;
+
+}
+
+input[value] {
+     background-color:#2ceaf0;
+    font-family: 'Open Sans', sans-serif;
+    padding: 1.2em;
+    width: 50%;
+}
diff --git 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 class="zoo-info">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">
@@ -32,6 +33,7 @@ <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
+					id="two-bears"
 					src="https://placebear.com/200/300"
 					alt="Grizzly Bear"
 					width="200"
@@ -41,19 +43,21 @@ <h2>Bears</h2>
 					alt="Grizzly Bear"
 					width="400"
 					height="300"
+					id="bear-face"
 				>
 				<img src="https://placebear.com/200/400"
 					alt="Grizzly Bear"
 					width="200"
 					height="400"
+					id="solo-bear"
 				>
 			</div>
 		</section>
 
 		<section class="tigers">
-			<h2>Tiger</h2>
-			<h3>Top 5 Tiger Facts</h3>
-			<ol>
+			<h2 id="tiger-title">Tiger Facts</h2>
+
+			<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.
@@ -65,7 +69,7 @@ <h3>Top 5 Tiger Facts</h3>
 		<section class="giraffe">
 			<h2>Giraffe</h2>
 
-			<p>Giraffes are the world's tallest mammals, thanks to their towering legs and long necks. A giraffe's legs alone are taller than many humans—about 6 feet . These long legs allow giraffes to run as fast as 35 miles an hour over short distances and cruise comfortably at 10 miles an hour over longer distances.</p>
+			<p id='giraffe-para'>Giraffes are the world's tallest mammals, thanks to their towering legs and long necks. A giraffe's legs alone are taller than many humans, about 6 feet . These long legs allow giraffes to run as fast as 35 miles an hour over short distances and cruise comfortably at 10 miles an hour over longer distances.</p>
 
 			<h3>Behavior</h3>
 
@@ -78,25 +82,29 @@ <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="news">
-			<h2>News</h2>
-			<div class="card">
+		<section class="news" class="flex-con">
+			<h2 id="news-title">News</h2>
+			<div class="card" class="flex-item">
 				<time>2010-04-16</time>
 				<h4>Helping wild turtles in Seychelles</h4>
 				<a>Find out More</a>
 			</div>
-			<div class="card">
+			<div class="card" class="flex-item">
 				<time>2010-04-12</time>
 				<h4>Learning about the rainforest</h4>
 				<a>Find out More</a>
 			</div>
+			<div class="card" class="flex-item">
+				<time>2021-07-12</time>
+				<h4>Which big cat are you?</h4>
+				<a>Find out More</a>
 		</section>
 
 		<section class="education">
 			<div class="education-container">
 				<h3>Learning resources for schools</h3>
 				<p>Explore our activities, videos, and lesson plans to support a wide range of curriculum topics</p>
-				<button>Find them here</button>
+				<button class="btn">Find them here</button>
 			</div>
 		</section>
 
@@ -123,9 +131,9 @@ <h4>Youth and young adults</h4>
 			<h3>Useful Links</h3>
 			<p>
 			</p>
-			<a href="https://www.w3schools.com">w3schools.com</a>
+			<a href="https://www.w3schools.com" target="_blank">w3schools.com</a>
 			<a href="https://www.nationalgeographic.com/" target="_blank">National Geographic</a>
-			<a href="http://www.wikipedia.org" target="_top">Wikipedia</a>
+			<a href="http://www.wikipedia.org" target="_blank">Wikipedia</a>
 		</section>
 
  	</main>

diff --git a/zoo-css-challenge/style.css b/zoo-css-challenge/style.css
@@ -30,7 +30,7 @@ section {
 }
 
 img {
-  border: 5px solid #8075ff;
+ border: 5px solid #8075ff;
 }
 
 h1,
@@ -39,7 +39,7 @@ h3,
 h4,
 h5 {
   /*Purple*/
-  color: #6320ee;
+  color:#6320ee;
   margin-bottom: 1em;
 }
 
@@ -75,27 +75,34 @@ footer {
   justify-content: space-between;
 }
 
+
 .introduction {
+  background-color: white;
 }
 
+
+#logo {
+  border: none;
+}
 #badge {
   height: 120px;
   width: 120px;
   background-color: #bbb;
   border-radius: 50%;
   display: inline-block;
-  position: fixed;
-  bottom: 20px;
+  position: absolute;
+  top: 20px;
   right: 20px;
-
   display: flex;
   justify-content: center;
   align-content: center;
   flex-direction: column;
+  transition: 2.5s;
 }
 
 #badge:hover {
   background-color: yellow;
+
 }
 
 #badge p {
@@ -105,33 +112,69 @@ footer {
 
 .image-container img {
   vertical-align: top;
-  border: 5px solid #747c92;
+  border: 5px solid 
 }
 
 .image-container img:first-of-type {
-  vertical-align: bottom;
+  vertical-align: top;
+}
+
+#two-bears {
+  border-color: tomato;
+}
+
+#bear-face {
+border-color: yellow;
+}
+
+#solo-bear {
+border-color: yellowgreen;
+}
+
+.zoo-info {
+  line-height: 1.5;
+}
+
+#tiger-title{
+  color:#BDBDFF;
 }
 
+
 .tigers {
   background-color: #0b3c49;
   color: #f0e100;
+  line-height: 1.5;
 }
 
 .giraffe {
-  background-color: #465775;
+  background-color: #483C46;
   color: #56e39f;
+  line-height: 1.5;
+}
+
+.giraffe h2 , h3 {
+  color: #F4743B;
+  background-color: #483C46
+
+}
+
+.giraffe p {
+  color: #BEEE62;
 }
 
-.giraffe h2 {
-  color: #ef6f6c;
+#giraffe-para {
+  font-size: 135%;
+}
+#news-title {
+  text-align: center;
 }
 
 .card {
   display: inline-block;
   background-color: white;
   padding: 20px;
   margin: 10px;
-  width: 30%;
+  width: 28%;
   border: 1px solid black;
   border-radius: 10px;
 }
@@ -151,6 +194,23 @@ footer {
   margin-bottom: 10px;
 }
 
+.flex-con {
+display:flex;
+flex-wrap:wrap;
+justify-content: space-around;
+
+}
+
+
+.btn:hover, btn:focus {
+  font-size: 100%;
+background:#56e39f;
+}
+
+.btn {
+  font-size: 100%;
+}
+
 /*Education*/
 
 .education {
@@ -166,18 +226,22 @@ footer {
   background-color: rgba(255, 255, 255, 0.75);
   padding: 50px;
   max-width: 400px;
+  border-radius: 4px;
 }
 
 .education-container h3,
 .education-container p {
   margin-bottom: 1em;
+  border-radius: 2px;
 }
 
 /*Membership*/
 
 .membership {
   text-align: center;
   background-color: #fffffc;
+  max-width: 700px;
+  margin-left: 550px;
 }
 
 .membership h2 {