.content {
width: 100%;
.wrap {
width: 100%;
background-color: #faa61a;
.content-block {
max-width: 950px;
margin: 0 auto;
.content-title {
display: flex;
.content__title {
font-size: 66px;
font-weight: 700;
text-transform: uppercase;
color: #000000;
}
}
}
}
&-row {
display: flex;
height: 365px;
justify-content: space-between;
padding-bottom: 50px;
&__feature {
width: 70%;
display: flex;
.feature__video {
width: 100%;
&-block {
width: 435px;
height: 365px;
position: relative;
video {
width: 100%;
height: 100%;
}
span {
position: absolute;
top: 30px;
left: -50px;
z-index: 2;
padding: 5px 10px;
font-size: 28px;
font-weight: 400;
font-style: italic;
color: #ffffff;
background-color: rgba(0, 0, 0, 0.8);
}
.feature-row {
position: absolute;
bottom: 10px;
left: 25px;
&__image {
margin-right: 10px;
}
}
}
}
.feature-client {
background-color: #000;
height: inherit;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-start;
padding: 17px;
&__head {
padding: 0 10px;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
color: #000000;
background-color: #fff;
}
&__text {
font-size: 15px;
line-height: 1.2;
font-weight: 100;
color: #ffffff;
}
}
}
&__description {
width: 27%;
height: 365px;
.description-block {
background-color: #fff;
height: inherit;
text-align: right;
&__title {
padding-left: 10px;
font-size: 20.2px;
font-weight: 700;
text-transform: uppercase;
color: #000000;
text-align: left;
}
&__image {
width: 100%;
}
&__text {
display: block;
width: 90%;
margin: 0 auto;
text-align: justify;
font-size: 16px;
padding-bottom: 15px;
line-height: 22px;
font-weight: 400;
color: #000000;
}
&__link {
padding: 5px 10px;
margin-right: 43px;
color: #fff;
background-color: #000;
position: relative;
&:after {
content: '';
position: absolute;
right: -36px;
top: 0%;
height: 100%;
width: 40px;
background: url(../img/feature/feature_arrow.png) no-repeat;
background-position: center;
background-color: #FAA61A;
}
}
}
}
}
}
@media (max-width: 1080px) {
.content {
.feature__video-block {
span {
left: 10px;
}
}
}
}
@media (max-width: 980px) {
.content {
&-row {
padding: 20px 5px;
padding-top: 0;
.feature-client {
padding: 10px;
&__head {
font-size: 14px;
padding: 0 2px;
}
&__text {
font-size: 14px;
}
}
}
.content__title {
font-size: 50px;
}
}
}
@media (max-width: 932px) {
.content {
&-block {
width: 830px;
.description-block__text {
font-size: 14px;
}
}
.content__title {
font-size: 20px;
}
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.