How to create product description below format

Store Design
1

Screffghjenshot_1.jpg
Screffghjenshot_1.jpg1724×947 80.7 KB

I want to create this type of product description. What is the code?

2

Hey @Mukta_92 , here is the HTML and CSS code for the design.


{% schema %}
{
  "name": "Image and Quote Grid",
  "settings": [],
  "blocks": [
    {
      "type": "block",
      "name": "Grid Item",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "text",
          "id": "quote",
          "label": "Quote",
          "default": "I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel."
        },
        {
          "type": "text",
          "id": "author",
          "label": "Author",
          "default": "Maya Angelou"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Image and Quote Grid",
      "category": "Custom"
    }
  ]
}
{% endschema %}

.col-text {
  height:20em;
}
.grid-flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  flex-direction: row; 
  -webkit-flex-direction: row;
  -webkit-flex-wrap: wrap;
  -webkit-justify-content: space-around;
}
.col {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.col-left {
  -webkit-box-ordinal-group:-1;
  -webkit-order: -1;
  -ms-flex-order: -1;
  order: -1;
}
.col-text{
  display: flex;
  align-items: center;
  justify-content: center;
}
.Aligner-item {
  width: 60%;
}
.col-image {
  background-size: cover;
  background-position:center center;
}

@media (max-width: 749px) {
  .grid-flex {
    height: 40em;
    display: -webkit-flex;
    -webkit-flex-direction: column;
    flex-direction: column; 
   }
  .col {
    order:vertical;
  }
  .col-left {
    -webkit-box-ordinal-group:0;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
  }
  .col-text div p {
    padding: 1em;
  }
  .Aligner-item {
    width: 90%;
  }
}

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.

3

No, I am not talking bout the theme function, that is the Shopify product description box.