adding base Project

This commit is contained in:
Azmat-7860
2026-10-22 23:53:50 +05:30
commit af8edee8b1
718 changed files with 38983 additions and 0 deletions
@@ -0,0 +1,61 @@
<!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>Error || Final</title>
<!-- favicon -->
<link rel="shortcut icon" href="./assets/favicon.ico" type="image/x-icon" />
<!-- normalize -->
<link rel="stylesheet" href="./css/normalize.css" />
<!-- font-awesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
/>
<!-- main css -->
<link rel="stylesheet" href="./css/main.css" />
</head>
<body>
<!-- nav -->
<nav class="navbar">
<div class="nav-center">
<div class="nav-header">
<a href="index.html" class="nav-logo">
<img src="./assets/logo.svg" alt="simply recipes" />
</a>
<button class="nav-btn btn">
<i class="fas fa-align-justify"></i>
</button>
</div>
<div class="nav-links">
<a href="index.html" class="nav-link"> home </a>
<a href="about.html" class="nav-link"> about </a>
<a href="tags.html" class="nav-link"> tags </a>
<a href="recipes.html" class="nav-link"> recipes </a>
<div class="nav-link contact-link">
<a href="contact.html" class="btn"> contact </a>
</div>
</div>
</div>
</nav>
<!-- end of nav -->
<main class="page error-page">
<section>
<h1>404</h1>
<h3>page not found</h3>
</section>
</main>
<!-- footer -->
<footer class="page-footer">
<p>
&copy; <span id="date"></span>
<span class="footer-logo">SimplyRecipes</span> Built by
<a href="https://www.johnsmilga.com/">Coding Addict</a>
</p>
</footer>
<script src="./js/app.js"></script>
</body>
</html>
@@ -0,0 +1,115 @@
<!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>About || Final</title>
<!-- favicon -->
<link rel="shortcut icon" href="./assets/favicon.ico" type="image/x-icon" />
<!-- normalize -->
<link rel="stylesheet" href="./css/normalize.css" />
<!-- font-awesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
/>
<!-- main css -->
<link rel="stylesheet" href="./css/main.css" />
</head>
<body>
<!-- nav -->
<nav class="navbar">
<div class="nav-center">
<div class="nav-header">
<a href="index.html" class="nav-logo">
<img src="./assets/logo.svg" alt="simply recipes" />
</a>
<button class="nav-btn btn">
<i class="fas fa-align-justify"></i>
</button>
</div>
<div class="nav-links">
<a href="index.html" class="nav-link"> home </a>
<a href="about.html" class="nav-link"> about </a>
<a href="tags.html" class="nav-link"> tags </a>
<a href="recipes.html" class="nav-link"> recipes </a>
<div class="nav-link contact-link">
<a href="contact.html" class="btn"> contact </a>
</div>
</div>
</div>
</nav>
<!-- end of nav -->
<main class="page">
<section class="about-page">
<article>
<h2>I'm baby coloring book poke taxidermy</h2>
<p>
Taxidermy forage glossier letterpress heirloom before they sold out
you probably haven't heard of them banh mi biodiesel chia.
</p>
<p>
Taiyaki tumblr flexitarian jean shorts brunch, aesthetic salvia
retro.
</p>
<a href="contact.html" class="btn"> contact </a>
</article>
<!-- needs fixes -->
<img
src="./assets/about.jpeg"
alt="Person Pouring Salt in Bowl"
class="img about-img"
/>
</section>
<section class="featured-recipes">
<h5 class="featured-title">Look At This Awesomesouce!</h5>
<div class="recipes-list">
<!-- single recipe -->
<a href="single-recipe.html" class="recipe">
<img
src="./assets/recipes/recipe-1.jpeg"
class="img recipe-img"
alt=""
/>
<h5>Carne Asada</h5>
<p>Prep : 15min | Cook : 5min</p>
</a>
<!-- end of single recipe -->
<!-- single recipe -->
<a href="single-recipe.html" class="recipe">
<img
src="./assets/recipes/recipe-2.jpeg"
class="img recipe-img"
alt=""
/>
<h5>Greek Ribs</h5>
<p>Prep : 15min | Cook : 5min</p>
</a>
<!-- end of single recipe -->
<!-- single recipe -->
<a href="single-recipe.html" class="recipe">
<img
src="./assets/recipes/recipe-3.jpeg"
class="img recipe-img"
alt=""
/>
<h5>Vegetable Soup</h5>
<p>Prep : 15min | Cook : 5min</p>
</a>
<!-- end of single recipe -->
</div>
</section>
</main>
<!-- footer -->
<footer class="page-footer">
<p>
&copy; <span id="date"></span>
<span class="footer-logo">SimplyRecipes</span> Built by
<a href="https://www.johnsmilga.com/">Coding Addict</a>
</p>
</footer>
<script src="./js/app.js"></script>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 127 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 122 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 79 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 362 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 73 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

@@ -0,0 +1,129 @@
<!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>Contact || Final</title>
<!-- favicon -->
<link rel="shortcut icon" href="./assets/favicon.ico" type="image/x-icon" />
<!-- normalize -->
<link rel="stylesheet" href="./css/normalize.css" />
<!-- font-awesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
/>
<!-- main css -->
<link rel="stylesheet" href="./css/main.css" />
</head>
<body>
<!-- nav -->
<nav class="navbar">
<div class="nav-center">
<div class="nav-header">
<a href="index.html" class="nav-logo">
<img src="./assets/logo.svg" alt="simply recipes" />
</a>
<button class="nav-btn btn">
<i class="fas fa-align-justify"></i>
</button>
</div>
<div class="nav-links">
<a href="index.html" class="nav-link"> home </a>
<a href="about.html" class="nav-link"> about </a>
<a href="tags.html" class="nav-link"> tags </a>
<a href="recipes.html" class="nav-link"> recipes </a>
<div class="nav-link contact-link">
<a href="contact.html" class="btn"> contact </a>
</div>
</div>
</div>
</nav>
<!-- end of nav -->
<main class="page">
<section class="contact-container">
<article class="contact-info">
<h3>Want To Get In Touch?</h3>
<p>
Four dollar toast biodiesel plaid salvia actually pickled banjo
bespoke mlkshk intelligentsia edison bulb synth.
</p>
<p>Cardigan prism bicycle rights put a bird on it deep v.</p>
<p>
Hashtag swag health goth air plant, raclette listicle fingerstache
cold-pressed fanny pack bicycle rights cardigan poke.
</p>
</article>
<article>
<form class="form contact-form">
<div class="form-row">
<label html="name" class="form-label">your name</label>
<input type="text" name="name" id="name" class="form-input" />
</div>
<div class="form-row">
<label html="email" class="form-label">your email</label>
<input type="text" name="email" id="email" class="form-input" />
</div>
<div class="form-row">
<label html="message" class="form-label">message</label>
<textarea name="message" id="message" class="form-textarea"></textarea>
</div>
<button type="submit" class="btn btn-block">
submit
</button>
</form>
</article>
</section>
<!-- featured recipes -->
<section class="featured-recipes">
<h5 class="featured-title">Look At This Awesomesouce!</h5>
<div class="recipes-list">
<!-- single recipe -->
<a href="single-recipe.html" class="recipe">
<img
src="./assets/recipes/recipe-1.jpeg"
class="img recipe-img"
alt=""
/>
<h5>Carne Asada</h5>
<p>Prep : 15min | Cook : 5min</p>
</a>
<!-- end of single recipe -->
<!-- single recipe -->
<a href="single-recipe.html" class="recipe">
<img
src="./assets/recipes/recipe-2.jpeg"
class="img recipe-img"
alt=""
/>
<h5>Greek Ribs</h5>
<p>Prep : 15min | Cook : 5min</p>
</a>
<!-- end of single recipe -->
<!-- single recipe -->
<a href="single-recipe.html" class="recipe">
<img
src="./assets/recipes/recipe-3.jpeg"
class="img recipe-img"
alt=""
/>
<h5>Vegetable Soup</h5>
<p>Prep : 15min | Cook : 5min</p>
</a>
<!-- end of single recipe -->
</div>
</section>
</main>
<!-- footer -->
<footer class="page-footer">
<p>
&copy; <span id="date"></span>
<span class="footer-logo">SimplyRecipes</span> Built by
<a href="https://www.johnsmilga.com/">Coding Addict</a>
</p>
</footer>
<script src="./js/app.js"></script>
</body>
</html>
@@ -0,0 +1,746 @@
*,
::after,
::before {
box-sizing: border-box;
}
/* fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600&family=Montserrat&display=swap');
html {
font-size: 100%;
} /*16px*/
:root {
/* colors */
--primary-100: #e2e0ff;
--primary-200: #c1beff;
--primary-300: #a29dff;
--primary-400: #837dff;
--primary-500: #645cff;
--primary-600: #504acc;
--primary-700: #3c3799;
--primary-800: #282566;
--primary-900: #141233;
/* grey */
--grey-50: #f8fafc;
--grey-100: #f1f5f9;
--grey-200: #e2e8f0;
--grey-300: #cbd5e1;
--grey-400: #94a3b8;
--grey-500: #64748b;
--grey-600: #475569;
--grey-700: #334155;
--grey-800: #1e293b;
--grey-900: #0f172a;
/* rest of the colors */
--black: #222;
--white: #fff;
--red-light: #f8d7da;
--red-dark: #842029;
--green-light: #d1e7dd;
--green-dark: #0f5132;
/* fonts */
--headingFont: 'Roboto', sans-serif;
--bodyFont: 'Nunito', sans-serif;
--smallText: 0.7em;
/* rest of the vars */
--backgroundColor: var(--grey-50);
--textColor: var(--grey-900);
--borderRadius: 0.25rem;
--letterSpacing: 1px;
--transition: 0.3s ease-in-out all;
--max-width: 1120px;
--fixed-width: 600px;
/* box shadow*/
--shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
--shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
body {
background: var(--backgroundColor);
font-family: var(--bodyFont);
font-weight: 400;
line-height: 1.75;
color: var(--textColor);
}
p {
margin-top: 0;
margin-bottom: 1.5rem;
max-width: 40em;
}
h1,
h2,
h3,
h4,
h5 {
margin: 0;
margin-bottom: 1.38rem;
font-family: var(--headingFont);
font-weight: 400;
line-height: 1.3;
text-transform: capitalize;
letter-spacing: var(--letterSpacing);
}
h1 {
margin-top: 0;
font-size: 3.052rem;
}
h2 {
font-size: 2.441rem;
}
h3 {
font-size: 1.953rem;
}
h4 {
font-size: 1.563rem;
}
h5 {
font-size: 1.25rem;
}
small,
.text-small {
font-size: var(--smallText);
}
a {
text-decoration: none;
}
ul {
list-style-type: none;
padding: 0;
}
.img {
width: 100%;
display: block;
object-fit: cover;
}
/* buttons */
.btn {
cursor: pointer;
color: var(--white);
background: var(--primary-500);
border: transparent;
border-radius: var(--borderRadius);
letter-spacing: var(--letterSpacing);
padding: 0.375rem 0.75rem;
box-shadow: var(--shadow-1);
transition: var(--transtion);
text-transform: capitalize;
display: inline-block;
}
.btn:hover {
background: var(--primary-700);
box-shadow: var(--shadow-3);
}
.btn-hipster {
color: var(--primary-500);
background: var(--primary-200);
}
.btn-hipster:hover {
color: var(--primary-200);
background: var(--primary-700);
}
.btn-block {
width: 100%;
}
/* alerts */
.alert {
padding: 0.375rem 0.75rem;
margin-bottom: 1rem;
border-color: transparent;
border-radius: var(--borderRadius);
}
.alert-danger {
color: var(--red-dark);
background: var(--red-light);
}
.alert-success {
color: var(--green-dark);
background: var(--green-light);
}
/* form */
.form {
width: 90vw;
max-width: var(--fixed-width);
background: var(--white);
border-radius: var(--borderRadius);
box-shadow: var(--shadow-2);
padding: 2rem 2.5rem;
margin: 3rem auto;
}
.form-label {
display: block;
font-size: var(--smallText);
margin-bottom: 0.5rem;
text-transform: capitalize;
letter-spacing: var(--letterSpacing);
}
.form-input,
.form-textarea {
width: 100%;
padding: 0.375rem 0.75rem;
border-radius: var(--borderRadius);
background: var(--backgroundColor);
border: 1px solid var(--grey-200);
}
.form-row {
margin-bottom: 1rem;
}
.form-textarea {
height: 7rem;
}
::placeholder {
font-family: inherit;
color: var(--grey-400);
}
.form-alert {
color: var(--red-dark);
letter-spacing: var(--letterSpacing);
text-transform: capitalize;
}
/* alert */
@keyframes spinner {
to {
transform: rotate(360deg);
}
}
.loading {
width: 6rem;
height: 6rem;
border: 5px solid var(--grey-400);
border-radius: 50%;
border-top-color: var(--primary-500);
animation: spinner 0.6s linear infinite;
}
.loading {
margin: 0 auto;
}
/* title */
.title {
text-align: center;
}
.title-underline {
background: var(--primary-500);
width: 7rem;
height: 0.25rem;
margin: 0 auto;
margin-top: -1rem;
}
/*
===============
Navbar
===============
*/
.navbar {
display: flex;
align-items: center;
justify-content: center;
}
.nav-center {
width: 90vw;
max-width: var(--max-width);
}
.nav-header {
height: 6rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-header img {
width: 200px;
}
.nav-logo {
display: flex;
align-items: flex-end;
}
.nav-btn {
padding: 0.15rem 0.75rem;
}
.nav-btn i {
font-size: 1.25rem;
}
.nav-links {
height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
transition: var(--transition);
}
.show-links {
height: 23.9375rem;
}
.nav-link {
display: block;
text-align: center;
font-size: 1.25rem;
text-transform: capitalize;
color: var(--grey-900);
letter-spacing: var(--letterSpacing);
padding: 1rem 0;
border-top: 1px solid var(--grey-500);
transition: var(--transition);
}
.nav-link:hover {
color: var(--primary-500);
}
.contact-link a {
padding: 0.15rem 1rem;
}
@media screen and (min-width: 992px) {
.navbar {
height: 6rem;
}
.nav-center {
display: flex;
align-items: center;
}
.nav-header {
padding: 0;
margin-right: 2rem;
height: auto;
}
.nav-btn {
display: none;
}
.nav-links {
height: auto !important;
flex-direction: row;
align-items: center;
width: 100%;
}
.nav-link {
padding: 0;
border-top: none;
margin-right: 1rem;
font-size: 1rem;
}
.contact-link {
margin-right: 0;
margin-left: auto;
}
}
/*
===============
Page
===============
*/
.page {
width: 90vw;
max-width: var(--max-width);
margin: 0 auto;
}
.page {
padding-top: 2rem;
min-height: calc(100vh - (6rem + 4rem));
}
/*
===============
Footer
===============
*/
.page-footer {
text-align: center;
height: 4rem;
display: flex;
align-items: center;
justify-content: center;
background: var(--black);
color: var(--white);
}
.page-footer h5 {
margin-top: 0;
margin-bottom: 0;
}
.page-footer p {
margin-bottom: 0;
}
.page-footer .footer-logo,
.page-footer a {
color: var(--primary-500);
}
/*
===============
Hero
===============
*/
.hero {
height: 40vh;
position: relative;
margin-bottom: 2rem;
background: url('../assets/main.jpeg') center/cover no-repeat;
border-radius: var(--borderRadius);
}
.hero-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.4);
border-radius: var(--borderRadius);
}
.hero-text {
color: var(--white);
text-align: center;
}
@media only screen and (min-width: 768px) {
.hero-text h1 {
font-size: 4rem;
margin-bottom: 0;
}
}
/*
===============
Recipes
===============
*/
.recipes-container {
display: grid;
gap: 2rem 1rem;
}
.recipes-list {
display: grid;
gap: 2rem 1rem;
padding-bottom: 3rem;
}
.tags-container {
order: 1;
display: flex;
flex-direction: column;
padding-bottom: 3rem;
/* background: blue; */
}
.tags-container h4 {
margin-bottom: 0.5rem;
font-weight: 500;
}
.tags-list {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.tags-list a {
text-transform: capitalize;
display: block;
color: var(--grey-500);
transition: var(--transition);
}
.tags-list a:hover {
color: var(--primary-500);
}
.recipe {
display: block;
}
.recipe-img {
height: 15rem;
border-radius: var(--borderRadius);
margin-bottom: 1rem;
}
.recipe h5 {
margin-bottom: 0;
margin-top: 0.25rem;
line-height: 1;
color: var(--grey-700);
}
.recipe p {
margin-bottom: 0;
line-height: 1;
color: var(--grey-500);
margin-top: 0.5rem;
letter-spacing: var(--letterSpacing);
}
@media screen and (min-width: 576px) {
.recipes-list {
grid-template-columns: 1fr 1fr;
}
.recipe-img {
height: 10rem;
}
}
@media screen and (min-width: 992px) {
.recipes-container {
grid-template-columns: 200px 1fr;
gap: 1rem;
}
.recipes-list {
grid-template-columns: 1fr 1fr;
}
.recipe p {
font-size: 0.85rem;
}
.tags-container {
order: 0;
/* background: blue; */
}
.tags-list {
display: grid;
grid-template-columns: 1fr;
}
}
@media screen and (min-width: 1200px) {
.recipe h5 {
font-size: 1.15rem;
}
.recipes-list {
grid-template-columns: 1fr 1fr 1fr;
}
}
/*
===============
Error
===============
*/
.error-page {
text-align: center;
padding-top: 5rem;
}
.error-page h1 {
font-size: 9rem;
}
/*
===============
About Page
===============
*/
.about-page h2 {
text-transform: none;
font-weight: bold;
}
.about-page {
display: grid;
gap: 2rem 4rem;
padding-bottom: 3rem;
}
.about-img {
border-radius: var(--borderRadius);
height: 300px;
}
@media screen and (min-width: 992px) {
.about-page {
grid-template-columns: 1fr 1fr;
grid-template-rows: 400px;
align-items: center;
}
.about-img {
height: 100%;
}
}
.featured-title {
text-align: center;
}
/*
===============
Contact Page
===============
*/
.contact-form {
width: 100%;
margin: 0;
}
.contact-container {
display: grid;
gap: 2rem 3rem;
padding-bottom: 3rem;
}
@media screen and (min-width: 992px) {
.contact-container {
grid-template-columns: 1fr 450px;
align-items: center;
}
}
/*
===============
Tags Page
===============
*/
.tags-wrapper {
display: grid;
gap: 2rem;
padding-bottom: 3rem;
}
.tag {
background: var(--grey-500);
border-radius: var(--borderRadius);
text-align: center;
color: var(--white);
transition: var(--transition);
padding: 0.75rem 0;
}
.tag:hover {
background: var(--primary-500);
}
.tag h5,
.tag p {
margin-bottom: 0;
}
.tag h5 {
font-weight: 600;
}
@media screen and (min-width: 576px) {
.tags-wrapper {
grid-template-columns: 1fr 1fr;
}
}
@media screen and (min-width: 992px) {
.tags-wrapper {
grid-template-columns: 1fr 1fr 1fr;
}
}
/*
===============
Recipe Template
===============
*/
.recipe-hero {
display: grid;
gap: 3rem;
}
.recipe-hero-img {
height: 300px;
border-radius: var(--borderRadius);
}
.recipe-info p {
color: var(--grey-600);
}
.recipe-icons {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin: 2rem 0;
text-align: center;
}
.recipe-icons i {
font-size: 1.5rem;
color: var(--primary-500);
}
.recipe-icons h5,
.recipe-icons p {
margin-bottom: 0;
font-size: 0.85em;
}
.recipe-icons p {
color: var(--grey-600);
}
.recipe-tags {
display: flex;
align-items: center;
flex-wrap: wrap;
font-size: 0.7em;
font-weight: 600;
}
.recipe-tags a {
background: var(--primary-500);
border-radius: var(--borderRadius);
color: var(--white);
padding: 0.05rem 0.5rem;
margin: 0 0.25rem;
text-transform: capitalize;
}
@media screen and (min-width: 992px) {
.recipe-hero {
grid-template-columns: 4fr 5fr;
align-items: center;
}
}
.recipe-content {
padding: 3rem 0;
display: grid;
gap: 2rem 5rem;
}
@media screen and (min-width: 992px) {
.recipe-content {
grid-template-columns: 2fr 1fr;
}
}
.single-instruction header {
display: grid;
grid-template-columns: auto 1fr;
gap: 1.5rem;
align-items: center;
}
.single-instruction header p {
text-transform: uppercase;
font-weight: 600;
color: var(--primary-500);
margin-bottom: 0;
}
.single-instruction > p {
color: var(--grey-700);
}
.single-instruction header div {
height: 2px;
background: var(--grey-300);
}
.second-column {
display: grid;
row-gap: 2rem;
}
.single-ingredient {
border-bottom: 2px solid var(--grey-300);
padding-bottom: 0.75rem;
color: var(--grey-700);
}
.single-tool {
border-bottom: 2px solid var(--grey-300);
padding-bottom: 0.75rem;
color: var(--primary-500);
text-transform: capitalize;
}
@@ -0,0 +1,351 @@
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input {
/* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select {
/* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type='checkbox'],
[type='radio'] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type='search'] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type='search']::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}
@@ -0,0 +1,130 @@
<!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>Simply Recipes || Final</title>
<!-- favicon -->
<link rel="shortcut icon" href="./assets/favicon.ico" type="image/x-icon" />
<!-- normalize -->
<link rel="stylesheet" href="./css/normalize.css" />
<!-- font-awesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
/>
<!-- main css -->
<link rel="stylesheet" href="./css/main.css" />
</head>
<body>
<!-- nav -->
<nav class="navbar">
<div class="nav-center">
<div class="nav-header">
<a href="index.html" class="nav-logo">
<img src="./assets/logo.svg" alt="simply recipes" />
</a>
<button class="nav-btn btn">
<i class="fas fa-align-justify"></i>
</button>
</div>
<div class="nav-links">
<a href="index.html" class="nav-link"> home </a>
<a href="about.html" class="nav-link"> about </a>
<a href="tags.html" class="nav-link"> tags </a>
<a href="recipes.html" class="nav-link"> recipes </a>
<div class="nav-link contact-link">
<a href="contact.html" class="btn"> contact </a>
</div>
</div>
</div>
</nav>
<!-- end of nav -->
<!-- main -->
<main class="page">
<!-- header -->
<header class="hero">
<div class="hero-container">
<div class="hero-text">
<h1>simply recipes</h1>
<h4>no fluff, just recipes</h4>
</div>
</div>
</header>
<!-- end of header -->
<section class="recipes-container">
<!-- tag container -->
<div class="tags-container">
<h4>recipes</h4>
<div class="tags-list">
<a href="tag-template.html">Beef (1)</a>
<a href="tag-template.html">Breakfast (2)</a>
<a href="tag-template.html">Carrots (3)</a>
<a href="tag-template.html">Food (4)</a>
</div>
</div>
<!-- end of tag container -->
<!-- recipes list -->
<div class="recipes-list">
<!-- single recipe -->
<a href="single-recipe.html" class="recipe">
<img
src="./assets/recipes/recipe-1.jpeg"
class="img recipe-img"
alt=""
/>
<h5>Carne Asada</h5>
<p>Prep : 15min | Cook : 5min</p>
</a>
<!-- end of single recipe -->
<!-- single recipe -->
<a href="single-recipe.html" class="recipe">
<img
src="./assets/recipes/recipe-2.jpeg"
class="img recipe-img"
alt=""
/>
<h5>Greek Ribs</h5>
<p>Prep : 15min | Cook : 5min</p>
</a>
<!-- end of single recipe -->
<!-- single recipe -->
<a href="single-recipe.html" class="recipe">
<img
src="./assets/recipes/recipe-3.jpeg"
class="img recipe-img"
alt=""
/>
<h5>Vegetable Soup</h5>
<p>Prep : 15min | Cook : 5min</p>
</a>
<!-- end of single recipe -->
<!-- single recipe -->
<a href="single-recipe.html" class="recipe">
<img
src="./assets/recipes/recipe-4.jpeg"
class="img recipe-img"
alt=""
/>
<h5>Banana Pancakes</h5>
<p>Prep : 15min | Cook : 5min</p>
</a>
<!-- end of single recipe -->
</div>
<!-- end of recipes list -->
</section>
</main>
<!-- end of main -->
<!-- footer -->
<footer class="page-footer">
<p>
&copy; <span id="date"></span>
<span class="footer-logo">SimplyRecipes</span> Built by
<a href="https://www.johnsmilga.com/">Coding Addict</a>
</p>
</footer>
<script src="./js/app.js"></script>
</body>
</html>
@@ -0,0 +1,19 @@
const getElement = (selector) => {
const element = document.querySelector(selector)
if (element) return element
throw Error(
`Please double check your class names, there is no ${selector} class`
)
}
const links = getElement('.nav-links')
const navBtnDOM = getElement('.nav-btn')
navBtnDOM.addEventListener('click', () => {
links.classList.toggle('show-links')
})
const date = getElement('#date')
const currentYear = new Date().getFullYear()
date.textContent = currentYear
@@ -0,0 +1,119 @@
<!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>Recipes || Final</title>
<!-- favicon -->
<link rel="shortcut icon" href="./assets/favicon.ico" type="image/x-icon" />
<!-- normalize -->
<link rel="stylesheet" href="./css/normalize.css" />
<!-- font-awesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
/>
<!-- main css -->
<link rel="stylesheet" href="./css/main.css" />
</head>
<body>
<!-- nav -->
<nav class="navbar">
<div class="nav-center">
<div class="nav-header">
<a href="index.html" class="nav-logo">
<img src="./assets/logo.svg" alt="simply recipes" />
</a>
<button class="nav-btn btn">
<i class="fas fa-align-justify"></i>
</button>
</div>
<div class="nav-links">
<a href="index.html" class="nav-link"> home </a>
<a href="about.html" class="nav-link"> about </a>
<a href="tags.html" class="nav-link"> tags </a>
<a href="recipes.html" class="nav-link"> recipes </a>
<div class="nav-link contact-link">
<a href="contact.html" class="btn"> contact </a>
</div>
</div>
</div>
</nav>
<!-- end of nav -->
<!-- main -->
<main class="page">
<section class="recipes-container">
<!-- tag container -->
<div class="tags-container">
<h4>recipes</h4>
<div class="tags-list">
<a href="tag-template.html">Beef (1)</a>
<a href="tag-template.html">Breakfast (2)</a>
<a href="tag-template.html">Carrots (3)</a>
<a href="tag-template.html">Food (4)</a>
</div>
</div>
<!-- end of tag container -->
<!-- recipes list -->
<div class="recipes-list">
<!-- single recipe -->
<a href="single-recipe.html" class="recipe">
<img
src="./assets/recipes/recipe-1.jpeg"
class="img recipe-img"
alt=""
/>
<h5>Carne Asada</h5>
<p>Prep : 15min | Cook : 5min</p>
</a>
<!-- end of single recipe -->
<!-- single recipe -->
<a href="single-recipe.html" class="recipe">
<img
src="./assets/recipes/recipe-2.jpeg"
class="img recipe-img"
alt=""
/>
<h5>Greek Ribs</h5>
<p>Prep : 15min | Cook : 5min</p>
</a>
<!-- end of single recipe -->
<!-- single recipe -->
<a href="single-recipe.html" class="recipe">
<img
src="./assets/recipes/recipe-3.jpeg"
class="img recipe-img"
alt=""
/>
<h5>Vegetable Soup</h5>
<p>Prep : 15min | Cook : 5min</p>
</a>
<!-- end of single recipe -->
<!-- single recipe -->
<a href="single-recipe.html" class="recipe">
<img
src="./assets/recipes/recipe-4.jpeg"
class="img recipe-img"
alt=""
/>
<h5>Banana Pancakes</h5>
<p>Prep : 15min | Cook : 5min</p>
</a>
<!-- end of single recipe -->
</div>
</section>
</main>
<!-- end of main -->
<!-- footer -->
<footer class="page-footer">
<p>
&copy; <span id="date"></span>
<span class="footer-logo">SimplyRecipes</span> Built by
<a href="https://www.johnsmilga.com/">Coding Addict</a>
</p>
</footer>
<script src="./js/app.js"></script>
</body>
</html>
@@ -0,0 +1,159 @@
<!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>Single Recipe || Final</title>
<!-- favicon -->
<link rel="shortcut icon" href="./assets/favicon.ico" type="image/x-icon" />
<!-- normalize -->
<link rel="stylesheet" href="./css/normalize.css" />
<!-- font-awesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
/>
<!-- main css -->
<link rel="stylesheet" href="./css/main.css" />
</head>
<body>
<!-- nav -->
<nav class="navbar">
<div class="nav-center">
<div class="nav-header">
<a href="index.html" class="nav-logo">
<img src="./assets/logo.svg" alt="simply recipes" />
</a>
<button class="nav-btn btn">
<i class="fas fa-align-justify"></i>
</button>
</div>
<div class="nav-links">
<a href="index.html" class="nav-link"> home </a>
<a href="about.html" class="nav-link"> about </a>
<a href="tags.html" class="nav-link"> tags </a>
<a href="recipes.html" class="nav-link"> recipes </a>
<div class="nav-link contact-link">
<a href="contact.html" class="btn"> contact </a>
</div>
</div>
</div>
</nav>
<!-- end of nav -->
<main class="page">
<div class="recipe-page">
<section class="recipe-hero">
<img
src="./assets/recipes/recipe-4.jpeg"
class="img recipe-hero-img"
/>
<article class="recipe-info">
<h2>Banana Pancakes</h2>
<p>
Shabby chic humblebrag banh mi bushwick, banjo kale chips
meggings. Cred selfies sartorial, cloud bread disrupt blue bottle
seitan. Dreamcatcher tousled bitters, health goth vegan venmo
whatever street art lyft shabby chic pitchfork beard. Drinking
vinegar poke tbh, iPhone coloring book polaroid truffaut tousled
ramps pug trust fund letterpress. Portland four loko austin
chicharrones bitters single-origin coffee. Leggings letterpress
occupy pour-over.
</p>
<div class="recipe-icons">
<article>
<i class="fas fa-clock"></i>
<h5>prep time</h5>
<p>30 min.</p>
</article>
<article>
<i class="far fa-clock"></i>
<h5>cook time</h5>
<p>15 min.</p>
</article>
<article>
<i class="fas fa-user-friends"></i>
<h5>serving</h5>
<p>6 servings</p>
</article>
</div>
<p class="recipe-tags">
Tags : <a href="tag-template.html">beef</a>
<a href="tag-template.html">breakfast</a>
<a href="tag-template.html">pancakes</a>
<a href="tag-template.html">food</a>
</p>
</article>
</section>
<!-- content -->
<section class="recipe-content">
<article>
<h4>instructions</h4>
<!-- single instruction -->
<div class="single-instruction">
<header>
<p>step 1</p>
<div></div>
</header>
<p>
I'm baby mustache man braid fingerstache small batch venmo
succulents shoreditch.
</p>
</div>
<!-- end of single instruction -->
<!-- single instruction -->
<div class="single-instruction">
<header>
<p>step 2</p>
<div></div>
</header>
<p>
Pabst pitchfork you probably haven't heard of them, asymmetrical
seitan tousled succulents wolf banh mi man bun bespoke selfies
freegan ethical hexagon.
</p>
</div>
<!-- end of single instruction -->
<!-- single instruction -->
<div class="single-instruction">
<header>
<p>step 3</p>
<div></div>
</header>
<p>
Polaroid iPhone bitters chambray. Cornhole swag kombucha
live-edge.
</p>
</div>
<!-- end of single instruction -->
</article>
<article class="second-column">
<div>
<h4>ingredients</h4>
<p class="single-ingredient">1 1/2 cups dry pancake mix</p>
<p class="single-ingredient">1/2 cup flax seed meal</p>
<p class="single-ingredient">1 cup skim milk</p>
</div>
<div>
<h4>tools</h4>
<p class="single-tool">Hand Blender</p>
<p class="single-tool">Large Heavy Pot With Lid</p>
<p class="single-tool">Measuring Spoons</p>
<p class="single-tool">Measuring Cups</p>
</div>
</article>
</section>
</div>
</main>
<!-- footer -->
<footer class="page-footer">
<p>
&copy; <span id="date"></span>
<span class="footer-logo">SimplyRecipes</span> Built by
<a href="https://www.johnsmilga.com/">Coding Addict</a>
</p>
</footer>
<script src="./js/app.js"></script>
</body>
</html>
@@ -0,0 +1,109 @@
<!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>Recipe Template || Final</title>
<!-- favicon -->
<link rel="shortcut icon" href="./assets/favicon.ico" type="image/x-icon" />
<!-- normalize -->
<link rel="stylesheet" href="./css/normalize.css" />
<!-- font-awesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
/>
<!-- main css -->
<link rel="stylesheet" href="./css/main.css" />
</head>
<body>
<!-- nav -->
<nav class="navbar">
<div class="nav-center">
<div class="nav-header">
<a href="index.html" class="nav-logo">
<img src="./assets/logo.svg" alt="simply recipes" />
</a>
<button class="nav-btn btn">
<i class="fas fa-align-justify"></i>
</button>
</div>
<div class="nav-links">
<a href="index.html" class="nav-link"> home </a>
<a href="about.html" class="nav-link"> about </a>
<a href="tags.html" class="nav-link"> tags </a>
<a href="recipes.html" class="nav-link"> recipes </a>
<div class="nav-link contact-link">
<a href="contact.html" class="btn"> contact </a>
</div>
</div>
</div>
</nav>
<!-- end of nav -->
<main class="page">
<div class="featured-recipes">
<h4>Beef</h4>
<!-- recipes list -->
<div class="recipes-list">
<!-- single recipe -->
<a href="single-recipe.html" class="recipe">
<img
src="./assets/recipes/recipe-1.jpeg"
class="img recipe-img"
alt=""
/>
<h5>Carne Asada</h5>
<p>Prep : 15min | Cook : 5min</p>
</a>
<!-- end of single recipe -->
<!-- single recipe -->
<a href="single-recipe.html" class="recipe">
<img
src="./assets/recipes/recipe-2.jpeg"
class="img recipe-img"
alt=""
/>
<h5>Greek Ribs</h5>
<p>Prep : 15min | Cook : 5min</p>
</a>
<!-- end of single recipe -->
<!-- single recipe -->
<a href="single-recipe.html" class="recipe">
<img
src="./assets/recipes/recipe-3.jpeg"
class="img recipe-img"
alt=""
/>
<h5>Vegetable Soup</h5>
<p>Prep : 15min | Cook : 5min</p>
</a>
<!-- end of single recipe -->
<!-- single recipe -->
<a href="single-recipe.html" class="recipe">
<img
src="./assets/recipes/recipe-4.jpeg"
class="img recipe-img"
alt=""
/>
<h5>Banana Pancakes</h5>
<p>Prep : 15min | Cook : 5min</p>
</a>
<!-- end of single recipe -->
</div>
<!-- end of recipe list -->
</div>
</main>
<!-- footer -->
<footer class="page-footer">
<p>
&copy; <span id="date"></span>
<span class="footer-logo">SimplyRecipes</span> Built by
<a href="https://www.johnsmilga.com/">Coding Addict</a>
</p>
</footer>
<script src="./js/app.js"></script>
</body>
</html>
@@ -0,0 +1,89 @@
<!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>Tags || Final</title>
<!-- favicon -->
<link rel="shortcut icon" href="./assets/favicon.ico" type="image/x-icon" />
<!-- normalize -->
<link rel="stylesheet" href="./css/normalize.css" />
<!-- font-awesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
/>
<!-- main css -->
<link rel="stylesheet" href="./css/main.css" />
</head>
<body>
<!-- nav -->
<nav class="navbar">
<div class="nav-center">
<div class="nav-header">
<a href="index.html" class="nav-logo">
<img src="./assets/logo.svg" alt="simply recipes" />
</a>
<button class="nav-btn btn">
<i class="fas fa-align-justify"></i>
</button>
</div>
<div class="nav-links">
<a href="index.html" class="nav-link"> home </a>
<a href="about.html" class="nav-link"> about </a>
<a href="tags.html" class="nav-link"> tags </a>
<a href="recipes.html" class="nav-link"> recipes </a>
<div class="nav-link contact-link">
<a href="contact.html" class="btn"> contact </a>
</div>
</div>
</div>
</nav>
<!-- end of nav -->
<main class="page">
<section class="tags-wrapper">
<!-- single tag -->
<a href="tag-template.html" class="tag">
<h5>beef</h5>
<p>1 recipe</p>
</a>
<!-- end of single tag -->
<!-- single tag -->
<a href="tag-template.html" class="tag">
<h5>breakfast</h5>
<p>2 recipe</p>
</a>
<!-- end of single tag -->
<!-- single tag -->
<a href="tag-template.html" class="tag">
<h5>carrots</h5>
<p>3 recipe</p>
</a>
<!-- end of single tag -->
<!-- single tag -->
<a href="tag-template.html" class="tag">
<h5>dinner</h5>
<p>4 recipe</p>
</a>
<!-- end of single tag -->
<!-- single tag -->
<a href="tag-template.html" class="tag">
<h5>food</h5>
<p>1 recipe</p>
</a>
<!-- end of single tag -->
</section>
</main>
<!-- footer -->
<footer class="page-footer">
<p>
&copy; <span id="date"></span>
<span class="footer-logo">SimplyRecipes</span> Built by
<a href="https://www.johnsmilga.com/">Coding Addict</a>
</p>
</footer>
<script src="./js/app.js"></script>
</body>
</html>