Image and Info Right ie + opera

index.cshtml

<div class="discus-parallax p-5  bg-white">
    <div class="container">
        <div class="row">
            <div class="col-md-6 d-none d-lg-block">
                <div class="about-img">
                    <img src="@Partial.Translate("HakkımızdaImage", lang)" alt="">
                </div>
            </div>
            <div class="col-lg-6 col-12">
                <div class="about-wrap-right">
                    @Partial.Translate("Hakkımızda", lang)
                </div>
            </div>
        </div>
    </div>
</div>

Translate (HakkımızdaImage)

/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

/*____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:30px;
	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;	
	}	
}


/*====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;
}

.about-wrap-right {
    position: relative;
    padding: 60px 30px 60px 0px;
    border-top: 2px solid #0ea2c7;
    border-right: 2px solid #0ea2c7;
}

.about-wrap-right:before {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    content: "";
    background-color: #0ea2c7;
}

        .about-wrap-right:after {
            position: absolute;
           left: -100px;
            top: -2px;
            width: 100px;
            height: 60px;
            border-top: 2px solid #0ea2c7;
            border-left: 2px solid #0ea2c7;
            content: "";
        }

@media (max-width: 575px) {
    .about-wrap {
        padding: 60px 20px 30px 20px;
    }
}

@media (max-width: 768px) {


    .about-wrap:after {
        right: 0;
        width: 0px;
        height: 100%;
    }

    .about-wrap-right:after {
        left: 0;
        width: 0px;
        height: 100%;
    }
}

@media (max-width: 575px) {
    .about-wrap {
        padding: 60px 20px 30px 20px;
    }

    .about-wrap-right {
        padding: 60px 20px 30px 20px;
        border-right: 2px solid #0ea2c7;
    }

    .about-content {
        margin-bottom: 30px;
    }

    .about-wrap:after {
        right: 0;
        width: 0px;
        height: 100%;
    }

    .about-wrap-right:after {
        left: 0;
        width: 0px;
        height: 100%;
    }
}

.about-img{
    margin-top:100px;
    position:relative;
    }

    .about-img:before {
        position: absolute;
        left: -15px;
        bottom: -15px;
        height: 95%;
        width: 98%;
        background: #00a0c9;
        background-color: #00a0c9;
        content: "";
        z-index: -9;
    }

www.karayeltasarim.com