Thanks to visit codestin.com
Credit goes to github.com

Skip to content

change #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

change #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
36 changes: 20 additions & 16 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,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 Down Expand Up @@ -51,15 +52,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 Down Expand Up @@ -90,6 +90,11 @@ <h4>Helping wild turtles in Seychelles</h4>
<h4>Learning about the rainforest</h4>
<a>Find out More</a>
</div>
<div class="card">
<time>2024-01-18</time>
<h4>Which big cat are you?</h4>
<a>Find out More</a>
</div>
</section>

<section class="education">
Expand All @@ -106,27 +111,26 @@ <h2>Are there any benefits or discounts for members?</h2>
<button>Learn More</button>
</section>

<section class="programs">
<section class="programs-container">
<h2>Programs</h2>
<div class="card">
<h4>Children and Family Programs</h4>
<a>Find out More</a>
<h4>Children and Family Programs</h4>
<a href="#" target="_blank">Find out More</a>
</div>
<div class="card">
<h4>Adult Programs</h4>
<a>Find out More</a>
<h4>Adult Programs</h4>
<a href="#" target="_blank">Find out More</a>
</div>
<div class="card">
<h4>Youth and young adults</h4>
<a>Find out More</a>
<h4>Youth and young adults</h4>
<a href="#" target="_blank">Find out More</a>
</div>
<h3>Useful Links</h3>
<p>
</p>
<a href="https://www.w3schools.com">w3schools.com</a>
<p></p>
<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>
</section>
<a href="http://www.wikipedia.org" target="_blank">Wikipedia</a>
</section>

</main>
<footer>
Expand Down
87 changes: 77 additions & 10 deletions zoo-css-challenge/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,10 @@ footer {
}

.introduction {
background-color: white;
}
.introduction p {
line-height: 15px;
}

#badge {
Expand All @@ -85,19 +89,21 @@ 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 0.3s ease;
}

#badge:hover {
background-color: yellow;
background-color: #05f811;
color: #211a1d;
}


#badge p {
text-align: center;
font-size: 125%;
Expand All @@ -110,30 +116,68 @@ footer {

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

.image-container img:nth-of-type(2) {

vertical-align: bottom;
border: 5px solid yellow;
}

.image-container img:nth-of-type(3) {

vertical-align: bottom;
border: 5px solid pink;
}

.image-container{
display: flex;
align-items: center;
}

.tigers {
background-color: #0b3c49;
background-color: white;
color: #f0e100;
}

.tigers ul li{
color: black;
}

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

.giraffe h2 {
color: #ef6f6c;
color: #F4743B;
text-align: center;
}

.giraffe p:first-of-type{
font-size: 20px;
}

.news h2 {
display: block;
text-align: center;
}

.programs-container{
display: flex;
flex-direction: column;
align-items: center;
}
.card {
display: inline-block;
display: inline-flex;
background-color: white;
padding: 20px;
margin: 10px;
width: 30%;
border: 1px solid black;
border-radius: 10px;
align-items: center;
}

.card h4 {
Expand All @@ -147,9 +191,24 @@ footer {

.card time {
opacity: 0.5;
display: inline-block;
display: inline-flx;
margin-bottom: 10px;
}
.card-container{
display: flex;
justify-content: center;

}
button{
padding: 40 50px;
font-size: larger;
border-radius: 10px;
}

button:hover {
background-color: #6320ee;
color: #F4743B;
}

/*Education*/

Expand Down Expand Up @@ -178,6 +237,10 @@ footer {
.membership {
text-align: center;
background-color: #fffffc;
max-width: 700px;
display: block;
margin-left: 00px;
margin-right: 100px;
}

.membership h2 {
Expand All @@ -191,5 +254,9 @@ footer {
/*Programs*/

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

#logo {
border: none;
}