From 3f7e5722d599b6bf0574f4b0ff560ff8910e1722 Mon Sep 17 00:00:00 2001 From: free ko Date: Tue, 19 Nov 2024 17:01:33 +0200 Subject: [PATCH] landing page edit --- .../css/Simple-Slider-Simple-Slider.css | 25 ++ public/assets/css/footer.css | 2 +- public/assets/css/landing.css | 388 ++++++++++++++++++ public/assets/css/styles.css | 18 + public/assets/js/Simple-Slider.js | 23 ++ public/checkout.html | 5 + public/createProduct.html | 5 + public/createStore.html | 5 + public/index.html | 87 +++- public/productPage.html | 5 + public/products.html | 5 + public/storePage.html | 5 + public/stores.html | 5 + public/userPage.html | 5 + 14 files changed, 580 insertions(+), 3 deletions(-) create mode 100644 public/assets/css/Simple-Slider-Simple-Slider.css create mode 100644 public/assets/css/landing.css create mode 100644 public/assets/js/Simple-Slider.js diff --git a/public/assets/css/Simple-Slider-Simple-Slider.css b/public/assets/css/Simple-Slider-Simple-Slider.css new file mode 100644 index 0000000..18a3906 --- /dev/null +++ b/public/assets/css/Simple-Slider-Simple-Slider.css @@ -0,0 +1,25 @@ +.simple-slider .swiper-slide { + height: 500px; + background-repeat: no-repeat; + background-size: cover; + background-position: center; +} + +.simple-slider .swiper-button-next, .simple-slider .swiper-button-prev { + /*width: 50px;*/ + margin-left: 20px; + margin-right: 20px; +} + +@media (max-width:767px) { + .simple-slider .swiper-button-next, .simple-slider .swiper-button-prev { + /*display: none;*/ + } +} + +@media (max-width:767px) { + .simple-slider .swiper-slide { + height: 360px; + } +} + diff --git a/public/assets/css/footer.css b/public/assets/css/footer.css index 63b4f20..125f4ef 100644 --- a/public/assets/css/footer.css +++ b/public/assets/css/footer.css @@ -4,7 +4,7 @@ flex-direction: column; align-items: center; background: white; - box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); + box-shadow: 0 0 8px 0 rgba(0,0,0,0.05); border-top: solid 1px rgba(0,0,0,0.1); } diff --git a/public/assets/css/landing.css b/public/assets/css/landing.css new file mode 100644 index 0000000..499aa74 --- /dev/null +++ b/public/assets/css/landing.css @@ -0,0 +1,388 @@ +.secMain.secMainHero { + background: rgba(0,0,0,0.05); + border-bottom: solid 1px rgba(0,0,0,0.1); + margin-top: -2px; +} + +.simple-slider.heroSlider { + width: 100%; + /*height: auto;*/ + /*width: auto;*/ + /*min-width: auto;*/ + /*min-height: auto;*/ +} + +.swiper-container.heroSliderInside { + width: 100%; + display: flex; + flex-direction: column; + grid-gap: 10px; +} + +.swiper-wrapper.heroSliderInsideWrapper { + width: 100%; +} + +.swiper-slide.heroSliderInsideWrapperSlide { + height: 450px!important; + display: flex; + flex-direction: row; + grid-gap: 25px; + justify-content: center; + align-items: center; +} + +@media (max-width: 992px) { + .swiper-slide.heroSliderInsideWrapperSlide { + height: 600px!important; + } +} + +@media (max-width: 576px) { + .swiper-slide.heroSliderInsideWrapperSlide { + height: 400px!important; + } +} + +.swiper-pagination.heroSliderInsidePagination { + position: relative; + padding: 10px; +} + +.swiper-button-prev.heroSliderInsideBtn, .swiper-button-next.heroSliderInsideBtn { + transition: ease 0.3s; + position: relative; + width: 100%; + margin: 0!important; + max-width: 125px; + font-size: 24px; + color: rgba(0,0,0,0.5); + border-radius: 6px; + background: rgba(255,255,255,0.5); + border: solid 1px rgba(0,0,0,0.1); + padding: 5px!important; + height: auto; +} + +@media (max-width: 992px) { + .swiper-button-prev.heroSliderInsideBtn, .swiper-button-next.heroSliderInsideBtn { + max-width: unset; + } +} + +.swiper-button-prev.heroSliderInsideBtn:hover, .swiper-button-next.heroSliderInsideBtn:hover { + color: #ffffff; + background: rgb(255,153,0); + border: solid 1px rgba(0,0,0,0); +} + +.swiper-button-prev.heroSliderInsideBtn::after, .swiper-button-next.heroSliderInsideBtn::after { + content: none; +} + +.swiper-button-prev.heroSliderInsideBtn.heroSliderInsideLeft { +} + +.swiper-button-next.heroSliderInsideBtn.heroSliderInsideRight { +} + +.heroSliderInsideBtns { + width: 100%; + display: flex; + flex-direction: row; + grid-gap: 35px; + justify-content: center; + align-items: center; +} + +.heroSliderInsideWrapperSlideStore { + width: 100%; + height: 100%; + display: flex; + flex-direction: row; + grid-gap: 25px; + padding: 15px; +} + +@media (max-width: 992px) { + .heroSliderInsideWrapperSlideStore { + flex-direction: column; + padding: 0; + grid-gap: 15px; + } +} + +.heroSliderInsideWrapperSlideStoreMedia { + width: 100%; + height: 100%; + background: white; + padding: 10px; + border-radius: 10px; + box-shadow: 0 0 4px 0 rgb(0,0,0,0.1); +} + +.heroSliderInsideWrapperSlideStoreDetails { + display: flex; + flex-direction: column; + grid-gap: 15px; + min-width: 350px; +} + +@media (max-width: 992px) { + .heroSliderInsideWrapperSlideStoreDetails { + min-width: unset; + max-height: 200px; + } +} + +.heroSliderInsideWrapperSlideStoreDetailsSec { + height: 100%; + width: 100%; + background: white; + border-radius: 8px; + box-shadow: 0 0 4px 0 rgb(0,0,0,0.1); + display: flex; + flex-direction: column; + grid-gap: 25px; + padding: 0px; + overflow: auto; + border: solid 10px white; +} + +@media (max-width: 992px) { + .heroSliderInsideWrapperSlideStoreDetailsSec { + flex-direction: row; + } +} + +.heroSliderInsideWrapperSlideStoreDetailsSec::-webkit-scrollbar { + display: none; +} + +.heroSliderInsideWrapperSlideStoreMediaPic { + width: 100%; + height: 100%; + /*padding-top: 56.25%;*/ + position: relative; + overflow: hidden; + /*box-shadow: 0 0 4px 0 rgb(0,0,0,0.1);*/ + border: solid 1px rgba(0,0,0,0.1); + border-radius: 8px; +} + +.heroSliderInsideWrapperSlideStoreMediaPicImg { + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + height: 100%; + width: 100%; + object-fit: cover; +} + +.heroSliderInsideWrapperSlideStoreDetailsSecProduct { + transition: ease 0.4s; + overflow: hidden; + border-radius: 8px; + background: rgba(0,0,0,0.1); + width: 100%; + display: flex; + flex-direction: column; + grid-gap: 10px; + padding: 10px; + padding-top: 56.25%; + position: relative; + border: solid 2px rgba(255,153,0,0); +} + +@media (max-width: 992px) { + .heroSliderInsideWrapperSlideStoreDetailsSecProduct { + padding-top: unset; + min-width: 300px; + min-height: 135px; + } +} + +.heroSliderInsideWrapperSlideStoreDetailsSecProduct:hover { + border: solid 2px #ff9900; + transform: scale(1.01); +} + +.heroSliderInsideWrapperSlideStoreDetailsSecProductImg { + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + height: 100%; + width: 100%; + object-fit: cover; +} + +.heroSliderInsideWrapperSlideStoreDetailsSecProductDetails { + width: 100%; + height: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + padding: 15px; + display: flex; + flex-direction: column; + justify-content: end; +} + +.heroSliderInsideWrapperSlideStoreDetailsSecProductDetailsText { + color: rgba(255,255,255,0.75); + font-weight: 700; + font-size: 14px; + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + -webkit-line-clamp: 1; +} + +.heroSliderInsideWrapperSlideStoreMediaPicDetails { + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + display: flex; + flex-direction: column; + justify-content: end; + padding: 15px; +} + +.heroSliderInsideWrapperSlideStoreMediaPicDetailsBox { + width: 100%; + background: rgba(255,255,255,0.75); + border-radius: 8px; + padding: 15px; + backdrop-filter: blur(10px); + box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); + display: flex; + flex-direction: row; + grid-gap: 15px; + align-items: center; +} + +.heroSliderInsideWrapperSlideStoreMediaPicDetailsBoxPic { + transition: ease 0.4s; + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + overflow: hidden; + border-radius: 8px; + max-width: 75px; + max-height: 75px; + height: 75px; + position: relative; + border: solid 2px #ffffff; + box-shadow: 0 0 4px 0 rgba(0,0,0,0); +} + +@media (max-width: 576px) { + .heroSliderInsideWrapperSlideStoreMediaPicDetailsBoxPic { + max-width: 50px; + max-height: 50px; + height: 50px; + display: none; + } +} + +.heroSliderInsideWrapperSlideStoreMediaPicDetailsBoxPic:hover { + border: solid 2px #ff9900; + box-shadow: 0 0 4px 0 rgb(0,0,0,0.1); +} + +.heroSliderInsideWrapperSlideStoreMediaPicDetailsBoxPicImg { + width: 100%; + height: 100%; + object-fit: cover; + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; +} + +.heroSliderInsideWrapperSlideStoreMediaPicDetailsBoxText { + flex-grow: 1; + display: flex; + flex-direction: column; + grid-gap: 5px; + font-size: 16px; +} + +.heroSliderInsideWrapperSlideStoreMediaPicDetailsBoxTextName { + font-weight: 600; + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + -webkit-line-clamp: 1; +} + +.heroSliderInsideWrapperSlideStoreMediaPicDetailsBoxTextBio { + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + -webkit-line-clamp: 2; +} + +.infoCardLanding { + transition: ease 0.4s; + width: 100%; + display: flex; + flex-direction: column; + background: rgba(255,255,255,0.5); + border-radius: 8px; + overflow: hidden; + border: solid 4px rgba(0,0,0,0); + padding: 25px 25px; + box-shadow: 0 0 4px 0 rgba(0,0,0,0); + grid-gap: 25px; + color: rgba(0,0,0,0.5); +} + +.infoCardLanding:hover { + background: #ffffff; + overflow: hidden; + border: solid 4px rgb(255,153,0); + box-shadow: 0 0 4px 0 rgba(0,0,0,0); + color: rgba(0,0,0,0.65); + transform: scale(1.01); +} + +.infoCardLandingMedia { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + grid-gap: 10px; + font-size: 52px; + /*color: rgba(0,0,0,0.5);*/ +} + +.infoCardLandingDetails { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + grid-gap: 10px; + /*color: rgba(0,0,0,0.5);*/ +} + +.infoCardLandingDetailsHead { + font-size: 24px; + font-weight: 700; +} + +.infoCardLandingDetailsText { +} + diff --git a/public/assets/css/styles.css b/public/assets/css/styles.css index 502d2f7..1e2a9db 100644 --- a/public/assets/css/styles.css +++ b/public/assets/css/styles.css @@ -160,6 +160,8 @@ a:hover { .MidMain { width: 100%; flex-grow: 1; + display: flex; + flex-direction: column; } .secMainInside { @@ -282,6 +284,10 @@ a:hover { grid-gap: 10px; } +.secMainInsideHead.secMainInsideHeadAlt { + text-align: center; +} + .secMainInsideHeadHeading { } @@ -540,3 +546,15 @@ a:hover { color: rgba(0,0,0,0.65); } +.secDivider { + width: 100%; + height: 1px; + background: rgba(0,0,0,0.05); +} + +.secDivider.secDividerAlt { + max-width: 85%; + justify-self: center; + align-self: center; +} + diff --git a/public/assets/js/Simple-Slider.js b/public/assets/js/Simple-Slider.js new file mode 100644 index 0000000..c5b9fc8 --- /dev/null +++ b/public/assets/js/Simple-Slider.js @@ -0,0 +1,23 @@ +document.addEventListener("DOMContentLoaded", function() { + + // Initializing the swiper plugin for the slider. + // Read more here: http://idangero.us/swiper/api/ + + var mySwiper = new Swiper('.swiper-container', { + loop: true, + speed: 1200, + stopOnLastSlide: false, + autoplay: {delay: 8000,}, + pagination: { + el: '.swiper-pagination' , + clickable: true + }, + paginationClickable: true, + navigation: { + nextEl: '.swiper-button-next', + prevEl: '.swiper-button-prev' + }, + spaceBetween: 10, + }); + +}); \ No newline at end of file diff --git a/public/checkout.html b/public/checkout.html index 679f98f..0e5b8c7 100644 --- a/public/checkout.html +++ b/public/checkout.html @@ -12,6 +12,8 @@ + + @@ -19,6 +21,7 @@ + @@ -376,7 +379,9 @@ + + diff --git a/public/createProduct.html b/public/createProduct.html index db5bcde..8230da3 100644 --- a/public/createProduct.html +++ b/public/createProduct.html @@ -12,6 +12,8 @@ + + @@ -19,6 +21,7 @@ + @@ -348,7 +351,9 @@ + + diff --git a/public/createStore.html b/public/createStore.html index 120ca4f..e7669bc 100644 --- a/public/createStore.html +++ b/public/createStore.html @@ -12,6 +12,8 @@ + + @@ -19,6 +21,7 @@ + @@ -336,7 +339,9 @@ + + diff --git a/public/index.html b/public/index.html index 5b765fb..6ef6bb0 100644 --- a/public/index.html +++ b/public/index.html @@ -12,6 +12,8 @@ + + @@ -19,6 +21,7 @@ + @@ -80,11 +83,89 @@
-
+
-
+
+
+
+
+
+
+
+
+
+
+
+

Store name

+

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.

+
+
+
+
+
+
+
+
+

Product name

+
+ +
+

Product name

+
+ +
+

Product name

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Welcome to the Decentralised Marketplace

+

Where you have the power, both as a normal buyer and as a seller or store owner

+
+
+
+
+
+

Freedom Tech

+

Powered by Nostr & Bitcoin, enjoy your rightful freedom

+
+
+
+
+
+

True Ownership

+

You truly own your 'account' and your store with its products.

+
+
+
+
+
+

No Middlemen

+

Transact with whomever you want with, regardless of who they are or where they're from

+
+
+
+
+
+
+
+
+
@@ -441,7 +522,9 @@ + + diff --git a/public/productPage.html b/public/productPage.html index 4e353af..eef928a 100644 --- a/public/productPage.html +++ b/public/productPage.html @@ -12,6 +12,8 @@ + + @@ -19,6 +21,7 @@ + @@ -594,7 +597,9 @@ + + diff --git a/public/products.html b/public/products.html index c3ed686..8de210d 100644 --- a/public/products.html +++ b/public/products.html @@ -12,6 +12,8 @@ + + @@ -19,6 +21,7 @@ + @@ -380,7 +383,9 @@ + + diff --git a/public/storePage.html b/public/storePage.html index dbe1946..00f9fd8 100644 --- a/public/storePage.html +++ b/public/storePage.html @@ -12,6 +12,8 @@ + + @@ -19,6 +21,7 @@ + @@ -458,7 +461,9 @@ + + diff --git a/public/stores.html b/public/stores.html index 6f2da13..d4025a9 100644 --- a/public/stores.html +++ b/public/stores.html @@ -12,6 +12,8 @@ + + @@ -19,6 +21,7 @@ + @@ -384,7 +387,9 @@ + + diff --git a/public/userPage.html b/public/userPage.html index b6a9af3..2d592d9 100644 --- a/public/userPage.html +++ b/public/userPage.html @@ -12,6 +12,8 @@ + + @@ -19,6 +21,7 @@ + @@ -452,7 +455,9 @@ + +