First Version

src/data/Biograph.json

@@ -0,0 +1,23 @@
+[
+    {
+        "id": 1,
+        "title": "Roberto Clemente",
+        "content": "Pelotero, Filántropo Fue un afamado pelotero puertorriqueño que formó parte de las Grandes Ligas de Estados Unidos...",
+        "tags": "Deportista, Puertorriqueño",
+        "photo": "require('../assets/RobertoClemente.jpg')"
+    },
+    {
+        "id": 2,
+        "title": "Marian Villaronga Toro",
+        "content": "Durante su incumbencia como secretario de Instrucción Pública se fundó la Editorial del Departamento, el servicio público de radio....",
+        "tags": "Educador, Funcionario público, Puertorriqueño",
+        "photo": "require('../assets/MarianoVillaronga.jpg')"
+    },
+    {
+        "id": 3,
+        "title": "German Rieckhoff Sampoyo",
+        "content": "Germán Rieckehoff Sampayo fue un pilar del olimpismo y defensor de la soberanía deportiva puertorriqueña. Fue presidente del Comité Olímpico de Puerto Rico (COPUR)....",
+        "tags": "Líder deportivo, Abogado, Puertorriqueño",
+        "photo": "require('../assets/DonGermán.jpg')"
+    }
+]

src/pages/AboutUs.css

@@ -0,0 +1,14 @@
+ion-grid {
+    --ion-grid-width: 50%;
+
+    --ion-grid-width-xs: 50%;
+    --ion-grid-width-sm: 288px;
+    --ion-grid-width-md: 384px;
+    --ion-grid-width-lg: 480px;
+    --ion-grid-width-xl: 570px;
+}
+
+ion-col {
+    text-align: center;
+    align-items: center;
+}

src/pages/AboutUs.tsx

@@ -8,7 +8,10 @@ import {
   IonFooter,
   IonNavLink,
   IonTabButton,
-  IonIcon
+  IonIcon,
+  IonGrid,
+  IonRow,
+  IonCol
 } from '@ionic/react';
 import { arrowBack } from 'ionicons/icons';
 import React from 'react';
@@ -21,8 +24,16 @@ const AboutUs: React.FC = () => {
     <IonPage>
       <IonHeader>
         <IonToolbar>
-          <IonTitle>Más sobre nosotros</IonTitle>
-          <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
+          <IonGrid fixed={true}>
+            <IonRow>
+              <IonCol></IonCol>
+              <IonCol>
+                <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
+                <IonTitle>Más sobre nosotros</IonTitle>
+              </IonCol>
+              <IonCol></IonCol>
+            </IonRow>
+          </IonGrid>
         </IonToolbar>
       </IonHeader>
       <IonContent fullscreen className="ion-padding">

src/pages/Biography.css

@@ -0,0 +1,14 @@
+ion-grid {
+    --ion-grid-width: 50%;
+
+    --ion-grid-width-xs: 50%;
+    --ion-grid-width-sm: 288px;
+    --ion-grid-width-md: 384px;
+    --ion-grid-width-lg: 480px;
+    --ion-grid-width-xl: 570px;
+}
+
+ion-col {
+    text-align: center;
+    align-items: center;
+}

src/pages/Biography.tsx

@@ -9,7 +9,10 @@ import {
     IonButton,
     IonTabButton,
     IonIcon,
-    IonImg
+    IonImg,
+    IonGrid,
+    IonRow,
+    IonCol
 } from '@ionic/react';
 import { arrowBack } from 'ionicons/icons';
 import React from 'react';
@@ -24,8 +27,16 @@ const Biography: React.FC = () => {
         <IonPage>
             <IonHeader>
                 <IonToolbar>
-                    <IonTitle>Biografía</IonTitle>
-                    <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
+                    <IonGrid fixed={true}>
+                        <IonRow>
+                            <IonCol></IonCol>
+                            <IonCol>
+                                <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
+                                <IonTitle>Biografía</IonTitle>
+                            </IonCol>
+                            <IonCol></IonCol>
+                        </IonRow>
+                    </IonGrid>
                 </IonToolbar>
             </IonHeader>
             <IonContent fullscreen className="ion-padding">
@@ -35,12 +46,12 @@ const Biography: React.FC = () => {
                 <p>Pelotero, Filántropo</p>
                 <p>Fue un afamado pelotero puertorriqueño que formó parte de las Grandes Ligas de Estados Unidos. El notable jardinero derecho y bateador fue el primer latinoamericano en formar parte del Salón de la Fama del Béisbol de Estados Unidos. También fue conocido por su labor filantrópica.</p>
                 <p>Nació el 18 de agosto de 1934 en San Antón, Carolina. Sus padres fueron Melchor Clemente y Luisa Walker. Desde los ocho años mostró habilidades deportivas con su participación en programas de pequeñas ligas y atletismo infantil. Se destacó en pista y campo, deporte en el que ganó varias medallas, específicamente en tiro de jabalina y distancias cortas. Con apenas 14 años, ya formaba parte del equipo de softball de Sello Rojo, compañía procesadora de arroz. Más adelante, formó parte del equipo de pelota aficionado de Juncos. En 1952, con 18 años de edad, ingresó a la liga de beisbol profesional de Puerto Rico, cuando fue contratado por los Cangrejeros de Santurce. El tiempo que formó parte de este equipo fue crucial para su carrera, ya que pudo pulir sus destrezas deportivas.</p>
-            
+
                 <IonNavLink routerDirection="forward" component={() => <Questions />}>
-                <IonButton>Tomar quiz</IonButton>
+                    <IonButton>Tomar quiz</IonButton>
                 </IonNavLink>
             </IonContent>
-            
+
             <IonFooter>
                 <IonToolbar>
                     <IonNavLink routerDirection="forward" component={() => <ListBiographies />}>

src/pages/Capsule.css

@@ -0,0 +1,14 @@
+ion-grid {
+    --ion-grid-width: 50%;
+
+    --ion-grid-width-xs: 50%;
+    --ion-grid-width-sm: 288px;
+    --ion-grid-width-md: 384px;
+    --ion-grid-width-lg: 480px;
+    --ion-grid-width-xl: 570px;
+}
+
+ion-col {
+    text-align: center;
+    align-items: center;
+}

src/pages/Capsule.tsx

@@ -8,7 +8,10 @@ import {
     IonNavLink,
     IonTabButton,
     IonIcon,
-    IonImg
+    IonImg,
+    IonGrid,
+    IonRow,
+    IonCol
 } from '@ionic/react';
 import { arrowBack } from 'ionicons/icons';
 import React from 'react';
@@ -22,8 +25,16 @@ const Capsule: React.FC = () => {
         <IonPage>
             <IonHeader>
                 <IonToolbar>
-                    <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
-                    <IonTitle>Cápsula</IonTitle>
+                    <IonGrid fixed={true}>
+                        <IonRow>
+                            <IonCol></IonCol>
+                            <IonCol>
+                                <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
+                                <IonTitle>Cápsula</IonTitle>
+                            </IonCol>
+                            <IonCol></IonCol>
+                        </IonRow>
+                    </IonGrid>
                 </IonToolbar>
             </IonHeader>
             <IonContent fullscreen className="ion-padding">

src/pages/HomePage.css

@@ -1,4 +1,19 @@
 ion-card-header.ios {
     display: flex;
     flex-flow: column-reverse;
+}
+
+ion-grid {
+    --ion-grid-width: 50%;
+
+    --ion-grid-width-xs: 50%;
+    --ion-grid-width-sm: 288px;
+    --ion-grid-width-md: 384px;
+    --ion-grid-width-lg: 480px;
+    --ion-grid-width-xl: 570px;
+}
+
+ion-col {
+    text-align: center;
+    align-items: center;
 }

src/pages/HomePage.tsx

@@ -14,7 +14,10 @@ import {
   IonTabButton,
   IonIcon,
   IonLabel,
-  IonImg
+  IonImg,
+  IonCol,
+  IonGrid,
+  IonRow
 } from '@ionic/react';
 import { square } from 'ionicons/icons';
 import './HomePage.css';
@@ -28,8 +31,16 @@ const HomePage: React.FC = () => {
     <IonPage>
       <IonHeader>
         <IonToolbar>
-          <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
-          <IonTitle>Hogar</IonTitle>
+          <IonGrid fixed={true}>
+            <IonRow>
+              <IonCol></IonCol>
+              <IonCol>
+                <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
+                <IonTitle>Hogar</IonTitle>
+              </IonCol>
+              <IonCol></IonCol>
+            </IonRow>
+          </IonGrid>
         </IonToolbar>
       </IonHeader>
       <IonContent fullscreen>

src/pages/ListBiographies.css

@@ -0,0 +1,14 @@
+ion-grid {
+    --ion-grid-width: 50%;
+
+    --ion-grid-width-xs: 50%;
+    --ion-grid-width-sm: 288px;
+    --ion-grid-width-md: 384px;
+    --ion-grid-width-lg: 480px;
+    --ion-grid-width-xl: 570px;
+}
+
+ion-col {
+    text-align: center;
+    align-items: center;
+}

src/pages/ListBiographies.tsx

@@ -15,7 +15,10 @@ import {
   IonNavLink,
   IonFooter,
   IonTabButton,
-  IonIcon
+  IonIcon,
+  IonGrid,
+  IonRow,
+  IonCol
 } from '@ionic/react';
 import { arrowBack } from 'ionicons/icons';
 import './ListBiographies.css';
@@ -24,38 +27,55 @@ import Questions from './Questions';
 import HomePage from './HomePage';
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
 import RobertoClemente from '../assets/RobertoClemente.jpg';
+import ListBio from '../data/Biograph.json';
 
 const ListBiographies: React.FC = () => {
   return (
     <IonPage>
       <IonHeader>
         <IonToolbar>
-          <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
-          <IonTitle>Lista de Biografías</IonTitle>
+          <IonGrid fixed={true}>
+            <IonRow>
+              <IonCol></IonCol>
+              <IonCol>
+                <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
+                <IonTitle>Lista de Biografías</IonTitle>
+              </IonCol>
+              <IonCol></IonCol>
+            </IonRow>
+          </IonGrid>
         </IonToolbar>
       </IonHeader>
       <IonContent fullscreen>
         <IonSearchbar></IonSearchbar>
-        <IonCard>
-          <IonImg style={{ height: 300, width: 600 }} src={RobertoClemente} alt='Logo'></IonImg>
-          <IonCardHeader>
-            <IonCardTitle>Roberto Clemente</IonCardTitle>
-            <IonCardSubtitle>Tabs: Deportista</IonCardSubtitle>
-          </IonCardHeader>
 
-          <IonCardContent>
-            Fue un afamado pelotero puertorriqueño que formó parte de las Grandes Ligas de Estados Unidos. El notable jardinero derecho y bateador fue el primer latinoamericano en formar parte del Salón de la Fama del Béisbol de Estados Unidos. También fue conocido por su labor filantrópica.
-          </IonCardContent>
+        {
+          ListBio && ListBio.map(listbio => {
+            return (
+              <>
+                <IonCard>
+                  <IonImg style={{ height: 300, width: 600 }} src={RobertoClemente} alt='Logo'></IonImg>
+                  <IonCardHeader>
+                    <IonCardTitle>{listbio.title}</IonCardTitle>
+                    <IonCardSubtitle>{listbio.tags}</IonCardSubtitle>
+                  </IonCardHeader><IonCardContent>
+                    {listbio.content}
+                  </IonCardContent>
+                  <IonNavLink routerDirection="forward" component={() => <Biography />}>
+                    <IonButton>Go to</IonButton>
+                  </IonNavLink>
 
-          <IonNavLink routerDirection="forward" component={() => <Biography />}>
-            <IonButton>Go to</IonButton>
-          </IonNavLink>
+                  <IonNavLink routerDirection="forward" component={() => <Questions />}>
+                    <IonButton>Tomar quiz</IonButton>
+                  </IonNavLink>
+
+                </IonCard>
+              </>
+            )
+          })
+        }
 
-          <IonNavLink routerDirection="forward" component={() => <Questions />}>
-            <IonButton>Tomar quiz</IonButton>
-          </IonNavLink>
 
-        </IonCard>
       </IonContent>
       <IonFooter>
         <IonToolbar>

src/pages/ListCapsules.css

@@ -0,0 +1,14 @@
+ion-grid {
+    --ion-grid-width: 50%;
+
+    --ion-grid-width-xs: 50%;
+    --ion-grid-width-sm: 288px;
+    --ion-grid-width-md: 384px;
+    --ion-grid-width-lg: 480px;
+    --ion-grid-width-xl: 570px;
+}
+
+ion-col {
+    text-align: center;
+    align-items: center;
+}

src/pages/ListCapsules.tsx

@@ -1,64 +1,74 @@
 import {
-    IonList,
-    IonItem,
-    IonLabel,
-    IonImg,
-    IonSearchbar,
-    IonContent,
-    IonHeader,
-    IonPage,
-    IonTitle,
-    IonToolbar,
-    IonButton,
-    IonNavLink,
-    IonFooter,
-    IonTabButton,
-    IonIcon
-  } from '@ionic/react';
-  import { arrowBack } from 'ionicons/icons';
-  import './ListCapsules.css';
-  import HomePage from './HomePage';
-  import Capsule from './Capsule'
-  import EnciclopediaPR from '../assets/EnciclopediaPR.png';
+  IonList,
+  IonItem,
+  IonLabel,
+  IonImg,
+  IonSearchbar,
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+  IonButton,
+  IonNavLink,
+  IonFooter,
+  IonTabButton,
+  IonIcon,
+  IonGrid,
+  IonRow,
+  IonCol
+} from '@ionic/react';
+import { arrowBack } from 'ionicons/icons';
+import './ListCapsules.css';
+import HomePage from './HomePage';
+import Capsule from './Capsule'
+import EnciclopediaPR from '../assets/EnciclopediaPR.png';
 
-  const ListCapsules: React.FC = () => {
-    return (
-      <IonPage>
-        <IonHeader>
-          <IonToolbar>
-            <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
-            <IonTitle>Lista de Cápsulas de Contenido</IonTitle>
-          </IonToolbar>
-        </IonHeader>
-        <IonContent fullscreen>
-            <IonSearchbar></IonSearchbar>
-            <IonList inset={true}>
-                <IonItem>
-                    <IonLabel>Breve Historia del baile en Puerto Rico</IonLabel>
-                    <IonNavLink routerDirection="forward" component={() => <Capsule />}>
-                    <IonButton>Visitar</IonButton>
-          </IonNavLink>
-                </IonItem>
-                <IonItem>
-                    <IonLabel>Cápsula#2</IonLabel>
-                </IonItem>
-                <IonItem>
-                    <IonLabel>Cápsula#3</IonLabel>
-                </IonItem>
-            </IonList>
-        </IonContent>
-        <IonFooter>
-          <IonToolbar>
-            <IonNavLink routerDirection="forward" component={() => <HomePage />}>
-                <IonTabButton tab="HomePage" href="/HomePage">
-                <IonIcon icon={arrowBack} />
-              </IonTabButton>
+const ListCapsules: React.FC = () => {
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonGrid fixed={true}>
+            <IonRow>
+              <IonCol></IonCol>
+              <IonCol>
+                <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
+                <IonTitle>Lista de Cápsulas de Contenido</IonTitle>
+              </IonCol>
+              <IonCol></IonCol>
+            </IonRow>
+          </IonGrid>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonSearchbar></IonSearchbar>
+        <IonList inset={true}>
+          <IonItem>
+            <IonLabel>Breve Historia del baile en Puerto Rico</IonLabel>
+            <IonNavLink routerDirection="forward" component={() => <Capsule />}>
+              <IonButton>Visitar</IonButton>
             </IonNavLink>
-          </IonToolbar>
-        </IonFooter>
-      </IonPage>
-    );
-  };
-  
-  export default ListCapsules;
-  
+          </IonItem>
+          <IonItem>
+            <IonLabel>Cápsula#2</IonLabel>
+          </IonItem>
+          <IonItem>
+            <IonLabel>Cápsula#3</IonLabel>
+          </IonItem>
+        </IonList>
+      </IonContent>
+      <IonFooter>
+        <IonToolbar>
+          <IonNavLink routerDirection="forward" component={() => <HomePage />}>
+            <IonTabButton tab="HomePage" href="/HomePage">
+              <IonIcon icon={arrowBack} />
+            </IonTabButton>
+          </IonNavLink>
+        </IonToolbar>
+      </IonFooter>
+    </IonPage>
+  );
+};
+
+export default ListCapsules;

src/pages/Questions.css

@@ -0,0 +1,14 @@
+ion-grid {
+    --ion-grid-width: 50%;
+
+    --ion-grid-width-xs: 50%;
+    --ion-grid-width-sm: 288px;
+    --ion-grid-width-md: 384px;
+    --ion-grid-width-lg: 480px;
+    --ion-grid-width-xl: 570px;
+}
+
+ion-col {
+    text-align: center;
+    align-items: center;
+}

src/pages/Questions.tsx

@@ -18,7 +18,10 @@ import {
     IonCardHeader,
     IonCardSubtitle,
     IonCardTitle,
-    IonButton
+    IonButton,
+    IonGrid,
+    IonRow,
+    IonCol
 } from '@ionic/react';
 import { arrowBack } from 'ionicons/icons';
 import React from 'react';
@@ -32,8 +35,16 @@ const Questions: React.FC = () => {
         <IonPage>
             <IonHeader>
                 <IonToolbar>
-                    <IonTitle>Quiz</IonTitle>
-                    <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
+                    <IonGrid fixed={true}>
+                        <IonRow>
+                            <IonCol></IonCol>
+                            <IonCol>
+                                <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
+                                <IonTitle>Quiz</IonTitle>
+                            </IonCol>
+                            <IonCol></IonCol>
+                        </IonRow>
+                    </IonGrid>
                 </IonToolbar>
             </IonHeader>
 
@@ -50,25 +61,25 @@ const Questions: React.FC = () => {
                     </IonCardHeader>
                     <IonCardContent>
                         <IonList>
-                        <IonItem>
-                            <IonCheckbox slot="start"></IonCheckbox>
-                            <IonLabel>1934</IonLabel>
-                        </IonItem>
-
-                        <IonItem>
-                            <IonCheckbox slot="start"></IonCheckbox>
-                            <IonLabel>1950</IonLabel>
-                        </IonItem>
-
-                        <IonItem>
-                            <IonCheckbox slot="start"></IonCheckbox>
-                            <IonLabel>1943</IonLabel>
-                        </IonItem>
-
-                        <IonItem>
-                            <IonCheckbox slot="start"></IonCheckbox>
-                            <IonLabel>2022</IonLabel>
-                        </IonItem>
+                            <IonItem>
+                                <IonCheckbox slot="start"></IonCheckbox>
+                                <IonLabel>1934</IonLabel>
+                            </IonItem>
+
+                            <IonItem>
+                                <IonCheckbox slot="start"></IonCheckbox>
+                                <IonLabel>1950</IonLabel>
+                            </IonItem>
+
+                            <IonItem>
+                                <IonCheckbox slot="start"></IonCheckbox>
+                                <IonLabel>1943</IonLabel>
+                            </IonItem>
+
+                            <IonItem>
+                                <IonCheckbox slot="start"></IonCheckbox>
+                                <IonLabel>2022</IonLabel>
+                            </IonItem>
                         </IonList>
                     </IonCardContent>
                 </IonCard>
@@ -76,29 +87,29 @@ const Questions: React.FC = () => {
                 <IonCard>
                     <IonCardHeader>
                         <IonCardTitle>¿En que pueblo se crió?</IonCardTitle>
-                        
+
                     </IonCardHeader>
                     <IonCardContent>
                         <IonList>
-                        <IonItem>
-                            <IonCheckbox slot="start"></IonCheckbox>
-                            <IonLabel>Caguas</IonLabel>
-                        </IonItem>
-
-                        <IonItem>
-                            <IonCheckbox slot="start"></IonCheckbox>
-                            <IonLabel>Cabo Rojo</IonLabel>
-                        </IonItem>
-
-                        <IonItem>
-                            <IonCheckbox slot="start"></IonCheckbox>
-                            <IonLabel>Luquillo</IonLabel>
-                        </IonItem>
-
-                        <IonItem>
-                            <IonCheckbox slot="start"></IonCheckbox>
-                            <IonLabel>Carolina</IonLabel>
-                        </IonItem>
+                            <IonItem>
+                                <IonCheckbox slot="start"></IonCheckbox>
+                                <IonLabel>Caguas</IonLabel>
+                            </IonItem>
+
+                            <IonItem>
+                                <IonCheckbox slot="start"></IonCheckbox>
+                                <IonLabel>Cabo Rojo</IonLabel>
+                            </IonItem>
+
+                            <IonItem>
+                                <IonCheckbox slot="start"></IonCheckbox>
+                                <IonLabel>Luquillo</IonLabel>
+                            </IonItem>
+
+                            <IonItem>
+                                <IonCheckbox slot="start"></IonCheckbox>
+                                <IonLabel>Carolina</IonLabel>
+                            </IonItem>
                         </IonList>
                     </IonCardContent>
                 </IonCard>
@@ -106,29 +117,29 @@ const Questions: React.FC = () => {
                 <IonCard>
                     <IonCardHeader>
                         <IonCardTitle>¿Para qué equipo de la liga de beisbol profesional de Puerto Rico jugó?</IonCardTitle>
-                        
+
                     </IonCardHeader>
                     <IonCardContent>
                         <IonList>
-                        <IonItem>
-                            <IonCheckbox slot="start"></IonCheckbox>
-                            <IonLabel>Bacalaos de Fajardo</IonLabel>
-                        </IonItem>
-
-                        <IonItem>
-                            <IonCheckbox slot="start"></IonCheckbox>
-                            <IonLabel>Alcapurrias de Loiza</IonLabel>
-                        </IonItem>
-
-                        <IonItem>
-                            <IonCheckbox slot="start"></IonCheckbox>
-                            <IonLabel>Cangrejeros de Santurce</IonLabel>
-                        </IonItem>
-
-                        <IonItem>
-                            <IonCheckbox slot="start"></IonCheckbox>
-                            <IonLabel>Brujos de Guayama</IonLabel>
-                        </IonItem>
+                            <IonItem>
+                                <IonCheckbox slot="start"></IonCheckbox>
+                                <IonLabel>Bacalaos de Fajardo</IonLabel>
+                            </IonItem>
+
+                            <IonItem>
+                                <IonCheckbox slot="start"></IonCheckbox>
+                                <IonLabel>Alcapurrias de Loiza</IonLabel>
+                            </IonItem>
+
+                            <IonItem>
+                                <IonCheckbox slot="start"></IonCheckbox>
+                                <IonLabel>Cangrejeros de Santurce</IonLabel>
+                            </IonItem>
+
+                            <IonItem>
+                                <IonCheckbox slot="start"></IonCheckbox>
+                                <IonLabel>Brujos de Guayama</IonLabel>
+                            </IonItem>
                         </IonList>
                     </IonCardContent>
                 </IonCard>
@@ -136,29 +147,29 @@ const Questions: React.FC = () => {
                 <IonCard>
                     <IonCardHeader>
                         <IonCardTitle>¿Para que equipo de la MLB jugó?</IonCardTitle>
-                        
+
                     </IonCardHeader>
                     <IonCardContent>
                         <IonList>
-                        <IonItem>
-                            <IonCheckbox slot="start"></IonCheckbox>
-                            <IonLabel>New York Yankees</IonLabel>
-                        </IonItem>
-
-                        <IonItem>
-                            <IonCheckbox slot="start"></IonCheckbox>
-                            <IonLabel>Houston Astros</IonLabel>
-                        </IonItem>
-
-                        <IonItem>
-                            <IonCheckbox slot="start"></IonCheckbox>
-                            <IonLabel>Chicago Cubs</IonLabel>
-                        </IonItem>
-
-                        <IonItem>
-                            <IonCheckbox slot="start"></IonCheckbox>
-                            <IonLabel>Pittsburgh Pirates</IonLabel>
-                        </IonItem>
+                            <IonItem>
+                                <IonCheckbox slot="start"></IonCheckbox>
+                                <IonLabel>New York Yankees</IonLabel>
+                            </IonItem>
+
+                            <IonItem>
+                                <IonCheckbox slot="start"></IonCheckbox>
+                                <IonLabel>Houston Astros</IonLabel>
+                            </IonItem>
+
+                            <IonItem>
+                                <IonCheckbox slot="start"></IonCheckbox>
+                                <IonLabel>Chicago Cubs</IonLabel>
+                            </IonItem>
+
+                            <IonItem>
+                                <IonCheckbox slot="start"></IonCheckbox>
+                                <IonLabel>Pittsburgh Pirates</IonLabel>
+                            </IonItem>
                         </IonList>
                     </IonCardContent>
                 </IonCard>