HTML
<div class="content">
<div class="card">
<div class="headcard">
<span></span>
</div>
<div class="infos">
<div class="logo"></div>
<h1>
<a href="https://themeforest.net/user/strictthemes">WordPress Themes</a>
</h1>
<h2 class="price">49</h2>
<p>GET IT NOW!</p>
<a href="https://themeforest.net/user/strictthemes" class='btn'>Buy it</a>
</div>
<a href="https://themeforest.net/user/strictthemes">
<img class="strict-t-logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/strict-themes-logo.svg">
</a>
</div>
</div>
SCSS
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
background: linear-gradient(to bottom, rgba(33, 156, 135, 1) 0%, rgba(26, 56, 66, 1) 100%);
display: flex;
height: 100%;
justify-content: center;
align-items: center;
}
.content {
min-width: 900px;
height: auto;
padding: 3em;
display: flex;
justify-content: center;
align-items: center;
}
.card {
width: auto;
height: auto;
padding: 2em;
border-radius: 0.5em;
background: #ffffff;
text-align: center;
justify-content: center;
align-items: center;
display: flex;
flex-direction: row;
box-shadow: 0 0 80px rgba(0, 0, 0, 0.1);
transition: 0.2s all ease-in-out;
transform: perspective(1200px) rotate(90deg) rotateY(-35deg) rotateZ(-90deg);
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.2), 20px 20px 40px #1A3842;
.infos, img.strict-t-logo {
padding: 0em 1em;
}
h1 {
margin: 0;
color: #585858;
position: relative;
a {
padding: 10px;
color: #585858;
text-decoration: none;
font-weight: 700;
text-shadow: none;
transition: color 0.3s;
}
a::before,
a::after {
position: absolute;
left: 0;
width: 100%;
height: 2px;
background: #DF755D;
content: '';
opacity: 0;
transition: opacity 0.3s, transform 0.3s;
transform: translateY(-10px);
}
a::before {
top: 0;
transform: translateY(-10px);
}
a::after {
bottom: 0;
transform: translateY(10px);
}
a:hover,
a:focus {
color: #585858;
}
a:hover::before,
a:focus::before,
a:hover::after,
a:focus::after {
opacity: 1;
transform: translateY(0px);
}
}
h2.price {
font-size: 3em;
color: #DF755D;
margin: 0;
&::before {
content: '$';
font-size: 0.5em;
top: -10px;
position: relative;
}
}
p {
color: #969696;
}
a.btn {
text-transform: uppercase;
text-decoration: none;
border: 1px solid #2F86D4;
padding: 1em 4em;
border-radius: 0.4em;
font-size: 0.7em;
color: #2F86D4;
letter-spacing: 0.1em;
display: inline-flex;
transition: .2s all ease-in-out;
cursor: pointer;
&:hover {
color: #ffffff;
background-color: #2F86D4;
}
}
}
.strict-t-logo {
width: 330px;
height: 280px;
}
@media screen and (max-width: 768px) {
.card {
flex-direction: column-reverse;
}
.infos {
margin: 3em 0em;
}
}
