Skip to content
This repository was archived by the owner on Oct 2, 2024. It is now read-only.

Anna clayton wright zoo #110

Open
Aclayonwright wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Anna clayton wright zoo #110

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0c58f00
Completed changes
Aclayonwright Jul 12, 2021
723c6b5
completed
Aclayonwright Jul 23, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions zoo-css-challenge/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,3 +65,4 @@ When a user hovers over the badge, add a transition so the change in colour is s
## 10) New section

If you have time, add a new section for your favorite animal.

45 changes: 29 additions & 16 deletions zoo-css-challenge/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
Expand All @@ -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">
Expand All @@ -32,34 +33,35 @@ <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
src="https://placebear.com/200/300"

id="img1" src="https://placebear.com/200/300"
alt="Grizzly Bear"
width="200"
height="300"
>
<img src="https://placebear.com/400/300"
<img id="img2" src="https://placebear.com/400/300"
alt="Grizzly Bear"
width="400"
height="300"
>
<img src="https://placebear.com/200/400"
<img id="img3" src="https://placebear.com/200/400"
alt="Grizzly Bear"
width="200"
height="400"
height="300"
>
</div>
</section>

<section class="tigers">
<h2>Tiger</h2>
<h3>Top 5 Tiger Facts</h3>
<ol>
<h2>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.
<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">
Expand All @@ -78,8 +80,14 @@ <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">

<div id="Newstitle">
<h2>News</h2>
<h2>12/07/2021
Which Cat are you?
</h2>
</div>
<section id="news">
<div class="card">
<time>2010-04-16</time>
<h4>Helping wild turtles in Seychelles</h4>
Expand All @@ -105,9 +113,10 @@ <h2>Are there any benefits or discounts for members?</h2>
<p>There are <strong>AMAZING</strong> benefits of becoming a member with Birmingham Zoo! Our members get special discounts in our shops, cafes, and unlimited entry</p>
<button>Learn More</button>
</section>
<div class="programheading">Programs</div>

<section class="programs">
<h2>Programs</h2>

<div class="card">
<h4>Children and Family Programs</h4>
<a>Find out More</a>
Expand All @@ -120,17 +129,21 @@ <h4>Adult Programs</h4>
<h4>Youth and young adults</h4>
<a>Find out More</a>
</div>
<h3>Useful Links</h3>
<p>
</p>
</section>


<H2>Useful Links</H2>
<div id="useful">

<a href="https://www.w3schools.com">w3schools.com</a>
<a href="https://www.nationalgeographic.com/" target="_blank">National Geographic</a>
<a href="http://www.wikipedia.org" target="_top">Wikipedia</a>
</section>
</div>


</main>
<footer>
<p>Open Monday-Friday 7am-4pm</p><address>1 Birmingham Road</address>
</footer>
</body>
</html>
</html>
102 changes: 84 additions & 18 deletions zoo-css-challenge/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
* {
font-family: sans-serif;
}

#logo {
border: 0;
}
header {
background-color: #211a1d;
color: #ffffff;
Expand Down Expand Up @@ -48,11 +50,14 @@ h1 {
}

h2 {
font-size: 175%;
font-size: 175%;
color:#ec4fb8;
text-align: center;
}

h3 {
font-size: 150%;
color:#F4743B;
}

button {
Expand All @@ -62,20 +67,28 @@ button {
padding: 10px 20px;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
background-color: #372772;
border: 2px solid black;
border: 2px solid rgb(145, 91, 91);
color: #fff;
font-size: larger;
}
button:hover {
background-color: #4CAF50;
color: white;
}

footer {
background-color: #211a1d;
color: #ffffff;
width: 100%;
padding: 20px;
display: flex;
justify-content: space-between;
justify-content: space-evenly;
margin-top: 50px;
}

.introduction {
.introduction{
background-color: #ffffff;
line-height: 1.5em;
word-spacing: 0.2;
}

#badge {
Expand All @@ -85,13 +98,14 @@ footer {
border-radius: 50%;
display: inline-block;
position: fixed;
bottom: 20px;
top: 20px;
right: 20px;

display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
transition: background-color 2s;
}

#badge:hover {
Expand All @@ -103,13 +117,41 @@ footer {
font-size: 125%;
}

.image-container img {
vertical-align: top;
border: 5px solid #747c92;
.image-container {
display: flex;
justify-content: space-evenly;


}

.image-container img:first-of-type {
vertical-align: bottom;
vertical-align: top;

}
#img1{
border-color:olivedrab;
border-style: solid;
border-width: 5px;
}

#news{
display: flex;
justify-content: space-around;

}

#news .card{
display: flex;
}
#img2{
border-color:blue;
border-style: solid;
border-width: 5px;
}
#img3{
border-color:crimson;
border-style: solid;
border-width: 5px;
}

.tigers {
Expand All @@ -118,22 +160,25 @@ footer {
}

.giraffe {
background-color: #465775;
color: #56e39f;
background-color: #483c46;
color: #BEEE62;
font-size:120%;
}

.giraffe h2 {
color: #ef6f6c;
}

.card {
display: inline-block;
display: flex;
flex-direction: row;
background-color: white;
padding: 20px;
margin: 10px;
margin: 10px;
width: 30%;
border: 1px solid black;
border-radius: 10px;

}

.card h4 {
Expand All @@ -160,12 +205,14 @@ footer {
background-size: cover;
background-position: center;
padding: 100px 5%;

}

.education-container {
background-color: rgba(255, 255, 255, 0.75);
padding: 50px;
max-width: 400px;
border-radius: 40px;
}

.education-container h3,
Expand All @@ -178,8 +225,9 @@ footer {
.membership {
text-align: center;
background-color: #fffffc;
max-width: 700px;
margin-left: 250px;
}

.membership h2 {
color: #ff3f00;
}
Expand All @@ -188,8 +236,26 @@ footer {
color: #ff7f11;
}

/*Programs*/
.programs{
display: flex;
}
.programheading{
text-align: center;
font-size: 200%;
color:#ec4fb8;
}

.programs .card {
display: block;
display: flex;

}
#useful {
display: flex;
justify-content: space-around;

}