index.cshtml

<div class="section-full p-5 bg-white mobile-page-padding">
    <div class="container">
        <div class="section-content">
            <div class="row">
                <div class="col-md-7 col-sm-6">
                    <div class="video-section-full-v2">
                        <div class="video-section-full bg-no-repeat bg-cover overlay-wraper m-b30" style="background-image:url( @Partial.Translate("HakkımızdaGorsel", lang))">
                            <div class="overlay-main bg-black opacity-04"></div>
                            <div class="video-section-inner">
                                <div class="video-section-content">
                                    <div class="video-section-left">
                                        <a data-fancybox href="https://www.youtube.com/watch?v=MV4oC_cjtRc" class="mfp-video play-now">
                                            <i class="icon fa fa-play"></i>
                                            <span class="ripple-2"></span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-5 col-sm-6">
                    @Partial.Translate("Hakkımızda", lang)
                </div>
            </div>
        </div>
    </div>
</div>

Translate (HakkımızdaGorsel)

/Upload/File/2019/12/4/karayeltanitimfilmi1.jpg

Translate (Hakkımızda)

<div class="m-about-containt text-black">
<div class="m-about-years bg-moving" style="background-image:url(images/background/line.png);"><span class="text-primary large-title">GÖZÜNÜZ</span> <span class="large-title-info">Daima Yükseklerde Olsun</span></div>

<h3 class="font-weight-600">Bu alan TRANSLATE alanından gelmektedir.</h3>

<p>Bu companent 4 çeşittir. (1) Image and Info, (2) Youtube and Info, (3) Image and Info Right, (4) Youtube and Info Left makalelerini inceleyerek görebilirsiniz.</p>

<div class="author-info p-t20"><a class="site-button btn-effect m-b15" href="/tr/kurumsal.html"><span>Yazının Devamı</span></a></div>
</div>

CSS

/*-----------------------
	video part
-------------------------*/

.video-section-full-v2{
	position:relative;
	z-index:1;
	margin-top: 40px;
	margin-bottom: 70px;
}
.video-section-full-v2:after{
	position:absolute;
	content:'';
	left:0px;
	top:-40px;
	width:40%;
	height:calc(100% + 80px);
	background-color:#0054a6;
	z-index:-1;
}
.video-section-full{
	padding: 60px 40px;
	position: relative;
	z-index: 1;
	overflow: hidden;
	bottom: -120px;
	margin-top: -100px;
}

.video-section-full-v2 .video-section-full{
	padding: 150px 40px;
	position: relative;
	z-index: 1;
	overflow: hidden;
	bottom:0px;
	margin-top: 0px;
	margin-left:40px;
}




.video-section-full .overlay-main{
	z-index:-1;
}
.video-section-full:after,
.video-section-full:before,
.video-section-inner:after,
.video-section-inner:before{
	content:"";
	position:absolute;
	background-color:#fff;
	
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
	overflow:hidden;	
}
.video-section-full:after{
	width:30px;
	height:2px;
	left:20px;
	top:20px;		
}
.video-section-full:before{
	width:2px;
	height:30px;
	left:20px;
	top:20px;		
}
.video-section-full:hover:after{
	width:100%;
}
.video-section-full:hover:before{
	height:100%;
}


.video-section-inner:after{
	width:30px;
	height:2px;
	right:20px;
	bottom:20px;		
}
.video-section-inner:before{
	width:2px;
	height:30px;
	right:20px;
	bottom:20px;		
}
.video-section-full:hover .video-section-inner:after{
	width:100%;
}
.video-section-full:hover .video-section-inner:before{
	height:100%;
}



.video-section{
	position:relative;
	z-index:1;
	margin-right: 31px;
}
.video-section-content{
	display: table;
	padding: 30px 0px;
	width:100%
}
.video-section-left{
	position:relative;
	display:table-cell;
	vertical-align:middle;
	width:120px;
}
.video-section-right{
	display:table-cell;
	vertical-align:middle;
	text-align:right;
}
.video-section-right a{
	color:#fff;
}
.video-section-right a:hover{
	color:#0054a6;
}

.video-section-left .play-now{
	position: absolute;
	left: 27%;
	top: 50%;
	display: block;
	border-radius: 50%;
	z-index: 10;
	width: 60px;
	height: 60px;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	transform-origin: center center;	
}

@media only screen and (max-width:991px) {
.video-section-full{
	padding: 60px 40px;
	bottom: 0px;
	margin-top: 0px;
	margin-bottom:30px;
}	
}
@media only screen and (max-width: 480px) {
	.video-section-full{
		width:100%;
		margin-bottom:15px;
	}
.video-section-full-v2 .video-section-full{
	margin-left:0px;
}	
	
}

/*____About us
=========================*/

.m-about {
	position: relative;
	z-index: 2;
}

.m-about:after {
	content: "";
	position: absolute;
	width: 75%;
	height: 75%;
	background-color: #0054a6;
	left: 0px;
	top: 18%;
	z-index: -1;
}

.m-about-years{
	display: inline-block;
	padding: 20px;
	border-left: 10px solid #0054a6;
}

.m-about .item {
	-webkit-box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.4);
	box-shadow: 0 10px 40px 0 rgba(0, 0, 0, .0.4);
	margin: 50px;
}
.large-title-info{
	font-size: 20px;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 2px;
	display: block;
}
@media only screen and (max-width:767px) {
	.m-about {
		margin: 0px 0px 0px 50px;
	}
	.m-about-containt {
		margin-top: 60px;
	}
}

.m-about-containt .large-title{
font-size:56px;
	font-weight:900;
	display:inline-block;
	line-height: 50px;
}

@media only screen and (max-width:480px) {
	.m-about-containt h1,
	.m-about-containt h2,
	.m-about-containt h3{
		font-size: 22px;
		line-height:inherit;	
	}	
}

/*____animated play btn
======================================*/


/*____ANIMATED PLAY BTN____*/

.play-now{
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  border-radius: 50%;
  z-index:10;
  width:60px;
  height:60px;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  transform-origin: center center;
}

.play-now .icon{
    position: absolute;
    left: 50%;
    top: 50%;
    height: 65px;
    width: 65px;
    text-align: center;
    line-height: 65px;
    background-color: #fff;
    color: #000;
    z-index: 1;
    font-size: 20px;
    padding-left: 5px;
    display: block;

  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform-origin:center;
  transform-origin: center center;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 0 5px 10px 0 rgba(255, 255, 255, 0.1);
    -moz-box-shadow: 0 5px 10px 0 rgba(255, 255, 255, 0.1);
    -ms-box-shadow: 0 5px 10px 0 rgba(255, 255, 255, 0.1);
    -o-box-shadow: 0 5px 10px 0 rgba(255, 255, 255, 0.1);
    box-shadow: 0 5px 10px 0 rgba(255, 255, 255, 0.1);

}

.play-now .ripple-2,
.play-now .ripple-2:before,
.play-now ripple-2:after {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 65px;
    width: 65px;

  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform-origin:center;
  transform-origin: center center;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;

    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, .3);
    -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, .3);
    -ms-box-shadow: 0 0 0 0 rgba(255, 255, 255, .3);
    -o-box-shadow: 0 0 0 0 rgba(255, 255, 255, .3);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, .3);

    -webkit-animation: ripple-2 3s infinite;
    -moz-animation: ripple-2 3s infinite;
    -ms-animation: ripple-2 3s infinite;
    -o-animation: ripple-2 3s infinite;
    animation: ripple-2 3s infinite;
}

.play-now .ripple-2:before {
    -webkit-animation-delay: .9s;
    -moz-animation-delay: .9s;
    -ms-animation-delay: .9s;
    -o-animation-delay: .9s;
    animation-delay: .9s;
    content: "";
    position: absolute;

}

.play-now .ripple-2:after {
    -webkit-animation-delay: .6s;
    -moz-animation-delay: .6s;
    -ms-animation-delay: .6s;
    -o-animation-delay: .6s;
    animation-delay: .6s;
    content: "";
    position: absolute;

}

@-webkit-keyframes ripple-2 {
    70% {box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);}
    100% {box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);}
}

@keyframes ripple-2 {
    70% {box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);}
    100% {box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);}
}

.slider-play-icon .play-now{
	right:30%;
	left:auto;
	top:45%;
}


/*====site button effect====*/

.btn-effect {
  letter-spacing:4px;
  position:relative;
  text-transform:uppercase;
}

.btn-effect:before,
.btn-effect:after {
  border-color: transparent;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
  border-style: solid;
  border-width: 0;
  content: "";
  height: 24px;
  position: absolute;
  width: 24px;
}

.btn-effect:before {
  border-color: #c47135;
  border-left-width: 2px;
  border-top-width: 2px;
  left: -5px;
  top: -5px;
}

.btn-effect:after {
  border-color: #c47135;
  border-bottom-width: 2px;
  border-right-width: 2px;
  bottom: -5px;
  right: -5px;
}

.site-button.btn-effect:before, .site-button.btn-effect:after {
    border-color: #0054a6;
}

.btn-effect:hover:before,
.btn-effect:hover:after{
  height: 100%;
  width: 100%;
}

.btn {
	padding-top: 9px;
	padding-bottom: 9px;
}

.site-button,
.site-button-secondry {
	padding: 10px 20px;
	display: inline-block;
	font-size: 14px;
	outline: none;
	cursor: pointer;
	outline: none;
	border-width: 0;
	border-style: solid;
	border-color: transparent;
	line-height: 1.42857;
	margin-left: -1px;
	text-decoration: none !important;
}

.site-button {
	background-color: #0054a6;
	color: #fff;
}

.site-button:active,
.site-button:hover,
.site-button:focus,
.active>.site-button {
	background-color: #0054a6;
	color: #fff;
}

.site-button:hover {
	background-color: #222;
	color: #fff;
}

.site-button-secondry {
	background-color: #222;
	color: #fff;
}

.site-button-secondry:active,
.site-button-secondry:hover,
.site-button-secondry:focus,
.active>.site-button-secondry {
	background-color: #222;
	color: #fff;
}

.m-b15 {
    margin-bottom: 15px;
}

www.karayeltasarim.com

İndex Bileşenleri