SCSS
html {
height: 100%;
width: 100%;
}
body {
margin: 0 auto;
padding: 0;
background: linear-gradient(to bottom,
rgba(224,81,208,1) 0%,
rgba(246,109,131,1) 41%,
rgba(148,80,184,1) 100%);
}
.left {
left: 25px;
}
.right {
right: 25px;
}
.center {
text-align: center;
}
.bottom {
position: absolute;
bottom: 25px;
}
.gradient {
background: #999955;
background-image: linear-gradient(#1abc9c 20%,
#2ecc71 20%,
#2ecc71 40%,
#3498db 40%,
#3498db 60%,
#9b59b6 60%,
#9b59b6 80%,
#e74c3c 80%);
margin: 0 auto;
margin-top: 100px;
width: 100%;
height: 150px;
&:after {
content: "";
position: absolute;
background: #3e3142;
left: 50%;
margin-top: -67.5px;
margin-left: -270px;
padding-left: 20px;
border-radius: 5px;
width: 520px;
height: 275px;
z-index: -1;
}
}
.card {
position: absolute;
width: 450px;
height: 225px;
padding: 0 25px;
left: 50%;
top: 67.5px;
margin-left: -250px;
background: #3e3142;
box-shadow: -20px 0 35px -25px black,
20px 0 35px -25px black;
z-index: 5;
display: flex;
justify-content: center;
align-items: center;
img {
width: 200px;
float: left;
border-radius: 5px;
margin-right: 20px;
}
h2 {
font-family: courier;
color: #fff;
margin: 0 auto;
padding: 0;
font-size: 15pt;
}
p {
font-family: courier;
font-size: 16px;
}
span {
font-family: courier;
}
.info {
text-align: left;
p {
&:nth-child(2) {
color: #e74c3c;
}
&:nth-child(3) {
color: #2ecc71;
}
&:nth-child(4) {
color: #3498db;
}
}
}
}
1 Response