Skip to content
This repository was archived by the owner on Aug 17, 2024. It is now read-only.

London Class 10 | Ahmed Adam| HTML-CSS-Coursework-Week2 | RecipeCoursework #24

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

London Class 10 | Ahmed Adam| HTML-CSS-Coursework-Week2 | RecipeCoursework #24

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
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
103 changes: 103 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>foodie</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#introduction" class="nav-link">Background</a></li>
<li><a href="#what_is_the_original_recipe" class="nav-link">How it Works</a></li>
</ul>
</nav>
</header>

<section class="hero">
<div class="hero-inner">
<h1>Introducing foodie</h1>
<h2>Everywhere you go!</h2>
<img src="https://images.unsplash.com/reserve/EnF7DhHROS8OMEp2pCkx_Dufer%20food%20overhead%20hig%20res.jpg?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1478&q=80" alt="Food Image" class="btn">
<a href="#" class="btn">Learn More...</a>
</div>
</section>
<br>
<br>


<article class="article">
<section id="introduction">
<h2>Introduction</h2>
<p>The Caesar salad is a beloved, quintessential side option. This is probably one of the only salads that could be considered comfort food. What is it about the Caesar salad that makes it so popular? Perhaps it's the crunch of the romaine, or the creaminess of the dressing, the umami kick of Parmesan cheese, or that garlicky tang. Either way, it's one of the most delicious salads in existence, and even if you order it every time you see it on a menu, we bet there's a lot you didn't know about it.</p>
</section>
</article>

<article class="article">
<section id="who_invented_it">
<h2>Who Invented It?</h2>
<p>Many people think the Caesar salad was named after Julius Caesar -- it's not. The Caesar salad was invented by an Italian man named Caesar Cardini. Caesar Cardini was born in 1896. As expected, it's a little difficult tracing someone's life so long ago. However, an advertisement from Cardini's restaurant in 1919 suggests he moved to California in the 1910s.</p>
</section>
</article>

<article class="article" >
<section id="where_did_the_caesar_salad_originate">
<h2>Where did the Caesar salad originate? </h2>
<p>Caesar Cardini, who invented the salad at his Tijuana restaurant That's right -- the Caesar salad was invented in Mexico. Caesar's Bar and Grill, one fateful evening in 1924.
As legend has it, as a July 4 party raged, the kitchen's supplies dwindled, and Cardini improvised the dish based on what he had on hand.
It was a success, and the restaurant's well-heeled clientele took their approximation of the recipe back with them to Los Angeles,
where the dish slowly caught on in popularity over the next decade. By the 1940s, it had made its way to New York City, and it's been a menu mainstay ever since.
</p>
</section>
</article>
<article class="article">
<section id="what_is_the_original_recipe">
<h2>What Is the Original Recipe?</h2>
<p>Nowadays, the ingredients of a Caesar salad vary from one place to another. Here we compare the original recipe and the current one.</p>
</section>
</article>

<div class="container">
<div class="table">
<div class="table-header">
<div class="header__item"><a id="name" class="filter__link" href="#">Cardini's recipe</a></div>
<div class="header__item"><a id="wins" class="filter__link filter__link--number">Caesar salad</a></div>
</div>
<div class="table-content">
<div class="table-row">
<div class="table-data">Full stalks of lettuce</div>
<div class="table-data">200 grams of Romaine Lettuce</div>
</div>
<div class="table-row">
<div class="table-data">Raw egg</div>
<div class="table-data">1 unit of Egg</div>
</div>
<div class="table-row">
<div class="table-data">Olive oil</div>
<div class="table-data">1 clove garlic</div>
</div>
<div class="table-row">
<div class="table-data">Croutons</div>
<div class="table-data">120 milliliters of olive oil</div>
</div>
<div class="table-row">
<div class="table-data">Parmesan cheese</div>
<div class="table-data">30 grams of Anchovy</div>
</div>
<div class="table-row">
<div class="table-data">Worcestershire sauce</div>
<div class="table-data">30 grams of Parmesan cheese</div>
</div>
</div>
</div>
</div>

<footer>@CYF London</footer>

</body>

</html>
173 changes: 173 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,173 @@
body {
font-family: BlinkMacSystemFont, sans-serif;
font-size: 1.5rem;
line-height: 1;
text-align: left;
background-color: white;
margin: 15px;
text-align: justify;
}

header {
background-color: white;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
display: flex;
align-items: center;
box-shadow: 0 0 25px 0 black;
}
header * {
display: inline;
}
header ul {
margin: 20px;
right: 0;
}
header li {
margin: 20px;
right: 0;
}

header li a {
color: black;
text-decoration: none;
right: 0;
}
.hero {
/* Sizing */
width: 100vw;
height: 90vh;

/* Flexbox stuff */
display: flex;
justify-content: center;
align-items: center;

/* Text styles */
text-align: center;
color: white;
/* ADD THIS LINE */
}
.hero-inner img {
width: 100%;
max-width: 500px;
height: 90%;
display: block;
margin: 0 auto;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.hero h1 {
/* Text styles */
font-size: 4em;
color: darkred;
/* Margins */
margin-top: 0;
margin-bottom: 0.5em;
}

.hero .btn {
/* Positioning and sizing */
display: block;
width: 150px;

/* Padding and margins */
padding: 1em;
margin-top: 50px;
margin-left: auto;
margin-right: auto;

/* Text styles */
color: white;
/* CHANGE THIS LINE */
text-decoration: none;
font-size: 1.5em;

/* Border styles */
border: 2px solid white;
/* CHANGE THIS LINE */
border-radius: 20px;
}
.container {
max-width: 1000px;
margin-right: auto;
margin-left: auto;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.table {
width: 100%;
border: 1px solid color-form-highlight;
}

.table-header {
display: flex;
width: 100%;
background: #000;
padding: (half-spacing-unit * 1.5) 0;
}

.table-row {
display: flex;
width: 100%;
padding: (half-spacing-unit * 1.5) 0;

&:nth-of-type(odd) {
background: color-form-highlight;
}
}

.table-data,
.header__item {
flex: 1 1 20%;
text-align: center;
text-align: justify;
}

.header__item {
text-transform: uppercase;
text-align: justify;
}

.filter__link {
color: white;
text-decoration: none;
position: relative;
display: inline-block;
padding-left: base-spacing-unit;
padding-right: base-spacing-unit;

&::after {
content: "";
position: absolute;
right: -(half-spacing-unit * 1.5);
color: white;
font-size: half-spacing-unit;
top: 50%;
transform: translateY(-50%);
}

&.desc::after {
content: "(desc)";
}

&.asc::after {
content: "(asc)";
}
}

footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: rgba(31, 25, 25, 0.158);
color: black;
text-align: center;
}