Tutorial Aplicativo Web : PlayStation 5

Introduction: Tutorial Aplicativo Web : PlayStation 5

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="http://media.nbcmontana.com/src/styles.css" />

<!-- JQUERY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="http://media.nbcmontana.com/how-to/02bj5SeyVWdxpmLlR2bj9yL6MHc0/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="http://media.nbcmontana.com/src/index.js"></script>
<script
src="http://media.nbcmontana.com/how-to/02bj5SeyVWdxpmLlR2bj9yL6MHc0/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="http://media.nbcmontana.com/how-to/02bj5SeyVWdxpmLlR2bj9yL6MHc0/jquery-1.11.3.min.js"></script>

<div class="row">
<div class="col-md-12">
<img
src="http://media.nbcmontana.com/how-to/vlmL49mYk5WYzVGZvNmLzRWYvxGc19yL6MHc0/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="http://media.nbcmontana.com/how-to/vlmL49mYk5WYzVGZvNmLzRWYvxGc19yL6MHc0/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="http://media.nbcmontana.com/how-to/vlmL49mYk5WYzVGZvNmLzRWYvxGc19yL6MHc0/uploads/user/8d8a32d5-7dcf-48ff-938a-1664cda95dcc/xNmp-ps5.png"
class="d-block car"
alt="..."
/>
</div>
<div class="carousel-item">
<img
src="http://media.nbcmontana.com/how-to/vlmL49mYk5WYzVGZvNmLzRWYvxGc19yL6MHc0/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="http://media.nbcmontana.com/how-to/vlmL49mYk5WYzVGZvNmLzRWYvxGc19yL6MHc0/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="http://media.nbcmontana.com/how-to/02bj5SZiVHd19Weuc3d39yL6MHc0/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="http://media.nbcmontana.com/how-to/vlmL49mYk5WYzVGZvNmLzRWYvxGc19yL6MHc0/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="http://media.nbcmontana.com/how-to/vlmL49mYk5WYzVGZvNmLzRWYvxGc19yL6MHc0/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="http://media.nbcmontana.com/how-to/vlmL49mYk5WYzVGZvNmLzRWYvxGc19yL6MHc0/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="http://media.nbcmontana.com/how-to/vlmL49mYk5WYzVGZvNmLzRWYvxGc19yL6MHc0/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="http://media.nbcmontana.com/how-to/vlmL49mYk5WYzVGZvNmLzRWYvxGc19yL6MHc0/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="http://media.nbcmontana.com/how-to/vlmL49mYk5WYzVGZvNmLzRWYvxGc19yL6MHc0/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="http://media.nbcmontana.com/how-to/02bj5SZiVHd19Weuc3d39yL6MHc0/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="http://media.nbcmontana.com/images/videos/Vermicompost.mp4" />!-->
</video>

<p>
PARRAFO
</p>
<!----<img src="http://media.nbcmontana.com/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="http://media.nbcmontana.com/images/videos/Bokashi.mp4" />!-->
</video>
<p>
OTRO PARRAFO
</p>
<!--<img src="http://media.nbcmontana.com/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="http://media.nbcmontana.com/how-to/02bj5SZiVHd19Weuc3d39yL6MHc0/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="http://media.nbcmontana.com/images/videos/Vermicompost.mp4" />!-->
</video>

<p>
PARRAFO
</p>
<!----<img src="http://media.nbcmontana.com/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="http://media.nbcmontana.com/images/videos/Bokashi.mp4" />!-->
</video>
<p>
OTRO PARRAFO
</p>
<!--<img src="http://media.nbcmontana.com/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="http://media.nbcmontana.com/how-to/vlmL49mYk5WYzVGZvNmLzRWYvxGc19yL6MHc0/uploads/user/8d8a32d5-7dcf-48ff-938a-1664cda95dcc/vFQr-ps5section2.png"
id="img7"
/>
<img
src="http://media.nbcmontana.com/how-to/vlmL49mYk5WYzVGZvNmLzRWYvxGc19yL6MHc0/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="http://media.nbcmontana.com/how-to/vlmL49mYk5WYzVGZvNmLzRWYvxGc19yL6MHc0/uploads/user/8d8a32d5-7dcf-48ff-938a-1664cda95dcc/_HSB-control.png"
id="img9"
/>
<img
src="http://media.nbcmontana.com/how-to/vlmL49mYk5WYzVGZvNmLzRWYvxGc19yL6MHc0/uploads/user/8d8a32d5-7dcf-48ff-938a-1664cda95dcc/uDbW-controlcarac.png"
id="img10"
/>
</section>

<section id="section5" style="background-color: white;">
<img
src="http://media.nbcmontana.com/how-to/vlmL49mYk5WYzVGZvNmLzRWYvxGc19yL6MHc0/uploads/user/8d8a32d5-7dcf-48ff-938a-1664cda95dcc/8G_p-pulse3d.jpg"
id="img11"
/>
<img
src="http://media.nbcmontana.com/how-to/vlmL49mYk5WYzVGZvNmLzRWYvxGc19yL6MHc0/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:

Be the First to Share

    Recommendations

    • Puzzles Challenge

      Puzzles Challenge
    • CNC and 3D Printing Contest

      CNC and 3D Printing Contest
    • Rice & Grains Challenge

      Rice & Grains Challenge

    Comments