Menucard used in {Theme} is done using isotope plugin and masonry plugin.
Menu Card
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 |
<section class="ct-u-backgroundWhite ct-u-paddingTop130 ct-u-paddingBottom150 ct-removeTopPadding130 ct-removeBottomPadding150"> <div class="container"> <div class="row"> <div class="col-md-12 text-center"><img src="../assets/images/demo-content/delimondo/icon-2.png" alt="Image"> <h6 class="ct-u-fontTypeBold ct-u-colorMotiveLight ct-u-paddingBottom10 ct-u-fontSize22 ct-u-paddingTop55">our menu card</h6> <h2 class="ct-u-fontTypeLight ct-u-lineHeight60 ct-u-paddingBottom140">the agony of choice</h2> <ul class="ct-gallery-filters list-unstyled list-inline"> <li><a data-filter="*" class="active">starters<img src="../assets/images/demo-content/delimondo/starters.png" alt="Image"><img src="../assets/images/demo-content/delimondo/starters-motive.png" alt="Image" class="ct-hide"></a></li> <li><a data-filter=".meat">meat<img src="../assets/images/demo-content/delimondo/meat.png" alt="Image"><img src="../assets/images/demo-content/delimondo/meat-motive.png" alt="Image" class="ct-hide"></a></li> <li><a data-filter=".fish">fish<img src="../assets/images/demo-content/delimondo/fish.png" alt="Image"><img src="../assets/images/demo-content/delimondo/fish-motive.png" alt="Image" class="ct-hide"></a></li> <li><a data-filter=".vegetarian">vegetarian<img src="../assets/images/demo-content/delimondo/vegetable.png" alt="Image"><img src="../assets/images/demo-content/delimondo/vegetable-motive.png" alt="Image" class="ct-hide"></a></li> <li><a data-filter=".dessert">dessert<img src="../assets/images/demo-content/delimondo/dessert.png" alt="Image"><img src="../assets/images/demo-content/delimondo/dessert-motive.png" alt="Image" class="ct-hide"></a></li> <li><a data-filter=".drinks">drinks<img src="../assets/images/demo-content/delimondo/drinks.png" alt="Image"><img src="../assets/images/demo-content/delimondo/drinks-motive.png" alt="Image" class="ct-hide"></a></li> </ul> <div class="clearfix"></div> </div> </div> <div class="row"> <div class="col-md-12 ct-u-paddingTop170 ct-removeTopPadding170"> <div class="ct-gallery ct-gallery--col3 ct-gallery--withSpacing is-loaded" style="position: relative; height: 1747px;"> <div class="ct-gallery-item ct-gallery-item--masonry starters" style="position: absolute; left: 0px; top: 0px;"> <div class="ct-gallery-itemInner"> <div class="ct-menuBox"><span class="ct-leftPosition">starters<img src="../assets/images/demo-content/delimondo/starters.png" alt="Image"></span> <ul> <li><span>green salad</span> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p> <p class="price"><sup>$</sup>10<sup>00</sup></p> <div class="ct-dottedDivider"></div> </li> <li><span>baked spinach</span> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p> <p class="price"><sup>$</sup>5<sup>99</sup></p> <div class="ct-dottedDivider"></div> </li> <li><span>green salad</span> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p> <p class="price"><sup>$</sup>6<sup>99</sup></p> </li> </ul> </div> </div> </div> <div class="ct-gallery-item ct-gallery-item--masonry meat" style="position: absolute; left: 349px; top: 0px;"> <div class="ct-gallery-itemInner"> <div class="ct-menuBox"><span class="ct-leftPosition">meat<img src="../assets/images/demo-content/delimondo/meat.png" alt="Image"></span> <ul> <li><span>bacon wrapped chicken</span> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p> <p class="price"><sup>$</sup>14<sup>99</sup></p> <div class="ct-dottedDivider"></div> </li> <li><span>lemon chicken</span> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p> <p class="price"><sup>$</sup>15<sup>99</sup></p> <div class="ct-dottedDivider"></div> </li> <li><span>beef tenderloin</span> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p> <p class="price"><sup>$</sup>23<sup>00</sup></p> <div class="ct-dottedDivider"></div> </li> <li><span>shrimp</span> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p> <p class="price"><sup>$</sup>16<sup>00</sup></p> <div class="ct-dottedDivider"></div> </li> <li><span>twin lobster tails</span> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p> <p class="price"><sup>$</sup>12<sup>00</sup></p> </li> </ul> </div> </div> </div> <div class="ct-gallery-item ct-gallery-item--masonry fish" style="position: absolute; left: 699px; top: 0px;"> <div class="ct-gallery-itemInner"> <div class="ct-menuBox"><span class="ct-leftPosition">fish<img src="../assets/images/demo-content/delimondo/fish.png" alt="Image"></span> <ul> <li><span>House smoked fish cakes</span> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p> <p class="price"><sup>$</sup>14<sup>99</sup></p> <div class="ct-dottedDivider"></div> </li> <li><span>Bruschetta</span> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p> <p class="price"><sup>$</sup>13<sup>00</sup></p> <div class="ct-dottedDivider"></div> </li> <li><span>fish and chips</span> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p> <p class="price"><sup>$</sup>16<sup>99</sup></p> <div class="ct-dottedDivider"></div> </li> <li><span>ciabatta</span> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p> <p class="price"><sup>$</sup>6<sup>99</sup></p> </li> </ul> </div> </div> </div> <div class="ct-gallery-item ct-gallery-item--masonry vegetarian" style="position: absolute; left: 0px; top: 747px;"> <div class="ct-gallery-itemInner"> <div class="ct-menuBox"><span class="ct-leftPosition">vegetarian<img src="../assets/images/demo-content/delimondo/vegetable.png" alt="Image"></span> <ul> <li><span>House smoked fish cakes</span> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p> <p class="price"><sup>$</sup>14<sup>99</sup></p> <div class="ct-dottedDivider"></div> </li> <li><span>Bruschetta</span> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p> <p class="price"><sup>$</sup>13<sup>00</sup></p> <div class="ct-dottedDivider"></div> </li> <li><span>fish and chips</span> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p> <p class="price"><sup>$</sup>16<sup>99</sup></p> <div class="ct-dottedDivider"></div> </li> <li><span>ciabatta</span> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p> <p class="price"><sup>$</sup>6<sup>99</sup></p> </li> </ul> </div> </div> </div> <div class="ct-gallery-item ct-gallery-item--masonry dessert" style="position: absolute; left: 699px; top: 969px;"> <div class="ct-gallery-itemInner"> <div class="ct-menuBox"><span class="ct-leftPosition">dessert<img src="../assets/images/demo-content/delimondo/dessert.png" alt="Image"></span> <ul> <li><span>House smoked fish cakes</span> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p> <p class="price"><sup>$</sup>14<sup>99</sup></p> <div class="ct-dottedDivider"></div> </li> <li><span>Bruschetta</span> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p> <p class="price"><sup>$</sup>13<sup>00</sup></p> </li> </ul> </div> </div> </div> <div class="ct-gallery-item ct-gallery-item--masonry drinks" style="position: absolute; left: 349px; top: 1160px;"> <div class="ct-gallery-itemInner"> <div class="ct-menuBox"><span class="ct-leftPosition">drinks<img src="../assets/images/demo-content/delimondo/drinks.png" alt="Image"></span> <ul> <li><span>House smoked fish cakes</span> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p> <p class="price"><sup>$</sup>14<sup>99</sup></p> <div class="ct-dottedDivider"></div> </li> <li><span>Bruschetta</span> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p> <p class="price"><sup>$</sup>13<sup>00</sup></p> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </section> |
Plugins used in this component
– Jquery.isotope
– Masonry Plugin