diff --git a/src/index.html b/src/index.html
index 43745cc17f..e80dabfd97 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,3 +1,4 @@
+
@@ -7,12 +8,60 @@
content="width=device-width, initial-scale=1.0"
/>
Product cards
+
+
+
+
- Product cards
+
+
+
+ APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+
+
Product code: 195434
+
+
+
+ Buy
+
+
diff --git a/src/styles/_body.scss b/src/styles/_body.scss
new file mode 100644
index 0000000000..5629ebc7fa
--- /dev/null
+++ b/src/styles/_body.scss
@@ -0,0 +1,24 @@
+// #region fonts
+.roboto-regular {
+ font-family: Roboto, sans-serif;
+ font-weight: 400;
+ font-style: normal;
+}
+
+.roboto-medium {
+ font-family: Roboto, sans-serif;
+ font-weight: 500;
+ font-style: normal;
+}
+
+.roboto-bold {
+ font-family: Roboto, sans-serif;
+ font-weight: 700;
+ font-style: normal;
+}
+
+// #endregion
+
+body {
+ margin: 0;
+}
diff --git a/src/styles/_card.scss b/src/styles/_card.scss
new file mode 100644
index 0000000000..1d5d197acd
--- /dev/null
+++ b/src/styles/_card.scss
@@ -0,0 +1,117 @@
+@use 'variables';
+
+.card {
+ font-family: Roboto, sans-serif;
+ font-size: 12px;
+ font-weight: 500;
+ line-height: 18px;
+ color: variables.$mainAccentColor;
+
+ box-sizing: border-box;
+ width: 200px;
+ height: 408px;
+ padding-inline: 16px;
+ padding-block: 32px 16px;
+
+ border: 1px solid #f3f3f3;
+
+ border-radius: 5px;
+
+ &__image {
+ display: block;
+ width: 160px;
+ height: 134px;
+
+ margin-inline: 3px;
+ }
+
+ &__name {
+ margin-top: 40px;
+ }
+
+ &__code {
+ margin-top: 4px;
+
+ font-family: Roboto, sans-serif;
+ font-size: 10px;
+ font-weight: 400;
+ line-height: 14px;
+ color: variables.$secondaryColor;
+ }
+
+ // #region review
+ &__review {
+ margin-top: 16px;
+
+ height: 16px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ &__review-stars {
+ width: 96px;
+ display: flex;
+ justify-content: space-between;
+ }
+
+ &__review-text {
+ width: 56px;
+
+ font-size: 10px;
+ font-weight: 400;
+ line-height: 14px;
+ text-align: right;
+ }
+
+ // #endregion
+
+ // #region price
+ &__price {
+ margin-top: 24px;
+
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ &__price-text {
+ font-family: Roboto, sans-serif;
+ font-weight: 400;
+ text-align: left;
+ color: variables.$secondaryColor;
+ }
+
+ &__price-numbers {
+ font-family: Roboto, sans-serif;
+ font-weight: 700;
+ font-size: 16px;
+ text-align: right;
+ }
+
+ // #endregion
+
+ &__buy {
+ box-sizing: border-box;
+ display: block;
+ margin-top: 16px;
+ width: 166px;
+ height: variables.$buyButtonHeight;
+
+ line-height: variables.$buyButtonHeight;
+ font-size: 14px;
+ text-align: center;
+ text-decoration: none;
+ text-transform: uppercase;
+ color: variables.$buyTextColor;
+
+ background-color: variables.$buyBackgroundColor;
+ border-radius: 5px;
+ border: 1px solid variables.$buyBackgroundColor;
+
+ &:hover {
+ background-color: variables.$buyTextColor;
+ color: variables.$buyBackgroundColor;
+ }
+ }
+}
diff --git a/src/styles/_stars.scss b/src/styles/_stars.scss
new file mode 100644
index 0000000000..c3d74e9e8f
--- /dev/null
+++ b/src/styles/_stars.scss
@@ -0,0 +1,14 @@
+.stars {
+ &__star {
+ background-image: url(../images/star.svg);
+ width: 16px;
+ height: 16px;
+ background-size: 80%;
+ background-position: center;
+ background-repeat: no-repeat;
+ }
+
+ &__star:nth-child(-n + 4) {
+ background-image: url(../images/star-active.svg);
+ }
+}
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
new file mode 100644
index 0000000000..79fd3c6c8c
--- /dev/null
+++ b/src/styles/_variables.scss
@@ -0,0 +1,5 @@
+$mainAccentColor: #060b35;
+$secondaryColor: #616070;
+$buyButtonHeight: 40px;
+$buyBackgroundColor: #00acdc;
+$buyTextColor: #fff;
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 293d3b1f13..a9c25ab2c9 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,3 +1,4 @@
-body {
- margin: 0;
-}
+@use 'variables';
+@use 'body';
+@use 'stars';
+@use 'card';