Merge pull request #418 from Lemoncode/feature/#411-youtube-video-emb…

…edded-in-landing-page feature/#411 Youtube video embedded in landing page
Lemoncode · Mar 26, 2024 · f03ec1f · f03ec1f
2 parents b438c98 + d5a017a
commit f03ec1f
Showing 1 changed file with 62 additions and 64 deletions.
diff --git 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,24 +151,33 @@
         font-size: 20px;
         margin-top: 3.5rem;
       }
-      .info__image {
-        width: 45%;
-        border-radius: 10px;
-        box-shadow:
-          -14px 14px 28px #0f1924,
-          14px -14px 28px #192b3e;
-      }
+
       img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         border-radius: 10px;
       }
+
+      iframe {
+        width: 100%;
+        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);
       }
-
       .github p {
         padding: 1.5rem 0;
       }
@@ -178,10 +186,40 @@
         font-weight: 600;
       }
 
-      @media screen and (max-width: 600px) {
+      @media screen and (max-width: 1280px) {
+        .info__text {
+          padding-top: 0;
+        }
+      }
+
+      @media screen and (max-width: 900px) {
         body {
           text-align: center;
         }
+        .info__detail {
+          flex-direction: column-reverse;
+          gap: 5rem;
+          padding-bottom: 4rem;
+        }
+        .info__text {
+          width: 100%;
+        }
+        .info__iframe {
+          width: 100%;
+        }
+        .info__link {
+          margin-left: auto;
+          margin-right: auto;
+        }
+        .header {
+          padding-bottom: 2rem;
+        }
+        .info__company {
+          justify-content: center;
+        }
+      }
+
+      @media screen and (max-width: 600px) {
         .info {
           padding: 0;
           padding-bottom: 2rem;
@@ -196,25 +234,11 @@
         .info__company {
           line-height: 1.13;
         }
-        .info__detail {
-          flex-direction: column-reverse;
-          gap: 5rem;
-        }
-        .info__text {
-          padding-top: 0;
-          width: 100%;
-        }
-        .info__image {
-          width: 100%;
-        }
+
         .info__link {
-          margin-left: auto;
-          margin-right: auto;
           font-size: 18px;
         }
-        .header {
-          padding-bottom: 2rem;
-        }
+
         .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__image {
-          width: 100%;
-        }
-        .info__link {
-          margin-left: auto;
-          margin-right: auto;
-        }
-        .header {
-          padding-bottom: 2rem;
-        }
-        .info__company {
-          justify-content: center;
-        }
-      }
 
       @media (hover: hover) {
         a:hover {
@@ -294,8 +290,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 +320,12 @@ <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?si=fanae_ZvATEOIkHZ"
+              frameborder="0"
+              allowfullscreen
+            ></iframe>
           </div>
         </div>
       </div>