75 lines
2.0 KiB
HTML
75 lines
2.0 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Churro Box</title>
|
|
|
|
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
|
|
<link rel="stylesheet" href="css/index.css" />
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<p>Churro Box</p>
|
|
<nav>
|
|
<ul>
|
|
<li>
|
|
<a href="index.html">Home</a>
|
|
</li>
|
|
<li>
|
|
<a href="gallery.html">Gallery</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
href="https://www.instagram.com/churro_box/"
|
|
>Instagram</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a target="_blank" rel="noopener noreferrer" href="https://youtu.be/dQw4w9WgXcQ"
|
|
>Youtube</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="title">
|
|
<h1>About Churro Box</h1>
|
|
<h2>Churro Box is the bestest doggo!</h2>
|
|
</section>
|
|
|
|
<section class="about">
|
|
<img src="img/churro0.jpg" alt="Churro" />
|
|
|
|
<div class="column">
|
|
<h3>Who is Churro?</h3>
|
|
<p>
|
|
Churro Box is <span id="age"></span> year old black labrador. She enjoys napping,
|
|
walking, and eating.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="column">
|
|
<h3>Why is she great?</h3>
|
|
<p>She loves cuddles and is always happy to see you. She is the bestest doggo!</p>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
<p>© <span id="year"></span> Churro Box</p>
|
|
</footer>
|
|
</body>
|
|
<script>
|
|
document.getElementById('year').textContent = new Date().getFullYear();
|
|
|
|
const churroAge = new Date().getFullYear() - 2016;
|
|
const aAn = churroAge === 8 || churroAge ? 'an' : 'a';
|
|
document.getElementById('age').textContent = `${aAn} ${churroAge}`;
|
|
</script>
|
|
</html>
|