Untitled

<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta charset="utf-8">
		<meta name="description" content="Descrição da página">
		<meta name="author" content="Amarildo">
		<link rel="stylesheet" href="css/estilo.css">
		<link rel="icon" href="diretório favicon">
		<title>Menu Amburg</title>
	</head>
	<body>
    	<div class="wrapper">
    	   <div class="nav" id="nav">
    	      <a href="javascript:void(0)" class="close" onclick="closeNav()">&times;</a>
    	   	  <a href="#">HOME</a>
    	   	  <a href="#">SOBRE MIM</a>
    	   	  <a href="#">BLOG</a>
    	   	  <a href="#">DONWLOAD</a>
    	   	  <a href="#footer">CONTATO</a>
    	   </div>
    	    <span id="open" class="open" onclick="openNav()">&#9776;</span>
    		<h1>Tecnologia a meus poderes</h1>
    		<a href="#" class="btn_one">Play</a>

        <main>
            <div class="container">
            <section id="sessao" class="organisaitem">
              <img src="../img1.png">
              <p>Sistemas de grid incluem dois componentes principais: linhas e colunas. Linhas são usadas para acomodar as colunas. Colunas compõem a estrutura final e envolvem o conteúdo real.</p>
              <img src="../img2.png">
            </section>
            </div>
        </main>
    	</div>

       <script>
       	  function openNav() {
             document.getElementById("open").style.display = "none";
             document.getElementById("nav").style.width = "100%";
       	  }
       	  function closeNav() {
              document.getElementById("nav").style.width = "0";
              document.getElementById("open").style.display = "block";
       	  }
       </script>

    <footer id="footer">
       <div class="container">
         <p>Desenvolvido Por Amarildo Lima</p>
       </div>
    </footer>
	</body>
</html>


============================css=============================


body{
	padding: 0;
	margin: 0;
	width: 100%;
}

.container {
	width: 100%
	margin: auto;
}

.organisaitem {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.wrapper {
	height: 100vh;
	width: 100%;
	background-image: url('../img/Bg.jpg');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	text-align: center;
}

h1 {
	margin: 0;
	padding: 7em 0 1em 0;
	color: white;
	text-align: center;
}

.btn_one {
	color: white;
	text-decoration: none;
	font-size: 15px;
	background-color: #f7941d;
	padding: 1em 7em;
	border-radius: 5px;
	opacity: 1.0;
}

.btn_one:hover {
	opacity: 0.8;
}

.open {
	color: white;
	font-size: 35px;
	float: left;
	margin: 1em 0 0 1em;
	display: block;
	cursor: pointer;
}

.nav {
	width: 0%;
	overflow-x: hidden;
	height: 100vh;
	z-index: 1;
	position: fixed;
	background-color: rgba(34,65,93,0.9);
	transition: 0.5s;
	display: block;
}

.nav a {
	clear: left;
	color: white;
	font-size: 22px;
	display: block;
	text-decoration: none;
	padding: 1em 0;
	transition: 0.3s;
}

.close {
	float: left;
	margin: 1em 0 0 1em;
	font-size: 35px;
}

.nav a:not(:first-child):hover{
	background-color: #f7941d;
}

#sessao {
	padding-top: 1em;
	text-align: center;
	background: #FFE4E1;
	color: #000;
}

#sessao img {
	width: 80%;
}

footer {
	background: #000;
	text-align: center;
	color: #fff;
	padding: 2.1em;
}