diff --git a/assets/css/section10.css b/assets/css/section10.css index 2fb2271..2e8ae06 100644 --- a/assets/css/section10.css +++ b/assets/css/section10.css @@ -1,212 +1,213 @@ /* created by Endri Nastiar */ .section__10_filter-tittle { - padding-top: 50px; - font-size: 20px; - } - - - .section__10_filter { - position: relative; - width: 100%; - margin: 20px auto; - padding: 20px; - background: #ffffff; - border-radius: 4px; - box-shadow: -1px -1px 15px 3px #e5e5e5; - } - - .section__10_filter-button { - border-bottom: 10px; - box-shadow: 0 1px rgb(151, 151, 151); - } - - .section__10_filter-button button { - padding: 10px 20px; - font-size: 16px; - background: none; - border: none; - cursor: pointer; - - } - - .section__10_filter-button button.section__10_active { - border-bottom: 2px solid orangered; - color: orangered; - } - - .section__10_filter .section__10_filter-button button:hover { - color: orangered; - } - - .filter-link:hover, - .filter-link:focus { - color: orangered; - - } - - .filter-link.section__10_active { - color: orangered; - border-bottom: 2px solid orangered; - } - - .filter-link::after { - content: ''; - display: block; - border-bottom: 2px solid orangered; - } - - - .section__10_filterable-card { - margin-top: 25px; - display: flex; - gap: 4.6px; - flex-wrap: wrap; - } - - - - - - .section__10_card { - background-color: #ffffff; - padding: 3px; - border-radius: 8px; - flex: 0 1 calc(16.666% - 10px); - } - - - - .section__10_card.section__10_hide { - display: none; - } - - .section__10_card .section__10_image { - width: 165px; - border-radius: 5px 5px 5px 5px; - height: 165px; - } - - - - - - - .section__10_card-late-pre-order { - font-size: 12px; - background: var(--late-pre-order); - padding: 0 12px; - width: max-content; - height: 20px; - border-radius: 3px 3px 3px 3px; - display: flex; - text-align: center; - align-items: center; - color: #ffffff; - font-weight: 700; - } - - - - .section__10_card-ready-stock { - font-size: 12px; - background: var(--ready-stock); - padding: 0 12px; - width: max-content; - height: 20px; - border-radius: 3px 3px 3px 3px; - display: flex; - align-items: center; - color: #ffffff; - font-weight: 700; - font-family: "nunito", sans-serif; - } - - - .section__10_card-pre-order { - font-size: 12px; - background: var(--pre-order); - padding: 0 12px; - width: max-content; - height: 20px; - border-radius: 3px 3px 3px 3px; - display: flex; - align-items: center; - color: #ffffff; - font-weight: 700; - font-family: "nunito", sans-serif; - } - - .section__10_card-showcase { - font-size: 12px; - background: rgb(95, 199, 201); - padding: 0 12px; - width: max-content; - height: 20px; - border-radius: 3px 3px 3px 3px; - display: flex; - align-items: center; - color: #ffffff; - font-weight: 700; - font-family: "nunito", sans-serif; - } - .section__10_card-back-order { - font-size: 12px; - background: rgb(153, 98, 145); - padding: 0 12px; - width: max-content; - height: 20px; - border-radius: 3px 3px 3px 3px; - display: flex; - align-items: center; - color: #ffffff; - font-weight: 700; - font-family: "nunito", sans-serif; - } - - - .section__10_card-tittle { - font-size: 13px; - padding-top: 10px; - padding-bottom: 4px; - - } - - .section__10_card-date { - font-size: 12px; - padding-bottom: 9px; - color: #606060; - } - - .section__10_price { - color: orangered; - padding-bottom: 5px; - font-size: 14px; - } - - .section__10_dp { - color: #565252; - font-size: 12px; - } - - - - - .section__10_btnn-next { + padding-top: 50px; + font-size: 20px; +} + + +.section__10_filter { + position: relative; + width: 100%; + margin: 20px auto; + padding: 20px; + background: #ffffff; + border-radius: 4px; + box-shadow: -1px -1px 15px 3px #e5e5e5; + +} + +.section__10_filter-button { + border-bottom: 10px; + box-shadow: 0 1px rgb(151, 151, 151); +} + +.section__10_filter-button button { + padding: 10px 20px; + font-size: 16px; + background: none; + border: none; + cursor: pointer; + +} + +.section__10_filter-button button.section__10_active { + border-bottom: 2px solid orangered; + color: orangered; +} + +.section__10_filter .section__10_filter-button button:hover { + color: orangered; +} + +.filter-link:hover, +.filter-link:focus { + color: orangered; + +} + +.filter-link.section__10_active { + color: orangered; + border-bottom: 2px solid orangered; +} + +.filter-link::after { + content: ''; + display: block; + border-bottom: 2px solid orangered; +} + + +.section__10_filterable-card { + margin-top: 25px; + display: flex; + gap: 2.5px; + flex-wrap: wrap; +} + + + + + +.section__10_card { + background-color: #ffffff; + padding: 3px; + border-radius: 8px; + flex: 0 1 calc(16.666% - 10px); +} + + + +.section__10_card.section__10_hide { + display: none; +} + +.section__10_card .section__10_image { + width: 165px; + border-radius: 5px 5px 5px 5px; + height: 165px; +} + + + + + + +.section__10_card-late-pre-order { + font-size: 12px; + background: var(--late-pre-order); + padding: 0 12px; + width: max-content; + height: 20px; + border-radius: 3px 3px 3px 3px; + display: flex; + text-align: center; + align-items: center; + color: #ffffff; + font-weight: 700; +} + + + +.section__10_card-ready-stock { + font-size: 12px; + background: var(--ready-stock); + padding: 0 12px; + width: max-content; + height: 20px; + border-radius: 3px 3px 3px 3px; + display: flex; + align-items: center; + color: #ffffff; + font-weight: 700; + font-family: "nunito", sans-serif; +} + + +.section__10_card-pre-order { + font-size: 12px; + background: var(--pre-order); + padding: 0 12px; + width: max-content; + height: 20px; + border-radius: 3px 3px 3px 3px; + display: flex; + align-items: center; + color: #ffffff; + font-weight: 700; + font-family: "nunito", sans-serif; +} + +.section__10_card-showcase { + font-size: 12px; + background: rgb(95, 199, 201); + padding: 0 12px; + width: max-content; + height: 20px; + border-radius: 3px 3px 3px 3px; + display: flex; + align-items: center; + color: #ffffff; + font-weight: 700; + font-family: "nunito", sans-serif; +} +.section__10_card-back-order { + font-size: 12px; + background: rgb(153, 98, 145); + padding: 0 12px; + width: max-content; + height: 20px; + border-radius: 3px 3px 3px 3px; display: flex; align-items: center; - justify-content: center; + color: #ffffff; + font-weight: 700; + font-family: "nunito", sans-serif; +} + + +.section__10_card-tittle { + font-size: 13px; padding-top: 10px; - margin: auto; + padding-bottom: 4px; + +} + +.section__10_card-date { + font-size: 12px; + padding-bottom: 9px; + color: #606060; +} + +.section__10_price { + color: orangered; + padding-bottom: 5px; + font-size: 14px; +} + +.section__10_dp { + color: #565252; + font-size: 12px; +} + + + + +.section__10_btnn-next { + display: flex; + align-items: center; + justify-content: center; + padding-top: 10px; + margin: auto; } .section__10_btnn-next button { - background: var(--primary-color); - border: 2px solid var(--primary-color); - color: #ffffff; - font-weight: bold; - font-size: 1em; - padding: 16px 200px; - width: 100%; - max-width: 720px; + background: var(--primary-color); + border: 2px solid var(--primary-color); + color: #ffffff; + font-weight: bold; + font-size: 1em; + padding: 16px 200px; + width: 100%; + max-width: 720px; } \ No newline at end of file