# <h1>Step-by-step for Metamask Blog</h1>
<h3>
The site was written in php and css so that in the future, with its implementation, we can include a database.
</h3>
<h3>
The first part to be created was the front-end, your homepage.
</h3>
<ul>
<li>
Menu
</li>
```
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Jornadas</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#conteudoNavbarSuportado"
aria-controls="conteudoNavbarSuportado" aria-expanded="false" aria-label="Alterna navegação">
<span class="navbar-toggler-icon"></span>
</button>
```
<div class="collapse navbar-collapse" id="conteudoNavbarSuportado">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(página atual)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.php">Quem somos</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Educação
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Tecnologia</a>
<a class="dropdown-item" href="#">Game</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Outros</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Cadastre-se</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Pesquisar" aria-label="Pesquisar">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Pesquisar</button>
</form>
</div>
</nav>
</div>
<li>
Body</li> In the Body section, we place the banner with the logo of our project.
Below, in the next grid, we have placed the top 4 services: Education, Microcredit, Support, and Social Action.
<li> Footer
</li>
In the footer, we have placed the small logo, contacts, and a quick menu. This menu includes the Privacy Policy and the Terms and Conditions of website use.
</ul>
<h2>
Login button
</h2>
<h4>One way we found to access the platform is through login. We use the Metamask wallet's button to log in to the website. Once a person has an account with the wallet, they can access the website as well. The first step was to install the button in the menu.</h4>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Acesse com Connect Wallet
</button></div>
<h4>
In this button, we included a dropdown with access to Metamask.
</h4>
<button type="button" class="btn btn-secondary" onclick="connect()"> <img src="image/metamask.png" class="img-fluid" > Metamask</button>
<h4>
The purpose of the `onclick` attribute in HTML code is to specify an action to be executed when an element is clicked by the user. This attribute usually contains a snippet of JavaScript code that will be triggered when the click event occurs on the element. It allows adding interactivity and custom behaviors to the page elements when they are clicked.
</h4>
<h4>
The JavaScript code that will be triggered when clicking the button is located in the `head.php` file of the code. It is typically placed within the `<head>` tag, where we commonly include CSS references and other authorizations.
</h4>
<script src="https://cdn.jsdelivr.net/npm/@metamask/detect-provider@1.2.0/dist/detect-provider.min.js">
</script>
<script>
async function connect() {
// Detecta a carteira Metamask
const provider = await detectEthereumProvider();
// Verifica se a carteira está conectada
if (provider) {
console.log('Carteira Metamask detectada!');
// Solicita ao usuário que conecte sua carteira
await provider.request({ method: 'eth_requestAccounts' });
console.log('Carteira Metamask conectada!');
// Agora o usuário pode interagir com a carteira
} else {
console.log('Carteira Metamask não encontrada');
alert('Por favor, instale a carteira Metamask em seu navegador para usar esta função');
}}</script>
<h2>
Connection with Web3
</h2>
<h4>
The connection with Web3 was addressed by creating smart contracts in the Solidity programming language. We used Remix to program this part.
</h4>
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;
import "https://github.com/OpenZeppelin/openzeppelin-contracts/blob/release-v4.2/contracts/utils/Address.sol";
contract MetamaskIntegration {
using Address for address payable;
function sendTransaction() public payable {
require(msg.sender.isMetamask(), "You must connect with Metamask");
require(msg.value > 0, "You must send some ether");
// Send transaction to the Polygon network
// ...
}
<h2>
The entire code is available on GitHub at [https://github.com/RafaellaManfrenatti/jornadas]
</h2>
Sign in with Wallet
Connect another wallet