HTML
<div id="main-container">
<div class="inner-container">
<h1>Game News <br>
@<span>your reach.</span>
</h1>
<br>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <a href="#">tempor</a> incididunt ut labore et dolore magna aliqua.
</p>
<div id="email-link">
<a href="#">
Subscribe <span></span>
</a>
</div>
</div>
</div>
SCSS
//variables
$main-blue: #FF80AB;
$second-blue: #0090FF;
$font-blue: #7F8AFB;
$main-light: #FFF7F7;
$second-light: #FDEAEC;
$font-pink: #FFC9B3;
$font-dark: #353855;
$height: 350px;
$width: 50%;
//mixings
@mixin main(){
background-color: $main-light;
width: $width;
height: $height;
display: block;
margin: 2em auto;
padding: 2em 4em;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
//elements
body{
background-color: #FF80AB;
}
#main-container{
@include main();
}
.inner-container{
border-left: 2px solid $second-light;
height: $height - 100;
width: $width*2;
padding: 2em;
//border: 1px solid red;
&{
h1{
color: $font-dark;
font-family: 'Nunito', sans-serif;
font-weight: bold;
font-size: 2.5em;
line-height: 1em;
span{
border-bottom: 4px solid $font-blue;
padding-top-top: -1em;
}
}
p{
width: 80%;
text-align: justify;
font-family: 'Open Sans', sans-serif;
line-height: 1em;
color: $font-pink;
font-size: 0.9em;
width: $width;
a{
color: $font-blue;
}
}
#email-link{
box-shadow: 0 3px 6px rgba(0,0,0,0.05), 0 3px 6px rgba(0,0,0,0.0);
border-radius: 20px;
background-color: #fff;
padding: 0.5em 0.8em;
width: 150px;
text-align: center;
margin-top: 2em;
a{
text-decoration: none;
font-family: 'Nunito', sans-serif;
color: #FF80AB;
background-color: $main-light;
padding: 0px 1em;
border-radius: 20px;
&::before{
content: 'o';
font-weight: bold;
}
}
}
}
}
#gba-background{
//border: 1px solid red;
height: 350px;
width: 350px;
position: absolute;
top: 50px;
right: 250px;
border-radius: 300px;
transform: rotatez(60deg);
background-color: $main-blue;
box-shadow: 0 3px 6px rgba(0,0,0,0.05), 0 3px 6px rgba(0,0,0,0.0);
}
#gba{
//float: right !important;
position: absolute;
top: 100px;
right: 300px;
img{
width: 250px;
transform: rotatez(30deg);
box-shadow: 0 3px 6px rgba(0,0,0,0.05), 0 3px 6px rgba(0,0,0,0.0);
}
}
