first commit

layout/style-scss/pvcu-windows.scss

@@ -0,0 +1,122 @@
+@import '_mixins';
+@import '_variables';
+
+.box-02 {
+	padding: 90px 0;
+}
+.box-03 {
+	.scontainer-content {
+		> .row {
+			align-items: center;
+		}
+		.col-right {
+			margin-top: 0;
+		}
+	}
+}
+.box-04 {
+	margin-bottom: 160px;
+
+	#product-colors {
+		.col-right {
+			.color-tiles-grid {
+				&.color-tiles-grid-top {
+					grid-template-columns: 1fr;
+					margin-bottom: 50px;
+				}
+				&.color-tiles-grid-bottom {
+					.color-tiles {
+						&:nth-child(1) {
+							.color-tiles-data {
+								&::before {
+									background-color: $cBlack;
+								}
+								&::after {
+									content: 'URBAN';
+									color: $cTxtWhite;
+								}
+							}
+						}
+						&:nth-child(2) {
+							.color-tiles-data {
+								&::before {
+									background-color: #ece9e2;
+								}
+								&::after {
+									content: 'FUTURE';
+									color: $cTxtBlack;
+								}
+							}
+						}
+						&:nth-child(3) {
+							.color-tiles-data {
+								&::before {
+									background-color: #9c703b;
+								}
+								&::after {
+									content: 'MODERN BOHO';
+									color: $cTxtWhite;
+								}
+							}
+						}
+						.action-btn {
+							left: 100px;
+						}
+
+						.color-tiles-data {
+							position: relative;
+							padding-left: 100px;
+
+							&::before {
+								content: '';
+								position: absolute;
+								top: 0;
+								left: 0;
+								width: 90px;
+								height: 170px;
+								border-top-left-radius: 100px;
+								border-bottom-left-radius: 100px;
+								box-sizing: border-box;
+							}
+							&::after {
+								position: absolute;
+								top: 85px;
+								left: 55px;
+								width: 120px;
+								font-size: 20px;
+								font-weight: 300;
+								text-align: center;
+								letter-spacing: 5px;
+								transform: translate(-50%, -50%) rotate(-90deg);
+							}
+
+							li {
+								img {
+									width: 44px !important;
+									height: 44px;
+									min-height: 44px;
+								}
+							}
+						}
+					}
+				}
+			}
+
+			.color-tiles-title {
+				h2 {
+					font-weight: 300;
+					font-size: 20px;
+					margin-bottom: 25px;
+				}
+			}
+		}
+
+		#scontainer-68 {
+			.col-right {
+				.color-tiles-grid {
+					grid-template-columns: 1fr;
+				}
+			}
+		}
+	}
+}