Skip to content
Permalink
17c414eb90
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

DMD3470/recipe.html

Go to file
 
 
Cannot retrieve contributors at this time
188 lines (163 sloc) 6.59 KB
Raw Blame
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/recipe.css">
<link rel="stylesheet" href="https://use.typekit.net/fqq7qtz.css">
<link rel="stylesheet" href="https://use.typekit.net/fqq7qtz.css">
</head>
<body>
<div class="border">
<div class="box">
<nav>
<a href="index.html">Home</a>
<a href="ingredients.html">Ingredients</a>
<a href="recipe.html">Recipe</a>
</nav>
</div>
</div>
<header>
<h1>Cameroonian Jollof Rice</h1>
</header>
<main>
<section>
<div class="sideimg">
<div class="slideshowcontainer">
<div class="mySlides fade">
<div class="numbertext">1 / 4</div>
<img src="images/page1.png" alt="main-slideshow1"/>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 4</div>
<img src="images/page2.png" alt="main-slideshow2"/>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 4</div>
<img src="images/page3.png" alt="main-slideshow3">
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 4</div>
<img src="images/page5.png" alt="main-slideshow4">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
<script>
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
<div class="item">
<h2>Recipe for Cameroonian Jollof Rice</h2>
<hr>
<div class="info">
<p> <img src="images/iconerrorwarningfill.svg" alt="error-sign" width="15"> Prep Time: 15 Minutes</p>
<p> <img src="images/Vector.svg" alt="time-icon" width="15"> Total Time: 1 Hour</p>
</div>
<div class="info">
<p><img src="images/iconFood.svg" alt="food-icon" width="15"> Serving Size: 4 People</p>
</div>
<hr>
<div class="item">
<div class="share">
<div class="print">
<img src="images/chevrondown.svg" alt="arrow-down" width="20"><p>Print</p>
</div>
<img src="images/iconshare.svg" alt="share-option" width="50">
</div>
</div>
<div class="item">
<hr>
<h2>Instructions</h2>
<div class="tab">
<div id="link1">
<ol>
<li>Wash the rice thoroughly in cold water until the water runs clear. Drain and set aside.</li>
<li>In a large pot, heat the vegetable oil over medium heat. Add the chopped onions and sauté until they become translucent.</li>
<li>Add the minced garlic and ginger, and cook for another minute or until fragrant.</li>
<li>Stir in the tomato paste and let it cook for a few minutes until it darkens in color.</li>
</ol>
<a href="#link2"><img src="images/Group2.svg" alt="next-arrow"></a>
</div>
<div id="link2">
<ol start ="5">
<li>Add the blended tomato puree, paprika, stock cubes, cayenne pepper, thyme, and curry powder. Mix well and allow it to simmer for about 10-15 minutes, stirring occasionally until the sauce thickens and the oil starts to separate.</li>
<li>Add the washed rice and stir it into the tomato sauce, ensuring the rice is well coated.</li>
<li>Pour in the chicken or vegetable broth, add the bay leaves, and season with salt and pepper to taste. Bring it to a boil.</li>
</ol>
<a href="#link3"><img src="images/Group2.svg" alt="next-arrow"></a>
</div>
<div id="link3">
<ol start = "8">
<li>Reduce the heat to low, cover the pot, and let the rice simmer for about 20-25 minutes or until the rice is cooked and the liquid is absorbed.</li>
<li>While the rice is cooking, steam the mixed vegetables until they are tender but still crisp.</li>
</ol>
<a href="#link4"><img src="images/Group2.svg" alt="next-arrow"></a>
</div>
<div id="link4">
<ol start = "12">
<li>Once the rice is cooked, fluff it with a fork, and gently stir in the steamed vegetables.</li>
<li>Cover the pot and let it sit for a few more minutes to allow the flavors to meld.</li>
</ol>
<p>Serve your delicious Cameroonian Jollof rice as a main course or as a side dish with your choice of protein, such as grilled chicken or fish.</p>
<a href="#link1"><img src="images/Group2.svg" alt="next-arrow"></a>
</div>
</div>
</div>
</div>
</section>
</main>
<div class="border">
<div class="box">
<footer>
<p>Pamela Mackingue</p>
<p>DMD 1070 - Web Design I</p>
</footer>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
// Get all anchor links within the tab
const tabLinks = document.querySelectorAll(".tab a");
// Add click event listeners to handle navigation
tabLinks.forEach(function(link) {
link.addEventListener("click", function(event) {
event.preventDefault();
// Hide all tab content
const tabContents = document.querySelectorAll(".tab > div");
tabContents.forEach(function(content) {
content.style.display = "none";
});
// Show the selected tab content
const targetId = link.getAttribute("href").substring(1);
const targetContent = document.getElementById(targetId);
targetContent.style.display = "block";
});
});
});
</script>
</body>
</html>