SCSS
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Ubuntu:700');
//colors
$primary: #E62E50;
$accent: #B3DED1;
$primary-background: rgba(93%, 78%, 80%, 0.75), rgba(93%, 78%, 80%, 0.85);
$neutral-white-background: rgba(100%, 100%, 100%, 0.55), rgba(100%, 100%, 100%, 0.65);
$neutral-dark-gray: #333333;
$neutral-gray: #E7E7E8;
//fonts
$primary-font: "Ubuntu";
$secondary-font: "Open Sans Condensed";
$large-font-size: 48px;
$small-font-size: 14px;
$mobile-large-font-size: 24px;
$mobile-small-font-size: 8px;
$mobile-extra-small-font-size: 6px;
$thick-font-weight: 700;
$medium-font-weight: 300;
$uppercase-transform: uppercase;
//shapes
$triangle: polygon(50% 43%, 0% 100%, 100% 100%);
$circle: 50%;
html, body {
height: 100%;
background: $accent;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
.webpage {
position: relative;
margin: auto;
display: block;
margin-top: 100px;
width: 600px;
height: 420px;
background: linear-gradient( $neutral-white-background),
url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/test-2-01.svg") no-repeat;
background-position: center;
background-size: 100%;
z-index: 1;
-webkit-box-shadow: 10px 10px 18px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 10px 10px 18px 0px rgba(0, 0, 0, 0.75);
box-shadow: 10px 10px 18px 0px rgba(0, 0, 0, 0.75);
}
.title {
position: absolute;
opacity: 0.8;
top: 35%;
left: 10%;
font-family: $primary-font;
font-size: $large-font-size;
font-weight: $thick-font-weight;
color: $neutral-dark-gray;
text-transform: $uppercase-transform;
}
.sub {
top: 55%;
font-size: 26px;
}
.bottom-triangle {
position: absolute;
bottom: 0%;
left: 25%;
height: 30%;
width: 50%;
background: $accent;
background-size: cover;
-webkit-clip-path: $triangle;
clip-path: $triangle;
}
@media all and (max-width: 600px) {
.webpage {
position: relative;
margin: auto;
display: block;
margin-top: 100px;
width: 300px;
height: 200px;
z-index: 1;
}
.title {
font-size: $mobile-large-font-size;
}
}
