Skip to content

Kari dev #7

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
Kakahuates wants to merge 15 commits into
base: main
Choose a base branch
from
Open

Kari dev #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
e072246
border deleted
Kakahuates Dec 10, 2025
8620f1f
[fix-Bears]: Each image is assigned a different border color
abelstor Dec 13, 2025
1545113
[fix-Bears]: The images are aligned with respect to the top
abelstor Dec 13, 2025
75da47e
[fix-Giraffes]: Change text colors
abelstor Dec 13, 2025
338c116
[fix-Giraffes]: Updated font size of the 1st paragraph
abelstor Dec 13, 2025
5822b5a
[fix-Learning]: Update button styles
abelstor Dec 13, 2025
17b8e32
[fix-Learning]: Update container styles
abelstor Dec 13, 2025
440e3ae
[add-Programs]: A container is added to correct card styles
abelstor Dec 13, 2025
db036bd
[fix-Programs]: Fix broken links
abelstor Dec 13, 2025
3920a2b
[add-Visit_zoo]: The Zoo Visit section has been added
abelstor Dec 13, 2025
38b5b0b
[add-Visit_zoo]: Styles are added to the zoo-visit section
abelstor Dec 13, 2025
62ff1a4
Merge pull request #1 from Kakahuates/abel_dev
abelstor Dec 14, 2025
351c413
mis cambios locales antes de actualizar
Kakahuates Dec 17, 2025
5910636
Merge branch 'kari_dev' of github.com:Kakahuates/HTML-CSS-Challenges …
Kakahuates Dec 17, 2025
068a8bf
proyecto terminado
Kakahuates Dec 17, 2025
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
183 changes: 109 additions & 74 deletions zoo-css-challenge/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,85 +1,86 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src='https://sharp-villani-e65ba8.netlify.app/zoo.svg'
alt="zoo logo"
id="logo"
>
<nav>
<ul>
<li>Directions</li>
<li>Food & Drink</li>
<li>Education</li>
<li>Your Visit</li>
</ul>
</nav>
</header>
<main>
<section class="introduction">
<h1>Birmingham Zoo</h1>
</section>

<div id="badge">
<p>Opening 2021!</p>
</div>

<head>
<link rel="stylesheet" href="style.css">
</head>

<body>
<header>
<img src='https://sharp-villani-e65ba8.netlify.app/zoo.svg' alt="zoo logo" id="logo">
<nav>
<ul>
<li>Directions</li>
<li>Food & Drink</li>
<li>Education</li>
<li>Your Visit</li>
</ul>
</nav>
</header>
<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">
<p>Opening 2021!</p>
</div>

<section class="bears">
<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>
<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"
alt="Grizzly Bear"
width="200"
height="300"
>
<img src="https://placebear.com/400/300"
alt="Grizzly Bear"
width="400"
height="300"
>
<img src="https://placebear.com/200/400"
alt="Grizzly Bear"
width="200"
height="400"
>
<img src="https://placebear.com/200/300" alt="Grizzly Bear" width="200" height="300">
<img src="https://placebear.com/400/300" alt="Grizzly Bear" width="400" height="300">
<img src="https://placebear.com/200/400" alt="Grizzly Bear" width="200" height="400">
</div>
</section>

<section class="tigers">
<h2>Tiger</h2>
<h3>Top 5 Tiger Facts</h3>
<ol>
<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>
<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>
<li>Tigers are easily recognizable with their dark vertical stripes and reddish/orange fur.</li>
<li>The Bengal tiger is the most common tiger.</li>
<li>Tigers live between 20-26 years in the wild.</li>
<li>Unlike most other cats, tigers are great swimmers and actually like the water.</li>
</ul>
</section>

<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>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>

<p>Typically, these fascinating animals roam the open grasslands in small groups of about half a dozen.</p>

<p>Bulls sometimes battle one another by butting their long necks and heads. Such contests aren't usually dangerous and end when one animal submits and walks away.</p>
<p>Bulls sometimes battle one another by butting their long necks and heads. Such contests aren't usually
dangerous and end when one animal submits and walks away.</p>

<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>
<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">
<time>2025-12-17</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 All @@ -102,35 +103,69 @@ <h3>Learning resources for schools</h3>

<section class="membership">
<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>
<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>

<section class="programs">
<h2>Programs</h2>
<div class="card">
<h4>Children and Family Programs</h4>
<a>Find out More</a>
</div>
<div class="card">
<h4>Adult Programs</h4>
<a>Find out More</a>
</div>
<div class="card">
<h4>Youth and young adults</h4>
<a>Find out More</a>
<div class="programs-container">
<div class="card">
<h4>Children and Family Programs</h4>
<a>Find out More</a>
</div>
<div class="card">
<h4>Adult Programs</h4>
<a>Find out More</a>
</div>
<div class="card">
<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>
<footer>
<p>Open Monday-Friday 7am-4pm</p><address>1 Birmingham Road</address>
</footer>
</body>
<section class="zoo-visit">
<h2>Visit Zoo Aquarium of Madrid</h2>
<p>Home to over 6,000 animals from across the globe, the Zoo Aquarium de Madrid offers an
unforgettable experience for visitors of all ages. Discover the wonders of wildlife through our
diverse habitats, engaging interactive programs, and spectacular animal presentations.</p>
<div class="container-zoo-visit">
<div class="zoo-list">
<h3>Highlights of Your Visit:</h3>
<ul>
<li>Global Wildlife: Encounter a vast collection of species from every continent in carefully
designed ecosystems.</li>
<li>Education & Interaction: Participate in immersive educational programs and talks designed to
inspire conservation awareness.</li>
<li>Spectacular Shows: Witness breathtaking demonstrations of animal behavior and agility.</li>
<li>Conservation Mission: Learn about our active role in global species preservation and
protection efforts.</li>
<li>Perfect for All: An ideal destination for family fun, school trips, and wildlife
enthusiasts.</li>
</ul>
</div>
<div class="zoo-map">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6075.990171055011!2d-3.7638037252011856!3d40.4089596561142!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd41880ac6b6041d%3A0x89911a7043a52183!2sZoo%20Aquarium%20de%20Madrid!5e0!3m2!1ses!2ses!4v1765643247538!5m2!1ses!2ses"
width="450" height="350" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</section>

</main>
<footer>
<p>Open Monday-Friday 7am-4pm</p>
<address>1 Birmingham Road</address>
</footer>
</body>

</html>
Loading