sidneyroberto/estilos.css

## estilos.css
@font-face {
    font-family: "ze";
    src: url("../fonts/Rubik/Rubik-Black.ttf");
}

@font-face {
    font-family: menu;
    src: url("../fonts/Noto_Sans/NotoSans-Bold.ttf");
}

#banner {
    font-family: "menu";
    background-color: #353531;
    text-align: center;
    padding: 20px 0px 30px 0px;
    color: white;
    margin: 0;
}

#centro {
    padding: 25px 0px 0px 0px;
    display: flex;
    background-color: #465362;
}

#logo img {
    position: absolute;
    left: 460px;
    top: 170px;
}

#menu {
    text-align: center;
    font-family: "menu";
    display: flex;
    padding: 100% auto;
    margin: 50px 40% 50px 50%;
    color: white;
    font-size: 18px;
    width: 100%;
}

#menuresponsivo {
    display: none;
}

#menu p {
    padding: 70px 0px 0px 60px;
}

#bannerinferior {
    padding: 25px;
    background-color: #F5B82E;
    text-align: center;
    font-family: "ze";
}

#rodape {
    background-color: #353531;
    text-align: center;
    padding: 25px;
    color: white;
    font-family: "menu";
}

@media only screen and (max-width: 600px) {
    #menuresponsivo {
        display: block;
    }
    #banner {
        font-family: "menu";
        background-color: #353531;
        text-align: center;
        padding: 10px 0px;
    }
    #logo {
        display: none;
    }
    #menu {
        display: none;
    }
    #centro {
        padding: 10px 0px;
        display: flex;
        background-color: #465362;
    }
}

## index.html
<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Atividade</title>
</head>

<body>
    <div id="banner">
        <h3>(67)3245-2369-Contato</h3>
    </div>

    <div id="centro">
        <div id="logo">
            <img id="foto" src="../img/imagem.png" alt="logo">
        </div>

        <div id="menu">
            <p>Home</p>
            <p>Produtos</p>
            <p>Empresa</p>
        </div>

        <div id="menuresponsivo">
            <img src="img/home.png" alt="home">
            <img src="img/ferramenta.png" alt="ferramenta">
            <img src="img/empresa.png" alt="empresa">
        </div>
    </div>

    <div id="conteudo">
        <img id="plano" src="img/desenho.PNG" alt="imagem">
    </div>

    <div id="bannerinferior">
        <H2>Atendimento</H2>
        <h2>Segunda á Sabado das 7:00 ás 18:00 e Domingo das 7:30 ás 12:00</h2>
    </div>

    <div id="rodape">
        <p>Endereço:Rua 27 de julho,Nº1730-Cidade Anastacio,MS<p>
                <P>Telefone:(67)3245-2369</P>
                <p>E-mail:papaleguasdistribuidora@hotmail.com</p>
    </div>
</body>

</html>
	@font-face {
	font-family: "ze";
	src: url("../fonts/Rubik/Rubik-Black.ttf");
	}

	@font-face {
	font-family: menu;
	src: url("../fonts/Noto_Sans/NotoSans-Bold.ttf");
	}

	#banner {
	font-family: "menu";
	background-color: #353531;
	text-align: center;
	padding: 20px 0px 30px 0px;
	color: white;
	margin: 0;
	}

	#centro {
	padding: 25px 0px 0px 0px;
	display: flex;
	background-color: #465362;
	}

	#logo img {
	position: absolute;
	left: 460px;
	top: 170px;
	}

	#menu {
	text-align: center;
	font-family: "menu";
	display: flex;
	padding: 100% auto;
	margin: 50px 40% 50px 50%;
	color: white;
	font-size: 18px;
	width: 100%;
	}

	#menuresponsivo {
	display: none;
	}

	#menu p {
	padding: 70px 0px 0px 60px;
	}

	#bannerinferior {
	padding: 25px;
	background-color: #F5B82E;
	text-align: center;
	font-family: "ze";
	}

	#rodape {
	background-color: #353531;
	text-align: center;
	padding: 25px;
	color: white;
	font-family: "menu";
	}

	@media only screen and (max-width: 600px) {
	#menuresponsivo {
	display: block;
	}
	#banner {
	font-family: "menu";
	background-color: #353531;
	text-align: center;
	padding: 10px 0px;
	}
	#logo {
	display: none;
	}
	#menu {
	display: none;
	}
	#centro {
	padding: 10px 0px;
	display: flex;
	background-color: #465362;
	}
	}
	<!DOCTYPE html>
	<html lang="pt-br">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="estilos.css">
	<title>Atividade</title>
	</head>

	<body>
	<div id="banner">
	<h3>(67)3245-2369-Contato</h3>
	</div>

	<div id="centro">
	<div id="logo">
	<img id="foto" src="../img/imagem.png" alt="logo">
	</div>

	<div id="menu">
	<p>Home</p>
	<p>Produtos</p>
	<p>Empresa</p>
	</div>

	<div id="menuresponsivo">
	<img src="img/home.png" alt="home">
	<img src="img/ferramenta.png" alt="ferramenta">
	<img src="img/empresa.png" alt="empresa">
	</div>
	</div>

	<div id="conteudo">
	<img id="plano" src="img/desenho.PNG" alt="imagem">
	</div>

	<div id="bannerinferior">
	<H2>Atendimento</H2>
	<h2>Segunda á Sabado das 7:00 ás 18:00 e Domingo das 7:30 ás 12:00</h2>
	</div>

	<div id="rodape">
	<p>Endereço:Rua 27 de julho,Nº1730-Cidade Anastacio,MS<p>
	<P>Telefone:(67)3245-2369</P>
	<p>E-mail:papaleguasdistribuidora@hotmail.com</p>
	</div>
	</body>

	</html>