Loading...

PISTACHIO

UI / UX Design, Web Development, Web Design

Client

Name:PISTACHIO Nut store
Services:Webdesign, Branding, Product Design
Website:https://pistachio-de.com/

The Brief

PISTACHIO Store sells Nuts, kernels, sweets, coffee in Germany, a list of all products is displayed with a product detail, my role was to design a new distinctive site that is compatible with all devices from three languages, integrated with online payment and ordering system, reflects the brand and enhances its commercial customers.

Tools & Technologies

WordPress, Adobe Photoshop, Adobe Dreamweaver, BootStrap, HTML, JavaScript, CSS, PHP, Online Shipping System.

Share

.safe-svg-cover{text-align:center;}.safe-svg-cover .safe-svg-inside{display:inline-block;max-width:100%;}.safe-svg-cover svg{height:100%;max-height:100%;max-width:100%;width:100%;}.wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em;}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none;}body{--wp--preset--color--black:#000;--wp--preset--color--cyan-bluish-gray:#abb8c3;--wp--preset--color--white:#fff;--wp--preset--color--pale-pink:#f78da7;--wp--preset--color--vivid-red:#cf2e2e;--wp--preset--color--luminous-vivid-orange:#ff6900;--wp--preset--color--luminous-vivid-amber:#fcb900;--wp--preset--color--light-green-cyan:#7bdcb5;--wp--preset--color--vivid-green-cyan:#00d084;--wp--preset--color--pale-cyan-blue:#8ed1fc;--wp--preset--color--vivid-cyan-blue:#0693e3;--wp--preset--color--vivid-purple:#9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple:linear-gradient(135deg,rgba(6,147,227,1) 0%,#9b51e0 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan:linear-gradient(135deg,#7adcb4 0%,#00d082 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange:linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red:linear-gradient(135deg,rgba(255,105,0,1) 0%,#cf2e2e 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray:linear-gradient(135deg,#eee 0%,#a9b8c3 100%);--wp--preset--gradient--cool-to-warm-spectrum:linear-gradient(135deg,#4aeadc 0%,#9778d1 20%,#cf2aba 40%,#ee2c82 60%,#fb6962 80%,#fef84c 100%);--wp--preset--gradient--blush-light-purple:linear-gradient(135deg,#ffceec 0%,#9896f0 100%);--wp--preset--gradient--blush-bordeaux:linear-gradient(135deg,#fecda5 0%,#fe2d2d 50%,#6b003e 100%);--wp--preset--gradient--luminous-dusk:linear-gradient(135deg,#ffcb70 0%,#c751c0 50%,#4158d0 100%);--wp--preset--gradient--pale-ocean:linear-gradient(135deg,#fff5cb 0%,#b6e3d4 50%,#33a7b5 100%);--wp--preset--gradient--electric-grass:linear-gradient(135deg,#caf880 0%,#71ce7e 100%);--wp--preset--gradient--midnight:linear-gradient(135deg,#020381 0%,#2874fc 100%);--wp--preset--font-size--small:14px;--wp--preset--font-size--medium:23px;--wp--preset--font-size--large:26px;--wp--preset--font-size--x-large:42px;--wp--preset--font-size--normal:16px;--wp--preset--font-size--huge:37px;--wp--preset--spacing--20:.44rem;--wp--preset--spacing--30:.67rem;--wp--preset--spacing--40:1rem;--wp--preset--spacing--50:1.5rem;--wp--preset--spacing--60:2.25rem;--wp--preset--spacing--70:3.38rem;--wp--preset--spacing--80:5.06rem;--wp--preset--shadow--natural:6px 6px 9px rgba(0,0,0,.2);--wp--preset--shadow--deep:12px 12px 50px rgba(0,0,0,.4);--wp--preset--shadow--sharp:6px 6px 0px rgba(0,0,0,.2);--wp--preset--shadow--outlined:6px 6px 0px -3px rgba(255,255,255,1),6px 6px rgba(0,0,0,1);--wp--preset--shadow--crisp:6px 6px 0px rgba(0,0,0,1);}:where(.is-layout-flex){gap:.5em;}:where(.is-layout-grid){gap:.5em;}body .is-layout-flow > .alignleft{float:left;margin-inline-start:0;margin-inline-end:2em;}body .is-layout-flow > .alignright{float:right;margin-inline-start:2em;margin-inline-end:0;}body .is-layout-flow > .aligncenter{margin-left:auto !important;margin-right:auto !important;}body .is-layout-constrained > .alignleft{float:left;margin-inline-start:0;margin-inline-end:2em;}body .is-layout-constrained > .alignright{float:right;margin-inline-start:2em;margin-inline-end:0;}body .is-layout-constrained > .aligncenter{margin-left:auto !important;margin-right:auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width:var(--wp--style--global--content-size);margin-left:auto !important;margin-right:auto !important;}body .is-layout-constrained > .alignwide{max-width:var(--wp--style--global--wide-size);}body .is-layout-flex{display:flex;}body .is-layout-flex{flex-wrap:wrap;align-items:center;}body .is-layout-flex > *{margin:0;}body .is-layout-grid{display:grid;}body .is-layout-grid > *{margin:0;}:where(.wp-block-columns.is-layout-flex){gap:2em;}:where(.wp-block-columns.is-layout-grid){gap:2em;}:where(.wp-block-post-template.is-layout-flex){gap:1.25em;}:where(.wp-block-post-template.is-layout-grid){gap:1.25em;}.has-black-color{color:var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color:var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color:var(--wp--preset--color--white) !important;}.has-pale-pink-color{color:var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color:var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color:var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color:var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color:var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color:var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color:var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color:var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color:var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color:var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color:var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color:var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color:var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color:var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color:var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color:var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color:var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color:var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color:var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color:var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color:var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color:var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color:var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color:var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color:var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color:var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color:var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color:var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color:var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color:var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color:var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color:var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color:var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background:var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background:var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background:var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background:var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background:var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background:var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background:var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background:var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background:var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background:var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background:var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background:var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size:var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size:var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size:var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size:var(--wp--preset--font-size--x-large) !important;}.wp-block-navigation a:where(:not(.wp-element-button)){color:inherit;}:where(.wp-block-post-template.is-layout-flex){gap:1.25em;}:where(.wp-block-post-template.is-layout-grid){gap:1.25em;}:where(.wp-block-columns.is-layout-flex){gap:2em;}:where(.wp-block-columns.is-layout-grid){gap:2em;}.wp-block-pullquote{font-size:1.5em;line-height:1.6;}.logo-slider{-webkit-box-shadow:0 0px 0px 0px rgba(0,0,0,.125);box-shadow:0 0px 0px 0px rgba(0,0,0,.125);margin:auto;overflow:hidden;position:relative;width:100%;}.logo-slider::before,.logo-slider::after{content:"";height:175px;position:absolute;width:200px;z-index:2;}.logo-slider::after{right:0;top:0;-webkit-transform:rotateZ(180deg);transform:rotateZ(180deg);}.logo-slider::before{left:0;top:0;}.logo-slider .logo-slide-track{-webkit-animation:logo-scroll 60s linear infinite;animation:logo-scroll 60s linear infinite;display:-webkit-box;display:-ms-flexbox;display:flex;width:calc(250px * 14);animation-duration:30s;animation-iteration-count:infinite;}.logo-slider .slide{height:150px;width:250px;padding:20px;}@-webkit-keyframes logo-scroll{0%{-webkit-transform:translateX(0);transform:translateX(0);}100%{-webkit-transform:translateX(calc(-250px * 7));transform:translateX(calc(-250px * 7));}}@keyframes logo-scroll{0%{-webkit-transform:translateX(0);transform:translateX(0);}100%{-webkit-transform:translateX(calc(-250px * 7));transform:translateX(calc(-250px * 7));}}.svg_cus{filter:invert(44%) sepia(96%) saturate(585%) hue-rotate(152deg) brightness(94%) contrast(103%);}.languageFlag br{display:none;}.languageFlag{flex-direction:column;transform:scale(.7);position:absolute;z-index:20;right:2px;top:-50px;display:flex;padding:.2rem;height:13rem;overflow:hidden;}.languageFlag img{width:40px;height:40px;border-radius:100%;margin:5px 0;transform:scale(1) !important;max-width:unset !important;}.first{z-index:11;display:block;height:40px;margin-bottom:5px;}.second{z-index:10;opacity:0;transform:translateY(-40px);transition-duration:300ms;}.languageFlag:hover .second{transform:translateY(0px);opacity:1;}.cky-btn-revisit-wrapper{display:none !important;}.weglot-default{display:none;}.btn-scroll-top{left:8px !important;right:unset !important;}.wpforms-recaptcha-container{display:none;}:root{--wpforms-field-border-radius:3px;--wpforms-field-background-color:#fff;--wpforms-field-border-color:rgba(0,0,0,.25);--wpforms-field-text-color:rgba(0,0,0,.7);--wpforms-label-color:rgba(0,0,0,.85);--wpforms-label-sublabel-color:rgba(0,0,0,.55);--wpforms-label-error-color:#d63637;--wpforms-button-border-radius:3px;--wpforms-button-background-color:#066aab;--wpforms-button-text-color:#fff;--wpforms-field-size-input-height:43px;--wpforms-field-size-input-spacing:15px;--wpforms-field-size-font-size:16px;--wpforms-field-size-line-height:19px;--wpforms-field-size-padding-h:14px;--wpforms-field-size-checkbox-size:16px;--wpforms-field-size-sublabel-spacing:5px;--wpforms-field-size-icon-size:1;--wpforms-label-size-font-size:16px;--wpforms-label-size-line-height:19px;--wpforms-label-size-sublabel-font-size:14px;--wpforms-label-size-sublabel-line-height:17px;--wpforms-button-size-font-size:17px;--wpforms-button-size-height:41px;--wpforms-button-size-padding-h:15px;--wpforms-button-size-margin-top:10px;}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff;}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent;}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px;}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em;}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px;}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block;}.elementor-widget-social-icons.elementor-grid-0 .elementor-widget-container,.elementor-widget-social-icons.elementor-grid-mobile-0 .elementor-widget-container,.elementor-widget-social-icons.elementor-grid-tablet-0 .elementor-widget-container{line-height:1;font-size:0;}.elementor-widget-social-icons:not(.elementor-grid-0):not(.elementor-grid-tablet-0):not(.elementor-grid-mobile-0) .elementor-grid{display:inline-grid;}.elementor-widget-social-icons .elementor-grid{grid-column-gap:var(--grid-column-gap,5px);grid-row-gap:var(--grid-row-gap,5px);grid-template-columns:var(--grid-template-columns);justify-content:var(--justify-content,center);justify-items:var(--justify-content,center);}.elementor-icon.elementor-social-icon{font-size:var(--icon-size,25px);line-height:var(--icon-size,25px);width:calc(var(--icon-size,25px) + 2 * var(--icon-padding,.5em));height:calc(var(--icon-size,25px) + 2 * var(--icon-padding,.5em));}.elementor-social-icon{--e-social-icon-icon-color:#fff;display:inline-flex;background-color:#69727d;align-items:center;justify-content:center;text-align:center;cursor:pointer;}.elementor-social-icon i{color:var(--e-social-icon-icon-color);}.elementor-social-icon svg{fill:var(--e-social-icon-icon-color);}.elementor-social-icon:last-child{margin:0;}.elementor-social-icon:hover{opacity:.9;color:#fff;}.elementor-social-icon-android{background-color:#a4c639;}.elementor-social-icon-apple{background-color:#999;}.elementor-social-icon-behance{background-color:#1769ff;}.elementor-social-icon-bitbucket{background-color:#205081;}.elementor-social-icon-codepen{background-color:#000;}.elementor-social-icon-delicious{background-color:#39f;}.elementor-social-icon-deviantart{background-color:#05cc47;}.elementor-social-icon-digg{background-color:#005be2;}.elementor-social-icon-dribbble{background-color:#ea4c89;}.elementor-social-icon-elementor{background-color:#d30c5c;}.elementor-social-icon-envelope{background-color:#ea4335;}.elementor-social-icon-facebook,.elementor-social-icon-facebook-f{background-color:#3b5998;}.elementor-social-icon-flickr{background-color:#0063dc;}.elementor-social-icon-foursquare{background-color:#2d5be3;}.elementor-social-icon-free-code-camp,.elementor-social-icon-freecodecamp{background-color:#006400;}.elementor-social-icon-github{background-color:#333;}.elementor-social-icon-gitlab{background-color:#e24329;}.elementor-social-icon-globe{background-color:#69727d;}.elementor-social-icon-google-plus,.elementor-social-icon-google-plus-g{background-color:#dd4b39;}.elementor-social-icon-houzz{background-color:#7ac142;}.elementor-social-icon-instagram{background-color:#262626;}.elementor-social-icon-jsfiddle{background-color:#487aa2;}.elementor-social-icon-link{background-color:#818a91;}.elementor-social-icon-linkedin,.elementor-social-icon-linkedin-in{background-color:#0077b5;}.elementor-social-icon-medium{background-color:#00ab6b;}.elementor-social-icon-meetup{background-color:#ec1c40;}.elementor-social-icon-mixcloud{background-color:#273a4b;}.elementor-social-icon-odnoklassniki{background-color:#f4731c;}.elementor-social-icon-pinterest{background-color:#bd081c;}.elementor-social-icon-product-hunt{background-color:#da552f;}.elementor-social-icon-reddit{background-color:#ff4500;}.elementor-social-icon-rss{background-color:#f26522;}.elementor-social-icon-shopping-cart{background-color:#4caf50;}.elementor-social-icon-skype{background-color:#00aff0;}.elementor-social-icon-slideshare{background-color:#0077b5;}.elementor-social-icon-snapchat{background-color:#fffc00;}.elementor-social-icon-soundcloud{background-color:#f80;}.elementor-social-icon-spotify{background-color:#2ebd59;}.elementor-social-icon-stack-overflow{background-color:#fe7a15;}.elementor-social-icon-steam{background-color:#00adee;}.elementor-social-icon-stumbleupon{background-color:#eb4924;}.elementor-social-icon-telegram{background-color:#2ca5e0;}.elementor-social-icon-thumb-tack{background-color:#1aa1d8;}.elementor-social-icon-tripadvisor{background-color:#589442;}.elementor-social-icon-tumblr{background-color:#35465c;}.elementor-social-icon-twitch{background-color:#6441a5;}.elementor-social-icon-twitter{background-color:#1da1f2;}.elementor-social-icon-viber{background-color:#665cac;}.elementor-social-icon-vimeo{background-color:#1ab7ea;}.elementor-social-icon-vk{background-color:#45668e;}.elementor-social-icon-weibo{background-color:#dd2430;}.elementor-social-icon-weixin{background-color:#31a918;}.elementor-social-icon-whatsapp{background-color:#25d366;}.elementor-social-icon-wordpress{background-color:#21759b;}.elementor-social-icon-xing{background-color:#026466;}.elementor-social-icon-yelp{background-color:#af0606;}.elementor-social-icon-youtube{background-color:#cd201f;}.elementor-social-icon-500px{background-color:#0099e5;}.elementor-shape-rounded .elementor-icon.elementor-social-icon{border-radius:10%;}.elementor-shape-circle .elementor-icon.elementor-social-icon{border-radius:50%;}.elementor-image-gallery .gallery-item{display:inline-block;text-align:center;vertical-align:top;width:100%;max-width:100%;margin:0 auto;}.elementor-image-gallery .gallery-item img{margin:0 auto;}.elementor-image-gallery .gallery-item .gallery-caption{margin:0;}.elementor-image-gallery figure img{display:block;}.elementor-image-gallery figure figcaption{width:100%;}.gallery-spacing-custom .elementor-image-gallery .gallery-icon{padding:0;}@media (min-width:768px){.elementor-image-gallery .gallery-columns-2 .gallery-item{max-width:50%;}.elementor-image-gallery .gallery-columns-3 .gallery-item{max-width:33.33%;}.elementor-image-gallery .gallery-columns-4 .gallery-item{max-width:25%;}.elementor-image-gallery .gallery-columns-5 .gallery-item{max-width:20%;}.elementor-image-gallery .gallery-columns-6 .gallery-item{max-width:16.666%;}.elementor-image-gallery .gallery-columns-7 .gallery-item{max-width:14.28%;}.elementor-image-gallery .gallery-columns-8 .gallery-item{max-width:12.5%;}.elementor-image-gallery .gallery-columns-9 .gallery-item{max-width:11.11%;}.elementor-image-gallery .gallery-columns-10 .gallery-item{max-width:10%;}}@media (min-width:480px) and (max-width:767px){.elementor-image-gallery .gallery.gallery-columns-2 .gallery-item,.elementor-image-gallery .gallery.gallery-columns-3 .gallery-item,.elementor-image-gallery .gallery.gallery-columns-4 .gallery-item,.elementor-image-gallery .gallery.gallery-columns-5 .gallery-item,.elementor-image-gallery .gallery.gallery-columns-6 .gallery-item,.elementor-image-gallery .gallery.gallery-columns-7 .gallery-item,.elementor-image-gallery .gallery.gallery-columns-8 .gallery-item,.elementor-image-gallery .gallery.gallery-columns-9 .gallery-item,.elementor-image-gallery .gallery.gallery-columns-10 .gallery-item{max-width:50%;}}@media (max-width:479px){.elementor-image-gallery .gallery.gallery-columns-2 .gallery-item,.elementor-image-gallery .gallery.gallery-columns-3 .gallery-item,.elementor-image-gallery .gallery.gallery-columns-4 .gallery-item,.elementor-image-gallery .gallery.gallery-columns-5 .gallery-item,.elementor-image-gallery .gallery.gallery-columns-6 .gallery-item,.elementor-image-gallery .gallery.gallery-columns-7 .gallery-item,.elementor-image-gallery .gallery.gallery-columns-8 .gallery-item,.elementor-image-gallery .gallery.gallery-columns-9 .gallery-item,.elementor-image-gallery .gallery.gallery-columns-10 .gallery-item{max-width:100%;}}.elementor-widget-image{text-align:center;}.elementor-widget-image a{display:inline-block;}.elementor-widget-image a img[src$=".svg"]{width:48px;}.elementor-widget-image img{vertical-align:middle;display:inline-block;}