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

Made changes to the files following the instructions #103

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

Made changes to the files following the instructions #103

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
4bced6c
Made changes to the files following the instructions
PeterAhern Jul 17, 2021
addc1f4
Completed all questions
PeterAhern 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
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
23 changes: 17 additions & 6 deletions zoo-css-challenge/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,11 @@
<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 Down Expand Up @@ -51,15 +56,14 @@ <h2>Bears</h2>
</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 @@ -80,6 +84,11 @@ <h3>Height and Size</h3>

<section class="news">
<h2>News</h2>
<div class="card">
<time>2021-07-23</time>
<h4>Which big cat are you?</h4>
<a>Find out More</a>
</div>
<div class="card">
<time>2010-04-16</time>
<h4>Helping wild turtles in Seychelles</h4>
Expand Down Expand Up @@ -108,6 +117,7 @@ <h2>Are there any benefits or discounts for members?</h2>

<section class="programs">
<h2>Programs</h2>
<div class="program-blocks">
<div class="card">
<h4>Children and Family Programs</h4>
<a>Find out More</a>
Expand All @@ -120,12 +130,13 @@ <h4>Adult Programs</h4>
<h4>Youth and young adults</h4>
<a>Find out More</a>
</div>
</div>
<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>
Expand Down
68 changes: 60 additions & 8 deletions zoo-css-challenge/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
* {
font-family: sans-serif;
letter-spacing: 0.15em;
}

header {
Expand Down Expand Up @@ -34,8 +35,6 @@ img {
}

h1,
h2,
h3,
h4,
h5 {
/*Purple*/
Expand All @@ -49,10 +48,13 @@ h1 {

h2 {
font-size: 175%;
color: #f1eff5;

}

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

button {
Expand All @@ -75,7 +77,12 @@ footer {
justify-content: space-between;
}

#logo {
border-style: none;
}

.introduction {
background-color: white;
}

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

display: flex;
Expand All @@ -95,6 +102,7 @@ footer {
}

#badge:hover {
transition: 500ms;
background-color: yellow;
}

Expand All @@ -109,7 +117,15 @@ footer {
}

.image-container img:first-of-type {
vertical-align: bottom;
border: 5px solid #6d0715;
}

.image-container img:nth-of-type(2) {
border: 5px solid #0c0103;
}

.image-container img:last-of-type {
border: 5px solid #03570a;
}

.tigers {
Expand All @@ -118,12 +134,21 @@ footer {
}

.giraffe {
background-color: #465775;
color: #56e39f;
background-color: #483C46;
color: #BEEE62;
}

.giraffe h2, h3 {
color: #F4743B;
}

.giraffe h2 {
color: #ef6f6c;
.giraffe p:first-of-type {
font-size: larger;
}

.news h2 {
text-align: center;
color: #0c0103;
}

.card {
Expand Down Expand Up @@ -166,6 +191,17 @@ footer {
background-color: rgba(255, 255, 255, 0.75);
padding: 50px;
max-width: 400px;
border-radius: 10%;
}

.education-container button {
font-size:larger;

}

.education-container button:hover {
background-color: yellow;
color: black;
}

.education-container h3,
Expand All @@ -180,6 +216,11 @@ footer {
background-color: #fffffc;
}

.membership p {
max-width: 700px;
margin: auto;
}

.membership h2 {
color: #ff3f00;
}
Expand All @@ -193,3 +234,14 @@ footer {
.programs .card {
display: block;
}

.programs h2 {
color: black;

}

.program-blocks {
display: flex;
flex-direction: row;
}