From 54c73d3aecd4dd532cd98e2f2dcbb97022001214 Mon Sep 17 00:00:00 2001
From: Vero <veronicacamarzana@hotmail.com>
Date: Wed, 20 Mar 2024 12:50:38 +0100
Subject: [PATCH 1/3] Youtube video has been embedded in landing page

---
 index.html | 35 +++++++++++++++++++----------------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/index.html b/index.html
index a8d5760b..fa46ec91 100644
--- a/index.html
+++ b/index.html
@@ -120,13 +120,13 @@
       .info__detail {
         display: flex;
         justify-content: space-between;
-        padding: 4.5rem 3px 0 3px;
+        padding-top: 4.5rem;
+        gap: 2rem;
       }
       .info__text {
         padding-top: 0.9rem;
         width: 50%;
       }
-
       .info__text h3 {
         font-weight: 400;
         font-size: 30px;
@@ -138,7 +138,6 @@
         font-weight: 700;
         letter-spacing: 1px;
       }
-
       .info__link {
         display: block;
         padding: 0.6em 1.1em;
@@ -152,14 +151,16 @@
         font-size: 20px;
         margin-top: 3.5rem;
       }
-      .info__image {
-        width: 45%;
+      .info__iframe {
+        width: 560px;
+        height: 315px;
         border-radius: 10px;
         box-shadow:
           -14px 14px 28px #0f1924,
           14px -14px 28px #192b3e;
       }
-      img {
+      img,
+      iframe {
         width: 100%;
         height: 100%;
         object-fit: cover;
@@ -169,7 +170,6 @@
         background-color: var(--accent);
         color: var(--background-300);
       }
-
       .github p {
         padding: 1.5rem 0;
       }
@@ -204,7 +204,7 @@
           padding-top: 0;
           width: 100%;
         }
-        .info__image {
+        .info__iframe {
           width: 100%;
         }
         .info__link {
@@ -253,7 +253,7 @@
           padding-top: 0;
           width: 100%;
         }
-        .info__image {
+        .info__iframe {
           width: 100%;
         }
         .info__link {
@@ -294,8 +294,9 @@
           <path
             fill="currentColor"
             d="M8 .198a8 8 0 0 0-2.529 15.591c.4.074.547-.174.547-.385c0-.191-.008-.821-.011-1.489c-2.226.484-2.695-.944-2.695-.944c-.364-.925-.888-1.171-.888-1.171c-.726-.497.055-.486.055-.486c.803.056 1.226.824 1.226.824c.714 1.223 1.872.869 2.328.665c.072-.517.279-.87.508-1.07c-1.777-.202-3.645-.888-3.645-3.954c0-.873.313-1.587.824-2.147c-.083-.202-.357-1.015.077-2.117c0 0 .672-.215 2.201.82A7.672 7.672 0 0 1 8 4.066c.68.003 1.365.092 2.004.269c1.527-1.035 2.198-.82 2.198-.82c.435 1.102.162 1.916.079 2.117c.513.56.823 1.274.823 2.147c0 3.073-1.872 3.749-3.653 3.947c.287.248.543.735.543 1.481c0 1.07-.009 1.932-.009 2.195c0 .213.144.462.55.384A8 8 0 0 0 8.001.196z"
-          /></svg
-      ></a>
+          />
+        </svg>
+      </a>
     </header>
     <main class="main">
       <div class="info container">
@@ -323,11 +324,13 @@ <h3>
               >Launch MongoDB Designer</a
             >
           </div>
-          <div class="info__image">
-            <img
-              src="/mongo-modeler-app.jpg"
-              alt="Screenshot of the application displaying the navigation bar and organized collections with their relationships"
-            />
+          <div class="info__iframe">
+            <iframe
+              src="https://www.youtube.com/embed/87ZZbDZLido"
+              frameborder="0"
+              allowfullscreen
+              alt="Link to the video of the application displaying the navigation bar and organized collections with their relationships."
+            ></iframe>
           </div>
         </div>
       </div>

From 4bf00cc7cbe16f27af99a31ed90782dac2566908 Mon Sep 17 00:00:00 2001
From: Vero <veronicacamarzana@hotmail.com>
Date: Fri, 22 Mar 2024 10:48:12 +0100
Subject: [PATCH 2/3] Youtube video embedded in a better way.

---
 index.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index fa46ec91..0619c301 100644
--- a/index.html
+++ b/index.html
@@ -152,8 +152,8 @@
         margin-top: 3.5rem;
       }
       .info__iframe {
-        width: 560px;
-        height: 315px;
+        width: 45%;
+        aspect-ratio: 16 / 9;
         border-radius: 10px;
         box-shadow:
           -14px 14px 28px #0f1924,
@@ -326,7 +326,7 @@ <h3>
           </div>
           <div class="info__iframe">
             <iframe
-              src="https://www.youtube.com/embed/87ZZbDZLido"
+              src="https://www.youtube.com/embed/87ZZbDZLido?si=fanae_ZvATEOIkHZ"
               frameborder="0"
               allowfullscreen
               alt="Link to the video of the application displaying the navigation bar and organized collections with their relationships."

From d5a017a465671526fd476e86ff65e4556a4fa13d Mon Sep 17 00:00:00 2001
From: Leticia de la Osa <deletidev@gmail.com>
Date: Tue, 26 Mar 2024 09:22:35 +0100
Subject: [PATCH 3/3] Adapt video aspect-ratio

---
 index.html | 107 +++++++++++++++++++++++++----------------------------
 1 file changed, 51 insertions(+), 56 deletions(-)

diff --git a/index.html b/index.html
index 0619c301..cfde17f0 100644
--- a/index.html
+++ b/index.html
@@ -151,21 +151,29 @@
         font-size: 20px;
         margin-top: 3.5rem;
       }
-      .info__iframe {
-        width: 45%;
-        aspect-ratio: 16 / 9;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
         border-radius: 10px;
-        box-shadow:
-          -14px 14px 28px #0f1924,
-          14px -14px 28px #192b3e;
       }
-      img,
+
       iframe {
         width: 100%;
-        height: 100%;
-        object-fit: cover;
+        aspect-ratio: 14.35 / 9;
         border-radius: 10px;
+        box-shadow:
+          -14px 14px 28px #0f1924,
+          14px -14px 28px #192b3e;
+      }
+
+      .info__iframe {
+        width: 45%;
+        display: flex;
+        align-items: center;
       }
+
       .github {
         background-color: var(--accent);
         color: var(--background-300);
@@ -178,30 +186,22 @@
         font-weight: 600;
       }
 
-      @media screen and (max-width: 600px) {
-        body {
-          text-align: center;
-        }
-        .info {
-          padding: 0;
-          padding-bottom: 2rem;
+      @media screen and (max-width: 1280px) {
+        .info__text {
+          padding-top: 0;
         }
+      }
 
-        .info__claim {
-          padding-top: 0.8rem;
-        }
-        .container {
-          width: 90%;
-        }
-        .info__company {
-          line-height: 1.13;
+      @media screen and (max-width: 900px) {
+        body {
+          text-align: center;
         }
         .info__detail {
           flex-direction: column-reverse;
           gap: 5rem;
+          padding-bottom: 4rem;
         }
         .info__text {
-          padding-top: 0;
           width: 100%;
         }
         .info__iframe {
@@ -210,11 +210,35 @@
         .info__link {
           margin-left: auto;
           margin-right: auto;
-          font-size: 18px;
         }
         .header {
           padding-bottom: 2rem;
         }
+        .info__company {
+          justify-content: center;
+        }
+      }
+
+      @media screen and (max-width: 600px) {
+        .info {
+          padding: 0;
+          padding-bottom: 2rem;
+        }
+
+        .info__claim {
+          padding-top: 0.8rem;
+        }
+        .container {
+          width: 90%;
+        }
+        .info__company {
+          line-height: 1.13;
+        }
+
+        .info__link {
+          font-size: 18px;
+        }
+
         .info__text h3 {
           font-size: 22px;
         }
@@ -226,12 +250,11 @@
           font-size: 17px;
         }
         .info__company {
-          display: flex;
           flex-direction: column;
           justify-items: center;
-          align-items: center;
           gap: 8px;
         }
+
         .info__company img {
           width: 70px;
           margin-top: 0;
@@ -240,33 +263,6 @@
           line-height: 1.1;
         }
       }
-      @media screen and (max-width: 900px) {
-        body {
-          text-align: center;
-        }
-        .info__detail {
-          flex-direction: column-reverse;
-          gap: 5rem;
-          padding-bottom: 4rem;
-        }
-        .info__text {
-          padding-top: 0;
-          width: 100%;
-        }
-        .info__iframe {
-          width: 100%;
-        }
-        .info__link {
-          margin-left: auto;
-          margin-right: auto;
-        }
-        .header {
-          padding-bottom: 2rem;
-        }
-        .info__company {
-          justify-content: center;
-        }
-      }
 
       @media (hover: hover) {
         a:hover {
@@ -329,7 +325,6 @@ <h3>
               src="https://www.youtube.com/embed/87ZZbDZLido?si=fanae_ZvATEOIkHZ"
               frameborder="0"
               allowfullscreen
-              alt="Link to the video of the application displaying the navigation bar and organized collections with their relationships."
             ></iframe>
           </div>
         </div>