feat: create main banner and responsive

assets/css/main.css

@@ -18,6 +18,14 @@
   display: flex;
 }
 
+/*-------------*\
+=  MAIN BANNER  =
+\*-------------*/
+.main-banner-image {
+  width: 100%;
+  height: auto;
+}
+
 /*CUBE CSS styles*/
 
 /*-------*\
@@ -26,3 +34,23 @@
 .bg-clr-black {
   background-color: var(--bg-clr-black);
 }
+
+@media only screen and (max-width: 1024px) {
+  .image-mobile {
+    display: flex;
+  }
+
+  .image-desktop {
+    display: none;
+  }
+}
+
+@media only screen and (min-width: 1025px) {
+  .image-mobile {
+    display: none;
+  }
+
+  .image-desktop {
+    display: flex;
+  }
+}

index.html

@@ -29,6 +29,18 @@
     </header>
 
     <!--=============== Main Banner ===============-->
+    <figure class="main-banner">
+      <img
+        class="main-banner-image image-desktop"
+        src="./assets/images/main-banner-desktop.jpg"
+        alt="Um desktop aberto em um software de ambiente de desenvolvimento"
+      />
+      <img
+        class="main-banner-image image-mobile"
+        src="./assets/images/main-banner-mobile.jpg"
+        alt="Um desktop aberto em um software de ambiente de desenvolvimento"
+      />
+    </figure>
 
     <!--=============== Information ===============-->