From fd968e78779dceda7e27b7cf362ee7ae07cf47ef Mon Sep 17 00:00:00 2001
From: sinopungula <74741624+sinopungula@users.noreply.github.com>
Date: Thu, 3 Dec 2020 11:16:02 +0200
Subject: [PATCH] changes up to #8

did the classwork up to number 8, programs
---
 zoo-css-challenge/index.html | 22 ++++++++------
 zoo-css-challenge/style.css  | 56 ++++++++++++++++++++++++++++++++----
 2 files changed, 65 insertions(+), 13 deletions(-)

diff --git a/zoo-css-challenge/index.html b/zoo-css-challenge/index.html
index 0892fd58..01bd1b0e 100644
--- a/zoo-css-challenge/index.html
+++ b/zoo-css-challenge/index.html
@@ -20,7 +20,8 @@
  	</header>
  	<main>
  		<section class="introduction">
- 			<h1>Birmingham Zoo</h1>
+			 <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">
@@ -51,15 +52,15 @@ <h2>Bears</h2>
 		</section>
 
 		<section class="tigers">
-			<h2>Tiger</h2>
-			<h3>Top 5 Tiger Facts</h3>
-			<ol>
+			<h2>Tiger Facts</h2>
+			<!--<h3>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">
@@ -90,6 +91,11 @@ <h4>Helping wild turtles in Seychelles</h4>
 				<h4>Learning about the rainforest</h4>
 				<a>Find out More</a>
 			</div>
+			<div class="card">
+				<time>2020-12-03</time>
+				<h4>Which big cat are you?</h4>
+				<a>Find out More</a>
+			</div>
 		</section>
 
 		<section class="education">
@@ -110,15 +116,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>
+				<button>Find out More</button>
 			</div>
 			<div class="card">
 				<h4>Adult Programs</h4>
-				<a>Find out More</a>
+				<button>Find out More</button>
 			</div>
 			<div class="card">
 				<h4>Youth and young adults</h4>
-				<a>Find out More</a>
+				<button>Find out More</button>
 			</div>
 			<h3>Useful Links</h3>
 			<p>
diff --git a/zoo-css-challenge/style.css b/zoo-css-challenge/style.css
index b9007645..d1875a63 100644
--- 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,
@@ -76,8 +76,12 @@ footer {
 }
 
 .introduction {
+  background-color: white;
 }
 
+.bears p{
+  margin-bottom: 50px;
+}
 #badge {
   height: 120px;
   width: 120px;
@@ -109,23 +113,45 @@ footer {
 }
 
 .image-container img:first-of-type {
-  vertical-align: bottom;
+  /*vertical-align: bottom;*/
+  border-color: blue;
+}
+.image-container img:last-of-type {
+  border-color: purple;
 }
 
 .tigers {
   background-color: #0b3c49;
   color: #f0e100;
 }
+.tigers h2 {
+  color: rgb(147, 238, 147);
+}
+/*.tigers h3 {
+  color: white;
+}*/
 
 .giraffe {
-  background-color: #465775;
+  background-color: #483C46;
   color: #56e39f;
 }
 
 .giraffe h2 {
-  color: #ef6f6c;
+  color: #F4743B;
+}
+.giraffe h3 {
+  color: rgb(241, 144, 152);
+}
+.giraffe p {
+  color: #BEEE62;
+}
+.giraffe p:first-of-type {
+  font-size: large;
 }
 
+.news h2 {
+  text-align: center;
+}
 .card {
   display: inline-block;
   background-color: white;
@@ -166,6 +192,13 @@ footer {
   background-color: rgba(255, 255, 255, 0.75);
   padding: 50px;
   max-width: 400px;
+  border-radius: 10px;
+}
+.education button {
+  font-size: large;
+}
+.education button:hover {
+  background-color: rgb(221, 112, 243);
 }
 
 .education-container h3,
@@ -187,9 +220,22 @@ footer {
 .membership strong {
   color: #ff7f11;
 }
+.membership p {
+  max-width: 700px;
+  margin-left: 220px;
+}
 
 /*Programs*/
 
 .programs .card {
-  display: block;
+  display: inline-block;
+}
+.programs button:first-child {
+  background-color: rgb(194, 255, 192);
+}
+.programs button {
+  background-color: pink;
+}
+.programs button:last-of-type {
+  background-color: rgb(168, 162, 255);
 }