carlajarchuleta1-a11y/dom-manipulation.markdown

## dom-manipulation.markdown

      
    Raw
  

              dom-manipulation.markdown
            
          
    DOM Manipulation

Learn DOM Manipulation with few examples, including inserting a recipe into the DOM.  More here  - https://www.gscreations.io/coding
A Pen by Ricardo on CodePen.
License.

  
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="Description" content="Dom manipulation tutorial. Learn template-strings, innerHtml and more about dom manipulation">
    <link rel="stylesheet" href="style.css" />
    <link
    rel="stylesheet"
    href="https://use.fontawesome.com/releases/v5.0.7/css/all.css"
  />
    <title>DOM Manipulation</title>

</head>
<body>

  <nav>
    <ul class="container__one">
      <li class="navbar__name">Good Stuff Creations Tutorials</li>
    </ul>
  </nav>
    <h1 class="title">Dom Manipulation</h1>

    <section class="query-selector-all">
      <section class="queries">
        <article class="first_element">
          <h2 class="first__title">Query Selector All - Select all elements</h2>
          <p>I am a paragraph and I am selected also</p>
        </article>
        <article class="second_element">
          <h2>Query Selector All - Select all elements</h2>
          <p>I am a paragraph and I am selected also</p>
        </article>
      </section>
        <article class="black__board">
          <div class="first__code">
              <h2>How to select all elements?</h2>
            <button class="code__show__first">Show me the code</button>
         </div>
       </article>

    </section>


    <section class="query-selector">
      <article class="image"> <img class="first__image" src="https://picsum.photos/420" alt="random image from picsum "></article>
      <article class="black__board">
        <div class="second__code">
          <h2>How to select one element?</h2>
          <button class="code__show__second">Show me the code</button>
        </div>
      </article>
    </section>

    <section class="recipes-manager">

      <article class="recipes-manager_docs">
        <div class="recipe-background">
          <section class="first">
          <label for="name">Recipe Name</label>
          <input class="name" type="text" id="name" >
          <label for="cuisine">Type of cuisine</label>
          <input class="cuisine" type="text" id="cuisine">
        </section>
        <section class="second">
          <label for="number">How many people</label>
          <input class="number" type="number" id="number">
        </section>
        <section class="buttons">
          <input class="image" type="file"  accept="image/*" name="image" id="file" onchange="loadFile(event)" style="display: none;">
          <label class="upload" for="file"  tabindex="0" style="cursor: pointer;">Upload Image</label>
          <button class="button-recipe">Show recipe</button>
        </section>
      </div>


      </article>

      <article class="recipe-menu">
        <div class="recipe" id="output">
        </div>
      </article>

    </section>


  <script src="./app.js"></script>

</body>
</html>

## script.js
const allElements = document.querySelectorAll('.query-selector-all');
const blackBoard = document.querySelector('.first__code');
const blackBoardSecond = document.querySelector('.second__code');
const firstImage = document.querySelector('.first__image');
const codeButtonFirst = document.querySelector('.code__show__first');
const codeButtonSecond = document.querySelector('.code__show__second');
const content = document.querySelector('.queries');
const recipe = document.querySelector('.recipe');
const buttonRecipe = document.querySelector('.button-recipe');
const recipeName = document.querySelector('.name');
const recipeType = document.querySelector('.cuisine');
const numberPeople = document.querySelector('.number');

allElements.forEach(eachElement => {
  eachElement.classList.add('selector__all');
});

const querySelectorAll = `
<h4 class="text">First Select all Elements</h4>
<section class="divide">
  <article class="divide_js">
    <h3 class="language">JS</h3>
    <p class="code__editor"><spam class="const">const</spam> allElements = document.<span class="query__selector">querySelectorAll</span><span class="selectors">('.elements')</span>;</p>
    <p class="code__editor">allElements.<span class="query__selector">forEach</span>(eachElement <span class="const">=> {</span>
    eachElement.classList.<span class="query__selector">add</span><span class="selectors">('selector__all')</span>;
    <span class="const">}</span>)</p>
  </article>
  <article class="divide_css">
    <h3 class="language">CSS</h3>
    <div class="code__editor">
      .<span class="css__selector">selector__all</span> {</br>
      <span class="query__selector">color:</span> red;</br>
      <span class="query__selector">transition:</span> all 2s;</br>
      }
    </div>
  </article>
</section>
`;

const querySelector = `
<h4 class="text">First Select the image</h4>
<h3 class="language">JS</h3>
  <p class="code__editor"><spam class="const">const</spam> firstImage = document.<span class="query__selector">querySelector</span><span class="selectors">('.first__image')</span>;</p>
  <p class="code__editor">firstImage.<span class="query__selector">addEventListener</span>('click' <span class="const">, () {</span>
  firstImage.classList.<span class="query__selector">toggle</span><span class="selectors">('round')</span>;
  <span class="const"}</span>)</p>
<article class="divide_css">
  <h3 class="language">CSS</h3>
  <div class="code__editor">
    .<span class="css__selector">round</span> {</br>
    <span class="query__selector">border-radius:</span> 50%;</br>
    <span class="query__selector">transition:</span> all 10s;</br>
    <span class="query__selector">transform:</span> rotate(360deg);</br>
    }
    </div>
</article>
</section>
`;

function showMeTheCode() {
  blackBoard.innerHTML = querySelectorAll;
}

function showMeTheCodeSecond() {
  blackBoardSecond.innerHTML = querySelector;
}

codeButtonFirst.addEventListener('click', showMeTheCode);
codeButtonSecond.addEventListener('click', showMeTheCodeSecond);

firstImage.addEventListener('click', () => {
  firstImage.classList.toggle('round');
});

console.group(
  blackBoard.parentElement,
  blackBoard.children,
  blackBoard.childElementCount
);

console.log(content.textContent);
console.log(content.innerHTML);

console.log(recipeName);
console.log(recipe);

window.loadFile = function(event) {
  const image = document.getElementById('output');
  image.src = URL.createObjectURL(event.target.files[0]);
};

function insertRecipe() {
  const recipeNames = recipeName.value;
  const typeOfRecipe = recipeType.value;
  const numberPeoplePerRecipe = numberPeople.value;
  const image = document.querySelector('#output');
  console.log(typeOfRecipe);
  const myHTML = `
<section class="recipe-card">
  <div class="card">
    <p class="recipe-name">${recipeNames}</p>
    <p class="recipe-type">${typeOfRecipe}</p>
    <p class="recipe-number"> Serves ${numberPeoplePerRecipe}</p>
  </div>
  <div class="recipe-image">
    <img src="${image.src}" alt="ola" class="recipe-image"/>
  </div>

</section>
`;

  recipe.innerHTML = myHTML;

  return myHTML;
}

buttonRecipe.addEventListener('click', insertRecipe);

## style.css
/*Reset css*/
/*Reset CSS*/

*,
*::before,
*::after {
  box-sizing: border-box;
}
/* Remove default padding */
ul[class],
ol[class] {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

body {
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  font-family: monospace;
}
ul[class],
ol[class] {
  list-style: none;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

body,
html {
  height: 100vh;
  width: 100vw;
}
img {
  width: 100px;
}

article > * + * {
  margin-top: 1em;
}

input,
button,
textarea,
select {
  font: inherit;
}

/*General Styles*/
body {
  background-color: white;
}
h1,
h2 {
  text-align: center;
}
.title {
  font-size: 2.2em;
  margin-bottom: 6%;
  color: #28430a;
}
.black__board {
  width: 90%;
  height: 100%;

  background: linear-gradient(#616161, #474747);
  border: 10px solid #9f7037;
  box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, 0.3),
    inset 0 30px 30px rgba(255, 255, 255, 0.1);
  text-align: center;
  color: white;
  font-family: "Monospace";
  letter-spacing: 1px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  line-height: 2em;
  border-radius: 3px;
}

.black__board .const {
  color: violet;
}

.black__board .code__editor {
  text-align: left;
  margin-top: 0;
}

.black__board .query__selector {
  color: lightblue;
}

.black__board .selectors {
  color: yellow;
}
.black__board .css__selector {
  color: orange;
}

.black__board .text {
  color: lightgreen;
}

.black__board .language {
  color: #edbd54;
  line-height: 2.5em;
}

/*Navbar*/
.logo {
  width: 100px;
  display: block;
}
.container__one {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.container__one > li {
  font-size: 1.5em;
  color: #28430a;
  padding: 10px;
}

.last {
  margin-right: 10px;
}

@media all and (max-width: 600px) {
  .container__one {
    align-items: center;
  }
  .container__one > li {
    text-align: center;
    font-size: 1em;
  }
  .navbar__name {
    margin-right: 2%;
  }
  .logo {
    width: 100px;
  }
  img {
    width: 100px;
    margin: 0 auto;
  }
}
/*Flex Panels*/

h2 {
  font-size: 1.1em;
}
.query-selector-all {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* width: 100%; */
  padding-top: 4%;
  padding-bottom: 4%;
  background-color: #28430a;
  border-radius: 10px;
  /*  margin-left: 5%;
  margin-right: 5%; */

  text-align: center;
  align-items: center;
}

.black__board {
  flex: 2;
  order: 3;
}

.black__board {
  flex: 1;
}
.first__code .display__code {
  display: flex;
}
.first__code,
.second__code {
  margin-left: 2%;
}
/*Query Selector*/

.round {
  border-radius: 50%;
  transform: rotate(360deg);
  transition: all 10s;
}
.elements {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.query-selector {
  padding-bottom: 4%;
  padding-top: 4%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 10%;
  text-align: center;
  background-color: #28430a;
  border-radius: 10px;

  align-items: center;
}
.first__image {
  width: 50%;
}
/*Query Selectors */

.selector__all {
  color: #edbd54;
  transition: all 2s;
}

@media (min-width: 660px) {
  h2 {
    font-size: 1.5em;
  }
  .queries {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 80%;
  }
  .query-selector-all,
  .query-selector {
    flex-direction: row;
    height: 80%;
    background-color: #28430a;
    border-radius: 10px;
    margin-bottom: 5%;
    padding-top: 4%;
    padding-right: 4%;
    padding-left: 4%;
    padding-bottom: 4%;
    margin-left: 5%;
    margin-right: 5%;
    justify-content: space-around;
  }

  .query-selector,
  .elements {
    flex-direction: row;
  }

  .black__board {
    max-width: 400px;
    height: 70vh;
  }
  .text {
    width: 420px;
    text-align: center;
  }
  .first__image {
    width: 90%;
  }
}

/*Recipes*/

.recipes-manager {
  flex-direction: column;
  margin-top: 10%;
}

.recipes-manager_docs {
  display: flex;
  flex-direction: column;
  margin-bottom: 10%;
}

.first {
  display: flex;
  flex-direction: column;
}
.second {
  display: flex;
  flex-direction: column;
}
.recipe-image {
  width: 100%;
}

label {
  font-size: 16px;
  text-align: center;
  margin-bottom: 2%;
}

input {
  width: 50%;
  margin: 0 auto;
}
.buttons {
  display: flex;
  justify-content: center;
}

.button-recipe,
.upload {
  width: 25%;
  transition-duration: 0.4s;
  background-color: white;
  border: none;
  color: black;

  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 10px;
  margin: 4px 2px;
  cursor: pointer;
}

.button-recipe {
  background-color: #4caf50; /* Green */
}

.upload {
  background-color: #9f7037;
}

/*Recipe Card*/
.recipe {
  display: flex;
  justify-content: space-around;
  height: 80%;
  width: 60%;
  background-color: #fff;
  padding: 30px;

  align-self: center;
  box-shadow: 0 0 5px rgba(75, 75, 75, 0.6);
  /* z-index: 1; */
}

.recipe-card {
  display: flex;
  flex-direction: column;
}
.card {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
}

.recipe-name {
  font-size: 60px;
  font-weight: 300;
  line-height: 60px;
  margin: 10px 0;
  color: blue;
}

.recipe-type {
  display: block;
  font-size: 12px;
  letter-spacing: 0.5px;
  margin: 15px 0 0;
  text-transform: uppercase;
}
.recipe-number {
  display: inline-block;
  font-weight: 300;
  line-height: 22px;
  margin: 10px 0;
}
.recipe-image {
  flex: 1;
}

.recipe-menu {
  flex: 1;
  display: flex;
  flex-direction: column;
}

@media (min-width: 660px) {
  .recipe-card {
    flex-direction: row;
  }
  .recipes-manager {
    display: flex;
    align-items: baseline;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    height: 80%;
  }

  .recipe-menu {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  input {
    width: inherit;
  }
  .name,
  .cuisine,
  .number {
    margin-bottom: 5%;
  }

  .recipe-background {
    background: rgba(0, 0, 0, 0.8);
    border-radius: 10px;
    box-shadow: 0 0.4px 0.4px rgba(128, 128, 128, 0.109),
      0 1px 1px rgba(128, 128, 128, 0.155),
      0 2.1px 2.1px rgba(128, 128, 128, 0.195),
      0 4.4px 4.4px rgba(128, 128, 128, 0.241),
      0 12px 12px rgba(128, 128, 128, 0.35);
    width: 58%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .recipes-manager_docs {
    flex-direction: column;
    margin-bottom: 0;
    justify-content: space-around;
    align-items: center;
    height: 80%;
    flex: 1;
    color: white;
  }

  .buttons {
    flex-direction: column;
    align-items: center;
  }

  .button-recipe,
  .upload {
    width: 25%;
    margin: 0 auto;
    transition-duration: 0.4s;
    background-color: white;
    border: none;
    color: black;
    border-radius: 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 10px;
    margin: 4px 2px;
    cursor: pointer;
  }

  .upload,
  .button-recipe {
    height: 17px;
    margin-bottom: 5%;
  }

  .button-recipe:hover {
    background-color: brown; /* Green */
    color: white;
  }

  .upload:hover {
    background-color: #4caf50; /* Green */
    color: white;
  }
  .recipe {
    width: auto;
    margin-right: 10%;
  }
  .recipe-image {
    margin: 2%;
  }
}

/*Footer*/
/*Footer*/

.footer {
  bottom: 0;
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 2rem 0;
  color: black;
}
.footer > * {
  margin-left: 2%;
  margin-right: 2%;
}
@media (max-width: 567px) {
  .name {
    text-align: center;
  }
  .footer {
    display: flex;
    flex-direction: column;
    padding: 1.2rem 0;
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    margin-top: 30px;
  }
}

.my-social-media {
  list-style: none;
  text-decoration: none;
}
.my-social-media > a {
  padding: 1rem;
  text-decoration: none;
  color: black;
}

.my-social-media > li:first-child {
  padding-left: 0;
}
.social-media {
  display: flex;
  justify-content: center;
  padding-left: 0;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="Description" content="Dom manipulation tutorial. Learn template-strings, innerHtml and more about dom manipulation">
	<link rel="stylesheet" href="style.css" />
	<link
	rel="stylesheet"
	href="https://use.fontawesome.com/releases/v5.0.7/css/all.css"
	/>
	<title>DOM Manipulation</title>

	</head>
	<body>

	<nav>
	<ul class="container__one">
	<li class="navbar__name">Good Stuff Creations Tutorials</li>
	</ul>
	</nav>
	<h1 class="title">Dom Manipulation</h1>

	<section class="query-selector-all">
	<section class="queries">
	<article class="first_element">
	<h2 class="first__title">Query Selector All - Select all elements</h2>
	<p>I am a paragraph and I am selected also</p>
	</article>
	<article class="second_element">
	<h2>Query Selector All - Select all elements</h2>
	<p>I am a paragraph and I am selected also</p>
	</article>
	</section>
	<article class="black__board">
	<div class="first__code">
	<h2>How to select all elements?</h2>
	<button class="code__show__first">Show me the code</button>
	</div>
	</article>

	</section>



	<section class="query-selector">
	<article class="image"> <img class="first__image" src="https://picsum.photos/420" alt="random image from picsum "></article>
	<article class="black__board">
	<div class="second__code">
	<h2>How to select one element?</h2>
	<button class="code__show__second">Show me the code</button>
	</div>
	</article>
	</section>

	<section class="recipes-manager">

	<article class="recipes-manager_docs">
	<div class="recipe-background">
	<section class="first">
	<label for="name">Recipe Name</label>
	<input class="name" type="text" id="name" >
	<label for="cuisine">Type of cuisine</label>
	<input class="cuisine" type="text" id="cuisine">
	</section>
	<section class="second">
	<label for="number">How many people</label>
	<input class="number" type="number" id="number">
	</section>
	<section class="buttons">
	<input class="image" type="file" accept="image/*" name="image" id="file" onchange="loadFile(event)" style="display: none;">
	<label class="upload" for="file" tabindex="0" style="cursor: pointer;">Upload Image</label>
	<button class="button-recipe">Show recipe</button>
	</section>
	</div>


	</article>

	<article class="recipe-menu">
	<div class="recipe" id="output">
	</div>
	</article>

	</section>




	<script src="./app.js"></script>

	</body>
	</html>
	const allElements = document.querySelectorAll('.query-selector-all');
	const blackBoard = document.querySelector('.first__code');
	const blackBoardSecond = document.querySelector('.second__code');
	const firstImage = document.querySelector('.first__image');
	const codeButtonFirst = document.querySelector('.code__show__first');
	const codeButtonSecond = document.querySelector('.code__show__second');
	const content = document.querySelector('.queries');
	const recipe = document.querySelector('.recipe');
	const buttonRecipe = document.querySelector('.button-recipe');
	const recipeName = document.querySelector('.name');
	const recipeType = document.querySelector('.cuisine');
	const numberPeople = document.querySelector('.number');

	allElements.forEach(eachElement => {
	eachElement.classList.add('selector__all');
	});

	const querySelectorAll = `
	<h4 class="text">First Select all Elements</h4>
	<section class="divide">
	<article class="divide_js">
	<h3 class="language">JS</h3>
	<p class="code__editor"><spam class="const">const</spam> allElements = document.<span class="query__selector">querySelectorAll</span><span class="selectors">('.elements')</span>;</p>
	<p class="code__editor">allElements.<span class="query__selector">forEach</span>(eachElement <span class="const">=> {</span>
	eachElement.classList.<span class="query__selector">add</span><span class="selectors">('selector__all')</span>;
	<span class="const">}</span>)</p>
	</article>
	<article class="divide_css">
	<h3 class="language">CSS</h3>
	<div class="code__editor">
	.<span class="css__selector">selector__all</span> {</br>
	<span class="query__selector">color:</span> red;</br>
	<span class="query__selector">transition:</span> all 2s;</br>
	}
	</div>
	</article>
	</section>
	`;

	const querySelector = `
	<h4 class="text">First Select the image</h4>
	<h3 class="language">JS</h3>
	<p class="code__editor"><spam class="const">const</spam> firstImage = document.<span class="query__selector">querySelector</span><span class="selectors">('.first__image')</span>;</p>
	<p class="code__editor">firstImage.<span class="query__selector">addEventListener</span>('click' <span class="const">, () {</span>
	firstImage.classList.<span class="query__selector">toggle</span><span class="selectors">('round')</span>;
	<span class="const"}</span>)</p>
	<article class="divide_css">
	<h3 class="language">CSS</h3>
	<div class="code__editor">
	.<span class="css__selector">round</span> {</br>
	<span class="query__selector">border-radius:</span> 50%;</br>
	<span class="query__selector">transition:</span> all 10s;</br>
	<span class="query__selector">transform:</span> rotate(360deg);</br>
	}
	</div>
	</article>
	</section>
	`;

	function showMeTheCode() {
	blackBoard.innerHTML = querySelectorAll;
	}

	function showMeTheCodeSecond() {
	blackBoardSecond.innerHTML = querySelector;
	}

	codeButtonFirst.addEventListener('click', showMeTheCode);
	codeButtonSecond.addEventListener('click', showMeTheCodeSecond);

	firstImage.addEventListener('click', () => {
	firstImage.classList.toggle('round');
	});

	console.group(
	blackBoard.parentElement,
	blackBoard.children,
	blackBoard.childElementCount
	);

	console.log(content.textContent);
	console.log(content.innerHTML);

	console.log(recipeName);
	console.log(recipe);

	window.loadFile = function(event) {
	const image = document.getElementById('output');
	image.src = URL.createObjectURL(event.target.files[0]);
	};

	function insertRecipe() {
	const recipeNames = recipeName.value;
	const typeOfRecipe = recipeType.value;
	const numberPeoplePerRecipe = numberPeople.value;
	const image = document.querySelector('#output');
	console.log(typeOfRecipe);
	const myHTML = `
	<section class="recipe-card">
	<div class="card">
	<p class="recipe-name">${recipeNames}</p>
	<p class="recipe-type">${typeOfRecipe}</p>
	<p class="recipe-number"> Serves ${numberPeoplePerRecipe}</p>
	</div>
	<div class="recipe-image">
	<img src="${image.src}" alt="ola" class="recipe-image"/>
	</div>

	</section>
	`;

	recipe.innerHTML = myHTML;

	return myHTML;
	}

	buttonRecipe.addEventListener('click', insertRecipe);
	/Reset css/
	/Reset CSS/

	*,
	*::before,
	*::after {
	box-sizing: border-box;
	}
	/* Remove default padding */
	ul[class],
	ol[class] {
	padding: 0;
	}

	/* Remove default margin */
	body,
	h1,
	h2,
	h3,
	h4,
	p,
	ul[class],
	ol[class],
	li,
	figure,
	figcaption,
	blockquote,
	dl,
	dd {
	margin: 0;
	}

	body {
	scroll-behavior: smooth;
	text-rendering: optimizeSpeed;
	line-height: 1.5;
	font-family: monospace;
	}
	ul[class],
	ol[class] {
	list-style: none;
	}

	a:not([class]) {
	text-decoration-skip-ink: auto;
	}

	body,
	html {
	height: 100vh;
	width: 100vw;
	}
	img {
	width: 100px;
	}

	article > * + * {
	margin-top: 1em;
	}

	input,
	button,
	textarea,
	select {
	font: inherit;
	}

	/General Styles/
	body {
	background-color: white;
	}
	h1,
	h2 {
	text-align: center;
	}
	.title {
	font-size: 2.2em;
	margin-bottom: 6%;
	color: #28430a;
	}
	.black__board {
	width: 90%;
	height: 100%;

	background: linear-gradient(#616161, #474747);
	border: 10px solid #9f7037;
	box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, 0.3),
	inset 0 30px 30px rgba(255, 255, 255, 0.1);
	text-align: center;
	color: white;
	font-family: "Monospace";
	letter-spacing: 1px;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
	line-height: 2em;
	border-radius: 3px;
	}

	.black__board .const {
	color: violet;
	}

	.black__board .code__editor {
	text-align: left;
	margin-top: 0;
	}

	.black__board .query__selector {
	color: lightblue;
	}

	.black__board .selectors {
	color: yellow;
	}
	.black__board .css__selector {
	color: orange;
	}

	.black__board .text {
	color: lightgreen;
	}

	.black__board .language {
	color: #edbd54;
	line-height: 2.5em;
	}

	/Navbar/
	.logo {
	width: 100px;
	display: block;
	}
	.container__one {
	display: flex;
	justify-content: space-around;
	align-items: center;
	}

	.container__one > li {
	font-size: 1.5em;
	color: #28430a;
	padding: 10px;
	}

	.last {
	margin-right: 10px;
	}

	@media all and (max-width: 600px) {
	.container__one {
	align-items: center;
	}
	.container__one > li {
	text-align: center;
	font-size: 1em;
	}
	.navbar__name {
	margin-right: 2%;
	}
	.logo {
	width: 100px;
	}
	img {
	width: 100px;
	margin: 0 auto;
	}
	}
	/Flex Panels/

	h2 {
	font-size: 1.1em;
	}
	.query-selector-all {
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* width: 100%; */
	padding-top: 4%;
	padding-bottom: 4%;
	background-color: #28430a;
	border-radius: 10px;
	/* margin-left: 5%;
	margin-right: 5%; */

	text-align: center;
	align-items: center;
	}

	.black__board {
	flex: 2;
	order: 3;
	}

	.black__board {
	flex: 1;
	}
	.first__code .display__code {
	display: flex;
	}
	.first__code,
	.second__code {
	margin-left: 2%;
	}
	/Query Selector/

	.round {
	border-radius: 50%;
	transform: rotate(360deg);
	transition: all 10s;
	}
	.elements {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	}

	.query-selector {
	padding-bottom: 4%;
	padding-top: 4%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: 10%;
	text-align: center;
	background-color: #28430a;
	border-radius: 10px;

	align-items: center;
	}
	.first__image {
	width: 50%;
	}
	/Query Selectors /

	.selector__all {
	color: #edbd54;
	transition: all 2s;
	}

	@media (min-width: 660px) {
	h2 {
	font-size: 1.5em;
	}
	.queries {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	height: 80%;
	}
	.query-selector-all,
	.query-selector {
	flex-direction: row;
	height: 80%;
	background-color: #28430a;
	border-radius: 10px;
	margin-bottom: 5%;
	padding-top: 4%;
	padding-right: 4%;
	padding-left: 4%;
	padding-bottom: 4%;
	margin-left: 5%;
	margin-right: 5%;
	justify-content: space-around;
	}

	.query-selector,
	.elements {
	flex-direction: row;
	}

	.black__board {
	max-width: 400px;
	height: 70vh;
	}
	.text {
	width: 420px;
	text-align: center;
	}
	.first__image {
	width: 90%;
	}
	}

	/Recipes/

	.recipes-manager {
	flex-direction: column;
	margin-top: 10%;
	}

	.recipes-manager_docs {
	display: flex;
	flex-direction: column;
	margin-bottom: 10%;
	}

	.first {
	display: flex;
	flex-direction: column;
	}
	.second {
	display: flex;
	flex-direction: column;
	}
	.recipe-image {
	width: 100%;
	}

	label {
	font-size: 16px;
	text-align: center;
	margin-bottom: 2%;
	}

	input {
	width: 50%;
	margin: 0 auto;
	}
	.buttons {
	display: flex;
	justify-content: center;
	}

	.button-recipe,
	.upload {
	width: 25%;
	transition-duration: 0.4s;
	background-color: white;
	border: none;
	color: black;

	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 10px;
	margin: 4px 2px;
	cursor: pointer;
	}

	.button-recipe {
	background-color: #4caf50; /* Green */
	}

	.upload {
	background-color: #9f7037;
	}

	/Recipe Card/
	.recipe {
	display: flex;
	justify-content: space-around;
	height: 80%;
	width: 60%;
	background-color: #fff;
	padding: 30px;

	align-self: center;
	box-shadow: 0 0 5px rgba(75, 75, 75, 0.6);
	/* z-index: 1; */
	}

	.recipe-card {
	display: flex;
	flex-direction: column;
	}
	.card {
	display: flex;
	flex-direction: column;
	flex: 1;
	justify-content: center;
	}

	.recipe-name {
	font-size: 60px;
	font-weight: 300;
	line-height: 60px;
	margin: 10px 0;
	color: blue;
	}

	.recipe-type {
	display: block;
	font-size: 12px;
	letter-spacing: 0.5px;
	margin: 15px 0 0;
	text-transform: uppercase;
	}
	.recipe-number {
	display: inline-block;
	font-weight: 300;
	line-height: 22px;
	margin: 10px 0;
	}
	.recipe-image {
	flex: 1;
	}

	.recipe-menu {
	flex: 1;
	display: flex;
	flex-direction: column;
	}

	@media (min-width: 660px) {
	.recipe-card {
	flex-direction: row;
	}
	.recipes-manager {
	display: flex;
	align-items: baseline;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	height: 80%;
	}

	.recipe-menu {
	flex: 1;
	display: flex;
	flex-direction: column;
	}
	input {
	width: inherit;
	}
	.name,
	.cuisine,
	.number {
	margin-bottom: 5%;
	}

	.recipe-background {
	background: rgba(0, 0, 0, 0.8);
	border-radius: 10px;
	box-shadow: 0 0.4px 0.4px rgba(128, 128, 128, 0.109),
	0 1px 1px rgba(128, 128, 128, 0.155),
	0 2.1px 2.1px rgba(128, 128, 128, 0.195),
	0 4.4px 4.4px rgba(128, 128, 128, 0.241),
	0 12px 12px rgba(128, 128, 128, 0.35);
	width: 58%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	}

	.recipes-manager_docs {
	flex-direction: column;
	margin-bottom: 0;
	justify-content: space-around;
	align-items: center;
	height: 80%;
	flex: 1;
	color: white;
	}

	.buttons {
	flex-direction: column;
	align-items: center;
	}

	.button-recipe,
	.upload {
	width: 25%;
	margin: 0 auto;
	transition-duration: 0.4s;
	background-color: white;
	border: none;
	color: black;
	border-radius: 10px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 10px;
	margin: 4px 2px;
	cursor: pointer;
	}

	.upload,
	.button-recipe {
	height: 17px;
	margin-bottom: 5%;
	}

	.button-recipe:hover {
	background-color: brown; /* Green */
	color: white;
	}

	.upload:hover {
	background-color: #4caf50; /* Green */
	color: white;
	}
	.recipe {
	width: auto;
	margin-right: 10%;
	}
	.recipe-image {
	margin: 2%;
	}
	}

	/Footer/
	/Footer/

	.footer {
	bottom: 0;
	display: flex;
	width: 100%;
	justify-content: space-between;
	padding: 2rem 0;
	color: black;
	}
	.footer > * {
	margin-left: 2%;
	margin-right: 2%;
	}
	@media (max-width: 567px) {
	.name {
	text-align: center;
	}
	.footer {
	display: flex;
	flex-direction: column;
	padding: 1.2rem 0;
	position: relative;
	right: 0;
	bottom: 0;
	left: 0;
	margin-top: 30px;
	}
	}

	.my-social-media {
	list-style: none;
	text-decoration: none;
	}
	.my-social-media > a {
	padding: 1rem;
	text-decoration: none;
	color: black;
	}

	.my-social-media > li:first-child {
	padding-left: 0;
	}
	.social-media {
	display: flex;
	justify-content: center;
	padding-left: 0;
	}