FINAL COADING | Computer 11

css

<>stylesheet.css>...

body{

font-family:Georgia, 'Times New Roman', Times, serif;

background:whitesmoke;

min-height: 100vh;

display:flex;

flex-direction:column;

}

.navbar{

background:navy;

color:white;

display:flex;

justify-content:space-between;

align-items:center;

padding:15px 15px;

}

.logo{

font-size:1.5rem;

font-weight:bold;

color:whitesmoke;

}

.nav-links{

display:flex;

list-style:none;

gap:20px;

}

.nav-links a{

color:white;

text-decoration:none;

}

.nav-links a:hover{

color: yellowgreen;

}

.menu-toggle{

display:none;

font-size:1.8rem;

cursor:pointer;

}

.controls{

display:flex;

justify-content:center;

align-items:center;

gap:15px;

flex-wrap:wrap;

padding:20px;

background:white;

}

.action-btn, .page-btn{

border:none;

padding:12px 20px;

border-radius:8px;

cursor:pointer;

font-size:1rem;

}

.action-btn{

background: whitesmoke;

color: black;

}

.action-btn:hover{

background: pink;

}

.page-btn {

background: navy;

color:white;

}

.page-btn:hover{

background:blue;

}

.page-nav{

display:flex;

justify-content: center;

margin:20px 0;

}

.button-container{

display:flex;

justify-content:flex-end;

}

.comic-container{

flex:1;

display:flex;

justify-content:center;

align-items:center;

padding:20px;

}

.comic-image{

width:100%;

max-width:900px;

height:auto;

border-radius:10px;

box-shadow:0 4px 12px rgba(0,0,0,0.2);

}

footer{

background:#222;

color: white;

text-align:center;

padding:15px;

}

footer a{

color:white;

text-decoration:underline;

}

footer a:hover{

color:lightskyblue;

text-decoration:none;

}

footer p{

color:white;

}

.container {

width: 95%;

max-width: 1400px;

margin:auto;

padding: 20px;

}

header h1 {

text-align: left;

color: black;

font-size: 60px;

}

p {

font-size: 25px;

color: black;

margin-bottom: 60px;

}

h2 {

margin-top: 20px;

font-size: 40px;

color: black;

}

.gallery {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(250px,1fr));

gap: 30px;

}

.item {

width: 100%;

}

.item img {

width: 100%;

height: auto;

border-radius: 15px;

}

.item:last-child {

grid-column: 2 / 3;

}

.caption {

margin-top: 10px;

margin-bottom: 20px;

font-size: 30px;

color: black;

}

@media(max-width:768px){

.nav-links{

display:none;

}

.menu-toggle{

display:block;

cursor:pointer;

font-size:2rem;

}

.nav-links{

display:none;

flex-direction:column;

width:100%;

}

.nav-links.active{

display:flex;

flex-direction:column;

background:navy;

padding:15px 0;

gap:10px;

text-align:center;

}

.controls{

flex-direction:column;

}

.page-nav{

width:100%;

justify-content:center;

}

.page-btn{

flex:1;

}

HOME PAGE

<>index5.html>...

<!DOCTYPE html>

<head>

<title>Bo^okwarm</title>

</head>

<body>

<div class="logo">📕 Bo^okwarm</div>

<li><a href="characters.html">Characters</a></li>

</ul>

☰

</div>

</nav>

</section>

</main>

<button class="page-btn">Start Reading 👀</button>

</a>

</div>

<p>© Bo^okwarm</p>

<p>

More of the author's work:

<a href="https://jadema200907.wixsite.com" target="_blank">Visit My Portfolio</a>

</p>

</footer>

const likeBtn = document.getElementById("likeBtn");

likeBtn.addEventListener("click", function() {

if (likeBtn.innerHTML === "🤍") {

likeBtn.innerHTML = "💖";

} else {

likeBtn.innerHTML = "🤍";

}

});

</script>

const saveBtn = document.getElementById("saveBtn");

saveBtn.addEventListener("click", function() {

if (saveBtn.innerHTML === "🔖") {

saveBtn.innerHTML = "📌";

} else {

saveBtn.innerHTML = "🔖";

}

});

</script>

const menuToggle = document.querySelector(".menu-toggle");

const navLinks = document.querySelector(".nav-links");

menuToggle.addEventListener("click",() => {

navLinks.classList.toggle("active");

});

</script>

</body>

</html>

PAGE 1

<>page1.html>...

<!DOCTYPE html>

<head>

<title>Bo^okwarm</title>

</head>

<body>

<div class="logo">📕 Bo^okwarm</div>

<li><a href="characters.html">Characters</a></li>

</ul>

☰

</div>

</nav>

</section>

</main>

<button class="page-btn">⬅ Previous</button>

</a>

</a>

</div>

<p>© Bo^okwarm</p>

<p>

More of the author's work:

<a href="https://jadema200907.wixsite.com" target="_blank">Visit My Portfolio</a>

</p>

</footer>

const likeBtn = document.getElementById("likeBtn");

likeBtn.addEventListener("click", function() {

if (likeBtn.innerHTML === "🤍") {

likeBtn.innerHTML = "💖";

} else {

likeBtn.innerHTML = "🤍";

}

});

</script>

const saveBtn = document.getElementById("saveBtn");

saveBtn.addEventListener("click", function() {

if (saveBtn.innerHTML === "🔖") {

saveBtn.innerHTML = "📌";

} else {

saveBtn.innerHTML = "🔖";

}

});

</script>

</body>

</html>

PAGE 2

<>page2.html>...

<!DOCTYPE html>

<head>

<title>Bo^okwarm</title>

</head>

<body>

<div class="logo">📕 Bo^okwarm</div>

<li><a href="characters.html">Characters</a></li>

</ul>

☰

</div>

</nav>

</section>

</main>

<button class="page-btn">⬅ Previous</button>

</a>

</a>

</div>

<p>© Bo^okwarm</p>

<p>

More of the author's work:

<a href="https://jadema200907.wixsite.com" target="_blank">Visit My Portfolio</a>

</p>

</footer>

const likeBtn = document.getElementById("likeBtn");

likeBtn.addEventListener("click", function() {

if (likeBtn.innerHTML === "🤍") {

likeBtn.innerHTML = "💖";

} else {

likeBtn.innerHTML = "🤍";

}

});

</script>

const saveBtn = document.getElementById("saveBtn");

saveBtn.addEventListener("click", function() {

if (saveBtn.innerHTML === "🔖") {

saveBtn.innerHTML = "📌";

} else {

saveBtn.innerHTML = "🔖";

}

});

</script>

</body>

</html>

PAGE 3

<>page3.html>...

<!DOCTYPE html>

<head>

<title>Bo^okwarm</title>

</head>

<body>

<div class="logo">📕 Bo^okwarm</div>

<li><a href="characters.html">Characters</a></li>

</ul>

☰

</div>

</nav>

</section>

</main>

<button class="page-btn">⬅ Previous</button>

</a>

</a>

</div>

<p>© Bo^okwarm</p>

<p>

More of the author's work:

<a href="https://jadema200907.wixsite.com" target="_blank">Visit My Portfolio</a>

</p>

</footer>

const likeBtn = document.getElementById("likeBtn");

likeBtn.addEventListener("click", function() {

if (likeBtn.innerHTML === "🤍") {

likeBtn.innerHTML = "💖";

} else {

likeBtn.innerHTML = "🤍";

}

});

</script>

const saveBtn = document.getElementById("saveBtn");

saveBtn.addEventListener("click", function() {

if (saveBtn.innerHTML === "🔖") {

saveBtn.innerHTML = "📌";

} else {

saveBtn.innerHTML = "🔖";

}

});

</script>

</body>

</html>

PAGE 4

<>page4.html>...

<!DOCTYPE html>

<head>

<title>Bo^okwarm</title>

</head>

<body>

<div class="logo">📕 Bo^okwarm</div>

<li><a href="characters.html">Characters</a></li>

</ul>

☰

</div>

</nav>

</section>

</main>

<button class="page-btn">⬅ Previous</button>

</a>

</a>

</div>

<p>© Bo^okwarm</p>

<p>

More of the author's work:

<a href="https://jadema200907.wixsite.com" target="_blank">Visit My Portfolio</a>

</p>

</footer>

const likeBtn = document.getElementById("likeBtn");

likeBtn.addEventListener("click", function() {

if (likeBtn.innerHTML === "🤍") {

likeBtn.innerHTML = "💖";

} else {

likeBtn.innerHTML = "🤍";

}

});

</script>

const saveBtn = document.getElementById("saveBtn");

saveBtn.addEventListener("click", function() {

if (saveBtn.innerHTML === "🔖") {

saveBtn.innerHTML = "📌";

} else {

saveBtn.innerHTML = "🔖";

}

});

</script>

</body>

</html>

PAGE 5

<>page5.html>...

<!DOCTYPE html>

<head>

<title>Bo^okwarm</title>

</head>

<body>

<div class="logo">📕 Bo^okwarm</div>

<li><a href="characters.html">Characters</a></li>

</ul>

☰

</div>

</nav>

</section>

</main>

<button class="page-btn">⬅ Previous</button>

</a>

</a>

</div>

<p>© Bo^okwarm</p>

<p>

More of the author's work:

<a href="https://jadema200907.wixsite.com" target="_blank">Visit My Portfolio</a>

</p>

</footer>

const likeBtn = document.getElementById("likeBtn");

likeBtn.addEventListener("click", function() {

if (likeBtn.innerHTML === "🤍") {

likeBtn.innerHTML = "💖";

} else {

likeBtn.innerHTML = "🤍";

}

});

</script>

const saveBtn = document.getElementById("saveBtn");

saveBtn.addEventListener("click", function() {

if (saveBtn.innerHTML === "🔖") {

saveBtn.innerHTML = "📌";

} else {

saveBtn.innerHTML = "🔖";

}

});

</script>

</body>

</html>

PAGE 6

<>page6.html>...

<!DOCTYPE html>

<head>

<title>Bo^okwarm</title>

</head>

<body>

<div class="logo">📕 Bo^okwarm</div>

<li><a href="characters.html">Characters</a></li>

</ul>

☰

</div>

</nav>

</section>

</main>

<button class="page-btn">⬅ Previous</button>

</a>

</a>

</div>

<p>

More of the author's work:

<a href="https://jadema200907.wixsite.com" target="_blank">Visit My Portfolio</a>

</p>

</footer>

const likeBtn = document.getElementById("likeBtn");

likeBtn.addEventListener("click", function() {

if (likeBtn.innerHTML === "🤍") {

likeBtn.innerHTML = "💖";

} else {

likeBtn.innerHTML = "🤍";

}

});

</script>

const saveBtn = document.getElementById("saveBtn");

saveBtn.addEventListener("click", function() {

if (saveBtn.innerHTML === "🔖") {

saveBtn.innerHTML = "📌";

} else {

saveBtn.innerHTML = "🔖";

}

});

</script>

</body>

</html>

PAGE 7

<>page7.html>...

<!DOCTYPE html>

<head>

<title>Bo^okwarm</title>

</head>

<body>

<div class="logo">📕 Bo^okwarm</div>

<li><a href="characters.html">Characters</a></li>

</ul>

☰

</div>

</nav>

</section>

</main>

<button class="page-btn">⬅ Previous</button>

</a>

</a>

</div>

<p>

More of the author's work:

<a href="https://jadema200907.wixsite.com" target="_blank">Visit My Portfolio</a>

</p>

</footer>

const likeBtn = document.getElementById("likeBtn");

likeBtn.addEventListener("click", function() {

if (likeBtn.innerHTML === "🤍") {

likeBtn.innerHTML = "💖";

} else {

likeBtn.innerHTML = "🤍";

}

});

</script>

const saveBtn = document.getElementById("saveBtn");

saveBtn.addEventListener("click", function() {

if (saveBtn.innerHTML === "🔖") {

saveBtn.innerHTML = "📌";

} else {

saveBtn.innerHTML = "🔖";

}

});

</script>

</body>

</html>

PAGE 8

<>page8.html>...

<!DOCTYPE html>

<head>

<title>Bo^okwarm</title>

</head>

<body>

<div class="logo">📕 Bo^okwarm</div>

<li><a href="characters.html">Characters</a></li>

</ul>

☰

</div>

</nav>

</section>

</main>

<button class="page-btn">⬅ Previous</button>

</a>

</div>

<p>

More of the author's work:

<a href="https://jadema200907.wixsite.com" target="_blank">Visit My Portfolio</a>

</p>

</footer>

const likeBtn = document.getElementById("likeBtn");

likeBtn.addEventListener("click", function() {

if (likeBtn.innerHTML === "🤍") {

likeBtn.innerHTML = "💖";

} else {

likeBtn.innerHTML = "🤍";

}

});

</script>

const saveBtn = document.getElementById("saveBtn");

saveBtn.addEventListener("click", function() {

if (saveBtn.innerHTML === "🔖") {

saveBtn.innerHTML = "📌";

} else {

saveBtn.innerHTML = "🔖";

}

});

</script>

</body>

</html>

CHARACTERS

<>characters.html>...

<!DOCTYPE html>

<head>

<title>Bo^okwarm</title>

</head>

<body>

<div class="logo">📕 Bo^okwarm</div>

<li><a href="characters.html">Characters</a></li>

</ul>

</nav>

<h2>Character designs</h2>

<div class="caption">Acadian Man</div>

</div>

<div class="caption">Acadian Woman</div>

</div>

<div class="caption">Acadian Girl</div>

</div>

<div class="caption">Acadian Boy</div>

</div>

<div class="caption">British Guard</div>

</div>

<div class="caption">Mi'kmaq Speaker</div>

</div>

<div class="caption">News Reporter</div>

</div>

<p>

More of the author's work:

<a href="https://jadema200907.wixsite.com" target="_blank">Visit My Portfolio</a>

</p>

</footer>

</body>

</html>