Skip to content

Commit

Permalink
Add CSS styling to all pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@clodo980
clodo980 committed Oct 20, 2023
1 parent b61259f commit 5d17e60
Show file tree
Hide file tree
Showing 14 changed files with 999 additions and 67 deletions.
6 changes: 5 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
@@ -1 +1,5 @@
This is a basic HTML/CSS webpage containing some recipes.
##Odin Recipes

“Le ricette del successo!” With the help of [Chef John](https://www.youtube.com/@foodwishes) and friends from [allrecipes](https://allrecipes.com), you'll crack the code to culinary bliss with these meal ideas. Invite your family and friends to indulge in these flavorful bytes!

This is a basic HTML/CSS exercise made for [The Odin Project](https://www.theodinproject.com/lessons/foundations-recipes).
68 changes: 58 additions & 10 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,67 @@
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" id="fontlink" href="https://fonts.googleapis.com/css?family=Gabarito">
<title>La ricetta del successo!</title>
<!--FONTS-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cormorant">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Gabarito">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@900&display=swa">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Serif+4">
<!--FONTAWESOME ICONS-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.4.2/css/all.css">
<!--TITLE-->
<title>Le ricette del successo | Odin Recipes</title><link rel="icon" type="image/x-icon" href="misc_images/favicon.ico">
</head>

<body>
<h1>Odin Recipes</h1>
<ul>
<li><a href="recipes/Dumplingsoup.html">Beef and Mushroom Dumplings in Broth</a></li>
<li><a href="recipes/Gambas_al_Ajillo.html">Gambas al Ajillo (Spanish Garlic Shrimp)</a></li>
<li><a href="recipes/Jambalaya.html">Sausage & Shrimp Jambalaya</a></li>
<li><a href="recipes/Tostadas.html">Shredded Beef Tostadas</a></li>
</ul>
<nav id="navbar">
<div class="nav-container" id="logo">
<span>
<i class="fa-solid fa-cloud-meatball"></i><p id="odin">Odin Recipes</p>
</span>
</div>
<div class="nav-container" id="links">
<span>
<a href="index.html">Home</a>
<a href="recipelist.html">Recipe Index</a>
<a href="index.html#credits">Credits</a>
</span>
</div>
<div class="nav-container" id="clodo980">
<span>
<a href="https://github.com/clodo980/odin-recipes"><i class="fa-solid fa-otter"></i></a>
</span>
</div>
</nav>
<main>
<div id="landing"><h1>Le ricette<br>del successo</h1>
<h2 id="subheading">Crack the code to culinary bliss with these recipes!</h2></div>
<div id="recipe-index">
<div class="recipe-card"><a href="recipes/Dumplingsoup.html"><div class="card-image-container"><img class="landscape" src="recipes/Dumplingsoup.jpg"></div></a><div class="description"><p>Beef & Mushroom Dumpling Soup</div></div>
<div class="recipe-card"><a href="recipes/Gambas_al_Ajillo.html"><div class="card-image-container"><img class="square" src="recipes/Gambas_al_Ajillo.jpg"></div></a><div class="description"><p>Gambas al Ajillo</div></div>
<div class="recipe-card"><a href="recipes/Jambalaya.html"><div class="card-image-container"><img class="landscape" src="recipes/Jambalaya.jpg"></div></a><div class="description"><p>Sausage & Shrimp Jambalaya</div></div>
<div class="recipe-card"><a href="recipes/Tostadas.html"><div class="card-image-container"><img class="landscape" src="recipes/Tostadas.jpg"></div></a><div class="description"><p>Shredded Beef Tostadas</div></div>
</div>

</main>
<div id="more">
<h3>Welcome to Odin Recipes, the ultimate digital kitchen for tech-savvy foodies!</h3>
<p>From the digital realm to the dining table, we've cooked up a recipe selection that's as satisfying as an error-free codebase and as cozy as a home-cooked meal. These recipes seamlessly blend flavor and function, offering you tasty bytes from around the world – from East Asia's Beef & Mushroom Dumpling Soup to South Louisiana's Sausage & Shrimp Jambalaya.</p>
<p><br></p>
<p class="text-with-link">So, what are you waiting for? Come join <a href="https://github.com/TheOdinProject/">The Odin Project</a> in sharing “forked” recipes, “merging” flavors to perfection, and “pushing” the boundaries of culinary and coding bliss!</p>

<a class="button" href="recipelist.html">See Recipe List</a>
<a class="button" href="https://github.com/TheOdinProject/curriculum/blob/main/foundations/html_css/html-foundations/project-recipes.md" target="_blank">View Original Repo</a>

</div>
<footer id="credits">
<span>All recipes by <a href="https://www.youtube.com/@foodwishes">Chef John</a> and friends</span>
<span>•</span>
<span>Background image by <a href="https://unsplash.com/@ellaolsson">Ella Olsson</a> on Unsplash</span>
<span>•</span>
<span>Copywriting by clodo980 and GPT-3.5</span>
</footer>
</body>
</html>
Binary file added misc_images/chefjohn.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added misc_images/cooking-background-2.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added misc_images/cooking-background.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added misc_images/favicon.ico
View file
Binary file not shown.
210 changes: 210 additions & 0 deletions recipelist.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,210 @@
:root {
--black: #201b27;
--cremebrulee: #daac78;
--cream: #f6e2c0;
--white: #F9EFDC;
--creamsicle: #f08f45;
--creamsicle2: #f8b067;
--orange: #e06920;
}

* {
box-sizing: border-box;
margin: 0;
/* BORDERS FOR DIV CHECK -- border: 3px solid #1E152A; */
}

html {
scroll-behavior: smooth;
}
/* NAVBAR - WEB */

#navbar {
width: 100vw;
height: 70px;
margin: 0;
top: 0;
left: 0;
padding: 0 25px;
background-color: var(--cream);
color: var(--orange);
font-family: 'Gabarito', sans-serif;
position: fixed;
z-index: 999;
}

#navbar, #links {
display: flex;
align-items: center;
}

.nav-container {
flex: 1;
display: flex;
justify-content: center;
}

.nav-container:first-child > span { margin-right: auto; }

.nav-container:last-child > span { margin-left: auto; }

#logo span {
display: flex; /* or display: inline-block; */
flex-direction: row;
flex-wrap: nowrap;
}

#odin {
font-size: 33px;
letter-spacing: -0.06rem;
font-family: 'Roboto Condensed', sans-serif;
}

.fa-solid {
margin-top: 5px;
padding: 0 10px;
font-size: 1.75em;
}

#links {
margin-top: 3px;
margin-left: -5px;
text-transform: uppercase;
flex-basis: auto;

}

#links a {
padding: 0 25px;
}

#links a, .text-with-link a, #all-recipes a {
text-decoration: none;
color: var(--orange);
}

#clodo980 a {
color: var(--cremebrulee);
}

.text-with-link a:hover, #links a:hover, #clodo980 a:hover {
color: var(--creamsicle);
}

#links a:hover, .button:hover {
transform: scale(1.05);
transition: 0.2s;
}

/* MAIN SECTION */

body {
width: 100%;
height: auto;
margin: 0;
padding: 0;
background-color: var(--cream);
}

main {
padding: 175px 125px 0px 125px;
width: 100vw;
height: 800px;
}

h1 {
font-size: 60px;
font-family: Gabarito, sans-serif;
}

h1, h3 {
color: var(--orange);
}

/* RECIPE CARDS */

h3 {
font-family: 'Roboto Condensed', sans-serif;
font-size: 36px;
letter-spacing: -0.05rem;
margin-bottom: 10px;
}

#all-recipes {
display: flex;
flex-direction: flex-end;
flex-wrap: wrap;
justify-content: space-around;
}

.recipe-card {
box-sizing: border-box;
position: relative;
width: 550px;
height: 200px;
margin-top: 25px;
margin-right: 20px;
margin-left: 20px;
color: var(--black);
font-family: Gabarito, sans-serif;
overflow: clip;
}

.card-img {
position: absolute;
width: 250px;
height: auto;
top: 0;
left: 0;
overflow: hidden;
}

.card-img img {
width: 300px;
height: auto;
margin-left: -25px;
object-fit: cover;
overflow: hidden;
}

#all-recipes h3:hover {
color: var(--creamsicle);
}

.recipe-card:hover {
background-color: var(--white);
transform: scale(1.025);
transition: 0.2s;
}

.card-desc {
position: absolute;
width: 275px; /* Adjust this width as needed to fit your content */
height: auto; /* Allow the height to adjust based on content */
left: 275px; /* Adjust the left positioning as needed */
top: 0;
padding-top: 20px;
padding-left: 5px;
padding-right: 10px;
overflow: visible; /* Change overflow to visible */
}

/* FOOTER */

footer {
display: inline-block;
position: relative;
width: 100vw;
height: 75px;
background-color: var(--creamsicle);
color: var(--cream);
letter-spacing: 0.05rem;
font-family: Gabarito, sans-serif;
text-align: center;
margin: 0 auto;
padding-top: 25px;
}

footer a {
color: var(--cream);
}
86 changes: 86 additions & 0 deletions recipelist.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="recipelist.css" />
<!--FONTS-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cormorant">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Gabarito">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@900&display=swa">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Serif+4">
<!--FONTAWESOME ICONS-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.4.2/css/all.css">
<!--TITLE-->
<title>Recipe List | Odin Recipes</title><link rel="icon" type="image/x-icon" href="misc_images/favicon.ico">
</head>

<body>
<nav id="navbar">
<div class="nav-container" id="logo">
<span>
<i class="fa-solid fa-cloud-meatball"></i><p id="odin">Odin Recipes</p>
</span>
</div>
<div class="nav-container" id="links">
<span>
<a href="index.html">Home</a>
<a href="recipelist.html">Recipe Index</a>
<a href="index.html#credits">Credits</a>
</span>
</div>
<div class="nav-container" id="clodo980">
<span>
<a href="https://github.com/clodo980/odin-recipes"><i class="fa-solid fa-otter"></i></a>
</span>
</div>
</nav>

<main>
<h1>Recipe List</h1>
<div id="all-recipes"> <!--NO COPYRIGHT INFRINGEMENT INTENDED-->
<div class="recipe-card" id="recipe-card-1">
<div class="card-img">
<a href="recipes/Dumplingsoup.html"><img src="recipes/Dumplingsoup.jpg"></a>
</div>
<div class="card-desc">
<a href="recipes/Dumplingsoup.html"><h3>Beef & Mushroom Dumpling Soup</h3></a>
<p>Delectable dumplings in a zesty, ginger-based stock.</p>
</div>
</div>
<div class="recipe-card" id="recipe-card-2">
<div class="card-img">
<a href="recipes/Gambas_al_Ajillo.html"><img src="recipes/Gambas_al_Ajillo.jpg"></a>
</div>
<div class="card-desc">
<a href="recipes/Gambas_al_Ajillo.html"><h3>Gambas al Ajillo</h3></a>
<p>Shrimp sautéed in olive oil with garlic and fiery smoked paprika.</p>
</div>
</div>
<div class="recipe-card" id="recipe-card-3">
<div class="card-img">
<a href="recipes/Jambalaya.html"><img src="recipes/Jambalaya.jpg"></a>
</div>
<div class="card-desc">
<a href="recipes/Jambalaya.html"> <h3>Sausage & Shrimp Jambalaya</h3></a>
<p>A hearty brown rice dish with tomatoes and spices. Customize it with your choice of meats!</p>
</div>
</div>
<div class="recipe-card" id="recipe-card-4">
<div class="card-img">
<a href="recipes/Tostadas.html"><img src="recipes/Tostadas.jpg"></a>
</div>
<div class="card-desc">
<a href="recipes/Tostadas.html"><h3>Shredded Beef Tostadas</h3></a>
<p>Beef, onions, bell peppers, tortillas... go wild with the toppings!</p>
</div>
</div>
</div>
</main>
<footer id="credits">
<span>All recipes by <a href="https://www.youtube.com/@foodwishes">Chef John</a> and friends</span>
<span>•</span>
<span>Copywriting by clodo980 and GPT-3.5</span>
</footer>
</body>
</html>
Loading

0 comments on commit 5d17e60

Please sign in to comment.