Reply To: I need this section CSS and js

#10034327
Support
Keymaster

Hello,

Here’s the CSS you need:

/*
* Font Icons
*/
@font-face {
	font-family: "Fontello";
	src: url("../css/fonts/demos/digital-agency-2/fontello.woff2") format("woff2"), url("../css/fonts/demos/digital-agency-2/fontello.woff") format("woff"), url("../css/fonts/demos/digital-agency-2/fontello.ttf") format("ttf"), url("../css/fonts/demos/digital-agency-2/fontello.eot") format("eot");
}

.custom-text-6 {
	font-size: 20px !important;
}

.custom-text-10 {
	font-size: 40px !important;
	line-height: 40px !important;
}

/*
* Section Our Services
*/
.our-services .custom-circle-2 {
	top: 10%;
	right: 7%;
}
.our-services .service-card {
	padding: 65px 0 65px 35px;
}
.our-services .service-card:before {
	content: '';
	display: inline-block;
	vertical-align: middle;
	width: 30px;
	height: 3px;
	margin-right: 10px;
	transition: .5s width;
}
.our-services .service-card:hover:before {
	width: 45px;
	background-color: white !important;
}
.our-services .service-card.bg-color-dark:before, .our-services .service-card.active:before {
	background-color: white !important;
}
.our-services .col-our-services-bottom .col-our-services-bottom-img {
	min-height: 377px;
}
.our-services .col-our-services-bottom .col-our-services-bottom-img img {
	max-width: 300px;
	height: auto;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}
.our-services .col-our-services-bottom .col-our-services-bottom-img .square-1 {
	position: absolute;
	top: 40%;
	left: 0;
	transform: translateY(-50%);
	width: 253px;
	height: 140px;
	opacity: 0.5;
}
.our-services .col-our-services-bottom .col-our-services-bottom-img .square-2 {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 253px;
	height: 178px;
	opacity: 0.5;
}
.our-services .col-our-services-bottom .col-our-services-bottom-img .square-3 {
	border: 3px solid #000;
	position: absolute;
	top: 43%;
	left: 45%;
	transform: translate(-50%, -50%);
	width: 299px;
	height: 285px;
}
.our-services .col-our-services-bottom .col-our-services-bottom-img .custom-circle-1 {
	position: absolute;
	top: 70%;
	left: -5%;
	transform: translateY(-50%);
	width: 26px;
	height: 24px;
	opacity: 0.5;
	border-radius: 50%;
}

.our-services .service-card:before {
	background-color: #292929;
}

/*
* Titles
*/
.custom-title-with-icon:before {
	content: '\E801';
	font-family: 'Fontello';
	font-size: 15px;
	display: block;
	line-height: 15px;
	margin-bottom: 10px;
}

.custom-title-with-icon-center:before {
	text-align: center;
}

.custom-title-with-icon-right:before {
	text-align: right;
}

html .custom-title-with-icon-primary:before {
	color: #e41645 !important;
}

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.


If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads