Use these codes for when your website theme is purple and you want small economic panels. In this code, the panels have a large icon. Below each icon is the title of each panel and its price. Each panel also has a shadow. This shadow changes angle at hover time. The title of each panel in this code is white.
HTML
<!-- This script got from www.devanswer.com -->
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script>
<div class="container">
<div class="table-price">
<div class="pic-item">
<svg enable-background="new 0 0 800 800" height="150" id="Layer_1" version="1.1" viewBox="0 0 800 800" width="150" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M746.718,60.83c-0.985-8.498-8.679-14.645-17.186-13.573L536.871,69.933 c-6.588,0.77-11.947,5.654-13.331,12.129l-53.563,249.709H283.142l-49.604-105.753l121.307-57.368 c3.942-1.85,6.916-5.291,8.177-9.458c1.28-4.167,0.744-8.68-1.47-12.414c-19.624-33.231-50.469-58.699-86.812-71.701 c-18.052-6.467-36.846-9.734-55.847-9.734c-19.538,0-38.47,3.57-56.209,9.994c-0.086-0.259-0.138-0.527-0.259-0.778l-7.279-15.769 c-3.579-7.771-12.777-11.16-20.558-7.572c-7.763,3.579-11.152,12.786-7.573,20.558l7.28,15.768c0.138,0.312,0.38,0.536,0.537,0.83 c-32.679,19.278-58.647,49.604-71.987,86.899c-13.01,36.36-12.889,76.352,0.347,112.591c1.495,4.08,4.642,7.365,8.67,9.008 c1.884,0.778,3.881,1.158,5.879,1.158c2.264,0,4.529-0.484,6.621-1.487l121.167-57.281l43.38,92.509h-88.662 c-7.02,0-13.157,4.72-14.973,11.498c-8.126,30.43-12.259,62.122-12.259,94.161c0,173.936,121.289,315.436,270.38,315.436 c149.089,0,270.378-141.5,270.378-315.436c0-32.091-4.114-63.765-12.259-94.178c-1.798-6.777-7.936-11.48-14.955-11.48H501.67 l49.829-232.367l181.646-21.379C741.652,77.03,747.722,69.328,746.718,60.83z M92.012,185.714 c19.132-53.478,70.12-89.389,126.882-89.389c15.439,0,30.707,2.663,45.403,7.919c24.155,8.645,45.316,24.05,60.947,44.141 L87.456,260.804C81.855,235.993,83.367,209.868,92.012,185.714z M642.789,437.429c0,156.854-107.388,284.453-239.395,284.453 c-131.991,0-239.396-127.6-239.396-284.453c0-25.33,2.818-50.4,8.369-74.675h462.07 C639.988,387.011,642.789,412.063,642.789,437.429z" /><path d="M314.005,634.325c0,18.016,14.662,32.678,32.678,32.678c18.016,0,32.661-14.662,32.661-32.678 c0-17.998-14.646-32.66-32.661-32.66C328.667,601.665,314.005,616.327,314.005,634.325z" /><path d="M274.896,595.216c29.513,0,53.53-24.016,53.53-53.513c0-29.53-24.017-53.528-53.53-53.528 c-29.514,0-53.529,23.998-53.529,53.528C221.366,571.2,245.381,595.216,274.896,595.216z M274.896,519.157 c12.431,0,22.546,10.115,22.546,22.546c0,12.415-10.115,22.529-22.546,22.529c-12.432,0-22.546-10.114-22.546-22.529 C252.349,529.272,262.464,519.157,274.896,519.157z" /></g></svg>
</div>
<div class="description">
<h1 class="title">coconut water</h1>
<span class="price">$25,00</span>
</div>
</div>
<div class="table-price selected">
<div class="pic-item">
<svg enable-background="new 0 0 800 800" height="150px" id="Layer_1" version="1.1" viewBox="0 0 800 800" width="150px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M283.984,116.998l32.674,159.441h-42.543c-4.246,0-8.311,1.757-11.23,4.857 c-2.911,3.083-4.426,7.251-4.168,11.488l23.751,401.806c0.276,22.132,18.361,40.063,40.563,40.063h144.414 c22.201,0,40.295-17.931,40.57-40.063l23.752-401.806c0.241-4.237-1.266-8.405-4.186-11.488c-2.91-3.101-6.976-4.857-11.23-4.857 H348.16l-35.352-172.565c-0.904-4.41-3.677-8.182-7.587-10.386L166.965,16.238c-7.432-4.151-16.836-1.499-21.004,5.942 c-4.16,7.441-1.49,16.845,5.951,20.996L283.984,116.998z M378.552,578.537c1.49,7.319,7.932,12.349,15.097,12.349 c1.033,0,2.075-0.103,3.118-0.327c8.354-1.705,13.727-9.852,12.021-18.205l-54.307-265.049h145.507l-2.497,42.138H393.132 c-8.525,0-15.433,6.907-15.433,15.433c0,8.509,6.907,15.433,15.433,15.433h102.533l-18.48,312.854 c-0.018,0.31-0.035,0.603-0.035,0.913c0,5.356-4.357,9.714-9.705,9.714H323.031c-5.348,0-9.706-4.357-9.706-9.714 c0-0.311-0.008-0.604-0.025-0.913l-18.499-312.854h15.01c8.518,0,15.433-6.924,15.433-15.433c0-8.526-6.915-15.433-15.433-15.433 h-16.836l-2.48-42.138h32.484L378.552,578.537z" /><path d="M444.372,503.871c22.667,0,41.097-18.446,41.097-41.113c0-22.666-18.43-41.096-41.097-41.096 c-22.666,0-41.096,18.43-41.096,41.096C403.276,485.425,421.706,503.871,444.372,503.871z"/><path d="M311.284,588.389c0,13.865,11.282,25.146,25.147,25.146s25.146-11.281,25.146-25.146 s-11.281-25.146-25.146-25.146S311.284,574.523,311.284,588.389z" /><path d="M427.235,692.369c26.783,0,48.57-21.789,48.57-48.572c0-26.782-21.787-48.57-48.57-48.57 s-48.572,21.788-48.572,48.57C378.663,670.58,400.452,692.369,427.235,692.369z M427.235,626.092 c9.766,0,17.705,7.939,17.705,17.705c0,9.767-7.939,17.707-17.705,17.707c-9.767,0-17.707-7.94-17.707-17.707 C409.528,634.031,417.469,626.092,427.235,626.092z" /><path d="M640.569,754.857h-37.548c-8.526,0-15.433,6.906-15.433,15.432c0,8.526,6.906,15.434,15.433,15.434h37.548 c8.525,0,15.433-6.907,15.433-15.434C656.002,761.764,649.095,754.857,640.569,754.857z"/><path d="M538.423,754.857H164.804c-8.517,0-15.433,6.906-15.433,15.432c0,8.526,6.916,15.434,15.433,15.434h373.619 c8.518,0,15.434-6.907,15.434-15.434C553.856,761.764,546.94,754.857,538.423,754.857z" /></g></svg>
</div>
<span class="best-choice">Best Choice</span>
<div class="description">
<h1 class="title">juice orange</h1>
<span class="price">$12,00</span>
</div>
</div>
<div class="table-price">
<div class="pic-item">
<svg enable-background="new 0 0 800 800" height="150px" id="Layer_1" version="1.1" viewBox="0 0 800 800" width="150px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M525.4,589.907H213.663c-9.932,0-17.985,8.044-17.985,17.985c0,9.923,8.053,17.984,17.985,17.984H525.4 c9.94,0,17.985-8.062,17.985-17.984C543.386,597.951,535.341,589.907,525.4,589.907z"/><path d="M647.063,282.877c3.319-41.837,4.751-82.286,5.005-90.189c0.158-4.865-1.659-9.59-5.049-13.085 c-3.381-3.513-8.054-5.48-12.918-5.48H82.165c-4.883,0-9.537,1.967-12.927,5.48c-3.39,3.495-5.217,8.22-5.059,13.085 c0.492,15,5.199,147.569,19.091,183.821c26.978,70.431,93.536,188.581,236.091,188.581h77.543 c96.564,0,158.213-54.22,196.361-111.091c14.376,9.133,31.378,14.508,49.635,14.508c51.242,0,92.93-41.679,92.93-92.929 C735.83,325.75,696.364,285.072,647.063,282.877z M605.771,332.494c-1.914,13.963-4.049,25.081-6.376,31.141 c-3.372,8.817-7.166,17.827-11.399,26.854c-6.041,12.944-12.996,25.941-20.997,38.517 c-34.328,53.938-87.756,100.113-170.094,100.113h-77.543c-114.972,0-173.582-89.996-202.509-165.484 c-7.886-20.585-13.604-98.445-16-153.542h514.562c-1.055,24.062-2.74,52.445-4.953,78.527 C609.091,304.673,607.519,319.761,605.771,332.494z M642.9,432.536c-11.504,0-22.218-3.46-31.176-9.36 c8.853-16.58,15.869-32.582,21.271-46.667c4.461-11.68,7.974-33.336,10.714-57.837c31.035,0.439,56.15,25.784,56.15,56.906 C699.859,406.981,674.305,432.536,642.9,432.536z"/></g></svg>
</div>
<div class="description">
<h1 class="title">coffe</h1>
<span class="price">$9</span>
</div>
</div>
</div<div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
@import url(https://fonts.googleapis.com/css?family=Oxygen:300,700);
html, body {
background: #fefefe;
width: 100%;
height: auto;
margin: 0;
font-family: "Oxygen", san-serif;
}
.head-title {
width: 50%;
height: 100px;
text-align: center;
margin: 0 25%;
border-bottom: 1px solid #594083;
display: block;
}
.head-title .title-page {
color: #594083;
font-weight: 700;
}
.head-title .subtitle {
color: #594083;
}
.head-title .subtitle a {
color: #594083;
transition: 0.3s linear;
}
.head-title .subtitle a:hover {
color: #F5A623;
text-decoration: none;
}
.container {
width: 850px;
height: 400px;
margin: 5% auto;
}
.container .table-price {
background: #F3F2F6;
width: 250px;
height: 350px;
margin: 1% 1.5%;
border-radius: 10px;
float: left;
position: relative;
box-shadow: 0px 0px 10px #594083;
transition: 0.3s ease-in-out;
cursor: pointer;
}
.container .table-price:hover {
box-shadow: 5px 5px 5px #594083;
}
.container .table-price .pic-item {
width: 100%;
height: 60%;
position: relative;
}
.container .table-price .pic-item img {
width: 100%;
height: 100%;
}
.container .table-price .pic-item svg {
fill: #594083;
margin: 5% 50px;
}
.container .table-price .best-choice {
background: #F5A623;
width: 50%;
height: 25px;
font-family: "Oxygen", san-serif;
font-size: 0.9em;
font-weight: 700;
text-align: center;
line-height: 1.8;
text-transform: uppercase;
color: #F3F2F6;
margin: 0 25%;
top: 56%;
border-radius: 10px;
position: absolute;
z-index: 99;
}
.container .table-price .description {
background: #594083;
width: 100%;
height: 40%;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
position: relative;
}
.container .table-price .description .title {
width: 100%;
font-family: "Oxygen", sans-serif;
font-size: 1.5em;
font-weight: 700;
text-align: center;
color: #F3F2F6;
text-transform: uppercase;
top: 10%;
display: block;
position: absolute;
}
.container .table-price .description .price {
width: 100%;
font-family: "Oxygen", sans-serif;
font-size: 1.5em;
font-weight: 300;
text-align: center;
color: #966CDA;
top: 50%;
display: block;
position: absolute;
}
.container .selected {
height: 400px;
top: -25px;
}