
<!DOCTYPE html>
<html>

<head>
	<title>TRIA AMB QUI VOLS PARLAR</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	
	<style>
* {
  box-sizing: border-box;
}
.menu {
  float:left;
  width:33%;
  text-align:center;
}
.menu a {
  padding:8px;
  margin-top:7px;
  display:block;
  width:100%;
  color:black;
}
.main {
  float:left;
  width:66%;
  padding:0 20px;
  text-align:center;
  fontSize=35px;
}
.right {
  float:left;
  width:33%;
  padding:15px;
  margin-top:7px;
  text-align:center;
}
img { 
  width: 100%; 
}
.text {
  font-size:1vw;
}

@media only screen and (max-width:620px) {
  /* For mobile phones: */
  .menu, .main, .right {
    width:100%;
  }
}
</style>
	
</head>
<body>

<div style="padding:15px;text-align:left;">
  <h1>MAIN MENU</h1>
</div>

<div style="overflow:auto">
  <div class="menu">
    <img src="navigation.png" alt="NAVIGATION">
  </div>

  <div class="main">
	<form action="{% url 'triaAveria'%}" method="get">
      <button type="submit" name="bateria"  style="font-size : 20px"> LA BATERÍA NO FUNCIONA</button>
	  <br>
	  <br>
	  <button type="submit" name="bateria" style="font-size : 20px"> PINCHAZO</button>
	  <br>
	  <br>
	  <button type="submit" name="bateria" style="font-size : 20px"> HACER UN PARTE</button>
	  <br>
	  <br>
	  <button type="submit" name="bateria" style="font-size : 20px"> Altres</button>
      
	</form>
  </div>


 
  </div>
</div>


  <!--<div class="right">
    <img src="navigation.png" alt="AVERIA">
  </div>-->
</div>

<div style="text-align:center;padding:10px;margin-top:7px;">© copyright w3schools.com</div>

</body>
</html>