mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
425 lines
28 KiB
HTML
425 lines
28 KiB
HTML
<div class="card">
|
|
<div class="image-container">
|
|
<svg viewBox="0 0 1921 1081" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" class="svg">
|
|
<defs>
|
|
<radialGradient gradientUnits="objectBoundingBox" gradientTransform="translate(0.219) scale(0.563 1)" r="1.204" cy="0.5" cx="0.5" id="radial-gradient">
|
|
<stop stop-color="#fff" offset="0"></stop>
|
|
<stop stop-color="#bcbcbc" offset="1"></stop>
|
|
</radialGradient>
|
|
</defs>
|
|
<g transform="translate(-121.5 -92.5)" id="hoodie">
|
|
<rect fill="url(#radial-gradient)" stroke-width="1" stroke-miterlimit="10" stroke="#fff" transform="translate(122 93)" height="1080" width="1920" data-name="Rectangle 83" id="Rectangle_83"></rect>
|
|
<g transform="translate(679.338 886.938)" data-name="Group 67" id="Group_67">
|
|
<path fill="#dbdbdb" transform="translate(-679.026 -701.302)" d="M689.907,702.85s-7.253,22.231-9.689,34.844a8.084,8.084,0,0,0,2.15,7.3c5.49,5.5,19.551,16.583,46.956,20.927a15.4,15.4,0,0,0,14.4-5.733l14.95-18.791Z" data-name="Path 27" id="Path_27"></path>
|
|
<path transform="translate(-679.338 -701.77)" d="M731.958,767.6a14.468,14.468,0,0,1-2.48-.2c-27.247-4.329-41.466-15.15-47.529-21.228a9.162,9.162,0,0,1-2.437-8.227c2.422-12.527,9.646-34.744,9.718-34.973l.387-1.2,1.089.616,69.846,39.13-15.709,19.737A16.4,16.4,0,0,1,731.958,767.6Zm-41.136-62.765c-1.534,4.787-7.2,22.79-9.274,33.526a7.031,7.031,0,0,0,1.878,6.364c5.877,5.891,19.723,16.412,46.382,20.64a14.4,14.4,0,0,0,13.445-5.361l14.19-17.845Z" data-name="Path 28" id="Path_28"></path>
|
|
</g>
|
|
<g transform="translate(1403.771 886.981)" data-name="Group 68" id="Group_68">
|
|
<path fill="#dbdbdb" transform="translate(-1184.283 -701.345)" d="M1254.631,702.85s7.253,22.231,9.689,34.844a8.084,8.084,0,0,1-2.15,7.3c-5.49,5.5-19.551,16.583-46.956,20.927a15.4,15.4,0,0,1-14.4-5.733l-14.95-18.791Z" data-name="Path 29" id="Path_29"></path>
|
|
<path transform="translate(-1184.76 -701.8)" d="M1213.369,767.59a16.533,16.533,0,0,1-12.9-6.307l-15.709-19.737L1255.7,701.8l.387,1.2c.072.215,7.31,22.432,9.718,34.973a9.161,9.161,0,0,1-2.437,8.227c-6.049,6.063-20.282,16.9-47.529,21.228A20.362,20.362,0,0,1,1213.369,767.59Zm-25.485-25.427,14.19,17.845a14.42,14.42,0,0,0,13.445,5.361c26.674-4.243,40.506-14.749,46.4-20.64a7.093,7.093,0,0,0,1.878-6.364c-2.078-10.75-7.74-28.738-9.273-33.525Z" data-name="Path 30" id="Path_30"></path>
|
|
</g>
|
|
<g transform="translate(868.454 973.453)" data-name="Group 69" id="Group_69">
|
|
<path fill="#dbdbdb" transform="translate(-810.972 -761.818)" d="M1024.839,822.233c-118.149.186-175.51-12.7-199.06-20.324a20,20,0,0,1-13.789-19.049V762.85h425.668v19.78a19.992,19.992,0,0,1-14,19.12C1199.7,809.232,1141.655,822.061,1024.839,822.233Z" data-name="Path 31" id="Path_31"></path>
|
|
<path transform="translate(-811.28 -762.13)" d="M1022.681,823.577c-116.458,0-173.317-12.742-196.91-20.368a20.954,20.954,0,0,1-14.491-20.038V762.13h427.733v20.812a20.941,20.941,0,0,1-14.72,20.109c-24.295,7.6-82.488,20.353-199.146,20.525h-2.465ZM813.344,764.194v18.977a18.9,18.9,0,0,0,13.072,18.074c23.478,7.6,80.123,20.267,196.279,20.267h2.465c116.386-.172,174.349-12.886,198.53-20.439a18.894,18.894,0,0,0,13.273-18.146V764.18H813.344Z" data-name="Path 32" id="Path_32"></path>
|
|
</g>
|
|
<g transform="translate(687.323 338.147)" data-name="Group 70" id="Group_70">
|
|
<path fill="#144076" transform="translate(-684.595 -318.574)" d="M1276.044,391.057c-80.022-65.732-179.954-70.978-195.391-71.394v-.043s-.4,0-1.061.014c-.659-.014-1.061-.014-1.061-.014v.043c-15.451.416-115.368,5.662-195.391,71.394-86.974,71.437-202.07,442.41-197.369,470.474s25.857,48.475,70.52,45.924c39.961-2.279,108.173-164.761,122.062-198.888a.853.853,0,0,1,1.62.487c-18.16,136.8-25.943,234.162-13.2,245.858,39.99,36.736,385.679,36.736,425.669,0,12.728-11.7,4.959-109.062-13.2-245.858a.853.853,0,0,1,1.62-.487c13.889,34.127,82.1,196.609,122.062,198.888,44.662,2.551,65.818-17.859,70.52-45.924C1478.114,833.467,1363.018,462.494,1276.044,391.057Z" data-name="Path 33" id="Path_33"></path>
|
|
<path transform="translate(-684.909 -318.89)" d="M1079.906,983.809c-91.217,0-192.61-8.6-213.536-27.821-11.9-10.922-7.74-91.188,12.7-245.385-14.62,35.776-82.287,195.907-122.42,198.2-55,3.053-68.441-27.964-71.594-46.784-2.422-14.419,25.757-115.54,64.356-219.5,28.423-76.511,83.534-211,133.371-251.95,78.13-64.184,173.977-70.907,195.018-71.595v-.043l1.046-.029,1.075.014,2.078-.029v.086c21.041.688,116.873,7.41,195.018,71.595,49.851,40.95,104.962,175.425,133.371,251.95,38.614,103.959,66.778,205.08,64.356,219.5-3.153,18.82-16.641,49.851-71.594,46.784-40.319-2.308-108.388-163.858-122.607-198.673,20.611,154.441,24.8,234.907,12.885,245.858C1272.516,975.195,1171.108,983.809,1079.906,983.809ZM879.384,707.335a2.023,2.023,0,0,1,.5.072,1.888,1.888,0,0,1,1.4,2.107c-20.21,152.219-24.768,234.635-13.531,244.955,39.66,36.421,384.618,36.421,424.278,0,11.237-10.32,6.679-92.736-13.531-244.955a1.888,1.888,0,0,1,1.4-2.107,1.791,1.791,0,0,1,2.179,1.1c13.316,32.708,81.743,195.993,121.159,198.243,39.5,2.265,64.184-13.746,69.444-45.064,2.379-14.176-25.757-114.781-64.256-218.453-28.337-76.325-83.276-210.426-132.754-251.061-78.947-64.844-176.1-70.663-194.774-71.165l-1.577-.029-.473.029c-18.676.5-115.827,6.321-194.76,71.165C834.621,432.81,779.7,566.927,751.345,643.237c-38.5,103.672-66.635,204.277-64.256,218.453,5.246,31.318,29.914,47.343,69.445,45.064C795.95,904.5,864.377,741.219,877.693,708.5A1.816,1.816,0,0,1,879.384,707.335Z" data-name="Path 34" id="Path_34"></path>
|
|
</g>
|
|
<g transform="translate(894.605 274.45)" data-name="Group 71" id="Group_71">
|
|
<path fill="#dbdbdb" transform="translate(-829.219 -274.134)" d="M1202.879,371.815c-3.2-13.559-12.112-18.275-17.931-19.923a4.091,4.091,0,0,1-2.695-5.633c3.354-7.482,7.009-22.489-8.743-35.6-22.016-18.347-90.529-35.475-156.591-35.475-61.174,0-134.575,17.128-156.591,35.475-15.752,13.129-12.1,28.136-8.743,35.6a4.091,4.091,0,0,1-2.695,5.633c-5.819,1.634-14.735,6.364-17.931,19.923-4.888,20.8,14.677,30.587,63.611,41.6s105.206,74.619,122.334,78.288c17.128-3.669,73.4-67.28,122.334-78.288C1188.2,402.4,1207.781,392.612,1202.879,371.815Z" data-name="Path 35" id="Path_35"></path>
|
|
<path transform="translate(-829.525 -274.45)" d="M1017.24,493.075l-.215-.043c-6.651-1.419-18.547-11.194-33.626-23.578-24.61-20.21-58.322-47.887-88.723-54.724-38.255-8.614-55.713-16.025-62.249-26.474-2.938-4.687-3.626-10.033-2.15-16.369,3.383-14.362,13.129-19.12,18.648-20.683a3.189,3.189,0,0,0,2.021-1.691,3.038,3.038,0,0,0,.014-2.523c-3.569-7.969-7.152-23.349,9.016-36.822,22.432-18.691,97.38-35.719,157.25-35.719,63.081,0,133.615,16.025,157.25,35.719,16.182,13.488,12.6,28.867,9.016,36.822a2.935,2.935,0,0,0,.014,2.523,3.189,3.189,0,0,0,2.021,1.691c5.518,1.548,15.265,6.307,18.647,20.683h0c1.491,6.335.788,11.682-2.15,16.369-6.536,10.449-23.994,17.859-62.249,26.474-30.4,6.837-64.113,34.514-88.723,54.724-15.079,12.384-26.975,22.159-33.626,23.578Zm0-216.561c-59.483,0-133.8,16.8-155.931,35.245-15.136,12.613-11.8,26.961-8.457,34.4a5.045,5.045,0,0,1-.029,4.243,5.243,5.243,0,0,1-3.34,2.809c-6.206,1.749-14.219,6.493-17.2,19.164-1.362,5.762-.745,10.607,1.892,14.792,7.167,11.438,29.541,18.49,60.945,25.556,30.888,6.952,64.8,34.8,89.583,55.14,14.692,12.054,26.316,21.615,32.536,23.105,6.206-1.491,17.845-11.051,32.536-23.105,24.768-20.339,58.695-48.188,89.583-55.14,31.4-7.066,53.793-14.118,60.959-25.556,2.623-4.185,3.239-9.03,1.892-14.792-2.981-12.671-10.994-17.415-17.2-19.164a5.236,5.236,0,0,1-3.339-2.809,5.1,5.1,0,0,1-.029-4.243c3.34-7.425,6.665-21.787-8.457-34.4C1152.833,294.818,1087.43,276.514,1017.24,276.514Z" data-name="Path 36" id="Path_36"></path>
|
|
</g>
|
|
<g transform="translate(975.916 293.6)" data-name="Group 72" id="Group_72">
|
|
<path fill="#144076" transform="translate(-885.945 -287.5)" d="M1096.279,325.555c-14.677-39.144-107.284-37.008-103.945-37.008s-89.253-2.136-103.945,37.008c-13.6,36.277,74.4,60.286,99.286,98.455a5.519,5.519,0,0,0,9.288,0C1021.889,385.855,1109.881,361.832,1096.279,325.555Z" data-name="Path 37" id="Path_37"></path>
|
|
<path fill="#144076" transform="translate(-886.255 -287.81)" d="M992.658,427.889a6.591,6.591,0,0,1-5.518-3c-10.177-15.609-31.117-28.867-51.356-41.7-28.953-18.332-56.3-35.647-48.031-57.691,14.147-37.739,98.455-37.854,104.862-37.668h.043c6.049-.215,90.715-.158,104.9,37.668,8.27,22.045-19.078,39.359-48.031,57.691-20.239,12.828-41.179,26.086-51.356,41.7A6.59,6.59,0,0,1,992.658,427.889Zm-1.018-138c-9.962,0-88.837,1.347-101.967,36.349-7.668,20.468,18.977,37.352,47.2,55.226,20.439,12.943,41.566,26.316,51.987,42.3a4.5,4.5,0,0,0,7.568,0c10.42-15.982,31.562-29.369,51.987-42.3,28.222-17.874,54.882-34.758,47.2-55.226-13.129-35-91.976-36.349-101.952-36.349h-.014v.014l-1.921-.014Z" data-name="Path 38" id="Path_38"></path>
|
|
</g>
|
|
<g transform="translate(1048.135 448.054)" data-name="Group 75" id="Group_75">
|
|
<g transform="translate(0 0)" data-name="Group 73" id="Group_73">
|
|
<path fill="#47474c" transform="translate(-936.484 -395.41)" d="M947.836,401.358a5.418,5.418,0,1,1-5.418-5.418A5.414,5.414,0,0,1,947.836,401.358Z" data-name="Path 39" id="Path_39"></path>
|
|
<path transform="translate(-936.64 -395.57)" d="M942.574,407.438a5.934,5.934,0,1,1,5.934-5.934A5.946,5.946,0,0,1,942.574,407.438Zm0-10.822a4.9,4.9,0,1,0,4.9,4.9A4.909,4.909,0,0,0,942.574,396.616Z" data-name="Path 40" id="Path_40"></path>
|
|
</g>
|
|
<g transform="translate(56.487 0)" data-name="Group 74" id="Group_74">
|
|
<path fill="#47474c" transform="translate(-975.894 -395.41)" d="M987.246,401.358a5.418,5.418,0,1,1-5.418-5.418A5.414,5.414,0,0,1,987.246,401.358Z" data-name="Path 41" id="Path_41"></path>
|
|
<path transform="translate(-976.05 -395.57)" d="M981.984,407.438a5.934,5.934,0,1,1,5.934-5.934A5.946,5.946,0,0,1,981.984,407.438Zm0-10.822a4.9,4.9,0,1,0,4.9,4.9A4.909,4.909,0,0,0,981.984,396.616Z" data-name="Path 42" id="Path_42"></path>
|
|
</g>
|
|
</g>
|
|
<path transform="translate(136.632 21.684)" d="M1110.076,324.49c-1.089,6.163,3.626,6.034,3.626,6.034-4.071,4.8-19.966,19.909-25.14,23.464a98.7,98.7,0,0,1-16.526,9c-5.719,2.494-11.395,4.73-17.013,7.281A249.431,249.431,0,0,0,1022.356,387a118.945,118.945,0,0,0-27.706,23.965,94.137,94.137,0,0,1,11.61-14.563,113.846,113.846,0,0,1,14.333-12.04c10.191-7.281,21.442-12.814,32.766-17.874,11.409-5.06,23.12-8.786,33.468-15.15C1098.81,343.811,1108.1,330.352,1110.076,324.49Z" data-name="Path 43" id="Path_43"></path>
|
|
<path transform="translate(71.035 21.35)" d="M952.36,396.791a122.341,122.341,0,0,0-14.376-11.567,193.593,193.593,0,0,0-32.006-18.046c-47.371-21.013-56.014-34.514-59.483-43.458,0,0,.86,5.576-3.225,7.124a84.15,84.15,0,0,0,28.193,23.564c10.664,6.178,21.815,11.137,32.723,16.469,10.951,5.246,21.772,10.707,32.092,16.956,10.22,6.35,20.081,13.588,27.348,23.449A62.461,62.461,0,0,0,952.36,396.791Z" data-name="Path 44" id="Path_44"></path>
|
|
<g transform="translate(949.178 540.102)" data-name="Group 76" id="Group_76">
|
|
<path fill="#dbdbdb" transform="translate(-799.273 -418.369)" d="M1065.571,570.358h-11.682a7.9,7.9,0,0,0-1.691-4.071c-1.247-1.247-3.383-1.892-6.321-1.892-2.9,0-4.916.487-6.034,1.448a3.767,3.767,0,0,0-1.29,2.981c0,1.763,2.465,3.182,7.324,4.271a114.856,114.856,0,0,1,12,3.1c.645.244,1.2.444,1.605.645,4.959,2.336,7.41,5.891,7.41,10.635,0,5.8-2.422,10.033-7.21,12.685-.6.33-1.175.6-1.82.889a27.2,27.2,0,0,1-10.793,2.007c-6.077,0-10.994-1.089-14.735-3.225a14.084,14.084,0,0,1-5.289-5.16,14.53,14.53,0,0,1-1.763-7.281h12.241a5.831,5.831,0,0,0,2.25,4.873c1.491,1.175,4.028,1.777,7.611,1.777,2.695,0,4.716-.573,6.049-1.691a3.78,3.78,0,0,0,1.534-2.981c0-1.892-2.408-3.383-7.21-4.429-7.167-1.534-11.682-2.781-13.531-3.669-4.916-2.293-7.324-5.834-7.324-10.75a14.031,14.031,0,0,1,3.827-10.019c3.225-3.426,8.055-5.117,14.462-5.117,5.275,0,9.5.774,12.685,2.25a4.393,4.393,0,0,1,.774.4,12.756,12.756,0,0,1,5.189,4.959A14.855,14.855,0,0,1,1065.571,570.358Z" data-name="Path 45" id="Path_45"></path>
|
|
<path fill="#dbdbdb" transform="translate(-830.846 -459.79)" d="M1027.956,520.592l33.067,55.1H1007.9l-31.576-52.632L952.42,483.225l23.908-14.376,15.064-9.059Z" data-name="Path 46" id="Path_46"></path>
|
|
<path fill="#dbdbdb" transform="translate(-815.203 -418.213)" d="M1036.321,579.662v22.589h-10.994v-2.494a23.509,23.509,0,0,1-12.886,3.827h-.129a23.923,23.923,0,0,1,0-47.844h.129a23.627,23.627,0,0,1,12.886,3.827v-2.623h10.994Zm-10.994,2.494v-4.988a13.186,13.186,0,0,0-12.886-10.635h-.129a13.151,13.151,0,0,0,0,26.3h.129A13.25,13.25,0,0,0,1025.328,582.156Z" data-name="Path 47" id="Path_47"></path>
|
|
<path fill="#dbdbdb" transform="translate(-830.807 -422.546)" d="M1000.3,584v22.589H989.3v-2.494a23.58,23.58,0,0,1-12.885,3.827H976.3a23.923,23.923,0,0,1,0-47.844h.115A23.663,23.663,0,0,1,989.3,563.9V545.74H1000.3ZM989.3,586.489V581.5a13.186,13.186,0,0,0-12.885-10.635H976.3a13.151,13.151,0,0,0,0,26.3h.115A13.238,13.238,0,0,0,989.3,586.489Z" data-name="Path 48" id="Path_48"></path>
|
|
<path fill="#dbdbdb" transform="translate(-845.041 -447.323)" d="M990.524,541.55l12.972,21.672H950.419L920.95,514.173l-1.29-2.136,1.29-.76,37.725-22.718Z" data-name="Path 49" id="Path_49"></path>
|
|
<rect fill="#dbdbdb" transform="translate(105.421 137.527)" height="46.511" width="11.954" data-name="Rectangle 84" id="Rectangle_84"></rect>
|
|
<rect fill="#dbdbdb" transform="translate(105.421 123.438)" height="10.506" width="11.954" data-name="Rectangle 85" id="Rectangle_85"></rect>
|
|
<path fill="#dbdbdb" transform="translate(-851.844 -422.546)" d="M951.79,584v22.589H940.8v-2.494a23.688,23.688,0,0,1-12.929,3.827h-.115a23.923,23.923,0,0,1,0-47.844h.115A23.808,23.808,0,0,1,940.8,563.9V545.74H951.79ZM940.8,586.489V581.5a13.185,13.185,0,0,0-12.929-10.635h-.115a13.151,13.151,0,0,0,0,26.3h.115A13.237,13.237,0,0,0,940.8,586.489Z" data-name="Path 50" id="Path_50"></path>
|
|
<path fill="#dbdbdb" transform="translate(-859.224 -434.844)" d="M935.133,532.611,946,550.742h-53.1l-5.963-9.947,39.015-23.435Z" data-name="Path 51" id="Path_51"></path>
|
|
<path fill="#dbdbdb" transform="translate(-867.6 -418.213)" d="M915.4,579.662v22.589H904.408v-2.494a23.724,23.724,0,0,1-12.929,3.827h-.129a23.923,23.923,0,0,1,0-47.844h.129a23.881,23.881,0,0,1,12.929,3.827v-2.623H915.4Zm-10.994,2.494v-4.988a13.186,13.186,0,0,0-12.929-10.635h-.129a13.152,13.152,0,0,0,0,26.3h.129A13.25,13.25,0,0,0,904.408,582.156Z" data-name="Path 52" id="Path_52"></path>
|
|
</g>
|
|
<path transform="translate(111.117 53.658)" d="M942.952,521.374a2.056,2.056,0,0,1-2.021-1.691c-11.567-63.439-.1-119.21.014-119.769a2.065,2.065,0,0,1,4.042.846c-.115.545-11.4,55.57.014,118.178a2.086,2.086,0,0,1-1.663,2.408A3.533,3.533,0,0,1,942.952,521.374Z" data-name="Path 53" id="Path_53"></path>
|
|
<path transform="translate(128.257 53.656)" d="M977.4,540.182a1.749,1.749,0,0,1-.53-.072,2.068,2.068,0,0,1-1.476-2.523c12.212-46.368,4.916-136.18,4.845-137.083a2.063,2.063,0,0,1,4.114-.33c.072.9,7.425,91.417-4.959,138.473A2.065,2.065,0,0,1,977.4,540.182Z" data-name="Path 54" id="Path_54"></path>
|
|
<path transform="translate(111.144 85.257)" d="M946.666,476.618a5.418,5.418,0,1,1-5.418-5.418A5.414,5.414,0,0,1,946.666,476.618Z" data-name="Path 55" id="Path_55"></path>
|
|
<path transform="translate(127.991 91.15)" d="M985.546,490.218a5.418,5.418,0,1,1-5.418-5.418A5.414,5.414,0,0,1,985.546,490.218Z" data-name="Path 56" id="Path_56"></path>
|
|
<path transform="translate(57.485 54.278)" d="M812,399.71c4.2,19.694,6.436,39.818,8.887,59.813,2.322,20.038,4.142,40.133,5.69,60.243,1.39,20.124,2.523,40.276,2.981,60.443.487,20.167.358,40.362-.731,60.5.315-20.167-.1-40.319-.86-60.443q-1.182-30.207-3.454-60.343c-1.39-20.1-3.225-40.176-5.217-60.228q-1.484-15.05-3.225-30.057C814.867,419.648,814.007,409.557,812,399.71Z" data-name="Path 57" id="Path_57"></path>
|
|
<path transform="translate(180.783 54.278)" d="M1114.371,399.71c-2.021,9.833-2.881,19.938-4.085,29.928q-1.741,15.007-3.225,30.057c-1.978,20.052-3.827,40.119-5.217,60.228q-2.322,30.143-3.454,60.343c-.76,20.138-1.175,40.291-.86,60.443-1.075-20.138-1.2-40.334-.731-60.5s1.591-40.319,2.981-60.443c1.562-20.11,3.368-40.2,5.69-60.243C1107.936,439.528,1110.172,419.418,1114.371,399.71Z" data-name="Path 58" id="Path_58"></path>
|
|
</g>
|
|
</svg>
|
|
|
|
<div class="price">$49.9</div>
|
|
</div>
|
|
<label class="favorite">
|
|
<input checked="" type="checkbox">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
|
|
<path d="M12 20a1 1 0 0 1-.437-.1C11.214 19.73 3 15.671 3 9a5 5 0 0 1 8.535-3.536l.465.465.465-.465A5 5 0 0 1 21 9c0 6.646-8.212 10.728-8.562 10.9A1 1 0 0 1 12 20z"></path>
|
|
</svg>
|
|
</label>
|
|
|
|
<div class="content">
|
|
<div class="brand">ADIDAS</div>
|
|
<div class="product-name">Classic oversized hoodie</div>
|
|
<div class="color-size-container">
|
|
<div class="colors">
|
|
Color
|
|
<ul class="colors-container">
|
|
<li class="color"><a href="#"></a> <span class="color-name">Collegiate Gold</span></li>
|
|
<li class="color active"><a href="#"></a><span class="color-name">Team Navy</span></li>
|
|
<li class="color"><a href="#"></a><span class="color-name">Pulse Blue</span></li>
|
|
<li class="color"><a href="#"></a><span class="color-name">Pink Fusion</span></li>
|
|
+2
|
|
</ul>
|
|
</div>
|
|
<div class="sizes">
|
|
Size
|
|
<ul class="size-container">
|
|
<li class="size">
|
|
<label class="size-radio">
|
|
<input name="size" value="xs" type="radio">
|
|
<span class="name">XS</span>
|
|
</label>
|
|
</li>
|
|
<li class="size">
|
|
<label class="size-radio">
|
|
<input checked="" name="size" value="s" type="radio">
|
|
<span class="name">S</span>
|
|
</label>
|
|
</li>
|
|
<li class="size">
|
|
<label class="size-radio">
|
|
<input name="size" value="m" type="radio">
|
|
<span class="name">M</span>
|
|
</label>
|
|
</li>
|
|
<li class="size">
|
|
<label class="size-radio">
|
|
<input name="size" value="l" type="radio">
|
|
<span class="name">L</span>
|
|
</label>
|
|
</li>
|
|
<li class="size">
|
|
<label class="size-radio">
|
|
<input name="size" value="xl" type="radio">
|
|
<span class="name">XL</span>
|
|
</label>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="rating">
|
|
<svg viewBox="0 0 99.498 16.286" xmlns="http://www.w3.org/2000/svg" class="svg four-star-svg">
|
|
<path fill="#fc0" transform="translate(-0.001 -1.047)" d="M9.357,1.558,11.282,5.45a.919.919,0,0,0,.692.5l4.3.624a.916.916,0,0,1,.509,1.564l-3.115,3.029a.916.916,0,0,0-.264.812l.735,4.278a.919.919,0,0,1-1.334.967l-3.85-2.02a.922.922,0,0,0-.855,0l-3.85,2.02a.919.919,0,0,1-1.334-.967l.735-4.278a.916.916,0,0,0-.264-.812L.279,8.14A.916.916,0,0,1,.789,6.576l4.3-.624a.919.919,0,0,0,.692-.5L7.71,1.558A.92.92,0,0,1,9.357,1.558Z" id="star-svgrepo-com"></path>
|
|
<path fill="#fc0" transform="translate(20.607 -1.047)" d="M9.357,1.558,11.282,5.45a.919.919,0,0,0,.692.5l4.3.624a.916.916,0,0,1,.509,1.564l-3.115,3.029a.916.916,0,0,0-.264.812l.735,4.278a.919.919,0,0,1-1.334.967l-3.85-2.02a.922.922,0,0,0-.855,0l-3.85,2.02a.919.919,0,0,1-1.334-.967l.735-4.278a.916.916,0,0,0-.264-.812L.279,8.14A.916.916,0,0,1,.789,6.576l4.3-.624a.919.919,0,0,0,.692-.5L7.71,1.558A.92.92,0,0,1,9.357,1.558Z" data-name="star-svgrepo-com" id="star-svgrepo-com-2"></path>
|
|
<path fill="#fc0" transform="translate(41.215 -1.047)" d="M9.357,1.558,11.282,5.45a.919.919,0,0,0,.692.5l4.3.624a.916.916,0,0,1,.509,1.564l-3.115,3.029a.916.916,0,0,0-.264.812l.735,4.278a.919.919,0,0,1-1.334.967l-3.85-2.02a.922.922,0,0,0-.855,0l-3.85,2.02a.919.919,0,0,1-1.334-.967l.735-4.278a.916.916,0,0,0-.264-.812L.279,8.14A.916.916,0,0,1,.789,6.576l4.3-.624a.919.919,0,0,0,.692-.5L7.71,1.558A.92.92,0,0,1,9.357,1.558Z" data-name="star-svgrepo-com" id="star-svgrepo-com-3"></path>
|
|
<path fill="#fc0" transform="translate(61.823 -1.047)" d="M9.357,1.558,11.282,5.45a.919.919,0,0,0,.692.5l4.3.624a.916.916,0,0,1,.509,1.564l-3.115,3.029a.916.916,0,0,0-.264.812l.735,4.278a.919.919,0,0,1-1.334.967l-3.85-2.02a.922.922,0,0,0-.855,0l-3.85,2.02a.919.919,0,0,1-1.334-.967l.735-4.278a.916.916,0,0,0-.264-.812L.279,8.14A.916.916,0,0,1,.789,6.576l4.3-.624a.919.919,0,0,0,.692-.5L7.71,1.558A.92.92,0,0,1,9.357,1.558Z" data-name="star-svgrepo-com" id="star-svgrepo-com-4"></path>
|
|
<path fill="#e9e9e9" transform="translate(82.431 -1.047)" d="M9.357,1.558,11.282,5.45a.919.919,0,0,0,.692.5l4.3.624a.916.916,0,0,1,.509,1.564l-3.115,3.029a.916.916,0,0,0-.264.812l.735,4.278a.919.919,0,0,1-1.334.967l-3.85-2.02a.922.922,0,0,0-.855,0l-3.85,2.02a.919.919,0,0,1-1.334-.967l.735-4.278a.916.916,0,0,0-.264-.812L.279,8.14A.916.916,0,0,1,.789,6.576l4.3-.624a.919.919,0,0,0,.692-.5L7.71,1.558A.92.92,0,0,1,9.357,1.558Z" data-name="star-svgrepo-com" id="star-svgrepo-com-5"></path>
|
|
</svg>
|
|
(29,062)
|
|
</div>
|
|
</div>
|
|
|
|
<div class="button-container">
|
|
<button class="buy-button button">Buy Now</button>
|
|
<button class="cart-button button">
|
|
<svg viewBox="0 0 27.97 25.074" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M0,1.175A1.173,1.173,0,0,1,1.175,0H3.4A2.743,2.743,0,0,1,5.882,1.567H26.01A1.958,1.958,0,0,1,27.9,4.035l-2.008,7.459a3.532,3.532,0,0,1-3.4,2.61H8.36l.264,1.4a1.18,1.18,0,0,0,1.156.955H23.9a1.175,1.175,0,0,1,0,2.351H9.78a3.522,3.522,0,0,1-3.462-2.865L3.791,2.669A.39.39,0,0,0,3.4,2.351H1.175A1.173,1.173,0,0,1,0,1.175ZM6.269,22.724a2.351,2.351,0,1,1,2.351,2.351A2.351,2.351,0,0,1,6.269,22.724Zm16.455-2.351a2.351,2.351,0,1,1-2.351,2.351A2.351,2.351,0,0,1,22.724,20.373Z" id="cart-shopping-solid"></path>
|
|
</svg>
|
|
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by Smit-Prajapati - Tags: card, product, product card, cardhover , card animation, card hover */
|
|
.card {
|
|
--accent-color: #ffd426;
|
|
position: relative;
|
|
width: 240px;
|
|
background: white;
|
|
border-radius: 1rem;
|
|
padding: 0.3rem;
|
|
box-shadow: rgba(100, 100, 111, 0.2) 0px 50px 30px -20px;
|
|
transition: all 0.5s ease-in-out;
|
|
}
|
|
|
|
.card .image-container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 130px;
|
|
border-radius: 0.7rem;
|
|
border-top-right-radius: 4rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.card .image-container img {
|
|
width: 100%;
|
|
height: 100%;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
border-radius: inherit;
|
|
}
|
|
|
|
.card .image-container .svg {
|
|
height: 100%;
|
|
width: 100%;
|
|
border-radius: inherit;
|
|
}
|
|
|
|
.card .image-container .price {
|
|
position: absolute;
|
|
right: 0.7rem;
|
|
bottom: -1rem;
|
|
background: white;
|
|
color: var(--accent-color);
|
|
font-weight: 900;
|
|
font-size: 0.9rem;
|
|
padding: 0.5rem;
|
|
border-radius: 1rem 1rem 2rem 2rem;
|
|
box-shadow: rgba(100, 100, 111, 0.2) 0px 0px 15px 0px;
|
|
}
|
|
|
|
.card .favorite {
|
|
position: absolute;
|
|
width: 19px;
|
|
height: 19px;
|
|
top: 5px;
|
|
right: 5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.card .favorite input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.card .favorite input:checked ~ svg {
|
|
animation: bouncing 0.5s;
|
|
fill: rgb(255, 95, 95);
|
|
filter: drop-shadow(0px 3px 1px rgba(53, 53, 53, 0.14));
|
|
}
|
|
|
|
.card .favorite svg {
|
|
fill: #a8a8a8;
|
|
}
|
|
|
|
.card .content {
|
|
padding: 0px 0.8rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.card .content .brand {
|
|
font-weight: 900;
|
|
color: #a6a6a6;
|
|
}
|
|
|
|
.card .content .product-name {
|
|
font-weight: 700;
|
|
color: #666666;
|
|
font-size: 0.7rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.card .content .color-size-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
text-transform: uppercase;
|
|
font-size: 0.7rem;
|
|
font-weight: 700;
|
|
color: #a8a8a8;
|
|
gap: 2rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.card .content .color-size-container > * {
|
|
flex: 1;
|
|
}
|
|
|
|
.card .content .color-size-container .colors .colors-container {
|
|
list-style-type: none;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0.3rem;
|
|
font-size: 0.5rem;
|
|
margin-top: 0.2rem;
|
|
}
|
|
|
|
.card .content .color-size-container .colors .colors-container .color {
|
|
height: 14px;
|
|
position: relative;
|
|
}
|
|
|
|
.card .content .color-size-container .colors .colors-container .color:hover .color-name {
|
|
display: block;
|
|
}
|
|
|
|
.card .content .color-size-container .colors .colors-container .color a {
|
|
display: inline-block;
|
|
height: 100%;
|
|
aspect-ratio: 1;
|
|
border: 3px solid black;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.card .content .color-size-container .colors .colors-container .color .color-name {
|
|
display: none;
|
|
position: absolute;
|
|
bottom: 125%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 99;
|
|
background: black;
|
|
padding: 0.2rem 1rem;
|
|
border-radius: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.card .content .color-size-container .colors .colors-container .color:first-child a {
|
|
border-color: #ffd426;
|
|
}
|
|
|
|
.card .content .color-size-container .colors .colors-container .color:nth-child(2) a {
|
|
background: #144076;
|
|
}
|
|
|
|
.card .content .color-size-container .colors .colors-container .color:nth-child(3) a {
|
|
border-color: #00b9ff;
|
|
}
|
|
|
|
.card .content .color-size-container .colors .colors-container .color:nth-child(4) a {
|
|
border-color: #ff6ba1;
|
|
}
|
|
|
|
.card .content .color-size-container .colors .colors-container .active {
|
|
border-color: black;
|
|
}
|
|
|
|
.card .content .color-size-container .sizes .size-container {
|
|
list-style-type: none;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 0.2rem;
|
|
}
|
|
|
|
.card .content .color-size-container .sizes .size-container .size {
|
|
height: 14px;
|
|
}
|
|
|
|
.card .content .color-size-container .sizes .size-container .size .size-radio {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.card .content .color-size-container .sizes .size-container .size .size-radio input {
|
|
display: none;
|
|
}
|
|
|
|
.card .content .color-size-container .sizes .size-container .size .size-radio input:checked ~ .name {
|
|
background: var(--accent-color);
|
|
border-radius: 2rem 2rem 1.5rem 1.5rem;
|
|
color: white;
|
|
}
|
|
|
|
.card .content .color-size-container .sizes .size-container .size .size-radio .name {
|
|
display: grid;
|
|
place-content: center;
|
|
height: 100%;
|
|
aspect-ratio: 1.2/1;
|
|
text-decoration: none;
|
|
color: #484848;
|
|
font-size: 0.5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.card .content .rating {
|
|
color: #a8a8a8;
|
|
font-size: 0.6rem;
|
|
font-weight: 700;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.card .content .rating svg {
|
|
height: 12px;
|
|
}
|
|
|
|
.card .button-container {
|
|
display: flex;
|
|
gap: 0.3rem;
|
|
}
|
|
|
|
.card .button-container .button {
|
|
border-radius: 1.4rem 1.4rem 0.7rem 0.7rem;
|
|
border: none;
|
|
padding: 0.5rem 0;
|
|
background: var(--accent-color);
|
|
color: white;
|
|
font-weight: 900;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.card .button-container .button:hover {
|
|
background: orangered;
|
|
}
|
|
|
|
.card .button-container .buy-button {
|
|
flex: auto;
|
|
}
|
|
|
|
.card .button-container .cart-button {
|
|
display: grid;
|
|
place-content: center;
|
|
width: 50px;
|
|
}
|
|
|
|
.card .button-container .cart-button svg {
|
|
width: 15px;
|
|
fill: white;
|
|
}
|
|
|
|
.card:hover {
|
|
transform: scale(1.03);
|
|
}
|
|
|
|
@keyframes bouncing {
|
|
from, to {
|
|
transform: scale(1, 1);
|
|
}
|
|
|
|
25% {
|
|
transform: scale(1.5, 2.1);
|
|
}
|
|
|
|
50% {
|
|
transform: scale(2.1, 1.5);
|
|
}
|
|
|
|
75% {
|
|
transform: scale(1.5, 2.05);
|
|
}
|
|
}
|
|
</style>
|