<section class="poster">
<div class="container">
<h2 class="poster__title">Buy Poster Prints</h2>
<div class="poster__line"></div>
<div class="poster__container">
<div class="poster__left">
<p class="poster__left-text">Stay <br>
True, <br>
Stay <br>
gentleman
</p>
<a href="#" class="poster__buy">buy now</a>
<a href="#" class="poster__share">share</a>
</div>
<div class="poster__right">
<div class="poster__nature">
<p class="poster__nature-text">And muse of nature
with a poet’s eye
</p>
<p class="poster__nature-author">Thomas Campbell</p>
<a href="#" class="poster__buy">buy now</a>
</div>
<div class="poster__container">
<div class="poster__coffe">
<p class="poster__coffe-text">Make Work
Fun & Play
</p>
<a href="#" class="poster__buy">buy now</a>
<a href="#" class="poster__share">share</a>
</div>
<div class="poster__silence">
<p class="poster__silence-text">Silence is <br>
<span class="poster__silence-text--bold">Golden</span></p>
<a href="#" class="poster__buy">buy now</a>
<a href="#" class="poster__share">share</a>
</div>
</div>
</div>
</div>
<button class="poster__btn">browse posters</button>
</div>
</section>.poster {
padding-bottom: 120px;
background-color: #eaeef1;
&__title {
font-size: 3.75rem;
font-weight: 700;
margin-bottom: 28px;
line-height: 3rem;
}
&__line {
width: 80px;
height: 2px;
margin-bottom: 99px;
background-color: #000000;
}
&__container {
display: flex;
margin-bottom: 50px;
}
&__left {
position: relative;
width: 35rem;
height: 47.5rem;
margin-right: 100px;
background-image: url(../images/man.png);
background-repeat: no-repeat;
background-position: center;
box-shadow: 0 0 65px #000000;
&-text {
width: 21.125rem;
height: 21.188rem;
font-size: 3rem;
font-weight: 400;
margin-left: 104px;
margin-top: 204px;
line-height: 1.5;
text-align: center;
color: #ffffff;
text-transform: uppercase;
}
}
&__buy {
position: absolute;
bottom: 3%;
left: 3%;
font-family: Montserrat;
font-size: 1.25rem;
font-weight: 700;
color: #ffffff;
letter-spacing: 0.25rem;
line-height: 1.875rem;
text-transform: uppercase;
transition: .3s;
&:hover {
color: #000000;
text-decoration: none;
}
}
&__share {
position: absolute;
right: 12%;
bottom: 3%;
font-family: Montserrat;
font-size: 0.938rem;
font-weight: 700;
color: #ffffff;
line-height: 1.875rem;
text-transform: uppercase;
letter-spacing: 0.188rem;
transition: .3s;
&:hover {
color: #c6b098;
text-decoration: none;
}
&:after {
display: block;
content: "";
width: 1.875rem;
height: 1.25rem;
@include sprite($arrow);
@include center-y;
right: -30px;
}
}
&__nature {
position: relative;
width: 46.25rem;
height: 23.125rem;
margin-bottom: 50px;
padding-top: 90px;
padding-left: 78px;
background-image: url(../images/nature.png);
background-repeat: no-repeat;
background-position: center;
&-text {
width: 18.563rem;
font-size: 1.8rem;
font-weight: 400;
margin-bottom: 30px;
color: #000000;
font-style: italic;
}
}
&__coffe {
position: relative;
width: 20.625rem;
height: 21.25rem;
margin-right: 80px;
padding-top: 20px;
background-color: #e6e6e6;
background-image: url(../images/coffe.png);
background-repeat: no-repeat;
background-position: center;
&-text {
width: 9.625rem;
height: 3.875rem;
text-align: center;
margin: 0 auto;
font-size: 1.6rem;
font-weight: bold;
color: #000000;
}
}
&__silence {
position: relative;
width: 20.625rem;
height: 21.25rem;
text-align: center;
padding-top: 173px;
background-image: url(../images/silence.png);
background-repeat: no-repeat;
background-position: center;
&-text {
font-size: 1.875rem;
font-weight: 400;
text-align: center;
color: #fefefe;
text-transform: uppercase;
&--bold {
font-size: 2.4rem;
font-weight: bold;
margin-left: -5px;
}
}
}
&__btn {
display: block;
margin: 0 auto;
font-family: Montserrat;
font-weight: 700;
line-height: 1.875rem;
text-transform: uppercase;
width: 17.5rem;
height: 3.75rem;
border-radius: 0.25rem;
border: 0.125rem solid #000000;
letter-spacing: 0.188rem;
background-color: transparent;
transition: .3s;
&:hover {
background-color: #3e65e3;
}
}
}