initial commit

assets/scss/components/_blog-section.scss

@@ -0,0 +1,109 @@
+.blog-preview {
+	position: relative;
+	margin-bottom: 30px;
+	&__shape {
+		position: absolute;
+		top: 11%;
+		right: 12%;
+		height: 300px;
+		width: 300px;
+		img {
+			animation: rotate 25s infinite linear;
+			height: 100%;
+			width: 100%;
+		}
+		@include desktop {
+			display: none;
+		}
+	}
+	&__header_button {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		a {
+			position: absolute;
+			bottom: 0;
+			right: 0;
+			display: inline-block;
+			@include desktop {
+				position: relative;
+				margin-top: 30px;
+			}
+		}
+	}
+	&__item {
+		position: relative;
+		margin-bottom: 20px;
+		@include desktop {
+			margin-bottom: 130px;
+		}
+		&-thumb {
+			width: 90%;
+			height: 100%;
+			overflow: hidden;
+			border-radius: 20px;
+			@include desktop {
+				width: 80%;
+				margin: 0 auto;
+			}
+			img {
+				height: 100%;
+				width: 100%;
+				transition: all 0.3s ease;
+			}
+		}
+		&-content {
+			position: absolute;
+			bottom: -100px;
+			left: 40px;
+			padding: 30px;
+			border-radius: 20px;
+			box-shadow: 0px 20px 40px 0px rgba(50, 65, 141, 0.12);
+			@include desktop {
+				left: 0;
+			}
+			span {
+				color: $primary;
+				margin: 0 0 20px 40px;
+				position: relative;
+				display: block;
+				line-height: 1;
+				&::before {
+					position: absolute;
+					content: "";
+					top: 50%;
+					left: -40px;
+					height: 1px;
+					width: 20px;
+					background: $secondary;
+					transform: translateY(-50%);
+				}
+			}
+		}
+		&:hover {
+			.blog-preview__item-thumb img {
+				transform: scale(1.1);
+			}
+		}
+	}
+	.mobile {
+		display: none;
+	}
+	@include desktop {
+		.desktop {
+			display: none;
+		}
+		.mobile {
+			display: block;
+			text-align: center;
+		}
+	}
+}
+@keyframes rotate {
+	from {
+		-webkit-transform: rotate(0deg);
+	}
+	to {
+		-webkit-transform: rotate(360deg);
+	}
+}