pushing first
This commit is contained in:
stitch
parent
5ed3148e2b
commit
3ce7fa2582
6
assets/bootstrap/css/bootstrap.min.css
vendored
Normal file
6
assets/bootstrap/css/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
6
assets/bootstrap/js/bootstrap.min.js
vendored
Normal file
6
assets/bootstrap/js/bootstrap.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
57
assets/css/filters.css
Normal file
57
assets/css/filters.css
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
.filtersMain {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
grid-gap: 10px;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filtersMainSec {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
grid-gap: 10px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filtersMainSecBox {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
grid-gap: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
.filtersMainSecBox {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.filtersMainSec.filtersMainSecAlt {
|
||||||
|
justify-content: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnMain.filtersMainSecBtn {
|
||||||
|
padding: 5px 15px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnMain.dropdownMainBtn.dropdownMainBtnfiltersMainSecBtn {
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnMain.paginationMainInsideBtn {
|
||||||
|
font-size: 24px;
|
||||||
|
padding: 10px;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0,0,0,0);
|
||||||
|
color: rgba(0,0,0,0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.inputWrapper.inputWrapperAlt.filtersMainSecBoxInput {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inputWrapper.inputWrapperAlt.filtersMainSecBoxInput > input {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
167
assets/css/footer.css
Normal file
167
assets/css/footer.css
Normal file
@ -0,0 +1,167 @@
|
|||||||
|
.BottomMain {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
background: white;
|
||||||
|
box-shadow: 0 0 8px 0 rgb(0,0,0,0.1);
|
||||||
|
border-top: solid 1px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.BottomMainInside {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-gap: 0px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.BottomMainInsideTop {
|
||||||
|
padding: 50px 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border-top: solid 1px rgba(255,255,255,0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
.BottomMainInsideTop {
|
||||||
|
padding: 25px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.BottomMainInsideBottom {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border-top: solid 1px rgba(255,255,255,0.05);
|
||||||
|
padding: 15px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.BottomMainInsideBottomInside {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: rgba(255,255,255,0.5);
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.BottomMainInsideBottomInside {
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.BottomMainInsideBottomInsideText {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
text-align: center;
|
||||||
|
white-space: nowrap;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.BottomMainInsideBottomInsideTextLink {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.BottomMainInsideTopInside {
|
||||||
|
width: 100%;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 0.75fr 1.5fr 0.75fr;
|
||||||
|
grid-gap: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
.BottomMainInsideTopInside {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-gap: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.BottomMainInsideTopInsideSec {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-gap: 25px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.BottomMainInsideTopInsideSecLogo {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 75px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.BottomMainInsideTopInsideSecMid {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
grid-gap: 15px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.BottomMainInsideTopInsideSecMidLink {
|
||||||
|
transition: ease 0.2s;
|
||||||
|
padding: 10px 20px;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-weight: 500;
|
||||||
|
flex-grow: 1;
|
||||||
|
color: #636363;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.BottomMainInsideTopInsideSecMidLink:hover {
|
||||||
|
transition: ease 0.2s;
|
||||||
|
color: #ffffff;
|
||||||
|
background: #ff9900;
|
||||||
|
}
|
||||||
|
|
||||||
|
.BottomMainInsideTopInsideSecRight {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-gap: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.BottomMainInsideTopInsideSecRightText {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.BottomMainInsideTopInsideSecRightSocials {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
grid-gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnMain.BottomMainInsideTopInsideSecRightSocialsBtn {
|
||||||
|
transition: ease 0.2s;
|
||||||
|
padding: 10px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnMain.BottomMainInsideTopInsideSecRightSocialsBtn > img {
|
||||||
|
opacity: 0.75;
|
||||||
|
filter: brightness(100%) contrast(100%) saturate(0%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnMain.BottomMainInsideTopInsideSecRightSocialsBtn:hover > img {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnMain.BottomMainInsideTopInsideSecRightSocialsBtn:active > img {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.BottomMainInsideTopInsideSecLeft {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
grid-gap: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
147
assets/css/listings.css
Normal file
147
assets/css/listings.css
Normal file
@ -0,0 +1,147 @@
|
|||||||
|
.listingGrid {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
grid-gap: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
.listingGrid {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.listingGridSec {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listingGridSecBox {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listingGridSec.listingGridSecSide {
|
||||||
|
display: none;
|
||||||
|
min-width: 250px;
|
||||||
|
max-width: 250px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
.listingGridSec.listingGridSecSide {
|
||||||
|
min-width: unset;
|
||||||
|
max-width: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.listingGridSec.listingGridSecSide.listingGridSecSideActive {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listingGridSec.listingGridSecSideBody {
|
||||||
|
grid-gap: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listingGridSecBox.listingGridSecSideBox {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
.listingGridSecBox.listingGridSecSideBox {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.listingGridSecSideBoxList {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-gap: 0px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 0 4px 0 rgb(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
.listingGridSecSideBoxList {
|
||||||
|
width: 100%;
|
||||||
|
max-width: calc(50% - 5px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
.listingGridSecSideBoxList {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnMain.listingGridSecSideBoxListBtn {
|
||||||
|
background: white;
|
||||||
|
color: rgba(0,0,0,0.75);
|
||||||
|
justify-content: space-between;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
grid-gap: 10px;
|
||||||
|
border-radius: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnMain.listingGridSecSideBoxListBtn:hover {
|
||||||
|
background: white;
|
||||||
|
color: rgba(0,0,0,0.75);
|
||||||
|
border-radius: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnMain.listingGridSecSideBoxListBtn:hover > span {
|
||||||
|
padding: 0 0 0 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnMain.listingGridSecSideBoxListBtn:hover > i {
|
||||||
|
}
|
||||||
|
|
||||||
|
.listingGridSecSideBoxListItems {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-gap: 10px;
|
||||||
|
max-height: 200px;
|
||||||
|
overflow: auto;
|
||||||
|
border-top: solid 1px rgba(0,0,0,0.1);
|
||||||
|
height: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listingGridSecSideBoxListItems.listingGridSecSideBoxListItemsActive {
|
||||||
|
padding: 10px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listingGridSecSideBoxListItemsItem {
|
||||||
|
transition: ease 0.4s;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listingGridSecSideBoxListBtnText {
|
||||||
|
transition: padding ease 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnMainIcon.listingGridSecSideBoxListBtnIcon {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listingGridSecSideInside {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-gap: 10px;
|
||||||
|
position: sticky;
|
||||||
|
top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.containerMain.containerMainUnlocked {
|
||||||
|
max-width: unset;
|
||||||
|
}
|
||||||
|
|
||||||
201
assets/css/nav.css
Normal file
201
assets/css/nav.css
Normal file
@ -0,0 +1,201 @@
|
|||||||
|
.TopMain {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding: 15px 0;
|
||||||
|
background: white;
|
||||||
|
box-shadow: 0 0 8px 0 rgb(0,0,0,0.1);
|
||||||
|
border-bottom: solid 1px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
.TopMain {
|
||||||
|
padding: 15px 0 5px 0;
|
||||||
|
border-bottom: solid 1px rgba(255,255,255,0.05);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navMain {
|
||||||
|
width: 100%;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 0.5fr 1.5fr 0.5fr;
|
||||||
|
grid-gap: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
.navMain {
|
||||||
|
width: 100%;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 2fr 0.75fr 0.25fr;
|
||||||
|
grid-gap: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navMainSec {
|
||||||
|
width: 100%;
|
||||||
|
flex-grow: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
.navMainSec {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navMainSecLogo {
|
||||||
|
transition: ease 0.4s;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
grid-gap: 20px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navMainSecLogo:hover > .navMainSecLogoText {
|
||||||
|
transition: ease 0.4s;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navMainSecLogo:hover > .navMainSecLogoImgWrapper > .navMainSecLogoImg {
|
||||||
|
transition: ease 0.4s;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navMainSecLogo:hover > .navMainSecLogoImgWrapper > .navMainSecLogoImgAlt {
|
||||||
|
transition: ease 0.4s;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navMainSecLogoImg {
|
||||||
|
transition: ease 0.4s;
|
||||||
|
position: absolute;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navMainSecLogoImgWrapper {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navMainSecLogoText {
|
||||||
|
transition: ease 0.4s;
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: 24px;
|
||||||
|
opacity: 0.5;
|
||||||
|
color: #ff9900;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navMainSecLinks {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
grid-gap: 20px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
.navMainSecLinks {
|
||||||
|
overflow-x: scroll;
|
||||||
|
align-items: start;
|
||||||
|
justify-content: start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navMainSecLinksLink {
|
||||||
|
font-size: 20px;
|
||||||
|
padding: 10px 15px;
|
||||||
|
white-space: nowrap;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navMainSecLinksLink:hover {
|
||||||
|
transition: ease 0.2s;
|
||||||
|
color: #ff9900;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
.navMainSecLinksLink {
|
||||||
|
padding: 15px 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navMainSecLinksLinkWrapper {
|
||||||
|
transition: ease 0.2s;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-weight: 400;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navMainSecLinksLinkWrapper:hover {
|
||||||
|
transition: ease 0.2s;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navMainSecLinksSocial {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: end;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
.navMainSecLinksSocial {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navMainSecLinksSocialLink {
|
||||||
|
transition: ease 0.2s;
|
||||||
|
padding: 15px;
|
||||||
|
opacity: 0.75;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
.navMainSecLinksSocialLink {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navMainSecLinksSocialLink:hover {
|
||||||
|
transition: ease 0.2s;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navMainSecLinksSocialLinkInside {
|
||||||
|
width: 25px;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navMainSecLogoImg.navMainSecLogoImgAlt {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
.navMainSec.navMainSecFirst {
|
||||||
|
grid-column-start: 1;
|
||||||
|
grid-column-end: 4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
.navMainSec.navMainSecMid {
|
||||||
|
grid-column-start: 1;
|
||||||
|
grid-column-end: 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
54
assets/css/pagination.css
Normal file
54
assets/css/pagination.css
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
.paginationMain {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paginationMainInside {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 500px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
grid-gap: 10px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paginationMainInsideDivider {
|
||||||
|
width: 1px;
|
||||||
|
height: 35px;
|
||||||
|
background: rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.paginationMainInsideNumbers {
|
||||||
|
flex-grow: 1;
|
||||||
|
overflow-x: auto;
|
||||||
|
overflow-y: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
grid-gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paginationMainInsideNumbers::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnMain.paginationMainInsideNumbersBtn {
|
||||||
|
background: rgba(255,153,0,0);
|
||||||
|
color: rgba(0,0,0,0.5);
|
||||||
|
padding: 10px 20px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnMain.paginationMainInsideNumbersBtn:hover {
|
||||||
|
background: #ff9900;
|
||||||
|
color: rgb(255,255,255);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnMain.paginationMainInsideNumbersBtn.paginationMainInsideNumbersBtnActive {
|
||||||
|
background: rgba(255,153,0,0.85);
|
||||||
|
color: rgb(255,255,255);
|
||||||
|
}
|
||||||
|
|
||||||
204
assets/css/productCard.css
Normal file
204
assets/css/productCard.css
Normal file
@ -0,0 +1,204 @@
|
|||||||
|
.productCardMain {
|
||||||
|
transition: ease 0.4s;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-gap: 0px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: white;
|
||||||
|
box-shadow: 0 0 4px 0 rgba(0,0,0,0.05);
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productCardMain:hover {
|
||||||
|
box-shadow: 0 0 16px 0 rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.productCardMainInside {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-gap: 15px;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productCardMainInsideTop {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
background: rgba(0,0,0,0.1);
|
||||||
|
overflow: hidden;
|
||||||
|
padding-top: 56.25%;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productCardMain:hover > .productCardMainInside > .productCardMainInsideTop {
|
||||||
|
box-shadow: 0 0 6px 0 rgba(0,0,0,0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.productCardMainInsideMid {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-gap: 5px;
|
||||||
|
padding: 0 10px;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productCardMainInsideBot {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
grid-gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnMain.productCardMainInsideBotBtn {
|
||||||
|
flex-grow: 1;
|
||||||
|
padding: 8px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnMain.productCardMainInsideBotBtn:hover {
|
||||||
|
transform: scale(1.01);
|
||||||
|
}
|
||||||
|
|
||||||
|
.productCardMainInsideMidTitle {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 21px;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productCardMainInsideMidText {
|
||||||
|
font-size: 14px;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
-webkit-line-clamp: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productCardMain:hover > .productCardMainInside > .productCardMainInsideTop > .productCardMainInsideTopPicture {
|
||||||
|
transform: scale(1.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
.productCardMainInsideTopPicture {
|
||||||
|
transition: ease 0.6s;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productCardMainInsideTopPictureImg {
|
||||||
|
object-fit: cover;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prudctCardMainInsideTopIcon {
|
||||||
|
opacity: 0.25;
|
||||||
|
position: absolute;
|
||||||
|
font-size: 42px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productCardMainInsideTopIcon {
|
||||||
|
opacity: 0.25;
|
||||||
|
position: absolute;
|
||||||
|
font-size: 42px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productCardMainInsideTopVideo {
|
||||||
|
transition: ease 0.6s;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
opacity: 0;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productCardMain:hover > .productCardMainInside > .productCardMainInsideTop > .productCardMainInsideTopVideo {
|
||||||
|
transform: scale(1.02);
|
||||||
|
opacity: 1;
|
||||||
|
box-shadow: 0 0 8px 0 rgba(0,0,0,0.91);
|
||||||
|
}
|
||||||
|
|
||||||
|
.productCardMainInsideTopVideoClip {
|
||||||
|
object-fit: cover;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 2;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productCardMainInsideTopDetailsTagIcon {
|
||||||
|
opacity: 0.5;
|
||||||
|
max-width: 15px;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productCardMainInsideStore {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
grid-gap: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productCardMainInsideStoreLink {
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: rgba(255,153,0,0);
|
||||||
|
color: rgba(0,0,0,0.5);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
grid-gap: 5px;
|
||||||
|
align-items: center;
|
||||||
|
border: solid 1px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.productCardMainInsideStoreLink:hover {
|
||||||
|
background: rgba(255,153,0,0.85);
|
||||||
|
color: rgba(255,255,255,0.85);
|
||||||
|
transform: scale(1.01);
|
||||||
|
border: solid 1px rgba(0,0,0,0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.productCardMainInsideStoreLinkIcon {
|
||||||
|
max-width: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productCardMainInsideStoreLinkText {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productCardMainInsideStoreLinkDivider {
|
||||||
|
width: 1px;
|
||||||
|
height: 100%;
|
||||||
|
max-height: 15px;
|
||||||
|
background: rgba(255,255,255,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
212
assets/css/store.css
Normal file
212
assets/css/store.css
Normal file
@ -0,0 +1,212 @@
|
|||||||
|
.storeMain {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-gap: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeMainTop {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
padding-top: 35%;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: rgba(0,0,0,0.05);
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 0 4px 0 rgb(0,0,0,0.5);
|
||||||
|
/*border: solid 1px rgba(0,0,0,0.1);*/
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeMainMid {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-gap: 25px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeMainMidInside {
|
||||||
|
width: 100%;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
grid-gap: 25px;
|
||||||
|
margin-top: -50px;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 10px;
|
||||||
|
background: rgba(255,255,255,0.75);
|
||||||
|
z-index: 1;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
box-shadow: 0 0 4px 0 rgb(0,0,0,0.2);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
.storeMainMidInside {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeMainTopImg {
|
||||||
|
object-fit: cover;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeMainMidInsideSec {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
grid-gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeMainMidInsideSec.storeMainMidInsideSecAlt {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeMainMidInsideSecProfilePic {
|
||||||
|
height: 125px;
|
||||||
|
width: 125px;
|
||||||
|
min-height: 125px;
|
||||||
|
min-width: 125px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background: rgba(0,0,0,0.1);
|
||||||
|
border-radius: 6px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 0 6px 0 rgb(0,0,0,0.25);
|
||||||
|
border: solid 4px white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeMainMidInsideSecProfileDetails {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-gap: 5px;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeMainMidInsideSecProfilePicImg {
|
||||||
|
object-fit: cover;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeMainMidInsideSecProfileDetailsName {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 21px;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeMainMidInsideSecProfileDetailsBio {
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeMainMidInsideSecProfilePop {
|
||||||
|
justify-self: center;
|
||||||
|
align-self: end;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeMainMidInsideSecWoT {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
grid-gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
.storeMainMidInsideSecWoT {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeMainMidInsideSecAction {
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeMainMidInsideSecWoTSec {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-gap: 5px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeMainMidInsideSecWoTSecPeople {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
grid-gap: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeMainMidInsideSecWoTSecPeoplePerson {
|
||||||
|
transition: ease 0.3s;
|
||||||
|
min-width: 40px;
|
||||||
|
max-width: 40px;
|
||||||
|
min-height: 40px;
|
||||||
|
min-width: 40px;
|
||||||
|
background: rgba(255,255,255,0.75);
|
||||||
|
backdrop-filter: blur(5px);
|
||||||
|
border-radius: 100%;
|
||||||
|
border: solid 3px white;
|
||||||
|
box-shadow: 0 0 4px 0 rgb(0,0,0,0.5);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-left: -20px;
|
||||||
|
color: rgba(0,0,0,0.5);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeMainMidInsideSecWoTSecPeoplePerson:first-child {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeMainMidInsideSecWoTSecPeoplePerson:hover {
|
||||||
|
margin: 0 20px 0 0;
|
||||||
|
transform: translateY(-5px);
|
||||||
|
border: solid 3px rgb(255,153,0);
|
||||||
|
box-shadow: 0 0 0px 0 rgb(0,0,0,0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeMainMidInsideSecWoTSecPeoplePersonImg {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeMainMidInsideSecUser {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
grid-gap: 10px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 5px 15px;
|
||||||
|
}
|
||||||
|
|
||||||
279
assets/css/storeCard.css
Normal file
279
assets/css/storeCard.css
Normal file
@ -0,0 +1,279 @@
|
|||||||
|
.storeCardMain {
|
||||||
|
transition: ease 0.4s;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-gap: 0px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: white;
|
||||||
|
box-shadow: 0 0 4px 0 rgba(0,0,0,0.05);
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeCardMain:hover {
|
||||||
|
box-shadow: 0 0 16px 0 rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeCardMainInside {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeCardMainInsideTop {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
background: rgba(0,0,0,0.1);
|
||||||
|
overflow: hidden;
|
||||||
|
padding-top: 56.25%;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeCardMainInsideTop:hover > .storeCardMainInsideTopProducts {
|
||||||
|
padding: 15px;
|
||||||
|
opacity: 1;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeCardMainInsideBot {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
grid-gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnMain.storeCardMainInsideBotBtn {
|
||||||
|
flex-grow: 1;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnMain.storeCardMainInsideBotBtn:hover {
|
||||||
|
transform: scale(1.01);
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeCardMainInsideTopPicture {
|
||||||
|
transition: ease 0.6s;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeCardMainInsideTopPictureImg {
|
||||||
|
object-fit: cover;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeCardMainInsideTopIcon {
|
||||||
|
opacity: 0.25;
|
||||||
|
position: absolute;
|
||||||
|
font-size: 42px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeCardMainInsideTopProducts {
|
||||||
|
transition: ease 0.6s;
|
||||||
|
position: absolute;
|
||||||
|
top: auto;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
grid-gap: 10px;
|
||||||
|
overflow-x: auto;
|
||||||
|
overflow-y: hidden;
|
||||||
|
z-index: 2;
|
||||||
|
background: rgba(0,0,0,0.5);
|
||||||
|
backdrop-filter: blur(15px);
|
||||||
|
padding: 0px;
|
||||||
|
height: 0;
|
||||||
|
border-radius: 6px;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeCardMainInsideTopProducts::-webkit-scrollbar {
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
.storeCardMainInsideTopProducts::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeCardMainInsideTopProducts::-webkit-scrollbar-track {
|
||||||
|
background: rgba(255,255,255,0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeCardMainInsideTopProducts::-webkit-scrollbar-thumb {
|
||||||
|
background: rgba(255,255,255,0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeCardMainInsideTopProductsPicture {
|
||||||
|
width: 100%;
|
||||||
|
padding-top: calc(56.25% - 30px);
|
||||||
|
min-width: calc((16 / 9) / 2 * 100%);
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 0 8px 0 rgb(0,0,0,0.1);
|
||||||
|
background: rgba(0,0,0,0.1);
|
||||||
|
border: solid 2px rgba(255,255,255,0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeCardMainInsideTopProductsPicture:hover {
|
||||||
|
transform: scale(1.01);
|
||||||
|
border: solid 2px #FF9900;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeCardMainInsideTopProductsPictureImg {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
object-fit: cover;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeCardMainInsideTopProductsPictureDetails {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(255,255,255,0));
|
||||||
|
justify-content: end;
|
||||||
|
color: rgba(255,255,255,0.75);
|
||||||
|
padding: 5px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeCardMainInsideTopProductsPictureDetailsTitle {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeCardMainInsideTopProductsPictureDetailsPrice {
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
right: 5px;
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
background: rgba(0,0,0,0.5);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border: solid 1px rgba(255,255,255,0.1);
|
||||||
|
border-radius: 5px;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeCardMain:hover > .storeCardMainInside > .storeCardMainInsideTop > .storeCardMainInsideTopPicture {
|
||||||
|
transform: scale(1.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeCardMainInsideMidTitle {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 21px;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeCardMainInsideMidText {
|
||||||
|
font-size: 14px;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
-webkit-line-clamp: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeCardMainInsideTopDetails {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
padding: 10px 8px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeCardMainInsideTopDetailsTop {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
grid-gap: 10px;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeCardMainInsideTopDetailsBottom {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
grid-gap: 10px;
|
||||||
|
justify-content: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeCardMainInsideTopDetailsTag {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
grid-gap: 5px;
|
||||||
|
max-width: 145px;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 4px 8px;
|
||||||
|
z-index: 1;
|
||||||
|
background: rgba(255,255,255,0.5);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border: solid 1px rgba(255,255,255,0.2);
|
||||||
|
box-shadow: 0 0 8px 0 rgb(0,0,0,0.2);
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeCardMainInsideTopDetailsTag.storeCardMainInsideTopDetailsTagHidden {
|
||||||
|
opacity: 0;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeCardMainInsideTopDetailsTagIcon {
|
||||||
|
opacity: 0.5;
|
||||||
|
max-width: 15px;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeCardMainInsideTopDetailsTagDivider {
|
||||||
|
height: 100%;
|
||||||
|
width: 1px;
|
||||||
|
background: rgba(0,0,0,0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeCardMainInsideTopDetailsTagText {
|
||||||
|
color: rgba(0,0,0,0.5);
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 800;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeCardMain:hover > .storeCardMainInside > .storeCardMainInsideTop {
|
||||||
|
box-shadow: 0 0 6px 0 rgba(0,0,0,0.5);
|
||||||
|
}
|
||||||
|
|
||||||
448
assets/css/styles.css
Normal file
448
assets/css/styles.css
Normal file
@ -0,0 +1,448 @@
|
|||||||
|
:root {
|
||||||
|
--bs-font-sans-serif: usnet;
|
||||||
|
--bs-font-monospace: unset;
|
||||||
|
--bs-body-font-family: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: rgb(222,222,222);
|
||||||
|
border-right: solid 1px rgba(0,0,0,0.05);
|
||||||
|
border-left: solid 1px rgba(0,0,0,0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: rgba(0,0,0,0.1);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: rgba(255,153,0,0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.htmlMain {
|
||||||
|
Background: #EDEDED;
|
||||||
|
min-height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
font-family: 'Archivo';
|
||||||
|
}
|
||||||
|
|
||||||
|
.bodyMain {
|
||||||
|
background: unset;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
flex-grow: 1;
|
||||||
|
min-height: 100vh;
|
||||||
|
position: relative;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.5;
|
||||||
|
word-break: break-word;
|
||||||
|
color: #434343;
|
||||||
|
font-family: 'Archivo';
|
||||||
|
}
|
||||||
|
|
||||||
|
.secMain {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding: 100px 0;
|
||||||
|
grid-gap: 50px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secMain.secMainAlt {
|
||||||
|
padding: 50px 0;
|
||||||
|
grid-gap: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
.secMain.secMainAlt {
|
||||||
|
padding: 25px 0;
|
||||||
|
grid-gap: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
.secMain {
|
||||||
|
padding: 25px 0;
|
||||||
|
grid-gap: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.containerMain {
|
||||||
|
max-width: 1400px;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: end;
|
||||||
|
padding: 0 10px 0 10px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
transition: ease 0.2s;
|
||||||
|
color: unset;
|
||||||
|
text-decoration: unset;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
transition: ease 0.2s;
|
||||||
|
color: unset;
|
||||||
|
text-decoration: unset;
|
||||||
|
color: #FF9900;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnMain {
|
||||||
|
transition: ease 0.4s;
|
||||||
|
background: rgba(255,153,0,0.85);
|
||||||
|
border: unset;
|
||||||
|
outline: unset;
|
||||||
|
color: rgba(255,255,255,0.85);
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 18px;
|
||||||
|
transform: scale(1);
|
||||||
|
white-space: nowrap;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
grid-gap: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnMain:hover {
|
||||||
|
background: #ff9900;
|
||||||
|
color: rgb(255,255,255);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnMain:active {
|
||||||
|
transition: ease 0.4s;
|
||||||
|
background: rgba(255,255,255,0.05);
|
||||||
|
color: rgba(255,255,255,0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnMain.btnMainAlt:hover {
|
||||||
|
background: #434343;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnMain.btnMainAlt:active {
|
||||||
|
background: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnMainImgMain {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MidMain {
|
||||||
|
width: 100%;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secMainInside {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-gap: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
.secMainInside {
|
||||||
|
grid-gap: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.secMainInsideGrid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-gap: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.secMainInsideGrid {
|
||||||
|
grid-gap: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.secMainInsideGrid.secMainInsideGrid2 {
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
.secMainInsideGrid.secMainInsideGrid2 {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.secMainInsideGrid.secMainInsideGrid3 {
|
||||||
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
.secMainInsideGrid.secMainInsideGrid3 {
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 400px) {
|
||||||
|
.secMainInsideGrid.secMainInsideGrid3 {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.secMainInsideGrid.secMainInsideGrid4 {
|
||||||
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
.secMainInsideGrid.secMainInsideGrid4 {
|
||||||
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.secMainInsideGrid.secMainInsideGrid4 {
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
.secMainInsideGrid.secMainInsideGrid4 {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.secMainInsideGrid.secMainInsideGrid5 {
|
||||||
|
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secMainInsideGrid.secMainInsideGrid5 {
|
||||||
|
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
.secMainInsideGrid.secMainInsideGrid5 {
|
||||||
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.secMainInsideGrid.secMainInsideGrid5 {
|
||||||
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
.secMainInsideGrid.secMainInsideGrid5 {
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 400px) {
|
||||||
|
.secMainInsideGrid.secMainInsideGrid5 {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeCardMainInsideMid {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-gap: 5px;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secMainInsideHead {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secMainInsideHeadHeading {
|
||||||
|
}
|
||||||
|
|
||||||
|
.secMainInsideHeadText {
|
||||||
|
}
|
||||||
|
|
||||||
|
.secMainInsideAction {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
grid-gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnMain.secMainInsideActionBtn {
|
||||||
|
background: rgba(255,153,0,0);
|
||||||
|
color: rgba(0,0,0,0.5);
|
||||||
|
border: solid 1px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnMain.secMainInsideActionBtn:hover {
|
||||||
|
background: rgba(255,153,0,0.85);
|
||||||
|
color: rgb(255,255,255);
|
||||||
|
border: solid 1px rgba(0,0,0,0);
|
||||||
|
padding: 10px 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdownMain {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-gap: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnMain.dropdownMainBtn {
|
||||||
|
padding: 5px 15px;
|
||||||
|
grid-gap: 10px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu.dropdownMainMenu {
|
||||||
|
background: #ffffff;
|
||||||
|
border: solid 1px rgba(0,0,0,0.1);
|
||||||
|
box-shadow: 0 0 8px 0 rgb(0,0,0,0.1);
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu.dropdownMainMenu > *:last-child {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdownMainMenuItem {
|
||||||
|
transition: ease 0.4s;
|
||||||
|
border: solid 1px rgba(0,0,0,0.1);
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: rgba(0,0,0,0.65);
|
||||||
|
margin: 0 0 5px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdownMainMenuItem:hover {
|
||||||
|
background: #ff9900;
|
||||||
|
color: rgb(255,255,255);
|
||||||
|
border: solid 1px rgba(0,0,0,0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.inputWrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
position: relative;
|
||||||
|
border: solid 1px rgba(0,0,0,0.1);
|
||||||
|
border-radius: 5px;
|
||||||
|
grid-gap: 0px;
|
||||||
|
background: white;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inputMain {
|
||||||
|
transition: ease 0.4s;
|
||||||
|
border: unset;
|
||||||
|
outline: unset;
|
||||||
|
padding: 5px 10px;
|
||||||
|
background: rgba(0,0,0,0.05);
|
||||||
|
color: rgba(0,0,0,0.85);
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inputMain:focus {
|
||||||
|
background: rgba(0,0,0,0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.inputWrapper.inputWrapperAlt {
|
||||||
|
outline: solid 5px white;
|
||||||
|
margin: 2px;
|
||||||
|
border: unset;
|
||||||
|
box-shadow: 0 0 4px 5px rgb(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnMain.inputMainBtn {
|
||||||
|
transition: ease 0.2s;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-radius: 0px;
|
||||||
|
box-shadow: unset;
|
||||||
|
color: rgba(0,0,0,0.75);
|
||||||
|
background: rgba(255,153,0,0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnMainIcon {
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnMain.inputMainBtn:hover {
|
||||||
|
color: white;
|
||||||
|
background: #ff9900;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkboxWrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
grid-gap: 10px;
|
||||||
|
justify-content: start;
|
||||||
|
align-items: center;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border: solid 1px rgba(0,0,0,0.1);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-label {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inputMainLabel {
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkboxWrapperCheck {
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkboxWrapper.checkboxWrapperFancy {
|
||||||
|
transition: ease 0.3s;
|
||||||
|
background: rgba(255,153,0,0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkboxWrapper.checkboxWrapperFancy.checkboxWrapperFancyActive {
|
||||||
|
background: #ff9900;
|
||||||
|
border: solid 1px rgba(0,0,0,0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkboxWrapper.checkboxWrapperFancy.checkboxWrapperFancyActive > label {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkboxWrapperCheckRadio {
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeMainMidInsideSec.storeMainMidInsideSecProfile {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
.storeMainMidInsideSec.storeMainMidInsideSecProfile {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
7
assets/js/bs-init.js
Normal file
7
assets/js/bs-init.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
|
||||||
|
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bss-tooltip]'));
|
||||||
|
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||||
|
return new bootstrap.Tooltip(tooltipTriggerEl);
|
||||||
|
})
|
||||||
|
}, false);
|
||||||
29
assets/js/categoryDrop.js
Normal file
29
assets/js/categoryDrop.js
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
document.querySelectorAll('.listingGridSecSideBoxListBtn').forEach(button => {
|
||||||
|
// Find the next sibling element with the class listingGridSecSideBoxListItems
|
||||||
|
const nextItem = button.nextElementSibling;
|
||||||
|
|
||||||
|
// Check if the next sibling exists and has the correct class
|
||||||
|
if (nextItem && nextItem.classList.contains('listingGridSecSideBoxListItems')) {
|
||||||
|
// Check if the active class is already present
|
||||||
|
const isActive = nextItem.classList.contains('listingGridSecSideBoxListItemsActive');
|
||||||
|
|
||||||
|
// Find the icon element inside the button
|
||||||
|
const icon = button.querySelector('.listingGridSecSideBoxListBtnIcon');
|
||||||
|
|
||||||
|
// Set the initial rotation based on the active state
|
||||||
|
if (icon) {
|
||||||
|
icon.style.transform = isActive ? 'rotate(180deg)' : 'rotate(0deg)';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add click event listener
|
||||||
|
button.addEventListener('click', function() {
|
||||||
|
// Toggle the active class
|
||||||
|
const isActiveNow = nextItem.classList.toggle('listingGridSecSideBoxListItemsActive');
|
||||||
|
|
||||||
|
// Rotate the icon based on the active state
|
||||||
|
if (icon) {
|
||||||
|
icon.style.transform = isActiveNow ? 'rotate(180deg)' : 'rotate(0deg)';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
52
assets/js/checkboxBetter.js
Normal file
52
assets/js/checkboxBetter.js
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
// Function to update the parent class based on the checkbox/radio state
|
||||||
|
function updateParentClass(element) {
|
||||||
|
const parent = element.closest('.checkboxWrapper');
|
||||||
|
if (parent) {
|
||||||
|
if (element.checked) {
|
||||||
|
if (parent.classList.contains('checkboxWrapperFancy')) {
|
||||||
|
parent.classList.add('checkboxWrapperFancyActive');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (parent.classList.contains('checkboxWrapperFancyActive')) {
|
||||||
|
parent.classList.remove('checkboxWrapperFancyActive');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function to handle radio button toggling
|
||||||
|
function handleRadioToggle(radio) {
|
||||||
|
const parent = radio.closest('.checkboxWrapper');
|
||||||
|
const radios = document.querySelectorAll('input.checkboxWrapperCheckRadio');
|
||||||
|
|
||||||
|
radios.forEach(r => {
|
||||||
|
const parentRadio = r.closest('.checkboxWrapper');
|
||||||
|
if (parentRadio && r !== radio) {
|
||||||
|
if (parentRadio.classList.contains('checkboxWrapperFancyActive')) {
|
||||||
|
parentRadio.classList.remove('checkboxWrapperFancyActive');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
updateParentClass(radio);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Select all checkboxes and radio buttons
|
||||||
|
const checkboxes = document.querySelectorAll('input.checkboxWrapperCheck[type="checkbox"]');
|
||||||
|
const radios = document.querySelectorAll('input.checkboxWrapperCheckRadio[type="radio"]');
|
||||||
|
|
||||||
|
// Add event listeners for checkboxes
|
||||||
|
checkboxes.forEach(checkbox => {
|
||||||
|
checkbox.addEventListener('change', function() {
|
||||||
|
updateParentClass(this);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add event listeners for radio buttons
|
||||||
|
radios.forEach(radio => {
|
||||||
|
radio.addEventListener('change', function() {
|
||||||
|
handleRadioToggle(this);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
42
assets/js/expandList.js
Normal file
42
assets/js/expandList.js
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
document.getElementById('expandListTrigger').addEventListener('click', function() {
|
||||||
|
const expandable = document.getElementById('listingExpandable');
|
||||||
|
const gridElement = expandable.querySelector('.secMainInsideGrid');
|
||||||
|
const triggerButton = document.getElementById('expandListTrigger'); // Get the trigger button
|
||||||
|
|
||||||
|
// Toggle the class
|
||||||
|
expandable.classList.toggle('containerMainUnlocked');
|
||||||
|
|
||||||
|
// Check if the class is now present
|
||||||
|
if (expandable.classList.contains('containerMainUnlocked')) {
|
||||||
|
// Calculate the number of columns based on the window width
|
||||||
|
const minWidth = 1500;
|
||||||
|
const additionalWidth = Math.floor((window.innerWidth - minWidth) / 500);
|
||||||
|
const columns = Math.max(1, additionalWidth + 5); // Ensure at least 1fr
|
||||||
|
|
||||||
|
// Set the grid template columns style
|
||||||
|
gridElement.style.gridTemplateColumns = `repeat(${columns}, 1fr)`;
|
||||||
|
|
||||||
|
// Change the text to "Collapse"
|
||||||
|
triggerButton.childNodes[1].textContent = 'Collapse'; // Change the text node
|
||||||
|
} else {
|
||||||
|
// Reset the style when toggled off
|
||||||
|
gridElement.style.gridTemplateColumns = '';
|
||||||
|
|
||||||
|
// Change the text to "Expand"
|
||||||
|
triggerButton.childNodes[1].textContent = 'Expand'; // Change the text node
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Optional: Update the grid layout on window resize
|
||||||
|
window.addEventListener('resize', function() {
|
||||||
|
const expandable = document.getElementById('listingExpandable');
|
||||||
|
const gridElement = expandable.querySelector('.secMainInsideGrid');
|
||||||
|
|
||||||
|
if (expandable.classList.contains('containerMainUnlocked')) {
|
||||||
|
const minWidth = 1500;
|
||||||
|
const additionalWidth = Math.floor((window.innerWidth - minWidth) / 500);
|
||||||
|
const columns = Math.max(1, additionalWidth + 5); // Ensure at least 1fr
|
||||||
|
|
||||||
|
gridElement.style.gridTemplateColumns = `repeat(${columns}, 1fr)`;
|
||||||
|
}
|
||||||
|
});
|
||||||
4
assets/js/toggleCategories.js
Normal file
4
assets/js/toggleCategories.js
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
document.getElementById('categoriesViewTrigger').addEventListener('click', function() {
|
||||||
|
const listingGrid = document.querySelector('.listingGridSecSide');
|
||||||
|
listingGrid.classList.toggle('listingGridSecSideActive');
|
||||||
|
});
|
||||||
97
productPage.html
Normal file
97
productPage.html
Normal file
@ -0,0 +1,97 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html class="htmlMain" lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||||
|
<title>Cheems Market</title>
|
||||||
|
<meta name="twitter:title" content="Cheems Market">
|
||||||
|
<meta property="og:title" content="Cheems Market">
|
||||||
|
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
|
||||||
|
<link rel="stylesheet" href="assets/css/filters.css">
|
||||||
|
<link rel="stylesheet" href="assets/css/footer.css">
|
||||||
|
<link rel="stylesheet" href="assets/css/listings.css">
|
||||||
|
<link rel="stylesheet" href="assets/css/nav.css">
|
||||||
|
<link rel="stylesheet" href="assets/css/pagination.css">
|
||||||
|
<link rel="stylesheet" href="assets/css/productCard.css">
|
||||||
|
<link rel="stylesheet" href="assets/css/store.css">
|
||||||
|
<link rel="stylesheet" href="assets/css/storeCard.css">
|
||||||
|
<link rel="stylesheet" href="assets/css/styles.css">
|
||||||
|
<link rel="preconnect" href="https://fonts.bunny.net">
|
||||||
|
<link href="https://fonts.bunny.net/css?family=roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet" />
|
||||||
|
|
||||||
|
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="bodyMain">
|
||||||
|
<div class="TopMain">
|
||||||
|
<div class="containerMain">
|
||||||
|
<div class="navMain">
|
||||||
|
<div class="navMainSec navMainSecFirst"><a class="navMainSecLogo" href="./">
|
||||||
|
<div class="navMainSecLogoImgWrapper"><img class="navMainSecLogoImg" src="Nostr Dev Logo Mark W.svg"><img class="navMainSecLogoImg navMainSecLogoImgAlt" src="Nostr Dev Logo Mark.svg"></div>
|
||||||
|
<p class="navMainSecLogoText">CHEEMS MARKET</p>
|
||||||
|
</a></div>
|
||||||
|
<div class="navMainSec navMainSecMid">
|
||||||
|
<div class="navMainSecLinks">
|
||||||
|
<div class="navMainSecLinksLinkWrapper"><a class="navMainSecLinksLink" href="./">Home</a></div>
|
||||||
|
<div class="navMainSecLinksLinkWrapper"><a class="navMainSecLinksLink" href="#">text</a></div>
|
||||||
|
<div class="navMainSecLinksLinkWrapper"><a class="navMainSecLinksLink" href="#">text</a></div>
|
||||||
|
<div class="navMainSecLinksLinkWrapper"><a class="navMainSecLinksLink" href="#">About</a></div>
|
||||||
|
<div class="navMainSecLinksLinkWrapper"><a class="navMainSecLinksLink" href="#">text</a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="navMainSec">
|
||||||
|
<div class="navMainSecLinksSocial"><a class="navMainSecLinksSocialLink" href="#">
|
||||||
|
<div class="navMainSecLinksSocialLinkInside" style="background: url("https://image.nostr.build/fb557f1b6d58c7bbcdf4d1edb1b48090c76ff1d1384b9d1aae13d652e7a3cfe4.gif") center / contain no-repeat;filter: sepia(100%) saturate(10000%) hue-rotate(-45deg);"></div>
|
||||||
|
</a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="MidMain">
|
||||||
|
<div class="secMain">
|
||||||
|
<div class="containerMain">
|
||||||
|
<div class="secMainInside"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="BottomMain">
|
||||||
|
<div class="BottomMainInside">
|
||||||
|
<div class="BottomMainInsideTop">
|
||||||
|
<div class="containerMain">
|
||||||
|
<div class="BottomMainInsideTopInside">
|
||||||
|
<div class="BottomMainInsideTopInsideSec">
|
||||||
|
<div class="BottomMainInsideTopInsideSecLeft"><img class="BottomMainInsideTopInsideSecLogo" src="Nostr Dev Logo Mark.svg">
|
||||||
|
<p style="font-weight: 800;text-align: center;font-size: 30px;line-height: 1;color: #ff9900;">CHEEMS MARKET</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="BottomMainInsideTopInsideSec">
|
||||||
|
<div class="BottomMainInsideTopInsideSecMid"><a class="BottomMainInsideTopInsideSecMidLink" href="/">Home</a><a class="BottomMainInsideTopInsideSecMidLink" href="/#Team">text</a><a class="BottomMainInsideTopInsideSecMidLink" href="../portfolio.html">text</a><a class="BottomMainInsideTopInsideSecMidLink" href="../blog.html">About</a><a class="BottomMainInsideTopInsideSecMidLink" href="../career.html">text</a></div>
|
||||||
|
</div>
|
||||||
|
<div class="BottomMainInsideTopInsideSec">
|
||||||
|
<div class="BottomMainInsideTopInsideSecRight">
|
||||||
|
<p class="BottomMainInsideTopInsideSecRightText">text</p>
|
||||||
|
<div class="BottomMainInsideTopInsideSecRightSocials"><a role="button" class="btnMain BottomMainInsideTopInsideSecRightSocialsBtn" href="#"><img class="btnMainImgMain" src="https://image.nostr.build/fb557f1b6d58c7bbcdf4d1edb1b48090c76ff1d1384b9d1aae13d652e7a3cfe4.gif"></a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="BottomMainInsideBottom">
|
||||||
|
<div class="containerMain">
|
||||||
|
<div class="BottomMainInsideBottomInside">
|
||||||
|
<p class="BottomMainInsideBottomInsideText">Copyright © <script>document.write(new Date().getFullYear())</script> <a class="BottomMainInsideBottomInsideTextLink" href="#">Chems</a> All Rights Reserved.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
|
||||||
|
<script src="assets/js/bs-init.js"></script>
|
||||||
|
<script src="assets/js/categoryDrop.js"></script>
|
||||||
|
<script src="assets/js/checkboxBetter.js"></script>
|
||||||
|
<script src="assets/js/expandList.js"></script>
|
||||||
|
<script src="assets/js/toggleCategories.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
236
products.html
Normal file
236
products.html
Normal file
@ -0,0 +1,236 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html class="htmlMain" lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||||
|
<title>Cheems Market</title>
|
||||||
|
<meta name="twitter:title" content="Cheems Market">
|
||||||
|
<meta property="og:title" content="Cheems Market">
|
||||||
|
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
|
||||||
|
<link rel="stylesheet" href="assets/css/filters.css">
|
||||||
|
<link rel="stylesheet" href="assets/css/footer.css">
|
||||||
|
<link rel="stylesheet" href="assets/css/listings.css">
|
||||||
|
<link rel="stylesheet" href="assets/css/nav.css">
|
||||||
|
<link rel="stylesheet" href="assets/css/pagination.css">
|
||||||
|
<link rel="stylesheet" href="assets/css/productCard.css">
|
||||||
|
<link rel="stylesheet" href="assets/css/store.css">
|
||||||
|
<link rel="stylesheet" href="assets/css/storeCard.css">
|
||||||
|
<link rel="stylesheet" href="assets/css/styles.css">
|
||||||
|
<link rel="preconnect" href="https://fonts.bunny.net">
|
||||||
|
<link href="https://fonts.bunny.net/css?family=roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet" />
|
||||||
|
|
||||||
|
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="bodyMain">
|
||||||
|
<div class="TopMain">
|
||||||
|
<div class="containerMain">
|
||||||
|
<div class="navMain">
|
||||||
|
<div class="navMainSec navMainSecFirst"><a class="navMainSecLogo" href="./">
|
||||||
|
<div class="navMainSecLogoImgWrapper"><img class="navMainSecLogoImg" src="Nostr Dev Logo Mark W.svg"><img class="navMainSecLogoImg navMainSecLogoImgAlt" src="Nostr Dev Logo Mark.svg"></div>
|
||||||
|
<p class="navMainSecLogoText">CHEEMS MARKET</p>
|
||||||
|
</a></div>
|
||||||
|
<div class="navMainSec navMainSecMid">
|
||||||
|
<div class="navMainSecLinks">
|
||||||
|
<div class="navMainSecLinksLinkWrapper"><a class="navMainSecLinksLink" href="./">Home</a></div>
|
||||||
|
<div class="navMainSecLinksLinkWrapper"><a class="navMainSecLinksLink" href="#">text</a></div>
|
||||||
|
<div class="navMainSecLinksLinkWrapper"><a class="navMainSecLinksLink" href="#">text</a></div>
|
||||||
|
<div class="navMainSecLinksLinkWrapper"><a class="navMainSecLinksLink" href="#">About</a></div>
|
||||||
|
<div class="navMainSecLinksLinkWrapper"><a class="navMainSecLinksLink" href="#">text</a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="navMainSec">
|
||||||
|
<div class="navMainSecLinksSocial"><a class="navMainSecLinksSocialLink" href="#">
|
||||||
|
<div class="navMainSecLinksSocialLinkInside" style="background: url("https://image.nostr.build/fb557f1b6d58c7bbcdf4d1edb1b48090c76ff1d1384b9d1aae13d652e7a3cfe4.gif") center / contain no-repeat;filter: sepia(100%) saturate(10000%) hue-rotate(-45deg);"></div>
|
||||||
|
</a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="MidMain">
|
||||||
|
<div class="secMain secMainAlt">
|
||||||
|
<div class="containerMain">
|
||||||
|
<div class="secMainInside">
|
||||||
|
<div class="filtersMain">
|
||||||
|
<div class="filtersMainSec"><button id="categoriesViewTrigger" class="btnMain filtersMainSecBtn" type="button">Categories</button><button id="expandListTrigger" class="btnMain filtersMainSecBtn" type="button"><i class='bx bx-expand-horizontal btnMainIcon'></i>Expand</button>
|
||||||
|
<div class="filtersMainSecBox">
|
||||||
|
<div class="dropdown dropdownMain"><button class="dropdown-toggle btnMain dropdownMainBtn filtersMainSecBtn" aria-expanded="false" data-bs-toggle="dropdown" type="button">Dropdown </button>
|
||||||
|
<div class="dropdown-menu dropdownMainMenu"><a class="dropdown-item dropdownMainMenuItem" href="#">First Item</a><a class="dropdown-item dropdownMainMenuItem" href="#">Second Item</a><a class="dropdown-item dropdownMainMenuItem" href="#">Third Item</a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="filtersMainSec filtersMainSecAlt">
|
||||||
|
<div class="filtersMainSecBox">
|
||||||
|
<div class="inputWrapper inputWrapperAlt filtersMainSecBoxInput"><input type="text" class="inputMain" placeholder="Search term"><button class="btnMain inputMainBtn" type="button"><i class='bx bx-search-alt-2 btnMainIcon'></i></button></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="listingExpandable" class="containerMain">
|
||||||
|
<div class="secMainInside">
|
||||||
|
<div class="listingGrid">
|
||||||
|
<div class="listingGridSec listingGridSecSide listingGridSecSideActive">
|
||||||
|
<div class="listingGridSecSideInside">
|
||||||
|
<div class="listingGridSecBox listingGridSecSideBox">
|
||||||
|
<h4>Categories</h4>
|
||||||
|
</div>
|
||||||
|
<div class="listingGridSecBox listingGridSecSideBox">
|
||||||
|
<div class="listingGridSecSideBoxList"><button class="btnMain listingGridSecSideBoxListBtn" type="button"><span class="listingGridSecSideBoxListBtnText">Category type</span><i class='bx bx-chevron-down btnMainIcon listingGridSecSideBoxListBtnIcon'></i></button>
|
||||||
|
<div class="listingGridSecSideBoxListItems listingGridSecSideBoxListItemsActive">
|
||||||
|
<div class="listingGridSecSideBoxListItemsItem">
|
||||||
|
<div class="checkboxWrapper"><input type="checkbox" class="checkboxWrapperCheck"><label class="form-label inputMainLabel">Label</label></div>
|
||||||
|
</div>
|
||||||
|
<div class="listingGridSecSideBoxListItemsItem">
|
||||||
|
<div class="checkboxWrapper checkboxWrapperFancy"><input type="checkbox" class="checkboxWrapperCheck"><label class="form-label inputMainLabel">Label</label></div>
|
||||||
|
</div>
|
||||||
|
<div class="listingGridSecSideBoxListItemsItem">
|
||||||
|
<div class="checkboxWrapper checkboxWrapperFancy"><input type="checkbox" class="checkboxWrapperCheck"><label class="form-label inputMainLabel">Label</label></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="listingGridSecSideBoxList"><button class="btnMain listingGridSecSideBoxListBtn" type="button"><span class="listingGridSecSideBoxListBtnText">Category type</span><i class='bx bx-chevron-down btnMainIcon listingGridSecSideBoxListBtnIcon'></i></button>
|
||||||
|
<div class="listingGridSecSideBoxListItems listingGridSecSideBoxListItemsActive">
|
||||||
|
<div class="listingGridSecSideBoxListItemsItem">
|
||||||
|
<div class="checkboxWrapper"><input type="radio" class="checkboxWrapperCheckRadio" name="dada"><label class="form-label inputMainLabel">Label</label></div>
|
||||||
|
</div>
|
||||||
|
<div class="listingGridSecSideBoxListItemsItem">
|
||||||
|
<div class="checkboxWrapper checkboxWrapperFancy"><input type="radio" class="checkboxWrapperCheckRadio" name="dada"><label class="form-label inputMainLabel">Label</label></div>
|
||||||
|
</div>
|
||||||
|
<div class="listingGridSecSideBoxListItemsItem">
|
||||||
|
<div class="checkboxWrapper checkboxWrapperFancy"><input type="radio" class="checkboxWrapperCheckRadio" name="dada"><label class="form-label inputMainLabel">Label</label></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="listingGridSec listingGridSecSideBody">
|
||||||
|
<div class="listingGridSecBox">
|
||||||
|
<div class="secMainInsideGrid secMainInsideGrid4">
|
||||||
|
<div class="productCardMain">
|
||||||
|
<div class="productCardMainInside">
|
||||||
|
<div class="productCardMainInsideTop">
|
||||||
|
<div class="productCardMainInsideTopVideo"><video class="productCardMainInsideTopVideoClip" width="100%" height="100%" src="https://video.nostr.build/25c9ca9e7564bb77ee37de6b196de287abd2dffaa7fd61bce9578bd07b567b2d.mp4" loop="" autoplay="" muted=""></video></div>
|
||||||
|
<div class="productCardMainInsideTopPicture"><img class="productCardMainInsideTopPictureImg" src="https://image.nostr.build/b02884479214ea14d4c8d365d5172b91e0bfd280dbc54e2a6f43b8861c5f5d1a.jpg"><i class='bx bxs-purchase-tag storeCardMainInsideTopIcon'></i></div>
|
||||||
|
<div class="storeCardMainInsideTopDetails">
|
||||||
|
<div class="storeCardMainInsideTopDetailsTop">
|
||||||
|
<div class="storeCardMainInsideTopDetailsTag"><i class='bx bxs-truck productCardMainInsideTopDetailsTagIcon'></i></div>
|
||||||
|
<div class="storeCardMainInsideTopDetailsTag"><i class='bx bxs-purchase-tag productCardMainInsideTopDetailsTagIcon'></i>
|
||||||
|
<div class="storeCardMainInsideTopDetailsTagDivider"></div>
|
||||||
|
<p class="storeCardMainInsideTopDetailsTagText">Physical</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="storeCardMainInsideTopDetailsBottom">
|
||||||
|
<div class="storeCardMainInsideTopDetailsTag"><i class='bx bxs-map productCardMainInsideTopDetailsTagIcon'></i>
|
||||||
|
<div class="storeCardMainInsideTopDetailsTagDivider"></div>
|
||||||
|
<p class="storeCardMainInsideTopDetailsTagText"><strong>USA: Texas</strong></p>
|
||||||
|
</div>
|
||||||
|
<div class="storeCardMainInsideTopDetailsTag"><i class='bx bx-walk productCardMainInsideTopDetailsTagIcon'></i>
|
||||||
|
<div class="storeCardMainInsideTopDetailsTagDivider"></div>
|
||||||
|
<p class="storeCardMainInsideTopDetailsTagText">2-5 km</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="productCardMainInsideMid">
|
||||||
|
<h3 class="productCardMainInsideMidTitle">PS5 (2 months used)</h3>
|
||||||
|
</div>
|
||||||
|
<div class="productCardMainInsideStore"><a class="productCardMainInsideStoreLink" href="storePage.html"><i class='bx bxs-store-alt productCardMainInsideStoreLinkIcon'></i>
|
||||||
|
<div class="productCardMainInsideStoreLinkDivider"></div>
|
||||||
|
<p class="productCardMainInsideStoreLinkText">Gamers United</p>
|
||||||
|
</a></div>
|
||||||
|
<div class="productCardMainInsideBot"><a role="button" class="btnMain productCardMainInsideBotBtn" href="productPage.html">$450.00</a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="productCardMain">
|
||||||
|
<div class="productCardMainInside">
|
||||||
|
<div class="productCardMainInsideTop">
|
||||||
|
<div class="productCardMainInsideTopVideo"><video class="productCardMainInsideTopVideoClip" width="100%" height="100%" src="https://video.nostr.build/25c9ca9e7564bb77ee37de6b196de287abd2dffaa7fd61bce9578bd07b567b2d.mp4" loop="" autoplay="" muted=""></video></div>
|
||||||
|
<div class="productCardMainInsideTopPicture"><img class="productCardMainInsideTopPictureImg" src="https://image.nostr.build/b02884479214ea14d4c8d365d5172b91e0bfd280dbc54e2a6f43b8861c5f5d1a.jpg"><i class='bx bxs-purchase-tag storeCardMainInsideTopIcon'></i></div>
|
||||||
|
<div class="storeCardMainInsideTopDetails">
|
||||||
|
<div class="storeCardMainInsideTopDetailsTop">
|
||||||
|
<div class="storeCardMainInsideTopDetailsTag"><i class='bx bxs-truck productCardMainInsideTopDetailsTagIcon'></i></div>
|
||||||
|
<div class="storeCardMainInsideTopDetailsTag"><i class='bx bxs-purchase-tag productCardMainInsideTopDetailsTagIcon'></i>
|
||||||
|
<div class="storeCardMainInsideTopDetailsTagDivider"></div>
|
||||||
|
<p class="storeCardMainInsideTopDetailsTagText">Physical</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="storeCardMainInsideTopDetailsBottom">
|
||||||
|
<div class="storeCardMainInsideTopDetailsTag"><i class='bx bxs-map productCardMainInsideTopDetailsTagIcon'></i>
|
||||||
|
<div class="storeCardMainInsideTopDetailsTagDivider"></div>
|
||||||
|
<p class="storeCardMainInsideTopDetailsTagText"><strong>USA: Texas</strong></p>
|
||||||
|
</div>
|
||||||
|
<div class="storeCardMainInsideTopDetailsTag"><i class='bx bx-walk productCardMainInsideTopDetailsTagIcon'></i>
|
||||||
|
<div class="storeCardMainInsideTopDetailsTagDivider"></div>
|
||||||
|
<p class="storeCardMainInsideTopDetailsTagText">2-5 km</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="productCardMainInsideMid">
|
||||||
|
<h3 class="productCardMainInsideMidTitle">PS5 (2 months used)</h3>
|
||||||
|
</div>
|
||||||
|
<div class="productCardMainInsideStore"><a class="productCardMainInsideStoreLink" href="storePage.html"><i class='bx bxs-store-alt productCardMainInsideStoreLinkIcon'></i>
|
||||||
|
<div class="productCardMainInsideStoreLinkDivider"></div>
|
||||||
|
<p class="productCardMainInsideStoreLinkText">Gamers United</p>
|
||||||
|
</a></div>
|
||||||
|
<div class="productCardMainInsideBot"><a role="button" class="btnMain productCardMainInsideBotBtn" href="productPage.html">$450.00</a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="paginationMain">
|
||||||
|
<div class="paginationMainInside"><button class="btnMain paginationMainInsideBtn" type="button"><i class='bx bx-chevron-left btnMainIcon'></i></button>
|
||||||
|
<div class="paginationMainInsideDivider"></div>
|
||||||
|
<div class="paginationMainInsideNumbers"><button class="btnMain paginationMainInsideNumbersBtn paginationMainInsideNumbersBtnActive" type="button">1</button><button class="btnMain paginationMainInsideNumbersBtn" type="button">2</button><button class="btnMain paginationMainInsideNumbersBtn" type="button">3</button></div>
|
||||||
|
<div class="paginationMainInsideDivider"></div><button class="btnMain paginationMainInsideBtn" type="button"><i class='bx bx-chevron-right btnMainIcon'></i></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="BottomMain">
|
||||||
|
<div class="BottomMainInside">
|
||||||
|
<div class="BottomMainInsideTop">
|
||||||
|
<div class="containerMain">
|
||||||
|
<div class="BottomMainInsideTopInside">
|
||||||
|
<div class="BottomMainInsideTopInsideSec">
|
||||||
|
<div class="BottomMainInsideTopInsideSecLeft"><img class="BottomMainInsideTopInsideSecLogo" src="Nostr Dev Logo Mark.svg">
|
||||||
|
<p style="font-weight: 800;text-align: center;font-size: 30px;line-height: 1;color: #ff9900;">CHEEMS MARKET</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="BottomMainInsideTopInsideSec">
|
||||||
|
<div class="BottomMainInsideTopInsideSecMid"><a class="BottomMainInsideTopInsideSecMidLink" href="/">Home</a><a class="BottomMainInsideTopInsideSecMidLink" href="/#Team">text</a><a class="BottomMainInsideTopInsideSecMidLink" href="../portfolio.html">text</a><a class="BottomMainInsideTopInsideSecMidLink" href="../blog.html">About</a><a class="BottomMainInsideTopInsideSecMidLink" href="../career.html">text</a></div>
|
||||||
|
</div>
|
||||||
|
<div class="BottomMainInsideTopInsideSec">
|
||||||
|
<div class="BottomMainInsideTopInsideSecRight">
|
||||||
|
<p class="BottomMainInsideTopInsideSecRightText">text</p>
|
||||||
|
<div class="BottomMainInsideTopInsideSecRightSocials"><a role="button" class="btnMain BottomMainInsideTopInsideSecRightSocialsBtn" href="#"><img class="btnMainImgMain" src="https://image.nostr.build/fb557f1b6d58c7bbcdf4d1edb1b48090c76ff1d1384b9d1aae13d652e7a3cfe4.gif"></a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="BottomMainInsideBottom">
|
||||||
|
<div class="containerMain">
|
||||||
|
<div class="BottomMainInsideBottomInside">
|
||||||
|
<p class="BottomMainInsideBottomInsideText">Copyright © <script>document.write(new Date().getFullYear())</script> <a class="BottomMainInsideBottomInsideTextLink" href="#">Chems</a> All Rights Reserved.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
|
||||||
|
<script src="assets/js/bs-init.js"></script>
|
||||||
|
<script src="assets/js/categoryDrop.js"></script>
|
||||||
|
<script src="assets/js/checkboxBetter.js"></script>
|
||||||
|
<script src="assets/js/expandList.js"></script>
|
||||||
|
<script src="assets/js/toggleCategories.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
276
storePage.html
Normal file
276
storePage.html
Normal file
@ -0,0 +1,276 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html class="htmlMain" lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||||
|
<title>Cheems Market</title>
|
||||||
|
<meta name="twitter:title" content="Cheems Market">
|
||||||
|
<meta property="og:title" content="Cheems Market">
|
||||||
|
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
|
||||||
|
<link rel="stylesheet" href="assets/css/filters.css">
|
||||||
|
<link rel="stylesheet" href="assets/css/footer.css">
|
||||||
|
<link rel="stylesheet" href="assets/css/listings.css">
|
||||||
|
<link rel="stylesheet" href="assets/css/nav.css">
|
||||||
|
<link rel="stylesheet" href="assets/css/pagination.css">
|
||||||
|
<link rel="stylesheet" href="assets/css/productCard.css">
|
||||||
|
<link rel="stylesheet" href="assets/css/store.css">
|
||||||
|
<link rel="stylesheet" href="assets/css/storeCard.css">
|
||||||
|
<link rel="stylesheet" href="assets/css/styles.css">
|
||||||
|
<link rel="preconnect" href="https://fonts.bunny.net">
|
||||||
|
<link href="https://fonts.bunny.net/css?family=roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet" />
|
||||||
|
|
||||||
|
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="bodyMain">
|
||||||
|
<div class="TopMain">
|
||||||
|
<div class="containerMain">
|
||||||
|
<div class="navMain">
|
||||||
|
<div class="navMainSec navMainSecFirst"><a class="navMainSecLogo" href="./">
|
||||||
|
<div class="navMainSecLogoImgWrapper"><img class="navMainSecLogoImg" src="Nostr Dev Logo Mark W.svg"><img class="navMainSecLogoImg navMainSecLogoImgAlt" src="Nostr Dev Logo Mark.svg"></div>
|
||||||
|
<p class="navMainSecLogoText">CHEEMS MARKET</p>
|
||||||
|
</a></div>
|
||||||
|
<div class="navMainSec navMainSecMid">
|
||||||
|
<div class="navMainSecLinks">
|
||||||
|
<div class="navMainSecLinksLinkWrapper"><a class="navMainSecLinksLink" href="./">Home</a></div>
|
||||||
|
<div class="navMainSecLinksLinkWrapper"><a class="navMainSecLinksLink" href="#">text</a></div>
|
||||||
|
<div class="navMainSecLinksLinkWrapper"><a class="navMainSecLinksLink" href="#">text</a></div>
|
||||||
|
<div class="navMainSecLinksLinkWrapper"><a class="navMainSecLinksLink" href="#">About</a></div>
|
||||||
|
<div class="navMainSecLinksLinkWrapper"><a class="navMainSecLinksLink" href="#">text</a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="navMainSec">
|
||||||
|
<div class="navMainSecLinksSocial"><a class="navMainSecLinksSocialLink" href="#">
|
||||||
|
<div class="navMainSecLinksSocialLinkInside" style="background: url("https://image.nostr.build/fb557f1b6d58c7bbcdf4d1edb1b48090c76ff1d1384b9d1aae13d652e7a3cfe4.gif") center / contain no-repeat;filter: sepia(100%) saturate(10000%) hue-rotate(-45deg);"></div>
|
||||||
|
</a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="MidMain">
|
||||||
|
<div class="secMain secMainAlt">
|
||||||
|
<div class="containerMain">
|
||||||
|
<div class="secMainInside">
|
||||||
|
<div class="storeMain">
|
||||||
|
<div class="storeMainTop"><img class="storeMainTopImg" src="https://image.nostr.build/a66cc6c0b32d70362dc791f9cf338133db945a0abe1c08f0b940de00130c80fa.jpg" width="1380" height="483"></div>
|
||||||
|
<div class="storeMainMid">
|
||||||
|
<div class="storeMainMidInside">
|
||||||
|
<div class="storeMainMidInsideSec storeMainMidInsideSecProfile">
|
||||||
|
<div class="storeMainMidInsideSecProfilePic"><img class="storeMainMidInsideSecProfilePicImg" src="https://image.nostr.build/a66cc6c0b32d70362dc791f9cf338133db945a0abe1c08f0b940de00130c80fa.jpg"></div>
|
||||||
|
<div class="storeMainMidInsideSecProfileDetails">
|
||||||
|
<h3 class="storeMainMidInsideSecProfileDetailsName">Jimmy's Long Smokes</h3>
|
||||||
|
<p class="storeMainMidInsideSecProfileDetailsBio">Need a smoke? A specific kind of smoke? We got it. We got the long, the short, the thick and thin, the brown and black. We have them all.</p><a class="storeMainMidInsideSecProfilePop" href="#">Read full</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="storeMainMidInsideSec storeMainMidInsideSecAlt">
|
||||||
|
<div class="storeMainMidInsideSecUser">
|
||||||
|
<p style="display: flex;grid-gap: 10px;">By <a href="#">UserNameHandle(visitProfile)</a></p><span>follow-btn</span>
|
||||||
|
</div>
|
||||||
|
<div class="storeMainMidInsideSecWoT">
|
||||||
|
<div class="storeMainMidInsideSecWoTSec">
|
||||||
|
<p>Followed by (Cheem's network)</p>
|
||||||
|
<div class="storeMainMidInsideSecWoTSecPeople"><a data-bs-toggle="tooltip" data-bss-tooltip="" class="storeMainMidInsideSecWoTSecPeoplePerson" href="#" title="UserName"><img class="storeMainMidInsideSecWoTSecPeoplePersonImg" src="https://image.nostr.build/a66cc6c0b32d70362dc791f9cf338133db945a0abe1c08f0b940de00130c80fa.jpg"></a><a data-bs-toggle="tooltip" data-bss-tooltip="" class="storeMainMidInsideSecWoTSecPeoplePerson" href="#" title="UserName"><img class="storeMainMidInsideSecWoTSecPeoplePersonImg" src="https://image.nostr.build/a66cc6c0b32d70362dc791f9cf338133db945a0abe1c08f0b940de00130c80fa.jpg"></a><a data-bs-toggle="tooltip" data-bss-tooltip="" class="storeMainMidInsideSecWoTSecPeoplePerson" href="#" title="UserName"><img class="storeMainMidInsideSecWoTSecPeoplePersonImg" src="https://image.nostr.build/a66cc6c0b32d70362dc791f9cf338133db945a0abe1c08f0b940de00130c80fa.jpg"></a><a data-bs-toggle="tooltip" data-bss-tooltip="" class="storeMainMidInsideSecWoTSecPeoplePerson" href="#" title="UserName"><img class="storeMainMidInsideSecWoTSecPeoplePersonImg" src="https://image.nostr.build/a66cc6c0b32d70362dc791f9cf338133db945a0abe1c08f0b940de00130c80fa.jpg"></a><a class="storeMainMidInsideSecWoTSecPeoplePerson" href="#">
|
||||||
|
<p>+50</p>
|
||||||
|
</a></div>
|
||||||
|
</div>
|
||||||
|
<div class="storeMainMidInsideSecWoTSec">
|
||||||
|
<p>And by (Your network)</p>
|
||||||
|
<div class="storeMainMidInsideSecWoTSecPeople"><a data-bs-toggle="tooltip" data-bss-tooltip="" class="storeMainMidInsideSecWoTSecPeoplePerson" href="#" title="UserName"><img class="storeMainMidInsideSecWoTSecPeoplePersonImg" src="https://image.nostr.build/a66cc6c0b32d70362dc791f9cf338133db945a0abe1c08f0b940de00130c80fa.jpg"></a><a data-bs-toggle="tooltip" data-bss-tooltip="" class="storeMainMidInsideSecWoTSecPeoplePerson" href="#" title="UserName"><img class="storeMainMidInsideSecWoTSecPeoplePersonImg" src="https://image.nostr.build/a66cc6c0b32d70362dc791f9cf338133db945a0abe1c08f0b940de00130c80fa.jpg"></a><a data-bs-toggle="tooltip" data-bss-tooltip="" class="storeMainMidInsideSecWoTSecPeoplePerson" href="#" title="UserName"><img class="storeMainMidInsideSecWoTSecPeoplePersonImg" src="https://image.nostr.build/a66cc6c0b32d70362dc791f9cf338133db945a0abe1c08f0b940de00130c80fa.jpg"></a><a data-bs-toggle="tooltip" data-bss-tooltip="" class="storeMainMidInsideSecWoTSecPeoplePerson" href="#" title="UserName"><img class="storeMainMidInsideSecWoTSecPeoplePersonImg" src="https://image.nostr.build/a66cc6c0b32d70362dc791f9cf338133db945a0abe1c08f0b940de00130c80fa.jpg"></a><a class="storeMainMidInsideSecWoTSecPeoplePerson" href="#">
|
||||||
|
<p>+50</p>
|
||||||
|
</a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="storeMainMidInsideSecAction"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="containerMain">
|
||||||
|
<div class="secMainInside">
|
||||||
|
<div class="filtersMain">
|
||||||
|
<div class="filtersMainSec"><button id="categoriesViewTrigger" class="btnMain filtersMainSecBtn" type="button">Categories</button><button id="expandListTrigger" class="btnMain filtersMainSecBtn" type="button"><i class='bx bx-expand-horizontal btnMainIcon'></i>Expand</button>
|
||||||
|
<div class="filtersMainSecBox">
|
||||||
|
<div class="dropdown dropdownMain"><button class="dropdown-toggle btnMain dropdownMainBtn filtersMainSecBtn" aria-expanded="false" data-bs-toggle="dropdown" type="button">Dropdown </button>
|
||||||
|
<div class="dropdown-menu dropdownMainMenu"><a class="dropdown-item dropdownMainMenuItem" href="#">First Item</a><a class="dropdown-item dropdownMainMenuItem" href="#">Second Item</a><a class="dropdown-item dropdownMainMenuItem" href="#">Third Item</a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="filtersMainSec filtersMainSecAlt">
|
||||||
|
<div class="filtersMainSecBox">
|
||||||
|
<div class="inputWrapper inputWrapperAlt filtersMainSecBoxInput"><input type="text" class="inputMain" placeholder="Search term"><button class="btnMain inputMainBtn" type="button"><i class='bx bx-search-alt-2 btnMainIcon'></i></button></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="listingExpandable" class="containerMain">
|
||||||
|
<div class="secMainInside">
|
||||||
|
<div class="secMainInside">
|
||||||
|
<div class="listingGrid">
|
||||||
|
<div class="listingGridSec listingGridSecSide listingGridSecSideActive">
|
||||||
|
<div class="listingGridSecSideInside">
|
||||||
|
<div class="listingGridSecBox listingGridSecSideBox">
|
||||||
|
<h4>Categories</h4>
|
||||||
|
</div>
|
||||||
|
<div class="listingGridSecBox listingGridSecSideBox">
|
||||||
|
<div class="listingGridSecSideBoxList"><button class="btnMain listingGridSecSideBoxListBtn" type="button"><span class="listingGridSecSideBoxListBtnText">Category type</span><i class='bx bx-chevron-down btnMainIcon listingGridSecSideBoxListBtnIcon'></i></button>
|
||||||
|
<div class="listingGridSecSideBoxListItems listingGridSecSideBoxListItemsActive">
|
||||||
|
<div class="listingGridSecSideBoxListItemsItem">
|
||||||
|
<div class="checkboxWrapper"><input type="checkbox" class="checkboxWrapperCheck"><label class="form-label inputMainLabel">Label</label></div>
|
||||||
|
</div>
|
||||||
|
<div class="listingGridSecSideBoxListItemsItem">
|
||||||
|
<div class="checkboxWrapper checkboxWrapperFancy"><input type="checkbox" class="checkboxWrapperCheck"><label class="form-label inputMainLabel">Label</label></div>
|
||||||
|
</div>
|
||||||
|
<div class="listingGridSecSideBoxListItemsItem">
|
||||||
|
<div class="checkboxWrapper checkboxWrapperFancy"><input type="checkbox" class="checkboxWrapperCheck"><label class="form-label inputMainLabel">Label</label></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="listingGridSecSideBoxList"><button class="btnMain listingGridSecSideBoxListBtn" type="button"><span class="listingGridSecSideBoxListBtnText">Category type</span><i class='bx bx-chevron-down btnMainIcon listingGridSecSideBoxListBtnIcon'></i></button>
|
||||||
|
<div class="listingGridSecSideBoxListItems listingGridSecSideBoxListItemsActive">
|
||||||
|
<div class="listingGridSecSideBoxListItemsItem">
|
||||||
|
<div class="checkboxWrapper"><input type="radio" class="checkboxWrapperCheckRadio" name="dada"><label class="form-label inputMainLabel">Label</label></div>
|
||||||
|
</div>
|
||||||
|
<div class="listingGridSecSideBoxListItemsItem">
|
||||||
|
<div class="checkboxWrapper checkboxWrapperFancy"><input type="radio" class="checkboxWrapperCheckRadio" name="dada"><label class="form-label inputMainLabel">Label</label></div>
|
||||||
|
</div>
|
||||||
|
<div class="listingGridSecSideBoxListItemsItem">
|
||||||
|
<div class="checkboxWrapper checkboxWrapperFancy"><input type="radio" class="checkboxWrapperCheckRadio" name="dada"><label class="form-label inputMainLabel">Label</label></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="listingGridSec listingGridSecSideBody">
|
||||||
|
<div class="listingGridSecBox">
|
||||||
|
<div class="secMainInsideGrid secMainInsideGrid4">
|
||||||
|
<div class="productCardMain">
|
||||||
|
<div class="productCardMainInside">
|
||||||
|
<div class="productCardMainInsideTop">
|
||||||
|
<div class="productCardMainInsideTopVideo"><video class="productCardMainInsideTopVideoClip" width="100%" height="100%" src="https://video.nostr.build/25c9ca9e7564bb77ee37de6b196de287abd2dffaa7fd61bce9578bd07b567b2d.mp4" loop="" autoplay="" muted=""></video></div>
|
||||||
|
<div class="productCardMainInsideTopPicture"><img class="productCardMainInsideTopPictureImg" src="https://image.nostr.build/b02884479214ea14d4c8d365d5172b91e0bfd280dbc54e2a6f43b8861c5f5d1a.jpg"><i class='bx bxs-purchase-tag storeCardMainInsideTopIcon'></i></div>
|
||||||
|
<div class="storeCardMainInsideTopDetails">
|
||||||
|
<div class="storeCardMainInsideTopDetailsTop">
|
||||||
|
<div class="storeCardMainInsideTopDetailsTag"><i class='bx bxs-truck productCardMainInsideTopDetailsTagIcon'></i></div>
|
||||||
|
<div class="storeCardMainInsideTopDetailsTag"><i class='bx bxs-purchase-tag productCardMainInsideTopDetailsTagIcon'></i>
|
||||||
|
<div class="storeCardMainInsideTopDetailsTagDivider"></div>
|
||||||
|
<p class="storeCardMainInsideTopDetailsTagText">Physical</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="storeCardMainInsideTopDetailsBottom">
|
||||||
|
<div class="storeCardMainInsideTopDetailsTag"><i class='bx bxs-map productCardMainInsideTopDetailsTagIcon'></i>
|
||||||
|
<div class="storeCardMainInsideTopDetailsTagDivider"></div>
|
||||||
|
<p class="storeCardMainInsideTopDetailsTagText"><strong>USA: Texas</strong></p>
|
||||||
|
</div>
|
||||||
|
<div class="storeCardMainInsideTopDetailsTag"><i class='bx bx-walk productCardMainInsideTopDetailsTagIcon'></i>
|
||||||
|
<div class="storeCardMainInsideTopDetailsTagDivider"></div>
|
||||||
|
<p class="storeCardMainInsideTopDetailsTagText">2-5 km</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="productCardMainInsideMid">
|
||||||
|
<h3 class="productCardMainInsideMidTitle">PS5 (2 months used)</h3>
|
||||||
|
</div>
|
||||||
|
<div class="productCardMainInsideStore"><a class="productCardMainInsideStoreLink" href="storePage.html"><i class='bx bxs-store-alt productCardMainInsideStoreLinkIcon'></i>
|
||||||
|
<div class="productCardMainInsideStoreLinkDivider"></div>
|
||||||
|
<p class="productCardMainInsideStoreLinkText">Gamers United</p>
|
||||||
|
</a></div>
|
||||||
|
<div class="productCardMainInsideBot"><a role="button" class="btnMain productCardMainInsideBotBtn" href="productPage.html">$450.00</a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="productCardMain">
|
||||||
|
<div class="productCardMainInside">
|
||||||
|
<div class="productCardMainInsideTop">
|
||||||
|
<div class="productCardMainInsideTopVideo"><video class="productCardMainInsideTopVideoClip" width="100%" height="100%" src="https://video.nostr.build/25c9ca9e7564bb77ee37de6b196de287abd2dffaa7fd61bce9578bd07b567b2d.mp4" loop="" autoplay="" muted=""></video></div>
|
||||||
|
<div class="productCardMainInsideTopPicture"><img class="productCardMainInsideTopPictureImg" src="https://image.nostr.build/b02884479214ea14d4c8d365d5172b91e0bfd280dbc54e2a6f43b8861c5f5d1a.jpg"><i class='bx bxs-purchase-tag storeCardMainInsideTopIcon'></i></div>
|
||||||
|
<div class="storeCardMainInsideTopDetails">
|
||||||
|
<div class="storeCardMainInsideTopDetailsTop">
|
||||||
|
<div class="storeCardMainInsideTopDetailsTag"><i class='bx bxs-truck productCardMainInsideTopDetailsTagIcon'></i></div>
|
||||||
|
<div class="storeCardMainInsideTopDetailsTag"><i class='bx bxs-purchase-tag productCardMainInsideTopDetailsTagIcon'></i>
|
||||||
|
<div class="storeCardMainInsideTopDetailsTagDivider"></div>
|
||||||
|
<p class="storeCardMainInsideTopDetailsTagText">Physical</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="storeCardMainInsideTopDetailsBottom">
|
||||||
|
<div class="storeCardMainInsideTopDetailsTag"><i class='bx bxs-map productCardMainInsideTopDetailsTagIcon'></i>
|
||||||
|
<div class="storeCardMainInsideTopDetailsTagDivider"></div>
|
||||||
|
<p class="storeCardMainInsideTopDetailsTagText"><strong>USA: Texas</strong></p>
|
||||||
|
</div>
|
||||||
|
<div class="storeCardMainInsideTopDetailsTag"><i class='bx bx-walk productCardMainInsideTopDetailsTagIcon'></i>
|
||||||
|
<div class="storeCardMainInsideTopDetailsTagDivider"></div>
|
||||||
|
<p class="storeCardMainInsideTopDetailsTagText">2-5 km</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="productCardMainInsideMid">
|
||||||
|
<h3 class="productCardMainInsideMidTitle">PS5 (2 months used)</h3>
|
||||||
|
</div>
|
||||||
|
<div class="productCardMainInsideStore"><a class="productCardMainInsideStoreLink" href="storePage.html"><i class='bx bxs-store-alt productCardMainInsideStoreLinkIcon'></i>
|
||||||
|
<div class="productCardMainInsideStoreLinkDivider"></div>
|
||||||
|
<p class="productCardMainInsideStoreLinkText">Gamers United</p>
|
||||||
|
</a></div>
|
||||||
|
<div class="productCardMainInsideBot"><a role="button" class="btnMain productCardMainInsideBotBtn" href="productPage.html">$450.00</a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="paginationMain">
|
||||||
|
<div class="paginationMainInside"><button class="btnMain paginationMainInsideBtn" type="button"><i class='bx bx-chevron-left btnMainIcon'></i></button>
|
||||||
|
<div class="paginationMainInsideDivider"></div>
|
||||||
|
<div class="paginationMainInsideNumbers"><button class="btnMain paginationMainInsideNumbersBtn paginationMainInsideNumbersBtnActive" type="button">1</button><button class="btnMain paginationMainInsideNumbersBtn" type="button">2</button><button class="btnMain paginationMainInsideNumbersBtn" type="button">3</button></div>
|
||||||
|
<div class="paginationMainInsideDivider"></div><button class="btnMain paginationMainInsideBtn" type="button"><i class='bx bx-chevron-right btnMainIcon'></i></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="BottomMain">
|
||||||
|
<div class="BottomMainInside">
|
||||||
|
<div class="BottomMainInsideTop">
|
||||||
|
<div class="containerMain">
|
||||||
|
<div class="BottomMainInsideTopInside">
|
||||||
|
<div class="BottomMainInsideTopInsideSec">
|
||||||
|
<div class="BottomMainInsideTopInsideSecLeft"><img class="BottomMainInsideTopInsideSecLogo" src="Nostr Dev Logo Mark.svg">
|
||||||
|
<p style="font-weight: 800;text-align: center;font-size: 30px;line-height: 1;color: #ff9900;">CHEEMS MARKET</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="BottomMainInsideTopInsideSec">
|
||||||
|
<div class="BottomMainInsideTopInsideSecMid"><a class="BottomMainInsideTopInsideSecMidLink" href="/">Home</a><a class="BottomMainInsideTopInsideSecMidLink" href="/#Team">text</a><a class="BottomMainInsideTopInsideSecMidLink" href="../portfolio.html">text</a><a class="BottomMainInsideTopInsideSecMidLink" href="../blog.html">About</a><a class="BottomMainInsideTopInsideSecMidLink" href="../career.html">text</a></div>
|
||||||
|
</div>
|
||||||
|
<div class="BottomMainInsideTopInsideSec">
|
||||||
|
<div class="BottomMainInsideTopInsideSecRight">
|
||||||
|
<p class="BottomMainInsideTopInsideSecRightText">text</p>
|
||||||
|
<div class="BottomMainInsideTopInsideSecRightSocials"><a role="button" class="btnMain BottomMainInsideTopInsideSecRightSocialsBtn" href="#"><img class="btnMainImgMain" src="https://image.nostr.build/fb557f1b6d58c7bbcdf4d1edb1b48090c76ff1d1384b9d1aae13d652e7a3cfe4.gif"></a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="BottomMainInsideBottom">
|
||||||
|
<div class="containerMain">
|
||||||
|
<div class="BottomMainInsideBottomInside">
|
||||||
|
<p class="BottomMainInsideBottomInsideText">Copyright © <script>document.write(new Date().getFullYear())</script> <a class="BottomMainInsideBottomInsideTextLink" href="#">Chems</a> All Rights Reserved.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
|
||||||
|
<script src="assets/js/bs-init.js"></script>
|
||||||
|
<script src="assets/js/categoryDrop.js"></script>
|
||||||
|
<script src="assets/js/checkboxBetter.js"></script>
|
||||||
|
<script src="assets/js/expandList.js"></script>
|
||||||
|
<script src="assets/js/toggleCategories.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
240
stores.html
Normal file
240
stores.html
Normal file
@ -0,0 +1,240 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html class="htmlMain" lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||||
|
<title>Cheems Market</title>
|
||||||
|
<meta name="twitter:title" content="Cheems Market">
|
||||||
|
<meta property="og:title" content="Cheems Market">
|
||||||
|
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
|
||||||
|
<link rel="stylesheet" href="assets/css/filters.css">
|
||||||
|
<link rel="stylesheet" href="assets/css/footer.css">
|
||||||
|
<link rel="stylesheet" href="assets/css/listings.css">
|
||||||
|
<link rel="stylesheet" href="assets/css/nav.css">
|
||||||
|
<link rel="stylesheet" href="assets/css/pagination.css">
|
||||||
|
<link rel="stylesheet" href="assets/css/productCard.css">
|
||||||
|
<link rel="stylesheet" href="assets/css/store.css">
|
||||||
|
<link rel="stylesheet" href="assets/css/storeCard.css">
|
||||||
|
<link rel="stylesheet" href="assets/css/styles.css">
|
||||||
|
<link rel="preconnect" href="https://fonts.bunny.net">
|
||||||
|
<link href="https://fonts.bunny.net/css?family=roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet" />
|
||||||
|
|
||||||
|
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="bodyMain">
|
||||||
|
<div class="TopMain">
|
||||||
|
<div class="containerMain">
|
||||||
|
<div class="navMain">
|
||||||
|
<div class="navMainSec navMainSecFirst"><a class="navMainSecLogo" href="./">
|
||||||
|
<div class="navMainSecLogoImgWrapper"><img class="navMainSecLogoImg" src="Nostr Dev Logo Mark W.svg"><img class="navMainSecLogoImg navMainSecLogoImgAlt" src="Nostr Dev Logo Mark.svg"></div>
|
||||||
|
<p class="navMainSecLogoText">CHEEMS MARKET</p>
|
||||||
|
</a></div>
|
||||||
|
<div class="navMainSec navMainSecMid">
|
||||||
|
<div class="navMainSecLinks">
|
||||||
|
<div class="navMainSecLinksLinkWrapper"><a class="navMainSecLinksLink" href="./">Home</a></div>
|
||||||
|
<div class="navMainSecLinksLinkWrapper"><a class="navMainSecLinksLink" href="#">text</a></div>
|
||||||
|
<div class="navMainSecLinksLinkWrapper"><a class="navMainSecLinksLink" href="#">text</a></div>
|
||||||
|
<div class="navMainSecLinksLinkWrapper"><a class="navMainSecLinksLink" href="#">About</a></div>
|
||||||
|
<div class="navMainSecLinksLinkWrapper"><a class="navMainSecLinksLink" href="#">text</a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="navMainSec">
|
||||||
|
<div class="navMainSecLinksSocial"><a class="navMainSecLinksSocialLink" href="#">
|
||||||
|
<div class="navMainSecLinksSocialLinkInside" style="background: url("https://image.nostr.build/fb557f1b6d58c7bbcdf4d1edb1b48090c76ff1d1384b9d1aae13d652e7a3cfe4.gif") center / contain no-repeat;filter: sepia(100%) saturate(10000%) hue-rotate(-45deg);"></div>
|
||||||
|
</a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="MidMain">
|
||||||
|
<div class="secMain secMainAlt">
|
||||||
|
<div class="containerMain">
|
||||||
|
<div class="secMainInside">
|
||||||
|
<div class="filtersMain">
|
||||||
|
<div class="filtersMainSec"><button id="categoriesViewTrigger" class="btnMain filtersMainSecBtn" type="button">Categories</button><button id="expandListTrigger" class="btnMain filtersMainSecBtn" type="button"><i class='bx bx-expand-horizontal btnMainIcon'></i>Expand</button>
|
||||||
|
<div class="filtersMainSecBox">
|
||||||
|
<div class="dropdown dropdownMain"><button class="dropdown-toggle btnMain dropdownMainBtn filtersMainSecBtn" aria-expanded="false" data-bs-toggle="dropdown" type="button">Dropdown </button>
|
||||||
|
<div class="dropdown-menu dropdownMainMenu"><a class="dropdown-item dropdownMainMenuItem" href="#">First Item</a><a class="dropdown-item dropdownMainMenuItem" href="#">Second Item</a><a class="dropdown-item dropdownMainMenuItem" href="#">Third Item</a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="filtersMainSec filtersMainSecAlt">
|
||||||
|
<div class="filtersMainSecBox">
|
||||||
|
<div class="inputWrapper inputWrapperAlt"><input type="text" class="inputMain" placeholder="Search term"><button class="btnMain inputMainBtn" type="button"><i class='bx bx-search-alt-2 btnMainIcon'></i></button></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="listingExpandable" class="containerMain">
|
||||||
|
<div class="secMainInside">
|
||||||
|
<div class="listingGrid">
|
||||||
|
<div class="listingGridSec listingGridSecSide listingGridSecSideActive">
|
||||||
|
<div class="listingGridSecSideInside">
|
||||||
|
<div class="listingGridSecBox listingGridSecSideBox">
|
||||||
|
<h4>Categories</h4>
|
||||||
|
</div>
|
||||||
|
<div class="listingGridSecBox listingGridSecSideBox">
|
||||||
|
<div class="listingGridSecSideBoxList"><button class="btnMain listingGridSecSideBoxListBtn" type="button"><span class="listingGridSecSideBoxListBtnText">Category type</span><i class='bx bx-chevron-down btnMainIcon listingGridSecSideBoxListBtnIcon'></i></button>
|
||||||
|
<div class="listingGridSecSideBoxListItems listingGridSecSideBoxListItemsActive">
|
||||||
|
<div class="listingGridSecSideBoxListItemsItem">
|
||||||
|
<div class="checkboxWrapper"><input type="checkbox" class="checkboxWrapperCheck"><label class="form-label inputMainLabel">Label</label></div>
|
||||||
|
</div>
|
||||||
|
<div class="listingGridSecSideBoxListItemsItem">
|
||||||
|
<div class="checkboxWrapper checkboxWrapperFancy"><input type="checkbox" class="checkboxWrapperCheck"><label class="form-label inputMainLabel">Label</label></div>
|
||||||
|
</div>
|
||||||
|
<div class="listingGridSecSideBoxListItemsItem">
|
||||||
|
<div class="checkboxWrapper checkboxWrapperFancy"><input type="checkbox" class="checkboxWrapperCheck"><label class="form-label inputMainLabel">Label</label></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="listingGridSecSideBoxList"><button class="btnMain listingGridSecSideBoxListBtn" type="button"><span class="listingGridSecSideBoxListBtnText">Category type</span><i class='bx bx-chevron-down btnMainIcon listingGridSecSideBoxListBtnIcon'></i></button>
|
||||||
|
<div class="listingGridSecSideBoxListItems listingGridSecSideBoxListItemsActive">
|
||||||
|
<div class="listingGridSecSideBoxListItemsItem">
|
||||||
|
<div class="checkboxWrapper"><input type="radio" class="checkboxWrapperCheckRadio" name="dada"><label class="form-label inputMainLabel">Label</label></div>
|
||||||
|
</div>
|
||||||
|
<div class="listingGridSecSideBoxListItemsItem">
|
||||||
|
<div class="checkboxWrapper checkboxWrapperFancy"><input type="radio" class="checkboxWrapperCheckRadio" name="dada"><label class="form-label inputMainLabel">Label</label></div>
|
||||||
|
</div>
|
||||||
|
<div class="listingGridSecSideBoxListItemsItem">
|
||||||
|
<div class="checkboxWrapper checkboxWrapperFancy"><input type="radio" class="checkboxWrapperCheckRadio" name="dada"><label class="form-label inputMainLabel">Label</label></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="listingGridSec listingGridSecSideBody">
|
||||||
|
<div class="listingGridSecBox">
|
||||||
|
<div class="secMainInsideGrid secMainInsideGrid4">
|
||||||
|
<div class="storeCardMain">
|
||||||
|
<div class="storeCardMainInside">
|
||||||
|
<div class="storeCardMainInsideTop">
|
||||||
|
<div class="storeCardMainInsideTopPicture"><img class="storeCardMainInsideTopPictureImg" src="https://image.nostr.build/a66cc6c0b32d70362dc791f9cf338133db945a0abe1c08f0b940de00130c80fa.jpg"><i class='bx bxs-store-alt storeCardMainInsideTopIcon'></i></div>
|
||||||
|
<div class="storeCardMainInsideTopProducts"><a class="storeCardMainInsideTopProductsPicture" href="#"><img class="storeCardMainInsideTopProductsPictureImg" src="assets/img/why-didnt-booker-immedietly-cover-up-his-ad-tattoo-when-he-v0-yd4j8grc9tcc1.webp">
|
||||||
|
<div class="storeCardMainInsideTopProductsPictureDetails">
|
||||||
|
<h4 class="storeCardMainInsideTopProductsPictureDetailsTitle">Product title</h4>
|
||||||
|
<p class="storeCardMainInsideTopProductsPictureDetailsPrice">$25</p>
|
||||||
|
</div>
|
||||||
|
</a><a class="storeCardMainInsideTopProductsPicture" href="#"><img class="storeCardMainInsideTopProductsPictureImg" src="assets/img/why-didnt-booker-immedietly-cover-up-his-ad-tattoo-when-he-v0-yd4j8grc9tcc1.webp">
|
||||||
|
<div class="storeCardMainInsideTopProductsPictureDetails">
|
||||||
|
<h4 class="storeCardMainInsideTopProductsPictureDetailsTitle">Product title</h4>
|
||||||
|
<p class="storeCardMainInsideTopProductsPictureDetailsPrice">$25</p>
|
||||||
|
</div>
|
||||||
|
</a><a class="storeCardMainInsideTopProductsPicture" href="#"><img class="storeCardMainInsideTopProductsPictureImg" src="assets/img/why-didnt-booker-immedietly-cover-up-his-ad-tattoo-when-he-v0-yd4j8grc9tcc1.webp">
|
||||||
|
<div class="storeCardMainInsideTopProductsPictureDetails">
|
||||||
|
<h4 class="storeCardMainInsideTopProductsPictureDetailsTitle">Product title</h4>
|
||||||
|
<p class="storeCardMainInsideTopProductsPictureDetailsPrice">$25</p>
|
||||||
|
</div>
|
||||||
|
</a></div>
|
||||||
|
<div class="storeCardMainInsideTopDetails">
|
||||||
|
<div class="storeCardMainInsideTopDetailsTop"></div>
|
||||||
|
<div class="storeCardMainInsideTopDetailsBottom">
|
||||||
|
<div class="storeCardMainInsideTopDetailsTag"><i class='bx bxs-map storeCardMainInsideTopDetailsTagIcon'></i>
|
||||||
|
<div class="storeCardMainInsideTopDetailsTagDivider"></div>
|
||||||
|
<p class="storeCardMainInsideTopDetailsTagText">Online</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="storeCardMainInsideMid">
|
||||||
|
<h3 class="storeCardMainInsideMidTitle">Jimmy's Long Smokes</h3>
|
||||||
|
<p class="storeCardMainInsideMidText">Need a smoke? A specific kind of smoke? We got it. We got the long, the short, the thick and thin, the brown and black. We have them all.</p>
|
||||||
|
</div>
|
||||||
|
<div class="storeCardMainInsideBot"><a role="button" class="btnMain storeCardMainInsideBotBtn" href="storePage.html">Visit stall</a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="storeCardMain">
|
||||||
|
<div class="storeCardMainInside">
|
||||||
|
<div class="storeCardMainInsideTop">
|
||||||
|
<div class="storeCardMainInsideTopPicture"><img class="storeCardMainInsideTopPictureImg" src="https://image.nostr.build/a66cc6c0b32d70362dc791f9cf338133db945a0abe1c08f0b940de00130c80fa.jpg"><i class='bx bxs-store-alt storeCardMainInsideTopIcon'></i></div>
|
||||||
|
<div class="storeCardMainInsideTopProducts"><a class="storeCardMainInsideTopProductsPicture" href="#"><img class="storeCardMainInsideTopProductsPictureImg" src="assets/img/why-didnt-booker-immedietly-cover-up-his-ad-tattoo-when-he-v0-yd4j8grc9tcc1.webp">
|
||||||
|
<div class="storeCardMainInsideTopProductsPictureDetails">
|
||||||
|
<h4 class="storeCardMainInsideTopProductsPictureDetailsTitle">Product title</h4>
|
||||||
|
<p class="storeCardMainInsideTopProductsPictureDetailsPrice">$25</p>
|
||||||
|
</div>
|
||||||
|
</a><a class="storeCardMainInsideTopProductsPicture" href="#"><img class="storeCardMainInsideTopProductsPictureImg" src="assets/img/why-didnt-booker-immedietly-cover-up-his-ad-tattoo-when-he-v0-yd4j8grc9tcc1.webp">
|
||||||
|
<div class="storeCardMainInsideTopProductsPictureDetails">
|
||||||
|
<h4 class="storeCardMainInsideTopProductsPictureDetailsTitle">Product title</h4>
|
||||||
|
<p class="storeCardMainInsideTopProductsPictureDetailsPrice">$25</p>
|
||||||
|
</div>
|
||||||
|
</a><a class="storeCardMainInsideTopProductsPicture" href="#"><img class="storeCardMainInsideTopProductsPictureImg" src="assets/img/why-didnt-booker-immedietly-cover-up-his-ad-tattoo-when-he-v0-yd4j8grc9tcc1.webp">
|
||||||
|
<div class="storeCardMainInsideTopProductsPictureDetails">
|
||||||
|
<h4 class="storeCardMainInsideTopProductsPictureDetailsTitle">Product title</h4>
|
||||||
|
<p class="storeCardMainInsideTopProductsPictureDetailsPrice">$25</p>
|
||||||
|
</div>
|
||||||
|
</a></div>
|
||||||
|
<div class="storeCardMainInsideTopDetails">
|
||||||
|
<div class="storeCardMainInsideTopDetailsTop"></div>
|
||||||
|
<div class="storeCardMainInsideTopDetailsBottom">
|
||||||
|
<div class="storeCardMainInsideTopDetailsTag"><i class='bx bxs-map storeCardMainInsideTopDetailsTagIcon'></i>
|
||||||
|
<div class="storeCardMainInsideTopDetailsTagDivider"></div>
|
||||||
|
<p class="storeCardMainInsideTopDetailsTagText">Online</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="storeCardMainInsideMid">
|
||||||
|
<h3 class="storeCardMainInsideMidTitle">Jimmy's Long Smokes</h3>
|
||||||
|
<p class="storeCardMainInsideMidText">Need a smoke? A specific kind of smoke? We got it. We got the long, the short, the thick and thin, the brown and black. We have them all.</p>
|
||||||
|
</div>
|
||||||
|
<div class="storeCardMainInsideBot"><a role="button" class="btnMain storeCardMainInsideBotBtn" href="storePage.html">Visit stall</a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="paginationMain">
|
||||||
|
<div class="paginationMainInside"><button class="btnMain paginationMainInsideBtn" type="button"><i class='bx bx-chevron-left btnMainIcon'></i></button>
|
||||||
|
<div class="paginationMainInsideDivider"></div>
|
||||||
|
<div class="paginationMainInsideNumbers"><button class="btnMain paginationMainInsideNumbersBtn paginationMainInsideNumbersBtnActive" type="button">1</button><button class="btnMain paginationMainInsideNumbersBtn" type="button">2</button><button class="btnMain paginationMainInsideNumbersBtn" type="button">3</button></div>
|
||||||
|
<div class="paginationMainInsideDivider"></div><button class="btnMain paginationMainInsideBtn" type="button"><i class='bx bx-chevron-right btnMainIcon'></i></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="BottomMain">
|
||||||
|
<div class="BottomMainInside">
|
||||||
|
<div class="BottomMainInsideTop">
|
||||||
|
<div class="containerMain">
|
||||||
|
<div class="BottomMainInsideTopInside">
|
||||||
|
<div class="BottomMainInsideTopInsideSec">
|
||||||
|
<div class="BottomMainInsideTopInsideSecLeft"><img class="BottomMainInsideTopInsideSecLogo" src="Nostr Dev Logo Mark.svg">
|
||||||
|
<p style="font-weight: 800;text-align: center;font-size: 30px;line-height: 1;color: #ff9900;">CHEEMS MARKET</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="BottomMainInsideTopInsideSec">
|
||||||
|
<div class="BottomMainInsideTopInsideSecMid"><a class="BottomMainInsideTopInsideSecMidLink" href="/">Home</a><a class="BottomMainInsideTopInsideSecMidLink" href="/#Team">text</a><a class="BottomMainInsideTopInsideSecMidLink" href="../portfolio.html">text</a><a class="BottomMainInsideTopInsideSecMidLink" href="../blog.html">About</a><a class="BottomMainInsideTopInsideSecMidLink" href="../career.html">text</a></div>
|
||||||
|
</div>
|
||||||
|
<div class="BottomMainInsideTopInsideSec">
|
||||||
|
<div class="BottomMainInsideTopInsideSecRight">
|
||||||
|
<p class="BottomMainInsideTopInsideSecRightText">text</p>
|
||||||
|
<div class="BottomMainInsideTopInsideSecRightSocials"><a role="button" class="btnMain BottomMainInsideTopInsideSecRightSocialsBtn" href="#"><img class="btnMainImgMain" src="https://image.nostr.build/fb557f1b6d58c7bbcdf4d1edb1b48090c76ff1d1384b9d1aae13d652e7a3cfe4.gif"></a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="BottomMainInsideBottom">
|
||||||
|
<div class="containerMain">
|
||||||
|
<div class="BottomMainInsideBottomInside">
|
||||||
|
<p class="BottomMainInsideBottomInsideText">Copyright © <script>document.write(new Date().getFullYear())</script> <a class="BottomMainInsideBottomInsideTextLink" href="#">Chems</a> All Rights Reserved.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
|
||||||
|
<script src="assets/js/bs-init.js"></script>
|
||||||
|
<script src="assets/js/categoryDrop.js"></script>
|
||||||
|
<script src="assets/js/checkboxBetter.js"></script>
|
||||||
|
<script src="assets/js/expandList.js"></script>
|
||||||
|
<script src="assets/js/toggleCategories.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user