Introduction: Tutorial Aplicativo Web : PlayStation 5

By

En este Instructable les enseñaremos a realizar un modelo prototipo de una aplicación web adaptativa en la que se podrán enterar de los subsistemas que componen a la consola de nueva generación de Sony, la PlayStation 5, así como escuchar una explicación de porque cada uno de ellos es un subsistema, todo con un diseño moderno y programado en Javascript.

Para programar este aplicativo se hará uso del editor de código online, CodeSandbox (https://codesandbox.io/)


Introducción

El proyecto surge como solución a un problema que consiste en que los materiales de estudio a menudo carecen de ejemplos que permitan referenciar los temas vistos por los estudiantes con casos reales y concretos.

En este caso se tomara como ejemplo la nueva consola de Sony, la PlayStation 5. En este aplicativo se hará de esta consola un sistema multimedia, identificando cada uno de sus subsistemas y el porque cada uno de estos es un subsistema

Step 1: Creacion De Cuenta Y Proyecto En CodeSandbox

Para comenzar a desarrollar el proyecto debemos crear una cuenta en el editor de código online CodeSandbox (https://codesandbox.io/signin).

Tras darle al link nos registraremos usando una cuenta de GitHub o Google.

Ya habiéndonos registrado, procederemos a crear el proyecto. Para esto daremos click en "New Sandbox" y seleccionamos la plantilla "JS Vanilla" entre las que tenemos disponibles.

Step 2: Bootstrap 4

Una vez creado el proyecto importaremos la librería Bootstrap4 (https://getbootstrap.com/), una librería de código abierto que nos facilitará el desarrollo de la pagina web.

Step 3: Subir Recursos Multimedia

Ya habiendo importado la librería que necesitamos, procederemos a subir los archivos que necesitamos para la elaboración del proyecto.

Para esto, primero crearemos una carpeta en la que vamos a agrupar los archivos. Una vez hecho esto procederemos a subir los archivos que necesitamos (como lo indican las imágenes) y moverlos a la carpeta que creamos.

Step 4: Cargar Recursos Multimedia

Una vez subidos nuestros archivos, tenemos que obtener sus enlaces para utilizarlos en nuestro código. Para esto debemos dirigirnos a la Administración de almacenamiento del CodeSandbox, ubicada en la esquina superior derecha de la pantalla. Una vez ahí damos doble click en cada uno de los archivos subidos para obtener su enlace para su posterior uso.

Step 5: Código Utilizado

Para el proyecto se utilizan 4 archivos:

1. index.html

2. index.js

3. package.json

4. styles.css

A continuación añadimos el código de cada uno de estos archivos para mayor facilidad de uso

Step 6: Index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
      integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
      crossorigin="anonymous"
    />

    <link rel="stylesheet" href="src/styles.css" />

    <!-- JQUERY -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

    <!--SCRIPT BOTÓN COOLER-->
    <script>
      $(document).ready(function () {
        var body = $("html, body");
        $("#plus-entrada1").click(function () {
          $("#toggle").slideToggle();
          body.animate(
            {
              scrollTop: 2400
            },
            500
          );
          if (
            ((
              "#toggle2" &&
              "#toggle3" &&
              "#toggle4" &&
              "#toggle5" &&
              "#toggle6"
            ).slideToggle = true)
          ) {
            $("#toggle2").hide();
            $("#toggle3").hide();
            $("#toggle4").hide();
            $("#toggle5").hide();
            $("#toggle6").hide();
          } else if (
            ((
              "#toggle2" ||
              "#toggle3" ||
              "#toggle4" ||
              "#toggle5" ||
              "#toggle6"
            ).slideToggle = true)
          ) {
            $("#toggle2").hide();
            $("#toggle3").hide();
            $("#toggle4").hide();
            $("#toggle5").hide();
            $("#toggle6").hide();
          }
        });
      });
    </script>
    <!--SCRIPT BOTÓN CPU-->
    <script>
      $(document).ready(function () {
        var body = $("html, body");
        $("#plus-entrada2").click(function () {
          $("#toggle2").slideToggle();
          body.animate(
            {
              scrollTop: 2400
            },
            500
          );
          if (
            ((
              "#toggle" &&
              "#toggle3" &&
              "#toggle4" &&
              "#toggle5" &&
              "#toggle6"
            ).slideToggle = true)
          ) {
            $("#toggle").hide();
            $("#toggle3").hide();
            $("#toggle4").hide();
            $("#toggle5").hide();
            $("#toggle6").hide();
          } else if (
            ((
              "#toggle" ||
              "#toggle3" ||
              "#toggle4" ||
              "#toggle5" ||
              "#toggle6"
            ).slideToggle = true)
          ) {
            $("#toggle").hide();
            $("#toggle3").hide();
            $("#toggle4").hide();
            $("#toggle5").hide();
            $("#toggle6").hide();
          }
        });
      });
    </script>
    <!--SCRIPT BOTÓN GPU-->
    <script>
      $(document).ready(function () {
        var body = $("html, body");
        $("#plus-entrada3").click(function () {
          $("#toggle3").slideToggle();
          body.animate(
            {
              scrollTop: 2400
            },
            500
          );
          if (
            ((
              "#toggle" &&
              "#toggle2" &&
              "#toggle4" &&
              "#toggle5" &&
              "#toggle6"
            ).slideToggle = true)
          ) {
            $("#toggle").hide();
            $("#toggle2").hide();
            $("#toggle4").hide();
            $("#toggle5").hide();
            $("#toggle6").hide();
          } else if (
            ((
              "#toggle" ||
              "#toggle2" ||
              "#toggle4" ||
              "#toggle5" ||
              "#toggle6"
            ).slideToggle = true)
          ) {
            $("#toggle").hide();
            $("#toggle2").hide();
            $("#toggle4").hide();
            $("#toggle5").hide();
            $("#toggle6").hide();
          }
        });
      });
    </script>

    <!--SCRIPT BOTÓN SSD-->
    <script>
      $(document).ready(function () {
        var body = $("html, body");
        $("#plus-entrada4").click(function () {
          $("#toggle4").slideToggle();
          body.animate(
            {
              scrollTop: 2400
            },
            500
          );
          if (
            ((
              "#toggle" &&
              "#toggle2" &&
              "#toggle3" &&
              "#toggle5" &&
              "#toggle6"
            ).slideToggle = true)
          ) {
            $("#toggle").hide();
            $("#toggle2").hide();
            $("#toggle3").hide();
            $("#toggle5").hide();
            $("#toggle6").hide();
          } else if (
            ((
              "#toggle" ||
              "#toggle2" ||
              "#toggle3" ||
              "#toggle5" ||
              "#toggle6"
            ).slideToggle = true)
          ) {
            $("#toggle").hide();
            $("#toggle2").hide();
            $("#toggle3").hide();
            $("#toggle5").hide();
            $("#toggle6").hide();
          }
        });
      });
    </script>

    <!--SCRIPT BOTÓN Radiador-->
    <script>
      $(document).ready(function () {
        var body = $("html, body");
        $("#plus-entrada5").click(function () {
          $("#toggle5").slideToggle();
          body.animate(
            {
              scrollTop: 2400
            },
            500
          );
          if (
            ((
              "#toggle" &&
              "#toggle2" &&
              "#toggle3" &&
              "#toggle4" &&
              "#toggle6"
            ).slideToggle = true)
          ) {
            $("#toggle").hide();
            $("#toggle2").hide();
            $("#toggle3").hide();
            $("#toggle4").hide();
            $("#toggle6").hide();
          } else if (
            ((
              "#toggle" ||
              "#toggle2" ||
              "#toggle3" ||
              "#toggle4" ||
              "#toggle6"
            ).slideToggle = true)
          ) {
            $("#toggle").hide();
            $("#toggle2").hide();
            $("#toggle3").hide();
            $("#toggle4").hide();
            $("#toggle6").hide();
          }
        });
      });
    </script>

    <!--SCRIPT BOTÓN Bluray-->
    <script>
      $(document).ready(function () {
        var body = $("html, body");
        $("#plus-entrada6").click(function () {
          $("#toggle6").slideToggle();
          body.animate(
            {
              scrollTop: 2400
            },
            500
          );
          if (
            ((
              "#toggle" &&
              "#toggle2" &&
              "#toggle3" &&
              "#toggle4" &&
              "#toggle5"
            ).slideToggle = true)
          ) {
            $("#toggle").hide();
            $("#toggle2").hide();
            $("#toggle3").hide();
            $("#toggle4").hide();
            $("#toggle5").hide();
          } else if (
            ((
              "#toggle" ||
              "#toggle2" ||
              "#toggle3" ||
              "#toggle4" ||
              "#toggle5"
            ).slideToggle = true)
          ) {
            $("#toggle").hide();
            $("#toggle2").hide();
            $("#toggle3").hide();
            $("#toggle4").hide();
            $("#toggle5").hide();
          }
        });
      });
    </script>
  </head>

  <body>
    <div id="app"></div>

    <!-- SCRIPTS -->
    <script src="src/index.js"></script>
    <script
      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
      integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
      integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
      crossorigin="anonymous"
    ></script>

    <!-- JQUERY -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

    <div class="row">
      <div class="col-md-12">
        <img
          src="https://uploads.codesandbox.io/uploads/user/8d8a32d5-7dcf-48ff-938a-1664cda95dcc/iIFY-bluebar.png"
          ;
          class="d-block bluebar"
          ;
          alt="..."
        />
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <img
          src="https://uploads.codesandbox.io/uploads/user/8d8a32d5-7dcf-48ff-938a-1664cda95dcc/C25O-black.jpg"
          ;
          class="d-block bb"
          ;
          alt="..."
        />
      </div>
    </div>
    <div class="row row-header">
      <div class="col-md-2"></div>
      <div class="col-md-8">
        <!-- CAROUSEL -->
        <div
          id="IDcarousel"
          class="carousel slide"
          data-ride="carousel"
          data-interval="5000"
        >
          <ol class="carousel-indicators">
            <li data-target="#IDcarousel" data-slide-to="0" class="active"></li>
            <li data-target="#IDcarousel" data-slide-to="1"></li>
            <li data-target="#IDcarousel" data-slide-to="2"></li>
          </ol>
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img
                src="https://uploads.codesandbox.io/uploads/user/8d8a32d5-7dcf-48ff-938a-1664cda95dcc/xNmp-ps5.png"
                class="d-block car"
                alt="..."
              />
            </div>
            <div class="carousel-item">
              <img
                src="https://uploads.codesandbox.io/uploads/user/8d8a32d5-7dcf-48ff-938a-1664cda95dcc/spgi-harpal-singh-_z9Rk2FGpnw-unsplash.jpg"
                class="d-block car"
                alt="..."
              />
            </div>
            <div class="carousel-item">
              <img
                src="https://uploads.codesandbox.io/uploads/user/8d8a32d5-7dcf-48ff-938a-1664cda95dcc/tjHW-kerde-severin-NVD_32BBZFE-unsplash.jpg"
                class="d-block car"
                alt="..."
              />
            </div>
          </div>
          <a
            class="carousel-control-prev"
            href="#IDcarousel"
            role="button"
            data-slide="prev"
          >
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a
            class="carousel-control-next"
            href="#IDcarousel"
            role="button"
            data-slide="next"
          >
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-12">
        <!-- section 1 -->
        <section id="section1" style="background-color: #f2f3f4;">
          <h2 style="color: black;">PlayStation® 5</h2>
          <p style="color: black;">
            Experimenta una carga increíblemente rápida con un SSD de ultra alta
            velocidad, inmersión más profunda con soporte para retroalimentación
            háptica, disparadores adaptativos y audio 3D, y una nueva generación
            de increíbles juegos de PlayStation®️.
          </p>
          <iframe
            width="560"
            height="315"
            src="https://www.youtube.com/embed/CaAY-jAjm0w"
            frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen
          ></iframe>
        </section>
      </div>
    </div>

    <!-- Entradas principales -->
    <div class="row">
      <div class="col-md-12">
        <section class="entradas">
          <div id="entradas-index">
            <article class="entrada">
              <figure>
                <span id="plus-entrada1" class="boton plus-entrada">+</span>
                <img
                  src="https://uploads.codesandbox.io/uploads/user/8d8a32d5-7dcf-48ff-938a-1664cda95dcc/sg0L-COOLER.jpeg"
                />
              </figure>
              <h5>Cooler</h5>
            </article>

            <article class="entrada">
              <figure>
                <span id="plus-entrada2" class="boton plus-entrada">+</span>
                <img
                  src="https://uploads.codesandbox.io/uploads/user/8d8a32d5-7dcf-48ff-938a-1664cda95dcc/kBaO-placa1.jpeg"
                />
              </figure>
              <h5>CPU</h5>
            </article>

            <article class="entrada">
              <figure>
                <span id="plus-entrada3" class="boton plus-entrada">+</span>
                <img
                  src="https://uploads.codesandbox.io/uploads/user/8d8a32d5-7dcf-48ff-938a-1664cda95dcc/ssBn-gpu.jpeg"
                />
              </figure>
              <h5>GPU</h5>
            </article>
          </div>
        </section>
      </div>
    </div>
    <!-- Entradas secundarias -->
    <div class="row">
      <div class="col-md-12">
        <section class="entradasCom">
          <div id="entradas-index">
            <article class="entrada">
              <figure>
                <span id="plus-entrada4" class="boton plus-entrada">+</span>
                <img
                  src="https://uploads.codesandbox.io/uploads/user/8d8a32d5-7dcf-48ff-938a-1664cda95dcc/cBzx-SSD+Y+CONTROLADOR.jpeg"
                />
              </figure>
              <h5>SSD y Controlador</h5>
            </article>

            <article class="entrada">
              <figure>
                <span id="plus-entrada5" class="boton plus-entrada">+</span>
                <img
                  src="https://uploads.codesandbox.io/uploads/user/8d8a32d5-7dcf-48ff-938a-1664cda95dcc/Em_1-radiador.jpeg"
                />
              </figure>
              <h5>Radiador</h5>
            </article>

            <article class="entrada">
              <figure>
                <span id="plus-entrada6" class="boton plus-entrada">+</span>
                <img
                  src="https://uploads.codesandbox.io/uploads/user/8d8a32d5-7dcf-48ff-938a-1664cda95dcc/r0ii-unidad+de+bluray.jpeg"
                />
              </figure>
              <h5>Unidad Blu-Ray</h5>
            </article>
          </div>
        </section>
      </div>
    </div>

    <!--ENTRADAS TOGGLE-->
    <section id="toggle">
      <section id="compost">
        <h5>COOLER</h5>
        <p>AQUI VA UN PARRAFO.</p>
        <video controls>
          <source src="https://www.youtube.com/watch?v=CaAY-jAjm0w" />
        </video>
        <p>
          OTRO PARRAFO
        </p>
      </section>
    </section>
    <section id="toggle2">
      <section id="vermi">
        <h5>VERMICOMPOST</h5>
        <p>
          PARRAFO
        </p>
        <video controls>
          <!-- <source src="images/videos/Vermicompost.mp4" />!-->
        </video>

        <p>
          PARRAFO
        </p>
        <!----<img src="images/marcadores/Marcador2.png" id="img2" />!-->
      </section>
    </section>

    <section id="toggle3">
      <section id="bokashi">
        <h5>BOKASHI</h5>
        <p>
          PARRAFO AQUI
        </p>
        <video controls>
          <!---- <source src="images/videos/Bokashi.mp4" />!-->
        </video>
        <p>
          OTRO PARRAFO
        </p>
        <!--<img src="images/marcadores/Marcador3.png" id="img3" />!-->
      </section>
    </section>

    <!--ENTRADAS TOGGLE SEGUNDA FILA-->
    <section id="toggle4">
      <section id="SSD">
        <h5>COOLER</h5>
        <p>AQUI VA UN PARRAFO.</p>
        <video controls>
          <source src="https://www.youtube.com/watch?v=CaAY-jAjm0w" />
        </video>
        <p>
          OTRO PARRAFO
        </p>
      </section>
    </section>
    <section id="toggle5">
      <section id="radiador">
        <h5>VERMICOMPOST</h5>
        <p>
          PARRAFO
        </p>
        <video controls>
          <!-- <source src="images/videos/Vermicompost.mp4" />!-->
        </video>

        <p>
          PARRAFO
        </p>
        <!----<img src="images/marcadores/Marcador2.png" id="img5" />!-->
      </section>
    </section>

    <section id="toggle6">
      <section id="bluray">
        <h5>BOKASHI</h5>
        <p>
          PARRAFO AQUI
        </p>
        <video controls>
          <!---- <source src="images/videos/Bokashi.mp4" />!-->
        </video>
        <p>
          OTRO PARRAFO
        </p>
        <!--<img src="images/marcadores/Marcador3.png" id="img6" />!-->
      </section>
    </section>

    <div class="row">
      <div class="col-md-12">
        <!--seccion play caracteristicas!-->
        <section id="section2" style="background-color: #f2f3f4;">
          <img
            src="https://uploads.codesandbox.io/uploads/user/8d8a32d5-7dcf-48ff-938a-1664cda95dcc/vFQr-ps5section2.png"
            id="img7"
          />
          <img
            src="https://uploads.codesandbox.io/uploads/user/8d8a32d5-7dcf-48ff-938a-1664cda95dcc/IuKI-caracteristicasps5.png"
            id="img8"
          />
        </section>

        <!--seccion audifonos!-->

        <section id="section3" style="background-color: white;">
          <h5>
            Accesorios PlayStation®5
          </h5>
          <h5>
            Sobrepasa los límites del juego con la nueva generación de
            accesorios PlayStation®.
          </h5>
        </section>

        <section id="section4" style="background-color: #f2f3f4;">
          <img
            src="https://uploads.codesandbox.io/uploads/user/8d8a32d5-7dcf-48ff-938a-1664cda95dcc/_HSB-control.png"
            id="img9"
          />
          <img
            src="https://uploads.codesandbox.io/uploads/user/8d8a32d5-7dcf-48ff-938a-1664cda95dcc/uDbW-controlcarac.png"
            id="img10"
          />
        </section>

        <section id="section5" style="background-color: white;">
          <img
            src="https://uploads.codesandbox.io/uploads/user/8d8a32d5-7dcf-48ff-938a-1664cda95dcc/8G_p-pulse3d.jpg"
            id="img11"
          />
          <img
            src="https://uploads.codesandbox.io/uploads/user/8d8a32d5-7dcf-48ff-938a-1664cda95dcc/Y_S5-pulse3dcarac.png"
            id="img12"
          />
        </section>
      </div>
    </div>
  </body>
</html>

Step 7: Index.js

import "./styles.css";
$(document).ready(function () {
  var estado = false;
  $("#boton plus-entrada1").on("click", function () {
    $("#toggle").slideToggle();
  });
});

Step 8: Styles.css

body {
  font-family: sans-serif;
}
@font-face {
  font-family: "zrnicrg";
  src: url("https://uploads.codesandbox.io/uploads/user/deaf60a6-aa66-4ffa-a78e-dfc4fa934d49/oPxk-zrnicrg.woff2");
}
.car {
  width: 100%;
  height: 400px;
}

.bb {
  width: 100%;
  height: 35px;
}

.bluebar {
  width: 100%;
  height: 5px;
}

:root {
  --uno: #4169e1;
  --dos: #000000;
  --tres: #000000;
  --cuatro: #424242;
  --cinco: #000000;
}

body {
  background: var(--uno);
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 100%;
  color: white;
  overflow-x: hidden;
}

#section1 {
  padding: 100px 0;
  text-align: center;
  color: rgb(253, 250, 250);
  display: flex;
  flex-flow: column;
  justify-content: center;
}

#section1 iframe {
  width: 560px;
  height: 315px;
  position: relative;
  left: 36%;
  margin: 2px 0 2px;
}

#section3 {
  padding: 100px 0;
  text-align: center;
  color: black;
  display: flex;
  flex-flow: column;
  justify-content: center;
}

#img7 {
  margin: 0 0 20px 0;
  position: relative;
  left: 8%;
  margin: 0 0 20px 0;
}

#img8 {
  margin: 0 0 20px 0;
  position: relative;
  left: 15%;
  margin: 0 0 20px 0;
}

#img9 {
  padding: 50px;
  width: 600px;
  margin: 4px 0 20px;
  position: relative;
  left: 8%;
}

#img10 {
  width: 600px;
  margin: 4px 0 20px;
  position: relative;
  left: 20%;
}

#img11 {
  padding: 50px;
  width: 600px;
  margin: 4px 0 20px;
  position: relative;
  left: 60%;
}

#img12 {
  width: 600px;
  margin: 4px 0 20px;
  position: relative;
  right: 18%;
}
/* 4- ENTRADAS INDEX */
#entradas-index {
  width: 100vw;
  background: var(--tres);
  /* https://bennettfeely.com/clippy/ */
  clip-path: polygon(50% 0%, 100% 10%, 100% 90%, 50% 100%, 0 90%, 0 10%);
  padding: 100px 0;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
}

.entrada {
  display: flex;
  flex-flow: column;
  margin: 0 30px;
  text-align: center;
  text-decoration: none;
}

.entrada figure {
  width: 270px;
  height: 270px;
  border-radius: 50%;
  background: var(--uno);
  margin: 0 0 20px 0;
  position: relative;
}

.entrada figure img {
  width: 270px;
  height: 270px;
  border-radius: 50%;
  background: var(--uno);
  margin: 0 0 20px 0;
  position: relative;
}

.plus-entrada {
  position: absolute;
  z-index: 1;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: all linear 0.3s;
}

.entrada figure:hover .plus-entrada {
  top: 50%;
  left: 50%;
  opacity: 1;
}

.entrada h5 {
  text-decoration: none;
  color: white;
}

/*Toggles*/

#toggle {
  display: none;
}

#toggle2 {
  display: none;
}

#toggle3 {
  display: none;
}

#toggle4 {
  display: none;
}

#toggle5 {
  display: none;
}

#toggle6 {
  display: none;
}

#compost {
  position: relative;
  background-color: #fffdf7;
  width: 100vw;
  height: 1200px;
  color: #000000;
  clip-path: polygon(0 0, 0 80%, 50% 90%, 100% 80%, 100% 0, 50% 7%);
  text-align: center;
  display: flex;
  flex-flow: column;
  justify-content: center;
  margin-top: 0;
}

#compost video {
  width: 720px;
  height: auto;
  position: relative;
  left: 22.5%;
  margin: 2px 0 20px;
}

#compost p {
  width: 900px;
  font-size: 17px;
  margin: 30px auto;
  text-align: center;
}

#img1 {
  width: 200px;
  margin: 0 0 20px 0;
  position: relative;
  left: 42.5%;
  margin: 0 0 20px 0;
}

#vermi {
  position: relative;
  background-color: #fffdf7;
  width: 100vw;
  height: 1200px;
  color: #000000;
  clip-path: polygon(0 0, 0 80%, 50% 90%, 100% 80%, 100% 0, 50% 7%);
  text-align: center;
  display: flex;
  flex-flow: column;
  justify-content: center;
  margin-top: 0;
}

#vermi video {
  width: 720px;
  height: auto;
  position: relative;
  left: 22.5%;
  margin: 2px 0 20px;
}

#vermi p {
  width: 900px;
  font-size: 17px;
  margin: 30px auto;
  text-align: center;
}

#img2 {
  width: 200px;
  margin: 0 0 20px 0;
  position: relative;
  left: 42.5%;
  margin: 0 0 20px 0;
}

#bokashi {
  position: relative;
  background-color: #fffdf7;
  width: 100vw;
  height: 1200px;
  color: #000000;
  clip-path: polygon(0 0, 0 80%, 50% 90%, 100% 80%, 100% 0, 50% 7%);
  text-align: center;
  display: flex;
  flex-flow: column;
  justify-content: center;
  margin-top: 0;
}

#bokashi video {
  width: 720px;
  height: auto;
  position: relative;
  left: 22.5%;
  margin: 2px 0 20px;
}

#bokashi p {
  width: 900px;
  font-size: 17px;
  margin: 30px auto;
  text-align: center;
}

#img3 {
  width: 200px;
  margin: 0 0 20px 0;
  position: relative;
  left: 42.5%;
  margin: 0 0 20px 0;
}

#SSD {
  position: relative;
  background-color: #fffdf7;
  width: 100vw;
  height: 1200px;
  color: #000000;
  clip-path: polygon(0 0, 0 80%, 50% 90%, 100% 80%, 100% 0, 50% 7%);
  text-align: center;
  display: flex;
  flex-flow: column;
  justify-content: center;
  margin-top: 0;
}

#SSD video {
  width: 720px;
  height: auto;
  position: relative;
  left: 22.5%;
  margin: 2px 0 20px;
}

#SSD p {
  width: 900px;
  font-size: 17px;
  margin: 30px auto;
  text-align: center;
}

#img4 {
  width: 200px;
  margin: 0 0 20px 0;
  position: relative;
  left: 42.5%;
  margin: 0 0 20px 0;
}

#radiador {
  position: relative;
  background-color: #fffdf7;
  width: 100vw;
  height: 1200px;
  color: #000000;
  clip-path: polygon(0 0, 0 80%, 50% 90%, 100% 80%, 100% 0, 50% 7%);
  text-align: center;
  display: flex;
  flex-flow: column;
  justify-content: center;
  margin-top: 0;
}

#radiador video {
  width: 720px;
  height: auto;
  position: relative;
  left: 22.5%;
  margin: 2px 0 20px;
}

#radiador p {
  width: 900px;
  font-size: 17px;
  margin: 30px auto;
  text-align: center;
}

#img5 {
  width: 200px;
  margin: 0 0 20px 0;
  position: relative;
  left: 42.5%;
  margin: 0 0 20px 0;
}

#bluray {
  position: relative;
  background-color: #fffdf7;
  width: 100vw;
  height: 1200px;
  color: #000000;
  clip-path: polygon(0 0, 0 80%, 50% 90%, 100% 80%, 100% 0, 50% 7%);
  text-align: center;
  display: flex;
  flex-flow: column;
  justify-content: center;
  margin-top: 0;
}

#bluray video {
  width: 720px;
  height: auto;
  position: relative;
  left: 22.5%;
  margin: 2px 0 20px;
}

#bluray p {
  width: 900px;
  font-size: 17px;
  margin: 30px auto;
  text-align: center;
}

#img6 {
  width: 200px;
  margin: 0 0 20px 0;
  position: relative;
  left: 42.5%;
  margin: 0 0 20px 0;
}

/* 1 - TEXTOS */
p {
  font-weight: 400;
  font-size: 2em;
}

h1 {
  font-weight: 400;
  font-size: 3.4em;
}

h2 {
  font-weight: 500;
  font-size: 3em;
}

h3 {
  font-weight: 500;
  font-size: 2.6em;
}

h4 {
  font-weight: 500;
  font-size: 2.2em;
}

h5 {
  font-weight: 500;
  font-size: 1.8em;
}

h6 {
  font-weight: 500;
  font-size: 1.4em;
}

.boton {
  display: inline-block;
  padding: 8px 14px;
  text-decoration: none;
  border: 1px solid white;
  border-radius: 2px;
  margin: 10px auto;
  color: white;
}

.boton:hover {
  background: #0000cd;
  border: 1px solid #0000cd;
  transition: all linear 0.2s;
}

Step 9: Package.json

{
  "name": "ps5-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.html",
  "scripts": {
    "start": "parcel index.html --open",
    "build": "parcel build index.html"
  },
  "dependencies": {
    "bootstrap": "4.5.3"
  },
  "devDependencies": {
    "@babel/core": "7.2.0",
    "parcel-bundler": "^1.6.1"
  },
  "keywords": []
}

Step 10: