init

static/Vvvebjs/demo/landing/scss/sections/hero/hero-2.scss

@@ -0,0 +1,84 @@
+.hero-2 {
+	background-size: cover;
+	background-position: center center;
+	background-repeat: no-repeat;
+	position: relative;
+	padding-top: 15rem;
+	padding-bottom: 15rem;
+	
+	.btn {
+		padding: 1rem 2rem;
+		border-radius: 30px;
+		text-transform: uppercase;
+		font-size: 12px;
+		font-weight: 700;
+		letter-spacing: .1rem;		
+		
+		&.btn-white {
+			background:rgba(var(--bs-body-bg-rgb), 0.2);
+			color:#fff;
+		}
+	}
+	
+	>.container {
+		position: relative;
+		z-index: 2;
+	}
+	.heading {
+		font-size: 3.2rem;
+		font-weight: 700;
+		color: var(--bs-light);
+	}
+	.subheading {
+		font-size: 1.4rem;
+		color: var(--bs-light);
+	}
+	.svg-wrapper {
+		position: absolute;
+		bottom: 0;
+		width: 100%;
+		left: 0;
+		z-index: 2;
+	}
+	
+	.overlay {
+		background-color:rgba(var(--bs-primary-rgb), 1);
+		opacity: 0.7;
+	}
+		
+	.video-wrap {
+		display: inline-block;
+		position: relative;
+		top: 0;
+		-webkit-transition: .2s all ease;
+		-o-transition: .2s all ease;
+		transition: .2s all ease;
+		
+		.play-button {
+			width: 50px;
+			height: 50px;
+			border-radius: 50%;
+			background-color: var(--bs-success);
+			color: var(--bs-white);
+			line-height: 50px;
+			text-align: center;
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			-webkit-transform: translate(-50%, -50%);
+			-ms-transform: translate(-50%, -50%);
+			transform: translate(-50%, -50%);
+		}
+		img {
+			border-radius: 7px;
+			-webkit-box-shadow: 0 15px 30px 0 rgba(var(--bs-body-color-rgb), 0.2);
+			box-shadow: 0 15px 30px 0 rgba(var(--bs-body-color-rgb), 0.2);
+		}
+		&:hover {
+			-webkit-transform: scale(1.05);
+			-ms-transform: scale(1.05);
+			transform: scale(1.05);
+		}
+	}
+	
+}