Merge pull request #693 from viprajtelukoti/overlapblock_images

Fix #35: overlapblock Creator - Web design

Author: NtemKenyor

modules/overlapblock/images_and_icons/image_vipraj_1.jpeg

@@ -0,0 +1,123 @@
+<div id="container">
+  <div id="card-container">
+    <h1 id="heading">Work & Our Clients</h1>
+    <p id="description">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor
+    </p>
+    <div id="images-container">
+      <img
+        src="modules/overlapblock/images_and_icons/image_vipraj_3.jpeg"
+        alt="work desk 1"
+        id="image1"
+      />
+      <img
+        src="modules/overlapblock/images_and_icons/image_vipraj_2.jpeg"
+        alt="work desk 2"
+        id="image2"
+      />
+      <img
+        src="modules/overlapblock/images_and_icons/image_vipraj_1.jpeg"
+        alt="work desk 3"
+        id="image3"
+      />
+    </div>
+  </div>
+</div>
+
+<style>
+  @import url("https://fonts.googleapis.com/css2?family=Alex+Brush&display=swap");
+
+  #container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    background: #e0e0e0;
+  }
+
+  #card-container {
+    background: white;
+    background-size: cover;
+    background-repeat: no-repeat;
+    width: 90%;
+    height: 90%;
+    margin: 30px;
+    color: black;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
+      "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  }
+
+  #card-container * {
+    margin: 30px;
+  }
+
+  #heading {
+    font-size: 24px;
+    margin-bottom: 0;
+  }
+
+  #description {
+    font-size: 12px;
+    margin-top: 10px;
+    width: 70%;
+  }
+
+  #images-container {
+    width: 100%;
+    display: flex;
+    text-align: center;
+
+    & img {
+      margin: 0;
+    }
+
+    & #image1{
+        width: 50%;
+    }
+
+    & #image2{
+        width: 50%;
+    }
+
+    & #image3{
+        position: absolute;
+        width: 50%;
+        left: 25%;
+    }
+  }
+
+  @media screen and (max-width: 768px) {
+    #card-container * {
+      margin: 10px 15px;
+    }
+
+    #heading {
+      font-size: 22px;
+    }
+
+    #description {
+      font-size: 12px;
+    }
+  }
+
+  @media screen and (max-width: 520px) {
+    #card-container * {
+      margin: 10px 15px;
+    }
+
+    #heading1 {
+      font-size: 18px;
+    }
+
+    #description {
+      font-size: 10px;
+    }
+  }
+</style>