Boris-creator · August 18, 2020 19:27
diff --git a/index.html b/index.html
 <style>
  body {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    margin: 0;
    background: wheat;
  }

  .header-bg {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 20vh;
    text-align: center;
    background: salmon;
  }

  .header-bg h1 {
    margin: 0;
  }

  .header-bg div {
    padding: 1% 0 0 0;
  }
  nav {
    /*margin-top: 5%;
    width:100%;*/
  }

  .navigationList {
    display: flex;
    margin: 0;
    padding: 0;
  }

  .navigationList li {
    width: 25%;
    list-style-type: none;
    /* 4 пункта меню, то есть 100%/4 */
    text-align: center;
    background: rgb(46, 95, 122);
  }

  .navigationList a {
    display: block;
    padding: 3px 0;
    color: #fff;
    text-decoration: none;

  }
  .main {
    height: 75vh;
    width: 80%;
    text-align: center;
    font-size: 1.3em;
    background: pink;
  }

  .cardapios {
    height: 75vh;
    width: 20%;
    background: violet;
  }
  .cardapioLink {
    font-size: 1.3em;
    display: block;
    text-align: center;
    margin: 20px;
    cursor: pointer;
  }

  .containerCardapios {
    padding: 0.5em 1em 2em;
  }

  .cardapioList {
    list-style-type: none;
    padding: 0;
  }
  .containerForLi {
    height: 1.2em;
    width: 200px;
    background: green;
  }
  footer {
    height: 8vh;
    background: blue;
  }
  #wrapper {
    display: flex;
    flex-direction: row-reverse
  }
  @media (max-device-width:800px) {
    #wrapper {
      flex-direction: column-reverse;
    }
    .main,
    .cardapios {
      width: 100%
    }
  }
 </style>

 </head>

 <body>

  <header class="header-bg">
    <div>
      <h1>O melhor restaurante mexicano no Rio de Janeiro!</h1>
    </div>

    <nav>
      <ul class="navigationList">
        <li><a href="#1">Inicio</a></li>
        <li><a href="#2">Nossa historia</a></li>
        <li><a href="#3">Nossas fotos</a></li>
        <li><a href="#4">Contatos</a></li>
      </ul>
    </nav>
  </header>
  <div id="wrapper">
    <main class="main">
      <section>
        <h2>"El Burrito Food"</h1>
          <p>Venha aqui para experimentar a nossa comida!</p>
          <p>Aqui tem a comida tradicional tal como burrito e nacho e drinques tipicos direitamente do Mexico!</p>
      </section>
    </main>

    <aside class="cardapios">
      <div class=containerCardapios>
        <h3 style="text-align:center">Veja o nosso cardapio</h3>
        <ul class="cardapioList">
          <li><a download="comidaElBurrito.txt" href="#" id="comidaCardapio" class="cardapioLink">Baixa o nosso cardapio da comida</a></li>
          <li><a download="bebidaElBurrito.txt" href="#" id="bebidaCardapio" class="cardapioLink">Baixa o nosso cardapio das bebidas</a></li>
        </ul>
      </div>
    </aside>
  </div>
  <footer>
    <!-- <p>site experimental</p> -->
    <!-- появляется пустое просторанство -->
  </footer>
 </body>
 <!--   <script src="script.js"></script> -->
diff --git a/rnembmq.markdown b/rnembmq.markdown
	<style>
	body {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	margin: 0;
	background: wheat;
	}

	.header-bg {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 20vh;
	text-align: center;
	background: salmon;
	}

	.header-bg h1 {
	margin: 0;
	}

	.header-bg div {
	padding: 1% 0 0 0;
	}
	nav {
	/*margin-top: 5%;
	width:100%;*/
	}

	.navigationList {
	display: flex;
	margin: 0;
	padding: 0;
	}

	.navigationList li {
	width: 25%;
	list-style-type: none;
	/* 4 пункта меню, то есть 100%/4 */
	text-align: center;
	background: rgb(46, 95, 122);
	}

	.navigationList a {
	display: block;
	padding: 3px 0;
	color: #fff;
	text-decoration: none;

	}
	.main {
	height: 75vh;
	width: 80%;
	text-align: center;
	font-size: 1.3em;
	background: pink;
	}

	.cardapios {
	height: 75vh;
	width: 20%;
	background: violet;
	}
	.cardapioLink {
	font-size: 1.3em;
	display: block;
	text-align: center;
	margin: 20px;
	cursor: pointer;
	}

	.containerCardapios {
	padding: 0.5em 1em 2em;
	}

	.cardapioList {
	list-style-type: none;
	padding: 0;
	}
	.containerForLi {
	height: 1.2em;
	width: 200px;
	background: green;
	}
	footer {
	height: 8vh;
	background: blue;
	}
	#wrapper {
	display: flex;
	flex-direction: row-reverse
	}
	@media (max-device-width:800px) {
	#wrapper {
	flex-direction: column-reverse;
	}
	.main,
	.cardapios {
	width: 100%
	}
	}
	</style>

	</head>

	<body>

	<header class="header-bg">
	<div>
	<h1>O melhor restaurante mexicano no Rio de Janeiro!</h1>
	</div>

	<nav>
	<ul class="navigationList">
	<li><a href="#1">Inicio</a></li>
	<li><a href="#2">Nossa historia</a></li>
	<li><a href="#3">Nossas fotos</a></li>
	<li><a href="#4">Contatos</a></li>
	</ul>
	</nav>
	</header>
	<div id="wrapper">
	<main class="main">
	<section>
	<h2>"El Burrito Food"</h1>
	<p>Venha aqui para experimentar a nossa comida!</p>
	<p>Aqui tem a comida tradicional tal como burrito e nacho e drinques tipicos direitamente do Mexico!</p>
	</section>
	</main>

	<aside class="cardapios">
	<div class=containerCardapios>
	<h3 style="text-align:center">Veja o nosso cardapio</h3>
	<ul class="cardapioList">
	<li><a download="comidaElBurrito.txt" href="#" id="comidaCardapio" class="cardapioLink">Baixa o nosso cardapio da comida</a></li>
	<li><a download="bebidaElBurrito.txt" href="#" id="bebidaCardapio" class="cardapioLink">Baixa o nosso cardapio das bebidas</a></li>
	</ul>
	</div>
	</aside>
	</div>
	<footer>
	<!-- <p>site experimental</p> -->
	<!-- появляется пустое просторанство -->
	</footer>
	</body>
	<!-- <script src="script.js"></script> -->