<!DOCTYPE html>

<html>

  <head>

    <style type="text/css">

      a {

        color: white;

        text-decoration: none;

      }

      

      body {

        background: url(background.jpg); 

        background-size: cover;

        background-repeat: no-repeat;

        padding: 60px;

        margin: 0;

      }

      

      #fondo {

        border: 10px;

        border-radius: 35px;

        border-style: solid;

        border-color: black;

        background-color:rgba(255, 255, 255, 0.5);

        padding: 50px;

        width: 70%;

        height: 30%;

        margin: 0 auto;

        overflow: auto;

      }

      

      #caja1 {

        background: rgba(255, 139, 0, 0.3);

        padding: 20px;

        width: 93.5%;

        height: 50%;

        border: 150px;

        margin: 0 auto;

        border-color: rgb(255, 139, 0);

        border-width: 2px;

        border-style: solid;

        float: middle;

        text-align:center;

      }

      

      #caja2 {

        background: rgba(255, 0, 0, 0.3);

        padding: 20px;

        width: 27.5%;

        height: 50%;

        border: 150px;

        margin: 0 auto;

        text-align:center;

        float: left;

      }

      

      #caja3 {

        background: rgba(0, 19, 255, 0.3);

        padding: 20px;

        width: 27.5%;

        height: 50%;

        border: 150px;

        margin: 0px 11px;

        text-align:center;

        float: left;

      }

      

      #caja4 {

        background: rgba(255, 240, 0, 0.3);

        padding: 20px;

        width: 27.5%;

        height: 50%;

        border: 150px;

        margin: 0 auto;

        text-align:center;

        float: left;

      }

      

      #caja5 {

        background: rgba(255, 139, 0, 0.3);

        padding: 20px;

        width: 93.5%;

        height: 30%;

        border: 150px;

        margin: 0 auto;

        float: middle;

        text-align:center;

      }

    </style>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Prueba inicial</title>

    <link href="/style.css" rel="stylesheet" type="text/css" media="all">

  </head>

  <body>

      <div id="fondo">

        <h1 align=center>

          <font color="red">HTML5</font> + 

          <font color="blue">CSS3</font> + 

          <font color="yellow">JavaScript</font>

        </h1>

        <div align="center"><img src="banner.jpg"></div><br>

        <div id="caja1">

          <a href="pruebainicial.html">Introducción | </a>

          <a href="tutorial.html">Tutoriales</a>

          <a href="formulario.html"> | Formulario</a>

        </div><br>

        <div id="caja2">

          <h3>HTML5</h3>

          <p>Las etiquetas html5 definen la semántica de los datos.</p>

        </div>

        <div id="caja3">

          <h3>CSS3</h3>

          <p>Con la hoja de estilo css3 se establece la apariencia.</p>

        </div>

        <div id="caja4">

          <h3>JavaScript</h3>

          <p>Lenguaje de programación que crea interactividad.</p>

        </div><br><br><br><br><br><br><br><br><br>

        <div id="caja5">

          <p>Prueba IMW - Curso 2021/2022</p>

          <h4>Aytami Santana Vega</h4>

        </div>

      </div>

  </body>

</html>