Tweet
Share
Post
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<title>Whiskas® Dry Adult Dewasa 7+, Cat food Rasa Mackerel</title>
<link rel="icon" type="image/x-icon" href="./img/fav.png" />
<link rel="stylesheet" href="./css/main.css" />
<link rel="stylesheet" href="https://zaferinci.com.tr/workspace/reset.css" />
<link rel="stylesheet" href="https://zaferinci.com.tr/workspace/warning.css" />
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
</head>
<body>
<section class="product">
<a href="#">
<img src="./img/arrow-left.svg" alt="" />
back to list
</a>
<div class="image">
<img src="./img/whiskas.png" alt="" />
<div class="ellipse1"></div>
</div>
<div class="ellipse"></div>
</section>
<section class="product-details">
<div class="tag">hotsale</div>
<h2>Whiskas® Dry Adult Dewasa 7+, Cat food Rasa Mackerel</h2>
<div class="review">
<span>cat food</span>
<div class="stars">
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.302 5.1724L9.5828 4.63187L7.9202 1.26127C7.87479 1.16898 7.80008 1.09427 7.7078 1.04886C7.47635 0.934606 7.1951 1.02982 7.07938 1.26127L5.41678 4.63187L1.69754 5.1724C1.59501 5.18705 1.50126 5.23539 1.42948 5.30863C1.3427 5.39782 1.29489 5.51781 1.29653 5.64224C1.29818 5.76666 1.34916 5.88534 1.43827 5.9722L4.12919 8.59574L3.49344 12.3003C3.47854 12.3865 3.48807 12.4751 3.52097 12.5562C3.55387 12.6372 3.60882 12.7074 3.67958 12.7588C3.75034 12.8102 3.83409 12.8407 3.92132 12.8469C4.00856 12.8532 4.09579 12.8348 4.17313 12.794L7.49979 11.045L10.8265 12.794C10.9173 12.8423 11.0227 12.8584 11.1238 12.8409C11.3787 12.7969 11.5501 12.5552 11.5061 12.3003L10.8704 8.59574L13.5613 5.9722C13.6346 5.90043 13.6829 5.80668 13.6975 5.70414C13.7371 5.44779 13.5584 5.21049 13.302 5.1724V5.1724Z"
fill="#D8D8DD"
/>
<mask
id="mask0_501_214"
style="mask-type: alpha"
maskUnits="userSpaceOnUse"
x="1"
y="1"
width="13"
height="12"
>
<path
d="M13.302 5.1724L9.58279 4.63187L7.92019 1.26127C7.87478 1.16898 7.80007 1.09427 7.70778 1.04886C7.47634 0.934606 7.19509 1.02982 7.07937 1.26127L5.41677 4.63187L1.69753 5.1724C1.59499 5.18705 1.50124 5.23539 1.42946 5.30863C1.34269 5.39782 1.29487 5.51781 1.29652 5.64224C1.29817 5.76666 1.34915 5.88534 1.43825 5.9722L4.12917 8.59574L3.49343 12.3003C3.47852 12.3865 3.48806 12.4751 3.52096 12.5562C3.55386 12.6372 3.6088 12.7074 3.67956 12.7588C3.75033 12.8102 3.83407 12.8407 3.92131 12.8469C4.00854 12.8532 4.09578 12.8348 4.17312 12.794L7.49978 11.045L10.8264 12.794C10.9173 12.8423 11.0227 12.8584 11.1238 12.8409C11.3787 12.7969 11.5501 12.5552 11.5061 12.3003L10.8704 8.59574L13.5613 5.9722C13.6345 5.90043 13.6829 5.80668 13.6975 5.70414C13.7371 5.44779 13.5584 5.21049 13.302 5.1724Z"
fill="#F4CD0C"
/>
</mask>
<g mask="url(#mask0_501_214)">
<rect x="-9" width="66" height="75" fill="#F4B30C" />
</g>
</svg>
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.302 5.1724L9.5828 4.63187L7.9202 1.26127C7.87479 1.16898 7.80008 1.09427 7.7078 1.04886C7.47635 0.934606 7.1951 1.02982 7.07938 1.26127L5.41678 4.63187L1.69754 5.1724C1.59501 5.18705 1.50126 5.23539 1.42948 5.30863C1.3427 5.39782 1.29489 5.51781 1.29653 5.64224C1.29818 5.76666 1.34916 5.88534 1.43827 5.9722L4.12919 8.59574L3.49344 12.3003C3.47854 12.3865 3.48807 12.4751 3.52097 12.5562C3.55387 12.6372 3.60882 12.7074 3.67958 12.7588C3.75034 12.8102 3.83409 12.8407 3.92132 12.8469C4.00856 12.8532 4.09579 12.8348 4.17313 12.794L7.49979 11.045L10.8265 12.794C10.9173 12.8423 11.0227 12.8584 11.1238 12.8409C11.3787 12.7969 11.5501 12.5552 11.5061 12.3003L10.8704 8.59574L13.5613 5.9722C13.6346 5.90043 13.6829 5.80668 13.6975 5.70414C13.7371 5.44779 13.5584 5.21049 13.302 5.1724V5.1724Z"
fill="#D8D8DD"
/>
<mask
id="mask0_501_214"
style="mask-type: alpha"
maskUnits="userSpaceOnUse"
x="1"
y="1"
width="13"
height="12"
>
<path
d="M13.302 5.1724L9.58279 4.63187L7.92019 1.26127C7.87478 1.16898 7.80007 1.09427 7.70778 1.04886C7.47634 0.934606 7.19509 1.02982 7.07937 1.26127L5.41677 4.63187L1.69753 5.1724C1.59499 5.18705 1.50124 5.23539 1.42946 5.30863C1.34269 5.39782 1.29487 5.51781 1.29652 5.64224C1.29817 5.76666 1.34915 5.88534 1.43825 5.9722L4.12917 8.59574L3.49343 12.3003C3.47852 12.3865 3.48806 12.4751 3.52096 12.5562C3.55386 12.6372 3.6088 12.7074 3.67956 12.7588C3.75033 12.8102 3.83407 12.8407 3.92131 12.8469C4.00854 12.8532 4.09578 12.8348 4.17312 12.794L7.49978 11.045L10.8264 12.794C10.9173 12.8423 11.0227 12.8584 11.1238 12.8409C11.3787 12.7969 11.5501 12.5552 11.5061 12.3003L10.8704 8.59574L13.5613 5.9722C13.6345 5.90043 13.6829 5.80668 13.6975 5.70414C13.7371 5.44779 13.5584 5.21049 13.302 5.1724Z"
fill="#F4CD0C"
/>
</mask>
<g mask="url(#mask0_501_214)">
<rect x="-9" width="66" height="75" fill="#F4B30C" />
</g>
</svg>
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.302 5.1724L9.5828 4.63187L7.9202 1.26127C7.87479 1.16898 7.80008 1.09427 7.7078 1.04886C7.47635 0.934606 7.1951 1.02982 7.07938 1.26127L5.41678 4.63187L1.69754 5.1724C1.59501 5.18705 1.50126 5.23539 1.42948 5.30863C1.3427 5.39782 1.29489 5.51781 1.29653 5.64224C1.29818 5.76666 1.34916 5.88534 1.43827 5.9722L4.12919 8.59574L3.49344 12.3003C3.47854 12.3865 3.48807 12.4751 3.52097 12.5562C3.55387 12.6372 3.60882 12.7074 3.67958 12.7588C3.75034 12.8102 3.83409 12.8407 3.92132 12.8469C4.00856 12.8532 4.09579 12.8348 4.17313 12.794L7.49979 11.045L10.8265 12.794C10.9173 12.8423 11.0227 12.8584 11.1238 12.8409C11.3787 12.7969 11.5501 12.5552 11.5061 12.3003L10.8704 8.59574L13.5613 5.9722C13.6346 5.90043 13.6829 5.80668 13.6975 5.70414C13.7371 5.44779 13.5584 5.21049 13.302 5.1724V5.1724Z"
fill="#D8D8DD"
/>
<mask
id="mask0_501_214"
style="mask-type: alpha"
maskUnits="userSpaceOnUse"
x="1"
y="1"
width="13"
height="12"
>
<path
d="M13.302 5.1724L9.58279 4.63187L7.92019 1.26127C7.87478 1.16898 7.80007 1.09427 7.70778 1.04886C7.47634 0.934606 7.19509 1.02982 7.07937 1.26127L5.41677 4.63187L1.69753 5.1724C1.59499 5.18705 1.50124 5.23539 1.42946 5.30863C1.34269 5.39782 1.29487 5.51781 1.29652 5.64224C1.29817 5.76666 1.34915 5.88534 1.43825 5.9722L4.12917 8.59574L3.49343 12.3003C3.47852 12.3865 3.48806 12.4751 3.52096 12.5562C3.55386 12.6372 3.6088 12.7074 3.67956 12.7588C3.75033 12.8102 3.83407 12.8407 3.92131 12.8469C4.00854 12.8532 4.09578 12.8348 4.17312 12.794L7.49978 11.045L10.8264 12.794C10.9173 12.8423 11.0227 12.8584 11.1238 12.8409C11.3787 12.7969 11.5501 12.5552 11.5061 12.3003L10.8704 8.59574L13.5613 5.9722C13.6345 5.90043 13.6829 5.80668 13.6975 5.70414C13.7371 5.44779 13.5584 5.21049 13.302 5.1724Z"
fill="#F4CD0C"
/>
</mask>
<g mask="url(#mask0_501_214)">
<rect x="-9" width="66" height="75" fill="#F4B30C" />
</g>
</svg>
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.302 5.1724L9.5828 4.63187L7.9202 1.26127C7.87479 1.16898 7.80008 1.09427 7.7078 1.04886C7.47635 0.934606 7.1951 1.02982 7.07938 1.26127L5.41678 4.63187L1.69754 5.1724C1.59501 5.18705 1.50126 5.23539 1.42948 5.30863C1.3427 5.39782 1.29489 5.51781 1.29653 5.64224C1.29818 5.76666 1.34916 5.88534 1.43827 5.9722L4.12919 8.59574L3.49344 12.3003C3.47854 12.3865 3.48807 12.4751 3.52097 12.5562C3.55387 12.6372 3.60882 12.7074 3.67958 12.7588C3.75034 12.8102 3.83409 12.8407 3.92132 12.8469C4.00856 12.8532 4.09579 12.8348 4.17313 12.794L7.49979 11.045L10.8265 12.794C10.9173 12.8423 11.0227 12.8584 11.1238 12.8409C11.3787 12.7969 11.5501 12.5552 11.5061 12.3003L10.8704 8.59574L13.5613 5.9722C13.6346 5.90043 13.6829 5.80668 13.6975 5.70414C13.7371 5.44779 13.5584 5.21049 13.302 5.1724V5.1724Z"
fill="#D8D8DD"
/>
<mask
id="mask0_501_214"
style="mask-type: alpha"
maskUnits="userSpaceOnUse"
x="1"
y="1"
width="13"
height="12"
>
<path
d="M13.302 5.1724L9.58279 4.63187L7.92019 1.26127C7.87478 1.16898 7.80007 1.09427 7.70778 1.04886C7.47634 0.934606 7.19509 1.02982 7.07937 1.26127L5.41677 4.63187L1.69753 5.1724C1.59499 5.18705 1.50124 5.23539 1.42946 5.30863C1.34269 5.39782 1.29487 5.51781 1.29652 5.64224C1.29817 5.76666 1.34915 5.88534 1.43825 5.9722L4.12917 8.59574L3.49343 12.3003C3.47852 12.3865 3.48806 12.4751 3.52096 12.5562C3.55386 12.6372 3.6088 12.7074 3.67956 12.7588C3.75033 12.8102 3.83407 12.8407 3.92131 12.8469C4.00854 12.8532 4.09578 12.8348 4.17312 12.794L7.49978 11.045L10.8264 12.794C10.9173 12.8423 11.0227 12.8584 11.1238 12.8409C11.3787 12.7969 11.5501 12.5552 11.5061 12.3003L10.8704 8.59574L13.5613 5.9722C13.6345 5.90043 13.6829 5.80668 13.6975 5.70414C13.7371 5.44779 13.5584 5.21049 13.302 5.1724Z"
fill="#F4CD0C"
/>
</mask>
<g mask="url(#mask0_501_214)">
<rect x="-9" width="66" height="75" fill="#F4B30C" />
</g>
</svg>
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.302 5.1724L9.5828 4.63187L7.9202 1.26127C7.87479 1.16898 7.80008 1.09427 7.7078 1.04886C7.47635 0.934606 7.1951 1.02982 7.07938 1.26127L5.41678 4.63187L1.69754 5.1724C1.59501 5.18705 1.50126 5.23539 1.42948 5.30863C1.3427 5.39782 1.29489 5.51781 1.29653 5.64224C1.29818 5.76666 1.34916 5.88534 1.43827 5.9722L4.12919 8.59574L3.49344 12.3003C3.47854 12.3865 3.48807 12.4751 3.52097 12.5562C3.55387 12.6372 3.60882 12.7074 3.67958 12.7588C3.75034 12.8102 3.83409 12.8407 3.92132 12.8469C4.00856 12.8532 4.09579 12.8348 4.17313 12.794L7.49979 11.045L10.8265 12.794C10.9173 12.8423 11.0227 12.8584 11.1238 12.8409C11.3787 12.7969 11.5501 12.5552 11.5061 12.3003L10.8704 8.59574L13.5613 5.9722C13.6346 5.90043 13.6829 5.80668 13.6975 5.70414C13.7371 5.44779 13.5584 5.21049 13.302 5.1724V5.1724Z"
fill="#D8D8DD"
/>
<mask
id="mask0_501_214"
style="mask-type: alpha"
maskUnits="userSpaceOnUse"
x="1"
y="1"
width="13"
height="12"
>
<path
d="M13.302 5.1724L9.58279 4.63187L7.92019 1.26127C7.87478 1.16898 7.80007 1.09427 7.70778 1.04886C7.47634 0.934606 7.19509 1.02982 7.07937 1.26127L5.41677 4.63187L1.69753 5.1724C1.59499 5.18705 1.50124 5.23539 1.42946 5.30863C1.34269 5.39782 1.29487 5.51781 1.29652 5.64224C1.29817 5.76666 1.34915 5.88534 1.43825 5.9722L4.12917 8.59574L3.49343 12.3003C3.47852 12.3865 3.48806 12.4751 3.52096 12.5562C3.55386 12.6372 3.6088 12.7074 3.67956 12.7588C3.75033 12.8102 3.83407 12.8407 3.92131 12.8469C4.00854 12.8532 4.09578 12.8348 4.17312 12.794L7.49978 11.045L10.8264 12.794C10.9173 12.8423 11.0227 12.8584 11.1238 12.8409C11.3787 12.7969 11.5501 12.5552 11.5061 12.3003L10.8704 8.59574L13.5613 5.9722C13.6345 5.90043 13.6829 5.80668 13.6975 5.70414C13.7371 5.44779 13.5584 5.21049 13.302 5.1724Z"
fill="#F4CD0C"
/>
</mask>
<g mask="url(#mask0_501_214)">
<rect x="-9" width="66" height="75" fill="#F4B30C" />
</g>
</svg>
</div>
<span>4.9 (2130 reviews)</span>
</div>
<div class="description">
<ul>
<h4>Description:</h4>
<li>Makanan yang lengkap dan seimbang, dengan 41 nutrisi penting.</li>
<li>
Mengandung antioksidan (vitamin E dan selenium) untuk sistem
kekebalan tubuh yang sehat.
</li>
<li>
Mengandung serat untuk memperlancar pencernaan dan meningkatkan
kesehatan usus.
</li>
<li>
Diperkaya dengan kalsium, fosfor dan vitamin D untuk tulang yang
sehat.
</li>
</ul>
</div>
<div class="selectbox">
<input type="radio" name="item" id="item1" checked />
<input type="radio" name="item" id="item2" />
<input type="radio" name="item" id="item3" />
<label class="item" for="item1">
<img src="./img/whiskas1.png" />
</label>
<label class="item" for="item2">
<img src="./img/whiskas2.png" />
</label>
<label class="item" for="item3">
<img src="./img/whiskas3.png" />
</label>
</div>
<div class="sizeselectbox">
<span>Size:</span>
<ul>
<input type="radio" name="size" id="size1" checked />
<input type="radio" name="size" id="size2" />
<input type="radio" name="size" id="size3" />
<input type="radio" name="size" id="size4" />
<li>
<label class="size" for="size1"> 1.5 kg </label>
</li>
<li>
<label class="size" for="size2"> 1 kg </label>
</li>
<li>
<label class="size" for="size3"> 500 gr </label>
</li>
<li>
<label class="size" for="size4"> 250 gr </label>
</li>
</ul>
</div>
<div class="description">
<ul>
<h4>Ingrendients:</h4>
<li>Nutrisi</li>
<li>Vitamin E</li>
<li>Protein</li>
</ul>
</div>
</section>
<div class="add-card">
<div class="product-img">
<img
src="https://cdn.onemars.net/sites/whiskas_id_98_2/image/id-image_1587457239946.png"
alt=""
/>
</div>
<div class="details">
<h3>Whiskas® Dry Adult Dewasa 7+, Cat food Rasa Mackerel</h3>
<span>CAT FOOD</span>
</div>
<div class="quantity">
<span>Qty: </span>
<button class="decrement">-</button>
<input min="0" max="10" placeholder="0" type="number" readonly />
<button class="increment">+</button>
</div>
<button class="add-btn"><span>ADD TO CARD</span></button>
</div>
</body>
<script src="./js/index.js"></script>
</html>
$(document).ready(function () {
function checkWidth() {
var windowSize = $(window).width();
if (windowSize <= 748) {
$(".add-card *").remove();
$(".add-card").prepend(`
<button class="add-btn">
<span>ADD TO CARD</span>
</button>
`);
$(".add-btn").prepend(`
<div class="quantity">
<span>Qty: </span>
<button class="decrement">-</button>
<input min="0" max="10" placeholder="0" type="number" readonly="">
<button class="increment">+</button>
</div>`);
incrementbuttons();
} else {
$(".add-card *").remove();
$(".add-card").prepend(`
<div class="product-img">
<img src="https://cdn.onemars.net/sites/whiskas_id_98_2/image/id-image_1587457239946.png" alt="">
</div>
<div class="details">
<h3>Whiskas® Dry Adult Dewasa 7+, Cat food Rasa Mackerel</h3>
<span>CAT FOOD</span>
</div>
<div class="quantity">
<span>Qty: </span>
<button class="decrement">-</button>
<input min="0" max="10" placeholder="0" type="number" readonly="">
<button class="increment">+</button>
</div>
<button class="add-btn"><span>ADD TO CARD</span></button>
`);
incrementbuttons();
}
}
checkWidth();
$(window).resize(checkWidth);
function incrementbuttons() {
const counters = document.querySelectorAll(".quantity");
counters.forEach((counter) => {
let increment = counter.querySelector(".increment"),
decrement = counter.querySelector(".decrement"),
input = counter.querySelector("input");
increment.addEventListener("click", () => input.stepUp());
decrement.addEventListener("click", () => input.stepDown());
});
}
});
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&display=swap");
html,
body {
height: 100%;
}
body {
display: flex;
color: #000;
background: #fafbfc;
}
body,
input,
textarea,
select,
button {
font-family: "Manrope", sans-serif;
}
.product,
.product-details {
width: 50%;
height: 100%;
}
.product {
position: relative;
overflow: hidden;
background: #dfe1f7;
a {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
color: #6f768d;
font-size: 14px;
font-weight: 700;
top: 25px;
left: 25px;
img {
width: 16px;
height: 16px;
}
}
.image {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
img {
width: 60%;
min-width: 550px;
z-index: 2;
}
.ellipse1 {
position: absolute;
top: 70%;
left: 53%;
transform: translate(-50%, -50%);
width: 350px;
min-width: 350px;
height: 40px;
min-height: 40px;
filter: blur(40px);
background: #818af9;
}
}
.ellipse {
position: absolute;
bottom: -400px;
left: 50%;
transform: translateX(-50%);
width: 850px;
height: 850px;
border-radius: 50%;
z-index: 0;
background: linear-gradient(
285deg,
rgba(#818af9, 0.1),
rgba(#818af9, 0.02)
);
}
}
.product-details {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: 60px 120px;
gap: 10px;
.tag {
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
padding: 2px 8px;
color: #fff;
font-size: 11px;
letter-spacing: 1px;
background: red;
text-transform: uppercase;
cursor: default;
transition: 200ms all;
&:hover {
background: orangered;
transition: 200ms all;
}
}
h2 {
font-size: 32px;
font-weight: 600;
color: #000;
}
.review {
display: flex;
align-items: center;
gap: 17px;
span {
font-size: 14px;
&:first-child {
letter-spacing: 2px;
font-weight: 400;
color: #50cc98;
text-transform: uppercase;
position: relative;
&::after {
content: "";
position: absolute;
top: 54%;
right: -7px;
width: 1px;
height: 50%;
background: rgba(gray, 0.5);
transform: translateY(-50%);
}
}
&:last-child {
margin-left: -5px;
}
}
.stars {
display: flex;
align-items: center;
justify-content: center;
}
}
.description {
ul {
h4 {
font-size: 17px;
color: #000;
font-weight: 600;
margin-bottom: 7px;
}
li {
font-size: 15px;
color: rgba(#000, 0.85);
font-weight: 500;
position: relative;
padding-left: 12px;
margin: 3px 0;
&:before {
content: "";
width: 3px;
height: 3px;
border-radius: 50%;
position: absolute;
left: 1px;
top: 11px;
transform: translateY(-50%);
background: #000;
}
}
}
&:last-child {
margin-top: 20px;
}
}
.selectbox {
display: flex;
align-items: center;
margin-top: 20px;
input {
display: none;
}
input[id="item1"]:checked ~ label[for="item1"] {
outline: 5px solid rgba(#818af9, 0.2);
transition: 150ms all;
background: #fff;
}
input[id="item2"]:checked ~ label[for="item2"] {
outline: 5px solid rgba(#818af9, 0.2);
transition: 150ms all;
background: #fff;
}
input[id="item3"]:checked ~ label[for="item3"] {
outline: 5px solid rgba(#818af9, 0.2);
transition: 150ms all;
background: #fff;
}
.item {
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
width: 55px;
height: 55px;
margin-right: 20px;
transition: 150ms all;
outline: transparent;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
&:hover {
outline: 5px solid rgba(#818af9, 0.3);
transition: 150ms all;
}
img {
width: 100%;
}
}
}
.sizeselectbox {
margin-top: 30px;
ul {
display: flex;
margin-top: 15px;
input {
display: none;
}
input#size1:checked ~ li label[for="size1"] {
background: #818af9;
outline: 3px solid rgba(#818af9, 0.5);
color: #fff;
transition: 100ms all;
}
input#size2:checked ~ li label[for="size2"] {
background: #818af9;
outline: 3px solid rgba(#818af9, 0.5);
color: #fff;
transition: 100ms all;
}
input#size3:checked ~ li label[for="size3"] {
background: #818af9;
outline: 3px solid rgba(#818af9, 0.5);
color: #fff;
transition: 100ms all;
}
input#size4:checked ~ li label[for="size4"] {
background: #818af9;
outline: 3px solid rgba(#818af9, 0.5);
color: #fff;
transition: 100ms all;
}
li {
margin-right: 25px;
&:last-child {
margin: 0;
}
label {
font-size: 14px;
font-weight: 700;
padding: 8px 10px;
background: #f6f6f6;
color: rgba(#3f3e3f, 0.3);
border-radius: 10px;
transition: 100ms all;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
}
}
}
}
@media (max-width: 1000px) {
padding: 50px;
}
}
@media (min-width: 748px) {
.add-card {
display: flex;
align-items: center;
justify-content: space-between;
width: 75%;
padding: 10px 20px;
box-shadow: 0 0 50px 0 rgba(#000, 0.1);
border-radius: 15px;
background: #fff;
position: fixed;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
overflow: hidden;
z-index: 999;
@media (max-width: 1000px) {
padding: 10px;
.details {
h3 {
font-size: 12px;
}
}
}
.product-img {
display: flex;
align-items: center;
justify-content: center;
width: 75px;
min-width: 60px;
img {
width: 100%;
object-fit: cover;
}
}
.details {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
margin: 0 auto 0 10px;
h3 {
font-size: 16px;
font-weight: 600;
color: #000;
}
span {
font-size: 12px;
font-weight: 400;
color: #50cc98;
letter-spacing: 2px;
}
}
.quantity {
display: flex;
align-items: center;
justify-content: space-between;
margin-right: 50px;
span {
font-size: 16px;
font-weight: 600;
}
input {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
outline: 2px solid #d4d4d4;
color: #404040;
border-radius: 10px;
font-size: 18px;
font-weight: 700;
text-align: center;
caret-color: transparent;
cursor: default;
-webkit-user-select: none;
user-select: none;
transition: 200ms all;
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
-webkit-appearance: none;
}
&[type="number"] {
-moz-appearance: textfield;
}
}
button {
width: 24px;
height: 24px;
border-radius: 4px;
font-size: 18px;
font-weight: 700;
color: #828ef9;
outline: 2px solid #828ef9;
margin: 0 20px;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
transition: 200ms all;
&:active {
transform: scale(1.1);
transition: 200ms all;
}
}
.decrement {
&:active {
transform: scale(0.9);
transition: 200ms all;
}
}
}
.add-btn {
padding: 13px 47px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
color: #fff;
background: #828ef9;
transition: 100ms all;
cursor: pointer;
&:hover {
outline: 3px solid rgba(#828ef9, 0.5);
transition: 100ms all;
}
}
}
}
@media (max-width: 1000px) {
.product-details {
.review {
flex-direction: column;
align-items: flex-start;
gap: 7px;
span {
&:first-child {
&::after {
content: none;
}
}
&:last-child {
margin: 0;
}
}
}
.sizeselectbox {
label {
white-space: nowrap;
}
}
}
}
@media (max-width: 748px) {
body {
flex-direction: column;
}
.product {
min-height: 500px;
width: 100%;
}
.product-details {
width: 100%;
height: auto;
padding: 25px;
}
.add-card {
display: flex;
align-items: center;
justify-content: center;
padding: 0 25px 25px 25px;
.product-img,
.details {
display: none;
}
.add-btn {
padding: 5px 5px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
color: #fff;
background: #828ef9;
transition: 100ms all;
width: 100%;
cursor: pointer;
position: relative;
span {
position: absolute;
top: 50%;
left: 75%;
transform: translate(-50%, -50%);
white-space: nowrap;
font-weight: 700;
font-size: 16px;
}
&:hover {
outline: 3px solid rgba(#828ef9, 0.5);
transition: 100ms all;
}
.quantity {
display: flex;
align-items: center;
justify-content: center;
z-index: 99;
background: #fff;
border-radius: 10px;
height: 60px;
width: 50%;
span {
font-size: 16px;
font-weight: 600;
display: none;
}
input {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
outline: 2px solid #d4d4d4;
color: #404040;
border-radius: 10px;
font-size: 18px;
font-weight: 700;
text-align: center;
caret-color: transparent;
cursor: default;
-webkit-user-select: none;
user-select: none;
transition: 200ms all;
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
-webkit-appearance: none;
}
&[type="number"] {
-moz-appearance: textfield;
}
}
button {
min-width: 24px;
height: 24px;
border-radius: 4px;
font-size: 18px;
font-weight: 700;
color: #828ef9;
outline: 2px solid #828ef9;
margin: 0 20px;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
transition: 200ms all;
&:active {
transform: scale(1.1);
transition: 200ms all;
}
}
.decrement {
&:active {
transform: scale(0.9);
transition: 200ms all;
}
}
}
}
}
}
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&display=swap");
html,
body {
height: 100%;
}
body {
display: flex;
color: #000;
background: #fafbfc;
}
body,
input,
textarea,
select,
button {
font-family: "Manrope", sans-serif;
}
.product,
.product-details {
width: 50%;
height: 100%;
}
.product {
position: relative;
overflow: hidden;
background: #dfe1f7;
}
.product a {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
color: #6f768d;
font-size: 14px;
font-weight: 700;
top: 25px;
left: 25px;
}
.product a img {
width: 16px;
height: 16px;
}
.product .image {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.product .image img {
width: 60%;
min-width: 550px;
z-index: 2;
}
.product .image .ellipse1 {
position: absolute;
top: 70%;
left: 53%;
transform: translate(-50%, -50%);
width: 350px;
min-width: 350px;
height: 40px;
min-height: 40px;
filter: blur(40px);
background: #818af9;
}
.product .ellipse {
position: absolute;
bottom: -400px;
left: 50%;
transform: translateX(-50%);
width: 850px;
height: 850px;
border-radius: 50%;
z-index: 0;
background: linear-gradient(
285deg,
rgba(129, 138, 249, 0.1),
rgba(129, 138, 249, 0.02)
);
}
.product-details {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: 60px 120px;
gap: 10px;
}
.product-details .tag {
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
padding: 2px 8px;
color: #fff;
font-size: 11px;
letter-spacing: 1px;
background: red;
text-transform: uppercase;
cursor: default;
transition: 200ms all;
}
.product-details .tag:hover {
background: orangered;
transition: 200ms all;
}
.product-details h2 {
font-size: 32px;
font-weight: 600;
color: #000;
}
.product-details .review {
display: flex;
align-items: center;
gap: 17px;
}
.product-details .review span {
font-size: 14px;
}
.product-details .review span:first-child {
letter-spacing: 2px;
font-weight: 400;
color: #50cc98;
text-transform: uppercase;
position: relative;
}
.product-details .review span:first-child::after {
content: "";
position: absolute;
top: 54%;
right: -7px;
width: 1px;
height: 50%;
background: rgba(128, 128, 128, 0.5);
transform: translateY(-50%);
}
.product-details .review span:last-child {
margin-left: -5px;
}
.product-details .review .stars {
display: flex;
align-items: center;
justify-content: center;
}
.product-details .description ul h4 {
font-size: 17px;
color: #000;
font-weight: 600;
margin-bottom: 7px;
}
.product-details .description ul li {
font-size: 15px;
color: rgba(0, 0, 0, 0.85);
font-weight: 500;
position: relative;
padding-left: 12px;
margin: 3px 0;
}
.product-details .description ul li:before {
content: "";
width: 3px;
height: 3px;
border-radius: 50%;
position: absolute;
left: 1px;
top: 11px;
transform: translateY(-50%);
background: #000;
}
.product-details .description:last-child {
margin-top: 20px;
}
.product-details .selectbox {
display: flex;
align-items: center;
margin-top: 20px;
}
.product-details .selectbox input {
display: none;
}
.product-details .selectbox input[id="item1"]:checked ~ label[for="item1"] {
outline: 5px solid rgba(129, 138, 249, 0.2);
transition: 150ms all;
background: #fff;
}
.product-details .selectbox input[id="item2"]:checked ~ label[for="item2"] {
outline: 5px solid rgba(129, 138, 249, 0.2);
transition: 150ms all;
background: #fff;
}
.product-details .selectbox input[id="item3"]:checked ~ label[for="item3"] {
outline: 5px solid rgba(129, 138, 249, 0.2);
transition: 150ms all;
background: #fff;
}
.product-details .selectbox .item {
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
width: 55px;
height: 55px;
margin-right: 20px;
transition: 150ms all;
outline: transparent;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
}
.product-details .selectbox .item:hover {
outline: 5px solid rgba(129, 138, 249, 0.3);
transition: 150ms all;
}
.product-details .selectbox .item img {
width: 100%;
}
.product-details .sizeselectbox {
margin-top: 30px;
}
.product-details .sizeselectbox ul {
display: flex;
margin-top: 15px;
}
.product-details .sizeselectbox ul input {
display: none;
}
.product-details .sizeselectbox ul input#size1:checked ~ li label[for="size1"] {
background: #818af9;
outline: 3px solid rgba(129, 138, 249, 0.5);
color: #fff;
transition: 100ms all;
}
.product-details .sizeselectbox ul input#size2:checked ~ li label[for="size2"] {
background: #818af9;
outline: 3px solid rgba(129, 138, 249, 0.5);
color: #fff;
transition: 100ms all;
}
.product-details .sizeselectbox ul input#size3:checked ~ li label[for="size3"] {
background: #818af9;
outline: 3px solid rgba(129, 138, 249, 0.5);
color: #fff;
transition: 100ms all;
}
.product-details .sizeselectbox ul input#size4:checked ~ li label[for="size4"] {
background: #818af9;
outline: 3px solid rgba(129, 138, 249, 0.5);
color: #fff;
transition: 100ms all;
}
.product-details .sizeselectbox ul li {
margin-right: 25px;
}
.product-details .sizeselectbox ul li:last-child {
margin: 0;
}
.product-details .sizeselectbox ul li label {
font-size: 14px;
font-weight: 700;
padding: 8px 10px;
background: #f6f6f6;
color: rgba(63, 62, 63, 0.3);
border-radius: 10px;
transition: 100ms all;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
}
@media (max-width: 1000px) {
.product-details {
padding: 50px;
}
}
@media (min-width: 748px) {
.add-card {
display: flex;
align-items: center;
justify-content: space-between;
width: 75%;
padding: 10px 20px;
box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.1);
border-radius: 15px;
background: #fff;
position: fixed;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
overflow: hidden;
z-index: 999;
}
}
@media (min-width: 748px) and (max-width: 1000px) {
.add-card {
padding: 10px;
}
.add-card .details h3 {
font-size: 12px;
}
}
@media (min-width: 748px) {
.add-card .product-img {
display: flex;
align-items: center;
justify-content: center;
width: 75px;
min-width: 60px;
}
.add-card .product-img img {
width: 100%;
object-fit: cover;
}
.add-card .details {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
margin: 0 auto 0 10px;
}
.add-card .details h3 {
font-size: 16px;
font-weight: 600;
color: #000;
}
.add-card .details span {
font-size: 12px;
font-weight: 400;
color: #50cc98;
letter-spacing: 2px;
}
.add-card .quantity {
display: flex;
align-items: center;
justify-content: space-between;
margin-right: 50px;
}
.add-card .quantity span {
font-size: 16px;
font-weight: 600;
}
.add-card .quantity input {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
outline: 2px solid #d4d4d4;
color: #404040;
border-radius: 10px;
font-size: 18px;
font-weight: 700;
text-align: center;
caret-color: transparent;
cursor: default;
-webkit-user-select: none;
user-select: none;
transition: 200ms all;
}
.add-card .quantity input::-webkit-outer-spin-button,
.add-card .quantity input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
.add-card .quantity input[type="number"] {
-moz-appearance: textfield;
}
.add-card .quantity button {
width: 24px;
height: 24px;
border-radius: 4px;
font-size: 18px;
font-weight: 700;
color: #828ef9;
outline: 2px solid #828ef9;
margin: 0 20px;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
transition: 200ms all;
}
.add-card .quantity button:active {
transform: scale(1.1);
transition: 200ms all;
}
.add-card .quantity .decrement:active {
transform: scale(0.9);
transition: 200ms all;
}
.add-card .add-btn {
padding: 13px 47px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
color: #fff;
background: #828ef9;
transition: 100ms all;
cursor: pointer;
}
.add-card .add-btn:hover {
outline: 3px solid rgba(130, 142, 249, 0.5);
transition: 100ms all;
}
}
@media (max-width: 1000px) {
.product-details .review {
flex-direction: column;
align-items: flex-start;
gap: 7px;
}
.product-details .review span:first-child::after {
content: none;
}
.product-details .review span:last-child {
margin: 0;
}
.product-details .sizeselectbox label {
white-space: nowrap;
}
}
@media (max-width: 748px) {
body {
flex-direction: column;
}
.product {
min-height: 500px;
width: 100%;
}
.product-details {
width: 100%;
height: auto;
padding: 25px;
}
.add-card {
display: flex;
align-items: center;
justify-content: center;
padding: 0 25px 25px 25px;
}
.add-card .product-img,
.add-card .details {
display: none;
}
.add-card .add-btn {
padding: 5px 5px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
color: #fff;
background: #828ef9;
transition: 100ms all;
width: 100%;
cursor: pointer;
position: relative;
}
.add-card .add-btn span {
position: absolute;
top: 50%;
left: 75%;
transform: translate(-50%, -50%);
white-space: nowrap;
font-weight: 700;
font-size: 16px;
}
.add-card .add-btn:hover {
outline: 3px solid rgba(130, 142, 249, 0.5);
transition: 100ms all;
}
.add-card .add-btn .quantity {
display: flex;
align-items: center;
justify-content: center;
z-index: 99;
background: #fff;
border-radius: 10px;
height: 60px;
width: 50%;
}
.add-card .add-btn .quantity span {
font-size: 16px;
font-weight: 600;
display: none;
}
.add-card .add-btn .quantity input {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
outline: 2px solid #d4d4d4;
color: #404040;
border-radius: 10px;
font-size: 18px;
font-weight: 700;
text-align: center;
caret-color: transparent;
cursor: default;
-webkit-user-select: none;
user-select: none;
transition: 200ms all;
}
.add-card .add-btn .quantity input::-webkit-outer-spin-button,
.add-card .add-btn .quantity input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
.add-card .add-btn .quantity input[type="number"] {
-moz-appearance: textfield;
}
.add-card .add-btn .quantity button {
min-width: 24px;
height: 24px;
border-radius: 4px;
font-size: 18px;
font-weight: 700;
color: #828ef9;
outline: 2px solid #828ef9;
margin: 0 20px;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
transition: 200ms all;
}
.add-card .add-btn .quantity button:active {
transform: scale(1.1);
transition: 200ms all;
}
.add-card .add-btn .quantity .decrement:active {
transform: scale(0.9);
transition: 200ms all;
}
}