Phlox Theme & Website Template Resources Code

top 6 ecommerce website template and them Download for free

Phlox Custom Header Sources Code

Custom Header tutorial by daulat hussain
Source Code

@media only screen and (max-width:767px) {
selector .elementor-row{
display: flex;
flex-direction: row;
}
}

Phlox Theme & Template Resources By Daulat Hussain

@media only screen and (max-width:766px) {
selector {
order: 1;
}
}

Phlox Theme & Template Resources By Daulat Hussain

selector .aux-item-content:after{
display: none!important;
}
selector .current_page_item .aux-menu-label {
color:#000!important;
}
selector .aux-burger.aux-lite-small .mid-line {
margin: 6.5px 0;
}
@media only screen and (max-width:767px) {
selector .elementor-widget-container{
background-image: url(‘/wp-content/uploads/2019/10/Group_1270.svg’);
min-width: 50px;
background-repeat: no-repeat;
}
}
selector .aux-burger .mid-line, selector .aux-burger:before, selector .aux-burger:after{
opacity: 0;
}
selector .aux-fs-popup .aux-panel-close {top: 66px;
}

Phlox Theme & Template Resources By Daulat Hussain

selector .aux-cart-wrapper .aux-cart-contents span{
padding: 3px 5px;
right: 2px;
bottom: -1px;
}
selector .auxicon-handbag:before{
content: “”;

}
selector .aux-cart-contents{
background-image: url(“data:image/svg+xml,%3Csvg xmlns=’http://www.w3.org/2000/svg’ width=’19.787′ height=’24.771′ viewBox=’0 0 19.787 24.771’%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%23252525;%7D%3C/style%3E%3C/defs%3E%3Cpath class=’a’ d=’M68.337,21.469,66.912,5.4a.611.611,0,0,0-.615-.559h-3a4.849,4.849,0,0,0-9.7,0h-3a.618.618,0,0,0-.615.559L48.55,21.469v.056a3.48,3.48,0,0,0,3.665,3.246H64.672a3.48,3.48,0,0,0,3.665-3.246ZM58.443,1.231a3.624,3.624,0,0,1,3.619,3.615H54.824A3.624,3.624,0,0,1,58.443,1.231Zm6.228,22.3H52.215a2.261,2.261,0,0,1-2.435-1.989l1.374-15.47h2.44v.593a.615.615,0,1,0,1.23,0V6.076h7.238v.593a.615.615,0,1,0,1.23,0V6.076h2.44l1.374,15.475A2.261,2.261,0,0,1,64.672,23.535Z’ transform=’translate(-48.55 0)’/%3E%3C/svg%3E”);
background-size: 19px;
background-repeat: no-repeat;
width: 24px;
height: 25px;
}

1. Hero Section Sources Code Of Phlox Theme Template

Ecommerce Website Template Design source code by daulat hussain

Section 1

Phlox Theme & Template Resources By Daulat Hussain

selector:hover {
box-shadow: 0 10px 50px rgba(178,178,178,0.26)!important;
transition: all 400ms ease-in-out 70ms;
border-radius: 20px;
}
selector{
border-radius: 25px;
transition: all 400ms ease-in-out 70ms;
}

Phlox Theme & Template Resources By Daulat Hussain

@media only screen and (max-width:1261px)and (min-width:1025px) {
selector .aux-modern-heading-secondary{
font-size: 60px;
line-height: 86px;
}
}
@media only screen and (max-width:1679px)and (min-width:1025px) {
selector .aux-modern-heading-description{
font-size: 12vw;
}
}
@media only screen and (max-width:632px){
selector .aux-modern-heading-description{
margin-top:20px;
}
}

Phlox Theme & Template Resources By Daulat Hussain

@media only screen and (max-width:1407px)and (min-width:1025px) {
selector{
right: -29px;
}
}

Phlox Theme & Template Resources By Daulat Hussain

@media only screen and (max-width:1378px)and (min-width:1025px) {
selector{
bottom: 17%;
}
}

Phlox Theme & Template Resources By Daulat Hussain

@media only screen and (max-width:1378px)and (min-width:1025px) {
selector{
bottom: 17%;
}
}

2. Section 2 Source ode For Ecommerce Website Template

Section 2 ecommerce website template by daulat hussain

Section 2

Phlox Theme & Template Resources By Daulat Hussain

selector:hover .elementor-column-wrap{
box-shadow: 0 20px 40px 0 rgba(178,178,178,0.86)!important;
transition: all 400ms ease-in-out 70ms;
}
selector .elementor-column-wrap{
transition: all 400ms ease-in-out 70ms;
border-radius:25px;
}

Phlox Theme & Template Resources By Daulat Hussain

@media only screen and (max-width:1346px)and (min-width:1025px) {
selector{
right: -2px;
min-width: 242px;
}
}

Phlox Theme & Template Resources By Daulat Hussain

@media screen and (max-width: 1617px) and (min-width: 1399px) {
selector .aux-modern-heading-description p{
font-size: 44px;
}
}
@media screen and (max-width: 1399px) and (min-width: 1025px) {
selector .aux-modern-heading-description p{
font-size: 3.1vw;
margin-top: -11px;
padding-bottom: 8px;
}
}

Phlox Theme & Template Resources By Daulat Hussain

selector .aux-button:hover .aux-text{
color: #000;

}

Phlox Theme & Template Resources By Daulat Hussain

selector:hover .elementor-column-wrap{
box-shadow: 0px 20px 40px 0px #ffe399;
}

Phlox Theme & Template Resources By Daulat Hussain

@media only screen and (max-width:1515px)and (min-width:1346px) {
selector{
top: 2%;
right: -111px;
min-width: 393px;
}
}
@media only screen and (max-width:1346px)and (min-width:1025px) {
selector{
min-width: 287px;
right: -81px;
}
}
@media only screen and (max-width:443px) {
selector{
min-width: 287px;
top: -29px;
}
}

Phlox Theme & Template Resources By Daulat Hussain


@media screen and (max-width: 1399px) and (min-width: 1025px) {
selector .aux-modern-heading-description p{
font-size: 3.1vw;
margin-top: -11px;
padding-bottom: 8px;
}
}

Phlox Theme & Template Resources By Daulat Hussain

selector .aux-button:hover .aux-text{
color: #fff!important;

}
@media screen and (max-width: 1289px) and (min-width: 1025px) {
selector{
margin-bottom: 10px;
}
}

Phlox Theme & Template Resources By Daulat Hussain

selector:hover .elementor-column-wrap{
box-shadow: 0px 20px 40px 0px rgba(244,44,55,.37);
}

Phlox Theme & Template Resources By Daulat Hussain

@media only screen and (max-width:443px) {
selector{
bottom: -28px;
}
}

Phlox Theme & Template Resources By Daulat Hussain

@media screen and (max-width: 1399px) and (min-width: 1025px) {
selector .aux-modern-heading-description p{
font-size: 47px;
}
}

Phlox Theme & Template Resources By Daulat Hussain

selector .aux-button:hover .aux-text{
color: #fff!important;
}

3. Section 3 Source ode For Ecommerce Website Template

section 3 of website template

Section 3

Phlox Theme & Template Resources By Daulat Hussain

selector:hover .elementor-column-wrap{
box-shadow: 0px 20px 40px 0px rgba(239,239,239,0.92);
}

Phlox Theme & Template Resources By Daulat Hussain

@media screen and (max-width: 1399px) and (min-width: 1025px) {
selector .aux-modern-heading-description p{
font-size: 47px;
margin-bottom:57px;
}
}

Phlox Theme & Template Resources By Daulat Hussain

@media only screen and (max-width:1368px)and (min-width:1025px) {
selector{
right: -17px;
bottom: -54px;
min-width: 202px;
max-width: 254px;
}
}
@media (max-width: 459px){
selector{
max-width: 50%!important;
}
}

Phlox Theme & Template Resources By Daulat Hussain

selector .aux-button:hover .aux-text{
color: #fff!important;
}

Phlox Theme & Template Resources By Daulat Hussain

selector:hover .elementor-column-wrap{
box-shadow: 0px 20px 40px 0px rgba(45,208,111,0.58);
}
selector .elementor-column-wrap {
overflow: hidden;
}

Phlox Theme & Template Resources By Daulat Hussain

@media screen and (max-width: 1399px) and (min-width: 1025px) {
selector .aux-modern-heading-description p{
font-size: 40px;
margin-top: -8px;
margin-bottom: 44px;
}
}

Phlox Theme & Template Resources By Daulat Hussain

selector .aux-button:hover .aux-text{
color: #fff!important;
}

Phlox Theme & Template Resources By Daulat Hussain

@media only screen and (max-width:1368px)and (min-width:1025px) {
selector{
right: -61px;
bottom: 0px;
min-width: 323px;
}
}

Phlox Theme & Template Resources By Daulat Hussain

selector:hover .elementor-column-wrap{
box-shadow: 0px 20px 40px 0px rgba(24,145,255,0.65);
}
selector .elementor-column-wrap {
overflow: hidden;
}

Phlox Theme & Template Resources By Daulat Hussain

@media screen and (max-width: 1399px) and (min-width: 1025px) {
selector .aux-modern-heading-description p{
font-size: 40px;
margin-top: -8px;
margin-bottom: 44px;
}
}

Phlox Theme & Template Resources By Daulat Hussain

selector .aux-button:hover .aux-text{
color: #fff!important;
}

Phlox Theme & Template Resources By Daulat Hussain

@media only screen and (max-width:1368px)and (min-width:1025px) {
selector{
right: -61px;
bottom: -35px;
min-width: 271px;
}
}

4. Feature Section 4 Source ode For Ecommerce Website Template

Phlox Theme & Template Resources By Daulat Hussain

Section 4

@media only screen and (max-width: 1025px) {
selector .aux-widget-text .aux-ico-pos-left{
flex-direction: column;
}
}
@media only screen and (max-width:1113px)and (min-width:1025px) {
selector .col-title{
font-size: 14px;
}
selector .col-subtitle{
font-size: 12px;
}
}
selector .aux-widget-advanced-text{
justify-content: center;
}

5. Feature Section Source ode For Ecommerce Website Template

Phlox Theme & Template Resources By Daulat Hussain

Section 5

selector .elementor-container:hover .elementor-section-boxed{
box-shadow: 0px 20px 40px 0px rgba(244,44,55,.37);
border-radius: 25px;
}

Phlox Theme & Template Resources By Daulat Hussain

@media screen and (max-width: 1368px) and (min-width: 1025px) {
selector{
max-width: 1000px;
left: -22px;
bottom: -108px;
}
}

Phlox Theme & Template Resources By Daulat Hussain

@media screen and (max-width: 1617px) and (min-width: 1025px) {
selector .elementor-element-populated{
padding: 9% 4% 5% 9%;
}
selector .aux-modern-heading-secondary{
font-size: 96px;
}
}

Phlox Theme & Template Resources By Daulat Hussain

@media screen and (max-width: 1617px) and (min-width: 1025px) {
selector .elementor-element-populated{
padding: 9% 4% 5% 9%;
}
selector .aux-modern-heading-secondary{
font-size: 96px;
}
}

Phlox Theme & Template Resources By Daulat Hussain

selector .aux-button:hover .aux-text{
color: #fff!important;
}

6. Source code For Ecommerce Website Template

Phlox Theme & Template Resources By Daulat Hussain

Recent Product

selector .woocommerce-Price-amount, selector .aux-recent-product-item .price ins{
font-weight: bold;
font-size: 20px;
color: var(–e-global-color-text);
float: inherit;
}
selector .woocommerce-loop-product__title{
margin-top: 19px;
transition: all .2s cubic-bezier(0.4, 0, 0.2, 1) 70ms;
}
selector .product:hover .woocommerce-loop-product__title{
color: var(–e-global-color-primary)!important;
font-weight: bold!important;
transition:all .2s cubic-bezier(0.4, 0, 0.2, 1) 70ms;
}
selector .product:hover .price{
transform: none;
opacity: 0;
transition: opacity 300ms ease-out !important;
}
selector .price{
transition: opacity 300ms 450ms ease-out !important;
}
selector .aux-recent-product-item .price ins{
padding-left: 12px;
}
selector .aux-recent-product-item .price del .woocommerce-Price-amount, selector .aux-recent-product-item .price del{
font-family: Montserrat;
font-weight: 500;
font-size: 16px;
color: var(–e-global-color-secondary);
}
selector .aux-widget-recent-products .aux-recent-product-item .button{
text-transform: capitalize;
font-weight: 400;
font-size: 15px;
color: #fff;
padding: 8px 25px;
background-color: var(–e-global-color-primary);
letter-spacing: -1px;
line-height: 19px;
position: absolute;
bottom: -7px;
left: 0;
opacity: 0;
transition: opacity 300ms 300ms ease-out !important;
}
selector .product{
position: relative;
overflow: hidden;
}
selector .product:hover .button {
transform: none;
opacity: 1;
transition: opacity 300ms 300ms ease-out !important;
}
selector .aux-widget-recent-products .aux-recent-product-item .onsale{
font-size: 13px;
font-weight: bold;
line-height: 47px;
text-align: center;
text-transform: capitalize;
color: #fff;
z-index: 1;
left: 4%;
background: var(–e-global-color-primary);
width: 48px;
height: 48px;
right: auto;
}
selector .aux-col {
padding-right: 26px;
padding-bottom: 25px;

}

@media only screen and (max-width:767px)and (min-width:526px) {
selector .aux-col{
padding-right: 20%;
padding-left: 19%;
}
}
selector .aux-star-rating{
display: none;
}

7. Section Source code For Ecommerce Website Template

Phlox Theme & Template Resources By Daulat Hussain

Section 7

selector .elementor-container:hover .elementor-section-boxed{
box-shadow: 0px 20px 40px 0px rgba(81,236,144,0.37);
border-radius: 25px;
}

Phlox Theme & Template Resources By Daulat Hussain

@media screen and (max-width: 1368px) and (min-width: 1025px) {
selector{
max-width: 63%;
left: 102px;
bottom: -82px;
}
}
@media screen and (max-width: 767px) {
selector, selector .aux-media-image{
margin: auto!important;
}
}

@media screen and (max-width:567px) {
selector{
bottom: 75%;
}
}

Phlox Theme & Template Resources By Daulat Hussain

@media screen and (max-width: 1617px) and (min-width: 1025px) {
selector .elementor-element-populated{
padding: 9% 4% 5% 9%;
}
selector .aux-modern-heading-secondary{
font-size: 96px;
max-width:250px;
}
}

Phlox Theme & Template Resources By Daulat Hussain

selector .aux-button:hover .aux-text{
color: #fff!important;
}

8. Blog Section Source code For Ecommerce Website Template

Phlox Theme & Template Resources By Daulat Hussain

Grid Section

selector .entry-content p{
max-width: 369px;
}
selector .aux-col:hover .entry-media{
box-shadow: 0 10px 50px rgba(178,178,178,0.76)!important;
transition: all 400ms ease-in-out 70ms;
border-radius: 20px;
}
selector .entry-media{
border-radius: 20px;
transition: all 400ms ease-in-out 70ms;
}

Phlox Header Code

Get Daily Up Date

Phlox Theme & Template Resources By Daulat Hussain