Shape #430

modules/shapes/shape_430_Dibyanshu.html

@@ -0,0 +1,126 @@
+<style>
+  body {
+    margin: 0;
+    font-family: "AR One Sans", sans-serif;
+  }
+
+  .container {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    align-items: center;
+    min-height: 100vh;
+    padding: 20px;
+    box-sizing: border-box;
+  }
+
+  .image-section {
+    background-size: cover;
+    background-position: center;
+    overflow: hidden;
+    margin: 0;
+    padding: 0;
+  }
+
+  .image-section img {
+    width: 100%;
+    height: auto;
+    display: block;
+  }
+
+  .text-section {
+    padding: 20px;
+    grid-column: 1 / 3;
+  }
+
+  .heading {
+    font-size: 2em;
+    margin-bottom: 20px;
+  }
+
+  .subtext {
+    margin-bottom: 20px;
+  }
+
+  .contact-btn {
+    background-color: #0056b3;
+    color: white;
+    padding: 10px 20px;
+    text-decoration: none;
+    border-radius: 5px;
+    display: inline-block;
+  }
+
+  @media (max-width: 768px) {
+    .container {
+      grid-template-columns: 1fr;
+    }
+
+    .text-section {
+      grid-column: 1;
+    }
+  }
+
+  .text-block {
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    background: #f0f0f0;
+    height: 100%;
+    margin: 0;
+    box-sizing: border-box;
+  }
+
+  .text-block .heading {
+    font-size: 1.5em;
+    color: #333;
+    margin-bottom: 10px;
+  }
+
+  .text-block p {
+    color: #666;
+    font-size: 1em;
+    line-height: 1.5;
+    text-align: center;
+    max-width: 80%;
+    margin: 0 auto;
+  }
+</style>
+
+<div class="container">
+  <!-- First image -->
+  <div class="image-section">
+    <img
+      src="https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_640.jpg"
+      alt="ocean-stars"
+    />
+  </div>
+  <!-- Second image -->
+  <div class="image-section">
+    <img
+      src="https://cdn.pixabay.com/photo/2017/05/10/15/05/himalayas-2301040_640.jpg"
+      alt="Mountain-stars"
+    />
+  </div>
+  <!-- Text -->
+  <div class="text-block">
+    <h2 class="heading">Cosmos</h2>
+    <p>
+      stargazing is a captivating activity that allows us to peer into the vast
+      cosmos
+    </p>
+  </div>
+  <!-- Third image  -->
+  <div class="image-section">
+    <img
+      src="https://cdn.pixabay.com/photo/2016/11/21/17/41/star-trails-1846734_640.jpg"
+      alt="spiral-stars"
+    />
+  </div>
+  <div class="text-section">
+    <h1 class="heading">THe incredible universe</h1>
+    <!-- <p class="subtext"></p> -->
+    <a href="#" class="contact-btn">Peace</a>
+  </div>
+</div>