I can't figure out how to load JSON file data into my html project

I'm trying to do a project about school events showing when they happen in the school year and at what time they are including the details of the event as well. I'm using JQuery with AJAX to try and load my json file then proceeding to append the html using the jsons values in that file when the website is running. No matter what I can't seem to get it to work though and always ends up looking something like this:

Picture of my work

Meanwhile I want to get it looking somewhere like this, with :

What it's supposed to look like

Here's another example from another webpage:

Another example

This is what my main code looks like for the screenshot I shared of my work which is called "Inicio.html":

  </head>

  <body>
  
    <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 border-bottom ">
      <div class="my-0 mr-md-auto">
        <div class="site-title">
            <a href="inicio.html"><img src="Pictures/logo.png" alt="logo"></a>
        </div>
      </div>
  
      <nav class="my-2 my-md-0 mr-md-3">
        <a class="p-2" href="inicio.html">Inicio</a>
        <a class="p-2" href="proximos.html">Próximos Eventos</a>
        <a class="p-2" href="pasados.html">Eventos Pasados</a>
      </nav>
      <nav>
        <a class="btn gradient-bg" href="registro.html">Registro</a>
      </nav>
    </div>
  
  
    <div class="container">
      <div class="px-3 py-3 pb-md-4 mx-auto text-center">
        <h1 class="h1">Próximos Eventos</h1>
        <p class="lead">¡Venga a divertirse en nuestros próximos eventos!</p>
      </div>
      <div id="proximos" class="row mb-3">
      </div>
      <div class="row">
        <div class="col-12 text-right"><a class="btn gradient-bg" href="proximos.html">Ver todos</a></div>
      </div>
      <div class="px-3 py-3 pb-md-4 mx-auto text-center">
        <h1 class="h1">Eventos Pasados</h1>
        <p class="lead">Recuerdos de nuestros eventos ya realizados.</p>
      </div>
      <div id="pasados" class="row mb-3">
      </div>
      <div class="row">
        <div class="col-12 text-right"><a class="btn gradient-bg" href="pasados.html">Ver todos</a></div>
      </div>
    </div>
  
  
    <footer class="site-footer" class="pt-2 my-2 border-top text-center">
      <p>
       Derechos Reservados @2020
      </p>
    </footer>
  
    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
      crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
      crossorigin="anonymous"></script>
    <script src="js/index.js"></script>
    </body>
  
    </html>

This is the event info in a json file which is called "info.json". This is the file I'm trying to load into the html page:

{
  "fechaActual": "2019-01-01",
  "eventos": [
    {
      "id": 1,
      "nombre": "Feria de Comida",
      "fecha": "2018-12-12",
      "descripcion": "Disfruta de tus platos favoritos",
      "lugar": "Salón A",
      "invitados": 0,
      "precio": 5
    },
    {
      "id": 2,
      "nombre": "Salida al museo",
      "fecha": "2018-11-02",
      "descripcion": "Vamos al museo de Ciencias",
      "lugar": "Campo",
      "invitados": 20,
      "precio": 15
    },
    {
      "id": 3,
      "nombre": "Fiesta de Disfraces",
      "fecha": "2019-02-12",
      "descripcion": "Ven con tu personaje favorito",
      "lugar": "Salón C",
      "invitados": 10,
      "precio": 1
    },
    {
      "id": 4,
      "nombre": "Concierto de Música",
      "fecha": "2019-01-22",
      "descripcion": "Canta con nosotros",
      "lugar": "Salón A",
      "invitados": 0,
      "precio": 10
    },
    {
      "id": 5,
      "nombre": "Carrera",
      "fecha": "2018-03-01",
      "descripcion": "Ven y haz ejercicio",
      "lugar": "Campo de Futból",
      "invitados": 50,
      "precio": 0
    },
    {
      "id": 6,
      "nombre": "Intercambio de Libros",
      "fecha": "2018-10-15",
      "descripcion": "Trae y lleva tu libro favorito",
      "lugar": "Salón D1",
      "invitados": 3,
      "precio": 8
    },
    {
      "id": 7,
      "nombre": "Vamos al Cine",
      "fecha": "2019-10-15",
      "descripcion": "Veremos la película más interesante",
      "lugar": "Salón D1",
      "invitados": 3,
      "precio": 8
    }
  ]
}

Here is the file I'm using to try and load the content which is called index.js:

$(document).ready(function () {
    $.getJSON('info.json', function(event) {
        $('#proximos').html('<p> Name: ' + event.name + '</p>');
    });
});

I honestly have no idea I'm probably way off I suck at explaining code and formulating it, so sorry if my question makes no sense, please tell me if you need any other info. I hope you understand what I'm trying to do