diff --git a/aparna/Etsy/data.JSON b/aparna/Etsy/data.JSON new file mode 100644 index 0000000..3d5fc99 --- /dev/null +++ b/aparna/Etsy/data.JSON @@ -0,0 +1,190 @@ + { + "categoryList": [ + { + "title": "Seller's Sales Hub", + "img": "" + }, + { "title": "Jewellery & Accessories", "img": "" }, + { "title": "Clothing & Shoes", "img": "" }, + { "title": "Home & Living", "img": "" }, + { "title": "Wedding & Party", "img": "" }, + { "title": "Toys & Entertainment", "img": "" }, + { "title": "Art & Collectibles" }, + { "title": "Craft Supplies", "img": "" }, + { + "title": "Gifts", + "img": "" + } + ], + "discoverItems": [ + { + "url": "https://i.etsystatic.com/17600118/c/1000/1000/0/11…/d077de/2325460652/il_300x300.2325460652_lhfz.jpg", + "text": "Wedding" + }, + { + "url": "https://i.etsystatic.com/18077312/r/il/b10e09/2350226444/il_300x300.2350226444_odar.jpg", + "text": "Jewellery" + }, + { + "url": "https://i.etsystatic.com/32501528/c/1518/1518/253/…/4bdfa0/3702738409/il_300x300.3702738409_qfmi.jpg", + "text": "Clothing" + }, + { + "url": "https://i.etsystatic.com/16676438/c/2002/2002/449/…/89ea5d/1467855817/il_300x300.1467855817_ksv4.jpg", + "text": "Home & Living" + }, + { + "url": "\thttps://i.etsystatic.com/30725321/r/il/a22d35/4016941798/il_300x300.4016941798_bruv.jpg", + "text": "Wall Art" + }, + { + "url": "https://i.etsystatic.com/19220794/r/il/28ced3/2951466885/il_300x300.2951466885_1ly4.jpg", + "text": "Kitchen & Dining" + } + ], + "clothCategory": [ + { + "url": "https://i.etsystatic.com/22368382/r/il/006d21/4245808662/il_300x300.4245808662_a3x4.jpg", + "discount": "Up to 40% off on", + "clothText": "Women's Ethnic Clothing" + }, + { + "url": "\thttps://i.etsystatic.com/32501528/c/1488/1488/0/0/…/23a5b4/3700725057/il_300x300.3700725057_szgj.jpg", + "discount": "Up to 40% off on", + "clothText": "Women's Western Clothing" + }, + { + "url": "https://i.etsystatic.com/25566015/c/2003/2003/0/274/il/5b71e2/3196479462/il_300x300.3196479462_20xh.jpg", + "discount": "Up to 40% off on", + "clothText": "Men's Clothing" + }, + { + "url": "https://i.etsystatic.com/38026977/r/il/f2c1ad/4277525816/il_300x300.4277525816_f4wp.jpg", + "discount": "Up to 40% off on", + "clothText": "Fashion Jewellery" + }, + { + "url": "https://i.etsystatic.com/32501528/c/1757/1757/247/180/il/67dc01/4248212322/il_300x300.4248212322_psvv.jpg", + "discount": "Up to 40% off on", + "clothText": "Winter Clothing" + }, + { + "url": "https://i.etsystatic.com/23528878/r/il/625e23/2589827894/il_300x300.2589827894_bi5a.jpg", + "discount": "Up to 40%", + "clothText": "Wedding Clothing" + } + ], + "popularItems": [ + { + "url": "https://i.etsystatic.com/35966576/c/1614/1283/669/…/e1510f/4033777789/il_340x270.4033777789_dqlw.jpg", + "title": "Birth Flower Jewelry Travel Case, Birth Month Flower Gift, Personalized Birthday Gift, Leather Jewelry Travel Case, Custom Jewelry Case", + "star": 1, + "reviews": 9536, + "symbol": "₹", + "actualPrice": 1711, + "discount": 50, + "videoURL": "", + "delivery": "", + "playButton": "", + "tooltipText": "Birth Flower Jewelry Travel Case, Birth Month Flower Gift, Personalized Birthday Gift, Leather Jewelry Travel Case,Custom Jewelry Case." + }, + { + "url": "https://i.etsystatic.com/32477306/c/2000/1589/0/25…/0bcd64/3491080620/il_340x270.3491080620_oh18.jpg", + "title": "Dainty Name Necklace with Birth Flower, Personalized Name Necklace, Custom Gold Name Jewelry, Birthday Gift for Her, Bridesmaid Gift", + "star": 2.1, + "reviews": 13612, + "symbol": "₹", + "actualPrice": 3298, + "discount": 50, + "videoURL": "", + "delivery": "Free delivery", + "playButton": "", + "tooltipText": "Dainty Name Necklace with Birth Flower, Personalized Name NecKlace, Custom Gold Name Jewelry, Birthday Gift for Her, Bridesmaid Gift" + }, + { + "url": "https://i.etsystatic.com/25168585/c/2500/1987/0/181/il/214e7e/4589233930/il_340x270.4589233930_dg79.jpg", + "title": "Custom Pet Portraits Using Pet Photo Personalized Digital Dog portraits Cat Portraits Custom Pet Art Pet Drawing", + "star": 3.8, + "reviews": 11164, + "symbol": "₹", + "actualPrice": 1277, + "discount": 40, + "videoURL": "https://v-cg.etsystatic.com/video/upload/ac_none,du_15,q_auto:good/PAINT_PORTRAIT_ETSY_VIDEO_vo9waf.mp4", + "delivery": "", + "playButton": "", + "tooltipText": "Personalised Song Plaque with stand, Any Playlist Photo/song, Photo and Music Gift, Music Prints." + }, + { + "url": "https://i.etsystatic.com/28045281/r/il/3f41fa/3897994052/il_340x270.3897994052_l8xd.jpg", + "title": "Sun Catcher/ Crystal suncatcher/ Crystal Rainbow marker/ Aurora gemstone suncatcher/ crystal prism/ wall hanging/ Home decor/ Gift 4 women", + "star": 5, + "reviews": 6879, + "symbol": "₹", + "actualPrice": 2653, + "discount": 10, + "videoURL": "https://v-cg.etsystatic.com/video/upload/ac_none,du_15,q_auto:good/Purple1_aal8ie.mp4", + "delivery": "FREE delivery", + "playButton": "", + "tooltipText": "Handmade Damascus Pocket Knife Rose Wood Handke Birthday Gift Folding knife Groomsmen Gift Anniversary Wedding Personalized Gift for Men" + }, + { + "url": "\thttps://i.etsystatic.com/27890741/c/2343/1862/320/…/31a0dd/4028709894/il_340x270.4028709894_i6tr.jpg", + "title": "Heart Keychain Set - Made with Authentic LEGO® Bricks, Matching keychains, Gift Set for Couples, Best Friends - Very High Quality & DURABLE", + "star": 5, + "reviews": 12411, + "symbol": "₹", + "actualPrice": 1453, + "discount": 50, + "videoURL": "https://v-cg.etsystatic.com/video/upload/ac_none,du_15,q_auto:good/HFF_Hearts_Video_m6nj4t.mp4", + "delivery": "", + "playButton": "", + "tooltipText": "Heart KeyChain set-Made with Authentic LEGO Bricks, Matching Keychains, Gift Set for couples,Best Friends-Very High Quality & Durable" + }, + { + "url": "https://i.etsystatic.com/26694795/c/2445/1943/282/…/035b01/3254592822/il_340x270.3254592822_5dss.jpg", + "title": "Handmade Damascus Pocket Knife Rose Wood Handle Birthday Gift Folding Knife Groomsmen Gift Anniversary Wedding Personalized Gift for Men", + "star": 5, + "reviews": 6256, + "symbol": "₹", + "actualPrice": 8219, + "discount": 70, + "videoURL": "https://v-cg.etsystatic.com/video/upload/ac_none,du_15,q_auto:good/PB-42_convert-video-online.com_cfle3f.mp4", + "delivery": "", + "playButton": "" + } + ], + "whatEtsyDo": [ + { + "title": "A Community doing good", + "content": " Etsy is a global online marketplace, where people come together to make, sell, buy and collect unique items. We're also a community pushing for positive change for small businesses, people, and the planet.", + "contentPart": "Here are some of the ways we're making a positive impact together." + }, + { + "title": "Support independent creators", + "content": "There's no Etsy warehouse-just millions of people selling the things they love. We make the whole process easy, helping you connect directly with makers to find something extraordinary", + "contentPart": "" + }, + { + "title": "Peace of mind", + "content": "Your privacy is the highest priority of our dedicated team. And if you ever need assistance, we are always ready to step in for support", + "contentPart": "" + } + ], + "socialIcons": [ + { + "icon": "" + }, + { + "icon": "" + }, + { + "icon": "" + }, + { + "icon": "" + }, + { + "icon": "" + } + ] +} diff --git a/aparna/Etsy/fonts/Graphik-Medium-Web.woff2 b/aparna/Etsy/fonts/Graphik-Medium-Web.woff2 new file mode 100644 index 0000000..895f66d Binary files /dev/null and b/aparna/Etsy/fonts/Graphik-Medium-Web.woff2 differ diff --git a/aparna/Etsy/fonts/Graphik-Regular-Web.woff2 b/aparna/Etsy/fonts/Graphik-Regular-Web.woff2 new file mode 100644 index 0000000..bc3cbe6 Binary files /dev/null and b/aparna/Etsy/fonts/Graphik-Regular-Web.woff2 differ diff --git a/aparna/Etsy/fonts/Guardian-EgypTT-Light.woff2 b/aparna/Etsy/fonts/Guardian-EgypTT-Light.woff2 new file mode 100644 index 0000000..2441a68 Binary files /dev/null and b/aparna/Etsy/fonts/Guardian-EgypTT-Light.woff2 differ diff --git a/aparna/Etsy/functions.js b/aparna/Etsy/functions.js new file mode 100644 index 0000000..b560334 --- /dev/null +++ b/aparna/Etsy/functions.js @@ -0,0 +1,67 @@ +const createNavBar = (divID, cList, elmType, itemClassName) => { + const div = document.querySelector(divID); + for (let i = 0; i < cList.length; i++) { + const listOfCategory = document.createElement(elmType); + listOfCategory.classList.add(itemClassName); + if (cList[i].hasOwnProperty("img") && cList[i].img != "") { + listOfCategory.innerHTML = cList[i].img + cList[i].title; + } else { + listOfCategory.innerHTML = cList[i].title; + } + + div.appendChild(listOfCategory); + } +}; + +function clearPopularContainer() { + const popular = document.querySelector(".popular-sub-container"); + popular.innerHTML = ""; +} + +function createDropdowns(){ + const dropDownBoxes = document.querySelectorAll(".drop-downs"); + const chevronIcon = document.querySelectorAll(".chevron-icon"); + const dropBoxes = document.querySelectorAll(".dropBox"); + dropDownBoxes.forEach((item, i) => { + item.addEventListener("click", () => { + dropBoxes[i].classList.toggle("active"); + chevronIcon[i].classList.toggle("rotation"); + }); + }); +} + + +function toFilterPrice(pItems) { + const filterBtn = document.querySelector(".filter"); + const priceInput = document.querySelector(".price-input"); + priceInput.setAttribute("type", "number"); + + filterBtn.addEventListener("click", () => { + const filteredValue = pItems.filter((items, i) => { + const price = Math.floor( + items.actualPrice - items.actualPrice * (items.discount / 100) + ); + + return price >= Number(priceInput.value); + }); + + clearPopularContainer(); + generatePopularContainer(filteredValue); + console.log(filteredValue); + }); + +} + +const createSocialIcons = (icons) => { + const iconsContainer = document.querySelector(".icons-container"); + for (let i = 0; i < icons.length; i++) { + const iconsList = document.createElement("li"); + iconsList.classList.add("icons-list"); + iconsContainer.appendChild(iconsList); + iconsList.innerHTML = icons[i].icon; + } +}; + +export{ + createNavBar,clearPopularContainer,createDropdowns,toFilterPrice,createSocialIcons +} \ No newline at end of file diff --git a/aparna/Etsy/index.html b/aparna/Etsy/index.html new file mode 100644 index 0000000..dc353cc --- /dev/null +++ b/aparna/Etsy/index.html @@ -0,0 +1,341 @@ + + + + + + + + + Etsy India-shop for handmade vintage custo... + + + +
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/aparna/Etsy/object.js b/aparna/Etsy/object.js new file mode 100644 index 0000000..9bbfb34 --- /dev/null +++ b/aparna/Etsy/object.js @@ -0,0 +1,224 @@ +const giftsSVG = ``; + +const playBtnImg = `` + +const instaIcon = `` + +const fbIcon = `` + +const pinterestIcon = `` + +const twitterIcon = `` + +const youTubeIcon = `` + + const generateHomePage = { + + categoryList : [ + { title: "Seller's Sales Hub", img: "" }, + { title: "Jewellery & Accessories", img: "" }, + { title: "Clothing & Shoes", img: "" }, + { title: "Home & Living", img: "" }, + { title: "Wedding & Party", img: "" }, + { title: "Toys & Entertainment", img: "" }, + { title: "Art & Collectibles" }, + { title: "Craft Supplies", img: "" }, + { title: "Gifts", img: giftsSVG }, + ], + + + discoverItems : [ + { + url: "https://i.etsystatic.com/17600118/c/1000/1000/0/11…/d077de/2325460652/il_300x300.2325460652_lhfz.jpg", + text: "Wedding", + }, + { + url: "https://i.etsystatic.com/18077312/r/il/b10e09/2350226444/il_300x300.2350226444_odar.jpg", + text: "Jewellery", + }, + { + url: "https://i.etsystatic.com/32501528/c/1518/1518/253/…/4bdfa0/3702738409/il_300x300.3702738409_qfmi.jpg", + text: "Clothing", + }, + { + url: "https://i.etsystatic.com/16676438/c/2002/2002/449/…/89ea5d/1467855817/il_300x300.1467855817_ksv4.jpg", + text: "Home & Living", + }, + { + url: " https://i.etsystatic.com/30725321/r/il/a22d35/4016941798/il_300x300.4016941798_bruv.jpg", + text: "Wall Art", + }, + { + url: "https://i.etsystatic.com/19220794/r/il/28ced3/2951466885/il_300x300.2951466885_1ly4.jpg", + text: "Kitchen & Dining", + }, + ] , + + clothCategory : [ + { + url: "https://i.etsystatic.com/22368382/r/il/006d21/4245808662/il_300x300.4245808662_a3x4.jpg", + discount: "Up to 40% off on", + clothText: "Women's Ethnic Clothing", + }, + { + url: " https://i.etsystatic.com/32501528/c/1488/1488/0/0/…/23a5b4/3700725057/il_300x300.3700725057_szgj.jpg", + discount: "Up to 40% off on", + clothText: "Women's Western Clothing", + }, + { + url: "https://i.etsystatic.com/25566015/c/2003/2003/0/274/il/5b71e2/3196479462/il_300x300.3196479462_20xh.jpg", + discount: "Up to 40% off on", + clothText: "Men's Clothing", + }, + { + url: "https://i.etsystatic.com/38026977/r/il/f2c1ad/4277525816/il_300x300.4277525816_f4wp.jpg", + discount: "Up to 40% off on", + clothText: "Fashion Jewellery", + }, + { + url: "https://i.etsystatic.com/32501528/c/1757/1757/247/180/il/67dc01/4248212322/il_300x300.4248212322_psvv.jpg", + discount: "Up to 40% off on", + clothText: "Winter Clothing", + }, + { + url: "https://i.etsystatic.com/23528878/r/il/625e23/2589827894/il_300x300.2589827894_bi5a.jpg", + discount: "Up to 40%", + clothText: "Wedding Clothing", + }, + ], + + popularItems : [ + { + url: "https://i.etsystatic.com/35966576/c/1614/1283/669/…/e1510f/4033777789/il_340x270.4033777789_dqlw.jpg", + title: + "Birth Flower Jewelry Travel Case, Birth Month Flower Gift, Personalized Birthday Gift, Leather Jewelry Travel Case, Custom Jewelry Case", + star: 1, + reviews: 9536, + symbol: "₹", + actualPrice: 1711, + discount: 50, + videoURL: "", + delivery: "", + playButton: "", + tooltipText : "Birth Flower Jewelry Travel Case, Birth Month Flower Gift, Personalized Birthday Gift, Leather Jewelry Travel Case,Custom Jewelry Case." + + }, + { + url: "https://i.etsystatic.com/32477306/c/2000/1589/0/25…/0bcd64/3491080620/il_340x270.3491080620_oh18.jpg", + title: + "Dainty Name Necklace with Birth Flower, Personalized Name Necklace, Custom Gold Name Jewelry, Birthday Gift for Her, Bridesmaid Gift", + star: 2.1, + reviews: 13612, + symbol: "₹", + actualPrice: 3298, + discount: 50, + videoURL: "", + delivery: "Free delivery", + playButton: "", + tooltipText : "Dainty Name Necklace with Birth Flower, Personalized Name NecKlace, Custom Gold Name Jewelry, Birthday Gift for Her, Bridesmaid Gift" + }, + { + url: "https://i.etsystatic.com/25168585/c/2500/1987/0/181/il/214e7e/4589233930/il_340x270.4589233930_dg79.jpg", + title: + "Custom Pet Portraits Using Pet Photo Personalized Digital Dog portraits Cat Portraits Custom Pet Art Pet Drawing", + star: 3.8, + reviews: 11164, + symbol: "₹", + actualPrice: 1277, + discount: 40, + videoURL: + "https://v-cg.etsystatic.com/video/upload/ac_none,du_15,q_auto:good/PAINT_PORTRAIT_ETSY_VIDEO_vo9waf.mp4", + delivery: "", + playButton: `${playBtnImg}`, + tooltipText:"Personalised Song Plaque with stand, Any Playlist Photo/song, Photo and Music Gift, Music Prints." + }, + { + url: "https://i.etsystatic.com/28045281/r/il/3f41fa/3897994052/il_340x270.3897994052_l8xd.jpg", + title: + "Sun Catcher/ Crystal suncatcher/ Crystal Rainbow marker/ Aurora gemstone suncatcher/ crystal prism/ wall hanging/ Home decor/ Gift 4 women", + star: 5, + reviews: 6879, + symbol: "₹", + actualPrice: 2653, + discount: 10, + videoURL: + "https://v-cg.etsystatic.com/video/upload/ac_none,du_15,q_auto:good/Purple1_aal8ie.mp4", + delivery: "FREE delivery", + playButton: `${playBtnImg}`, + tooltipText: "Handmade Damascus Pocket Knife Rose Wood Handke Birthday Gift Folding knife Groomsmen Gift Anniversary Wedding Personalized Gift for Men" + }, + { + url: " https://i.etsystatic.com/27890741/c/2343/1862/320/…/31a0dd/4028709894/il_340x270.4028709894_i6tr.jpg", + title: + "Heart Keychain Set - Made with Authentic LEGO® Bricks, Matching keychains, Gift Set for Couples, Best Friends - Very High Quality & DURABLE", + star: 5, + reviews: 12411, + symbol: "₹", + actualPrice: 1453, + discount: 50, + videoURL: + "https://v-cg.etsystatic.com/video/upload/ac_none,du_15,q_auto:good/HFF_Hearts_Video_m6nj4t.mp4", + delivery: "", + playButton: `${playBtnImg}`, + tooltipText : "Heart KeyChain set-Made with Authentic LEGO Bricks, Matching Keychains, Gift Set for couples,Best Friends-Very High Quality & Durable" + }, + { + url: "https://i.etsystatic.com/26694795/c/2445/1943/282/…/035b01/3254592822/il_340x270.3254592822_5dss.jpg", + title: + "Handmade Damascus Pocket Knife Rose Wood Handle Birthday Gift Folding Knife Groomsmen Gift Anniversary Wedding Personalized Gift for Men", + star: 5, + reviews: 6256, + symbol: "₹", + actualPrice: 8219, + discount: 70, + videoURL: + "https://v-cg.etsystatic.com/video/upload/ac_none,du_15,q_auto:good/PB-42_convert-video-online.com_cfle3f.mp4", + delivery: "", + playButton: `${playBtnImg}`, + + }, + ], + + whatEtsyDo : [ + { + title: "A Community doing good", + content: + " Etsy is a global online marketplace, where people come together to make, sell, buy and collect unique items. We're also a community pushing for positive change for small businesses, people, and the planet.", + contentPart: + "Here are some of the ways we're making a positive impact together.", + }, + { + title: "Support independent creators", + content: + "There's no Etsy warehouse-just millions of people selling the things they love. We make the whole process easy, helping you connect directly with makers to find something extraordinary", + contentPart: "", + }, + { + title: "Peace of mind", + content: + "Your privacy is the highest priority of our dedicated team. And if you ever need assistance, we are always ready to step in for support", + contentPart: "", + }, + ], + + socialIcons : [ + { + icon: `${instaIcon}`, + }, + { + icon: `${fbIcon}`, + }, + { + icon:`${pinterestIcon}`, + }, + { + icon: `${twitterIcon}`, + }, + { + icon: `${youTubeIcon}`, + }, + ] +} + + +console.log(JSON.stringify(generateHomePage)) \ No newline at end of file diff --git a/aparna/Etsy/script.js b/aparna/Etsy/script.js new file mode 100644 index 0000000..6addee1 --- /dev/null +++ b/aparna/Etsy/script.js @@ -0,0 +1,52 @@ +"use strict"; + +import { + createNavBar, + clearPopularContainer, + createDropdowns, + toFilterPrice, + createSocialIcons, +} from "./functions.js"; + +import { + generateAboutEtsy, + + createDealContainer, + createDiscoverContainer, + createFooterHTML, + mainInnerHTML, + generatePopularContainer, + whatIsEtsyInnerHTML, +} from "./templates.js"; + +// import GenerateTemplates from "../etsy_react/src/template.js"; + +const navDivID = "#categories"; + +mainInnerHTML(); +whatIsEtsyInnerHTML(); +createFooterHTML(); + +const generateHomePage = fetch( + "https://raw.githubusercontent.com/Aparnakrishnan-Vonnue/Vonnue_Training/master/Websites/Etsy/data.JSON", + { + method: "GET", + } +) + .then((response) => response.json()) + .then((generateHomePage) => { + createNavBar( + navDivID, + generateHomePage.categoryList, + "li", + "category-list" + ); + createDiscoverContainer(generateHomePage.discoverItems); + createDealContainer(generateHomePage.clothCategory); + generatePopularContainer(generateHomePage.popularItems); + generateAboutEtsy(generateHomePage.whatEtsyDo); + createSocialIcons(generateHomePage.socialIcons); + createDropdowns(); + toFilterPrice(generateHomePage.popularItems); + // + }); diff --git a/aparna/Etsy/style.css b/aparna/Etsy/style.css new file mode 100644 index 0000000..8c9f58d --- /dev/null +++ b/aparna/Etsy/style.css @@ -0,0 +1,1728 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +@font-face { + font-family: light-font; + src: url(fonts/Guardian-EgypTT-Light.woff2); +} +@font-face { + font-family: Regular-font; + src: url(fonts/Graphik-Regular-Web.woff2); +} +@font-face { + font-family: medium-font; + src: url(fonts/Graphik-Medium-Web.woff2); +} +body{ + margin: 0; + /* overflow: hidden; */ + font-family: -apple-system,BlinkMacSystemFont,"Roboto","Droid Sans","Segoe UI","Helvetica",Arial,sans-serif;; +} + + +@media screen and (min-width: 375px) { + #navBar{ + padding-right : 12px; + padding-left: 9px; + } + .listItems{ + display: none; + } + .categories{ + display: none; + } + .xl-logo{ + display: none; + } + + .logo{ + display: flex; + justify-content: space-between; + align-items: center; + } + .logo .mob-logo{ + margin-bottom: 7px; + cursor: pointer; + } + .listItems-mob{ + display: flex; + justify-content: space-between; + align-items: center; + /* gap: 28px; */ + } + .listItems-mob .signIn a{ + font-size: 13px; + line-height: 1.4; + min-height: 36px; + min-width: 36px; + color: #222; + text-decoration: none; + font-weight: 600; + font-family: -apple-system,BlinkMacSystemFont,"Roboto","Droid Sans","Segoe UI","Helvetica",Arial,sans-serif;; + } + .listItems-mob .signIn{ + padding-top: 9px; + padding-bottom: 15px; + padding-left: 15px; + padding-right: 13px; + margin-right: 6px; + } + .signIn:hover{ + background-color: #22222213; + border-radius: 25px; + } + .icon:hover{ + background-color: #22222213; + border-radius: 25px; + } + .listItems-mob .signIn span{ + border: 2px; + } + .listItems-mob .icon{ + padding: 12px; + line-height: 1; + margin-bottom: 4px; + padding-top: 11px; + } + .listItems-mob .heartIcon{ + padding-right: 10px; + } + .searchBarIcon-xl{ + display: none; + } + .searchBarIcon-mob{ + display: flex; + transform: translateY(-9px); + } + .searchBarIcon-mob .search{ + background: rgba(34,34,34,.05); + display: flex; + text-align: left; + align-items: center; + justify-content: space-between; + position: relative; + border-radius: 96px; + width: 100%; + } + #hamburger{ + background: transparent; + border: none; + padding: 12px; + padding-left: 0px; + padding-right: 15px; + transform: translateY(1px); + } + #hamburger svg{ + transform: translateX(3px); + } + .searchBarIcon-mob .searchBar{ + padding-left:18px ; + border-top-left-radius: 96px; + border-bottom-left-radius: 96px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0; + box-shadow: none; + flex: 1; + padding-right: 42px; + padding-top: 12px; + padding-bottom: 12px; + height: 48px; + border-color: #222; + background: rgba(34,34,34,.01); + } + .searchBarIcon-mob .searchIcon{ + border-width: 2px; + border-color: #222; + background: none; + cursor: pointer; + padding-right: 22px; + padding-left: 0px; + padding-top: 10px; + padding-bottom: 12px; + height: 48px; + color: #222; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-top-right-radius: 96px; + border-bottom-right-radius: 96px; + border: 2px solid rgba(34,34,34,.15); + border-left: 0; + border-color: #222; + background: rgba(34,34,34,.01); + } + .searchIcon:hover{ + background-color: #22222213; + } + .searchBarIcon-mob .searchBar::placeholder{ + font-size: 16px; + } + .heading{ + margin-top: 2px; + } + .heading-text{ + font-family: light-font; + font-weight: 300; + letter-spacing: .35px; + font-size: 20px; + line-height: 32px; + background-color: #d7e6f5; + /* color: #222; */ + text-align: center; + padding-top: 20px; + padding-bottom: 0px; + padding-left: 12px; + padding-right: 12px; + } + .shopping-list{ + margin-top: 12px; + list-style-type: none; + display: flex; + flex-direction: column; + gap: 7px; + } + .bubbleContainer{ + position: relative; + margin-bottom: 42px; + } + .halfContainer{ + height: 75%; + background-color: #d7e6f5; + position: absolute; + width: 100vw; + left: 50%; + margin-left: -50vw; + z-index: -1; + } + .imgCategories{ + max-width: 96px; + border-radius: 50%; + overflow: hidden; + border: 1px solid rgba(334,34,34,.15); + height: 96px; + width:96px; + object-fit: cover; + transform: translateY(1px); + } + + /* .imgCategories:nth-child(1){ + object-view-box: inset(-3% 0 0 0) + } */ + .shopping-list:nth-child(6){ + transform: translateY(8px); + } + + .bubbleList{ + display: grid; + grid-template-columns: repeat(3,1fr); + padding-inline: 6px; + align-items: center; + justify-items: center; + transform: translateY(4px); + } + .title{ + max-width: 96px; + font-size: 13px; + font-weight: 700; + letter-spacing: .1px; + line-height: 18px; + padding-bottom: 5px; + text-align: center; + padding-top: 15px; + font-family: Regular-font; + border-bottom: 2px solid rgba(89,89,89,0 ); + font-family: "Graphik Webfont",-apple-system,"Helvetica Neue","Droid Sans",Arial,sans-serif; + } + .arrow{ + width: 12px; + height: 24px; + } + .dealsHeadContainer{ + display: flex; + justify-content: space-between; + padding-inline: 12px; + margin-bottom: 12px; + } + .shopDeals{ + display: flex; + justify-content: center; + align-items: center; + align-items: flex-end; + gap: 5px; + font-size: 13px; + } + .shop{ + display: flex; + flex-direction: column; + align-items: flex-end; + } + .clothingList{ + display: flex; + flex-wrap: wrap; + padding-inline: 6px; + } + .clothContainer{ + flex-grow: 1; + max-width: 50%; + padding: 6px; + } + .listOfClothes{ + list-style-type: none; + } + + .womensWear{ + object-fit: cover; + height: 100%; + width: 100%; + border-top-left-radius: 12px; + border-top-right-radius: 12px; + } + .dealContainer{ + transform: translateY(17px); + margin-bottom:60px; + } + .dealTextContainer{ + padding: 12px; + align-content: center; + display: flex; + flex-direction: column; + border: 1px solid rgba(34,34,34,.15); + border-top: none; + border-bottom-left-radius: 12px; + border-bottom-right-radius: 12px; + transform: translateY(-5px); + } + .popularHeadContainer{ + margin-top: 72px; + } + .discountPercent{ + line-height: 16px; + font-family: Regular-font; + font-weight: 400; + font-size: 13px; + } + .tagOfDeals{ + font-family: Regular-font; + font-weight: 700; + font-size: 16px; + line-height: 20px; + padding-top: 6px; + margin-bottom: 6px; + } + .clothContainer:nth-child(6) .tagOfDeals { + white-space: nowrap; + } + .dealsHeading{ + font-size: 24px; + font-weight: 700; + line-height: 32px; + font-family: Regular-font; + } + .arrow{ + padding-top: 8px; + } + .selectionsHeading{ + display: flex; + justify-content: center; + align-items: center; + gap: 5px; + } + .arrow-icon{ + padding-top: 0px; + width:12px; + height:24px; + } + .collections{ + text-align: center; + font-size: 13px; + font-weight: 400; + line-height: 18px; + color: #595959; + font-family: regular-font; + } + .shopSelections{ + padding-bottom: 18px; + } + .shopUl{ + display: flex; + flex-wrap: wrap; + padding-inline: 6px; + } + .shopItems{ + flex-grow: 1; + max-width: 50%; + padding: 6px; + } + .popular-header{ + text-align: center; + padding-bottom: 18px; + } + .popular-heading-name{ + font-size: 18px; + line-height: 24px; + font-family: Regular-font; + font-weight: 700; + } + .popular-sub-container{ + display: flex; + flex-wrap: wrap; + padding-inline: 6px; + } + .popular-inner{ + flex-grow: 1; + max-width: 50%; + padding: 6px; + } + .giftList { + list-style-type: none; + } + .popular-img-container { + position: relative; + } + .popular-img-container .imagePop{ + object-fit: cover; + height: 100%; + width: 100%; + border-radius: 6px; + margin-bottom: 6px; + } + .popular-img-container.hide{ + display: none; + } + .video-container{ + position: relative; + display: none; + } + .video-container.show{ + display: block; + } + .video-container .video{ + object-fit: cover; + height: 100%; + width: 100%; + border-radius: 6px; + margin-bottom: 6px; + max-height: 200px; + } + .content-container{ + padding-top: 2px; + } + .content-title{ + font-family: Regular-font; + font-weight: 700; + font-size: 13px; + line-height: 18px; + letter-spacing: .1px; + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + margin-bottom: 3px; + overflow: hidden; + } + .rating-container{ + display: flex; + align-items: center; + gap: 10px; + } + .reviews{ + font-size:13px; + line-height: 1.6; + font-family: Regular-font; + font-weight: 400; + color: #595959; + } + .star-container svg{ + width: 12px; + height: 24px; + } + .price-container{ + display: flex; + /* flex-direction: column; */ + align-items: center; + gap: 5px; + } + .price-details{ + display: flex; + gap: 20px; + } + .marketPrice{ + display: flex; + gap: 5px; + padding-right: 4px; + font-family: Regular-font; + font-weight: 700; + font-size: 16px; + line-height: 20px; + } + .actual-price{ + text-decoration: line-through; + line-height: 1.6; + font-size: 13px; + font-weight: 400; + font-family: Regular-font; + color: #258635; + } + .discount-percent{ + color: #258635; + font-size: 13px; + line-height: 1.6; + font-weight: 400; + font-family: Regular-font; + } + .delivery-offer{ + margin-bottom: 3px; + font-size: 11px; + font-weight: bold; + font-family: Regular-font; + letter-spacing: .1px; + line-height: 18px; + padding-top: 3px; + padding-bottom: 3px; + padding-inline: 6px; + } + .delivery-offer { + background: #d7e6f5; + min-width: 17px; + border-radius: 15px; + width: 90px; + text-align: center; + } + .play-button svg{ + width: 12px; + height: 24px; + } + .play-button{ + border-radius: 50%; + border: none; + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + background: #fff; + position: absolute; + right: 10px; + bottom: 20px; + } + .play-button.remove{ + display: none; + } + .heart-button svg{ + width: 12px; + height: 24px; + } + .style-heart{ + cursor: pointer; + fill: red; + outline: 1px solid blue; + } + .heart-button{ + display: none; + } + + .toggle-icon{ + border-radius: 50%; + border: none; + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + background: #fff; + position: absolute; + right: 10px; + top: 20px; + transition: ease-in; + cursor: pointer; + } + .about-image svg{ + fill: #fff; + height:24px; + transform: scale(1); + width: 100%; + } + .aboutContainer{ + background-color: #fdebd2; + } + .about-etsy{ + text-align: center; + padding-bottom: 36px; + padding-top: 36px; + padding-left: 30px; + padding-right: 30px; + } + .about-heading{ + font-size: 32px; + font-weight: 300; + line-height: 36px; + font-family: light-font; + color: #222; + margin-bottom: 6px; + } + .wierd-story{ + font-size: 14px; + color: #222; + line-height: 1.4; + font-family: Regular-font; + } + .what-we-do{ + text-align: center; + padding-top: 36px; + margin-bottom: 6px; + display: flex; + flex-direction: column; + } + .community-title{ + font-size: 24px; + font-weight: 700; + font-family: Regular-font; + line-height: 32px; + margin-bottom: 18px; + } + .popular-container{ + margin-bottom: 30px; + } + .community-content{ + margin-bottom: 30px; + flex: 1 1 0%; + /* padding: 12px; */ + } + .prev-content{ + font-size: 16px; + font-family: Regular-font; + font-weight: 400; + line-height: 28px; + text-align: center; + } + .style{ + font-size: 16px; + font-family: Regular-font; + font-weight: 400; + line-height: 28px; + text-align: center; + text-decoration: underline; + text-decoration-style: dashed; + text-underline-position: under; + } + .community:nth-child(2) .community-content{ + margin-top: 13px; + padding: 12px; + } + .questionEl { + font-size: 18px; + font-weight: 700; + line-height: 24px; + font-family: Regular-font; + } + .question-box{ + padding-top: 12px; + padding-inline:23px + } + .help-button{ + background: none; + border: 2px solid #222; + cursor: pointer; + border-radius: 24px; + font-size: 16px; + font-weight: bold; + line-height: 1.5; + min-height: 48px; + min-width: 48px; + padding-top: 12px; + padding-bottom: 12px; + padding-left: 18px; + padding-right: 18px; + margin-top: 12px; + } + .aboutContainer{ + padding-bottom: 36px; + } + .inline-image{ + position: relative; + top: -22px; + } + .inline-image svg{ + height:30px; + transform: scale(1); + width: 100%; + } + .email-container{ + background-color: #d7e6f5; + padding-bottom: 36px; + } + .exclusive-offers{ + text-align: center; + padding-left: 24px; + padding-right: 24px; + padding-top: 18px; + } + .offersText{ + margin-bottom: 30px; + text-align: center; + font-size: 16px; + font-weight: 700; + line-height: 20px; + font-family: Regular-font; + } + .mail-enter{ + max-width: 550px; + margin: 0 auto; + display: flex; + justify-content: center; + align-items: center; + border-radius: 96px; + box-shadow: 1px 2px 4px 0 rgb(34 34 34 / 10%) inset; + background: #fff; + } + .mail-enter input{ + border-top-left-radius: 96px; + border-bottom-left-radius: 96px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0; + flex: 1; + padding-top: 9px; + padding-bottom: 9px; + padding-left: 18px; + padding-right: 12px; + border:1px rgba(34,34,34,.15); + color: #222; + height: 48px; + outline: 3px solid rgba(0,0,0,0); + width: 100%; + background: none; + } + .mail-enter input::placeholder{ + font-size: 16px; + line-height: 28px; + font-weight: 400; + font-family: Regular-font; + } + .subscribe{ + cursor: pointer; + text-align: left; + padding-right: 12px; + padding-left: 18px; + padding-top: 9px; + padding-bottom: 9px; + height: 48px; + color: #222; + font-weight: bold; + font-size: 16px; + white-space: nowrap; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-top-right-radius: 96px; + border-bottom-right-radius: 96px; + border: 1px rgba(34,34,34,.15); + background: none; + border-left: 0; + } + .logo-container{ + background-color: #4d6bc6; + text-align: center; + padding-bottom: 12px; + padding-top: 12px; + } + .logo-box{ + margin-bottom: 6px; + } + .logo-box svg{ + width: 36px; + height: 36px; + } + .logo-text{ + margin-inline: 12px; + font-size: 16px; + font-weight: 400; + line-height: 28px; + font-family: Regular-font; + color: #fff; + text-decoration: underline; + text-decoration-style: dashed; + text-underline-position: under; + } + .dropdown-container{ + background-color: #21466c; + color: #fff; + padding-inline: 24px; + padding-top: 12px; + padding-bottom: 12px; + } + .footer-sub-container{ + display: flex; + flex-wrap: wrap; + } + .drop-downs{ + width: calc(100% + 2*18px); + margin-inline: -18px; + display: inline-flex; + align-items: flex-start; + justify-content: space-between; + text-align: left; + cursor: pointer; + min-height: 48px; + min-width: 48px; + padding-top: 12px; + padding-bottom: 12px; + padding-left: 18px; + padding-right: 18px; + margin-bottom:6px; + flex-direction: column; + } + .chevron-icon{ + background: none; + color: #fff; + border: none; + cursor: pointer; + } + .chevron-icon.rotation{ + transform: rotate(180deg); + } + /* .dropdown-container .drop-downs:nth-child(4){ + display: flex; + flex-direction: column; + align-items: flex-start; + } +.drop-downs:nth-child(4) .help-box{ + display: flex; + justify-content: space-between; + width:100%; + } */ + .help-privacy{ + margin-left: 10px; + } + .help-centre{ + padding-top: 6px; + padding-bottom: 12px; + /* margin-bottom: 10px; */ + } + .privacy-settings{ + padding-top: 6px; + padding-bottom: 12px; + /* margin-bottom: 10px; */ + } + .settings-centre{ + width: 100%; + } + .text-centre{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-top: 12px; + } + .download{ + display: flex; + align-items: center; + background: none; + color: #fff; + font-size: 13px; + line-height: 1.4; + min-height: 36px; + min-width: 36px; + padding-inline: 15px; + border: 2px solid #ffff; + cursor: pointer; + font-family: -apple-system,BlinkMacSystemFont,"Roboto","Droid Sans","Segoe UI","Helvetica",Arial,sans-serif; + border-radius: 24px; + padding-top: 6px; + padding-bottom: 6px; + margin-top: 24px; + align-items: center; + box-shadow: 0 4px 20px rgb(34 34 34 / 15%); + } + .icons-container{ + margin-top: 18px; + display: flex; + align-items: center; + } + .icons-list{ + list-style-type: none; + } + .icons-list svg{ + margin-right: 12px; + } + .terms-policies{ + background-color: #232347; + } + .terms-inner{ + padding-inline: 24px; + padding-bottom: 18px; + padding-top: 18px; + } + .terms-conditions{ + max-width: 1400px; + margin: 0 auto; + display: flex; + flex-wrap: wrap; + } + .location{ + flex-basis: 100%; + text-align: center; + padding-bottom: 12px; + display: flex; + align-items: center; + justify-content: center; + } + .earth svg{ + width: 18px; + height: 18px; + } + .location-details{ + font-size: 13px; + line-height: 1.4; + color: #ffffff; + font-family: -apple-system,BlinkMacSystemFont,"Roboto","Droid Sans","Segoe UI","Helvetica",Arial,sans-serif; + font-weight: bold; + text-align: center; + } + .terms{ + flex-basis: 100%; + text-align: center; + align-items: center; + justify-content: flex-end; + } + .copy{ + font-size: 13px; + font-weight: 400; + line-height: 18px; + font-family: Regular-font; + color: #ffffff; + margin-bottom: 12px; + } + .list-of-terms{ + margin-top: 12px; + } + .termsLists{ + display: inline-block; + margin-right: 12px; + font-family: Regular-font; + font-size: 13px; + font-weight: 400; + line-height: 18px; + list-style-type: none; + color: #fff; + text-decoration: underline; + } + .dropBox{ + display: none; + } + .dropBox.active{ + display: block; + transform: translateY(5px); + transition: ease-in; + padding-inline: 6px; + } + .contain{ + display: flex; + justify-content: space-between; + width: 100%; + } + .designImage{ + display: none; + } + .tooltip-container{ + display: none; + } + + .price-filter{ + display: flex; + justify-content: center; + align-items: center; + } + .price-input{ + padding: 10px 0; + text-align: center; + font-size: 20px; + } + .filter{ + width: 50px; + /* height: 20px; */ + padding: 13px 0; + display: flex; + justify-content: center; + align-items: center; + } +} +@media screen and (min-width:768px) { + .logo{ + margin-top: 5px; + } + .logo .mob-logo svg{ + width: 80px; + height: 40px; + } + .listItems-mob .signIn{ + padding-bottom: 22px; + padding-right: 17px; + } + .heartIcon svg{ + transform: translateY(-3px); + } + .heartIcon{ + transform: translateX(-2px); + } + .basket svg{ + transform: translateY(-3px); + } + .searchBarIcon-xl .searchBar{ + padding-top: 15px; + } + .searchBarIcon-xl .searchBar::placeholder{ + font-size: 16px; + font-family: regular-font; + padding-bottom: 8px; + } + .heading{ + margin-top: 1px; + } + .heading-text{ + font-size: 26px; + line-height: 42px; + } + .searchBarIcon-mob{ + transform: translateY(-10px); + } + .bubbleList{ + display: flex; + justify-content: space-around; + padding-inline: 0px; + transform: translate(10px, -10px); + } + .halfContainer{ + height: 50%; + } + .imgCategories{ + width: 84px; + height: 84px; + } + .searchBar{ + padding-top: 15px; + } + .clothContainer{ + flex-basis: 33.33333333333%; + padding: 9px; + } + .dealContainer{ + padding-inline: 15px; + } + .dealsHeading{ + font-size: 28px; + line-height: 36px; + font-family: Regular-font; + font-weight: 700; + } + .popular-inner{ + flex-basis: 33.33333333333%; + /* display: none; */ + } + .popular-inner .filtered-price{ + display: block; + } + .electricity{ + display: flex; + justify-content: center; + align-items: center; + } + .dropBox{ + display: block; + } + .footer-sub-container{ + display: flex; + } + .chevron-icon{ + display: none; + } + .footer-sub-container{ + display: flex; + flex-direction: row; + flex-wrap: nowrap; + } + .help-centre{ + white-space: nowrap; + } + .drop-downs{ + justify-content: flex-start; + } + .text-download{ + text-align: left; + } + .download{ + gap: 6px; + } + .terms{ + display: flex; + align-items: center; + justify-content: center; + } + .copy{ + margin: 0; + margin-right: 12px; + } + .list-of-terms{ + margin: 0; + } + .icons-container{ + flex-wrap: wrap; + } + .drop-down-title{ + font-weight: 700; + font-family: Regular-font; + font-size: 16px; + line-height: 20px; + padding-right: 6px; + margin-bottom: 12px; + } + .tooltip-container{ + display: none; + } +} + +@media screen and (min-width:1024px){ + .searchBarIcon-xl{ + display: flex; + } + .searchBarIcon-mob{ + display: none; + } + .listItems-mob{ + display: none; + } + .listItems{ + display: flex; + } + .categories{ + display: flex; + } + #navBar{ + padding: 12px 36px; + padding-right: 35px; + padding-bottom: 0px; + } + .nav-items{ + display: flex; + max-width: 1400px; + justify-content: space-between; + align-items: center; + margin: 0 auto; + /* gap: 10px; */ + margin-bottom: 4px; + } + .mob-logo svg{ + transform: translateX(-3px); + } + .mob-logo a{ + margin-right: 4px; + } + .search{ + transform: translateX(1px); + } + .searchIcon{ + transform: translateX(-1px); + } + + .searchBarIcon-xl { + transform: translateY(-4px); + } + .searchBarIcon-xl .searchBar{ + width: 60vw; + min-width: 0; + padding-left:18px ; + border-top-left-radius: 96px; + border-bottom-left-radius: 96px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0; + box-shadow: none; + flex: 1; + padding-right: 42px; + padding-top: 12px; + padding-bottom: 12px; + height: 48px; + border-color: #222; + background: rgba(34,34,34,.05); + transform: translateX(-2px); + } + .searchBar::placeholder{ + font-size: 16px; + padding-top: 14px; + } + .searchIcon{ + border-width: 2px; + border-color: #222; + background: none; + cursor: pointer; + padding-right: 23px; + padding-left: 15px; + padding-top: 12px; + padding-bottom: 12px; + height: 48px; + color: #222; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-top-right-radius: 96px; + border-bottom-right-radius: 96px; + border: 2px solid rgba(34,34,34,.15); + border-left: 0; + border-color: #222; + background: rgba(34,34,34,.05); + } + .searchIcon svg{ + transform: translateY(-2px); + } + .listItems{ + display: flex; + justify-content: center; + align-items: center; + } + .signIn{ + min-height: 36px; + min-width: 36px; + padding-top: 9px; + padding-bottom: 17px; + padding-left: 21px; + padding-right: 22px; + white-space: nowrap; + } + .signIn a{ + text-decoration: none; + font-size: 13px; + line-height: 1.4; + color: #222; + font-family: medium-font; + } + .heartIcon{ + padding: 12px; + color: #222; + cursor: pointer; + transform: translateY(-4px); + } + .heartIcon svg{ + transform: translateX(-1px); + } + .basket svg{ + transform: translateX(-1px); + } + .basket{ + padding: 12px; + padding-right: 21px; + color: #222; + cursor: pointer; + transform: translateY(-4px); + } + .categories{ + display: flex; + justify-content: space-between; + margin-right: 14PX; + } + .category-list{ + font-family: Regular-font; + font-weight: 400; + font-size: 13px; + line-height: 18px; + list-style-type: none; + text-align: left; + padding-bottom: 12px; + margin-top: 4px; + margin-right: 12px; + align-items: center; + cursor: pointer; + } + .category-list:after{ + display: block; + content : ''; + padding: 5px; + border-bottom: solid 3px #222; + transform: scale(0); + transition: transform 250ms ease-in-out; + } + .category-list:hover:after{ + cursor: pointer; + transform: scaleX(1); + } + .listItems{ + transform: translateX(9px); + } + + .shopping-list{ + padding-top: 9px; + padding-bottom: 9px; + max-width: fit-content; + width: 114px; + } + .shopping-list:hover .title{ + content: ''; + border-bottom: 2px solid #222; + opacity: 0.8; + } + .title:hover{ + content: ''; + border-bottom: 2px solid #222; + opacity: 0.8; + } + .heading-text{ + font-size: 32px; + line-height: 36px; + padding: 18px; + } + .imgCategories{ + max-width: 114px; + width: 114px; + height: 114px; + } + .shopping-list:hover .imgCategories{ + cursor: pointer; + transform: scale(1.2); + } + .bubbleList{ + padding-inline: 36px; + } + .clothContainer{ + flex-basis: 16.6666666667%; + max-width: 16.6666666667%; + } + .popular-inner{ + flex-basis: 20%; + max-width: 20%; + } + .popular-inner:nth-child(6){ + display: none; + } + .what-we-do{ + display: flex; + flex-direction: row; + text-align: left; + margin-bottom: 42px; + } + .about-etsy{ + text-align: center; + padding-inline: 54px; + padding-top: 36px; + padding-bottom: 36px; + max-width: 1400px; + margin: 0 auto; + } + .about-heading{ + font-size: 44px; + font-weight: 300; + } + .community{ + flex-basis: 33.3333333333%; + } + .community:nth-child(2){ + margin-inline: 36px; + } + .community:nth-child(2) .community-content{ + padding: 0px; + } + .community-title{ + padding-right: 95px; + } + .community:nth-child(3) .community-title{ + padding-right: 0; + } + .terms-conditions{ + flex-wrap: nowrap; + } + .location{ + justify-content: flex-start; + align-items: center; + } + .text-centre{ + align-items: flex-start; + } + .help-privacy{ + margin-left: 0; + } + .tooltip-container{ + display: inline-block; + font-size: 12px; + border: 1px solid black; + visibility: hidden; + position: absolute; + left: 50px; + top: 80px; + z-index: 1; + width: 100%; + background-color: #fff; + } + .popular-img-container:hover .tooltip-container{ + visibility: visible; + } +} +@media screen and (min-width:1440px) { + .listItems-mob{ + display: none; + } + .hamburger{ + display: none; + } + .searchBarIcon-mob{ + transform: translateY(-9px); + } + .mob-logo svg{ + transform: translateX(-3px); + } + #navBar{ + padding-left: 36px; + padding-right: 40px; + margin: 0 auto; + width: 100%; + padding-top: 12px; + padding-bottom: 12px; + flex-direction: column; + max-width: 1400px; + margin: 0 auto; +} +.nav-items{ + display: flex; + justify-content: space-between; + align-items: center; + margin: 0 auto; + gap: 10px; + margin-bottom: 12px; +} +.mob-logo{ + display: none; +} +.logo{ + width: 80px; + height: 40px; +} +.xl-logo{ + display: flex; + padding-right: 50px; +} +.searchBarIcon-xl .search{ + display: block; + position: relative; +} +.searchBarIcon-xl{ + display: flex; +} +.searchBarIcon-mob{ + display: none; +} +.searchBarIcon-xl .searchBar{ + padding-left:18px ; + border-top-left-radius: 96px; + border-bottom-left-radius: 96px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0; + box-shadow: none; + flex: 1; + padding-right: 42px; + padding-top: 12px; + padding-bottom: 12px; + height: 48px; + border-color: #222; + background: rgba(34,34,34,.05); +} +.searchBar::placeholder{ + font-size: 16px; +} +.searchIcon{ + border-width: 2px; + border-color: #222; + background: none; + cursor: pointer; + padding-right: 21px; + padding-left: 15px; + padding-top: 12px; + padding-bottom: 12px; + height: 48px; + color: #222; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-top-right-radius: 96px; + border-bottom-right-radius: 96px; + border: 2px solid rgba(34,34,34,.15); + border-left: 0; + border-color: #222; + background: rgba(34,34,34,.05); +} +.listItems{ + display: flex; + justify-content: center; + align-items: center; +} +.signIn{ + min-height: 36px; + min-width: 36px; + padding-top: 9px; + padding-bottom: 9px; + padding-left: 15px; + padding-right: 15px; + white-space: nowrap; +} +.signIn a{ + text-decoration: none; + font-size: 13px; + line-height: 1.4; + color: #222; + font-family: medium-font; +} +.heartIcon{ + padding: 12px; + color: #222; + cursor: pointer; + +} +.basket{ + padding: 12px; + color: #222; + cursor: pointer; +} +.categories{ + display: flex; + justify-content: space-between; +} +.categories li{ + font-family: Regular-font; + font-weight: 400; + font-size: 13px; + line-height: 18px; + list-style-type: none; + text-align: left; +} +.heading{ + background-color: #d7e6f5; + color: #222; + text-align: center; + padding: 18px; +} +.heading-text{ + font-size: 26px; + line-height: 42px; + font-family: light-font; + font-weight: 300; + font-size: 32px; + line-height: 36px; + letter-spacing: .5px; + padding-bottom: 18px; +} +.bubbleContainer{ + position: relative; + margin-bottom: 42px; + max-width: 1400px; + margin: 0 auto; +} +.halfContainer{ + height: 50%; + background-color: #d7e6f5; + position: absolute; + width: 100vw; + left: 50%; + margin-left: -50vw; +} +.bubbleList{ + margin: -9px; + margin-left: 125px; + margin-right: 125px; + padding-inline: 36px; +} +.shopping-list{ + padding: 9px; + padding-left: 30px; + padding-right: 30px; + flex-direction: column; + list-style-type: none; + position: relative; +} +.imgCategories{ + max-width: 114px; + width: 114px; + border-radius: 50%; + overflow: hidden; + border: 1px solid rgba(334,34,34,.15); +} +.title{ + font-family: Regular-font; + font-size: 16px; + font-weight: 700; + letter-spacing: .1px; + line-height: 20px; + text-align: center; + margin-bottom: 6px; + max-width: 114px; + width: 114px; +} +.dealContainer{ + padding-inline: 36px; + margin-bottom: 60px; + max-width: 1400px; + margin: 0 auto; + padding-top: 50px; + padding-bottom: 50px; + margin-bottom: 60px; + max-width: 1440px; + margin: 0 auto; + transform: none; +} +.dealsHeadContainer { + display: flex; + justify-content: space-between; + align-items: flex-end; + margin-bottom: 25px; + max-width: 1440px; +} +.dealTextContainer{ + border: none; +} +.dealsHeadingName{ + font-family: Regular-font; + font-weight: 700; + font-size: 24px; + line-height: 32px; +} +.shopDeals{ + font-size: 13px; + font-weight: bold; + font-family: Regular-font; + display: flex; + align-items: center; + gap: 8px; +} + +.arrow{ + width:12px; + height:24px; + border:none; + margin-top: 3px; +} +.clothingList{ + display: flex; + /* flex-wrap: wrap; */ + margin: -9px; +} +.listOfClothes{ + list-style-type: none; + height: 300px; + border: 1px solid rgba(34,34,34,.15); + border-radius: 12px; + width: 204.33px; +} +.clothContainer{ + flex-basis: 16.6666666667%; + max-width: 16.6666666667%; +} +.womensWear { + width: 204.33px; + height: 205px; + object-fit: cover; + border-top-left-radius: 12px; + border-top-right-radius: 12px; + border-top: none; +} + +.dealTextContainer{ + padding: 12px; + align-content: center; + display: flex; + flex-direction: column; +} +.discountPercent{ + line-height: 16px; + font-family: Regular-font; + font-weight: 400; + font-size: 13px; + color: #222; +} +.tagOfDeals{ + font-family: Regular-font; + font-weight: 700; + font-size: 16px; + line-height: 20px; + padding-top: 6px; + margin-bottom: 6px; +} +.popular-header{ + text-align: left; + padding-left: 35px; +} +.popular-container{ + max-width: 1400px; + margin: 0 auto; +} +.popular-sub-container{ + margin-bottom: 20px; +} +.designImage svg{ + width: 100%; + position: relative; + bottom: 21px; + transform: rotate(180deg); +} +.footer-sub-container{ + max-width: 1400px; + margin: 0 auto; +} +img.arrow{ + padding: 0; + margin-top: 0; +} +} + +.listOfClothes:hover{ + cursor: pointer; + box-shadow: 0 3px 10px rgb(0 0 0 /14%); +} +.shopDeals{ + cursor: pointer; +} +.shopDeals:hover img.arrow{ + transform: translateX(10px); +} +.popular-inner:hover{ + cursor: pointer; + border: 1px solid #fff; + border-radius: 12px; + box-shadow: 0 3px 10px rgb(0 0 0 /14%); +} +.help-button:hover{ + transform: scale(1.1); +} +.mail-enter:hover{ + border: 1px solid #222; +} +.help-centre:hover{ + text-decoration: underline; + text-decoration-color: #fff; + cursor: pointer; +} +.download:hover{ + transform: scale(1.1); +} +.icons-list:hover{ + background-color: black; + border-radius: 48%; +} + +.price-input{ + position: relative; + border-right: none; + border-top-left-radius: 25px; + border-bottom-left-radius: 25px; +} + +/* .filter{ + position: absolute; + right: 280px; + background: none; + border-left: none; + border-top-right-radius: 25px; + border-bottom-right-radius: 25px; + padding: 14px; + background-color: #ddd6d6; + box-shadow: 0 2px 5px 0 rgb(0 0 0 /14%); + cursor: pointer; +} + +.filter:active{ + scale: 2px; + background-color: #595959; +} */ \ No newline at end of file diff --git a/aparna/Etsy/templates.js b/aparna/Etsy/templates.js new file mode 100644 index 0000000..292b334 --- /dev/null +++ b/aparna/Etsy/templates.js @@ -0,0 +1,231 @@ +const generateAboutEtsy = (etsy) => { + const whatWeDo = document.querySelector(".what-we-do"); + const arrayOfEtsyContents = etsy.map((elem) => { + const etsyContent = ` +
+

${elem.title}

+
+ ${elem.content} + ${elem.contentPart} +
+
+ + `; + return etsyContent; + }); + whatWeDo.innerHTML = arrayOfEtsyContents.join(""); +}; + +const createDealContainer = (clCat) => { + const clothingList = document.querySelector(".clothingList"); + const arrayOfDeals = clCat.map((item) => { + const dealContents = ` +
+
  • +
    +
    +
    +

    + ${item.discount} +

    + + ${item.clothText} + +
    +
  • +
    + `; + return dealContents; + }); + clothingList.innerHTML = arrayOfDeals.join(""); +}; + +function createDiscoverContainer(dItems) { + const list = document.querySelector(".bubbleList"); + const arrayOfDiscoverItems = dItems.map((item) => { + const discoverContents = ` +
  • + image +

    ${item.text}

    +
  • + `; + return discoverContents; + }); + list.innerHTML = arrayOfDiscoverItems.join(""); +} + +function createFooterHTML() { + const footerContainer = document.querySelector(".footer-container"); + footerContainer.innerHTML = ` +
    + + + +
    +
    +

    Yes! Send me exclusive offers, unique gift ideas, and personalised tips for shopping and selling on Etsy.

    +
    +
    +
    +
    +
    + +
    +
    + +

    Etsy is powered by 100% renewable electricity

    +
    +
    + `; +} + +function mainInnerHTML() { + const mainContainer = document.querySelector(".mainContainer"); + mainContainer.innerHTML = ` + +
    +
    +

    Discover one-of-a-kind items from independent creators

    +
    +
    +
    +
      +
      + +
      +
      +

      Deals of the day

      +

      + Shop all deals +

      + +
      +

      +
      +
        +
        + +