HTML:
<div class="about-container" [style.height]="pageHeight">
<div class="first-content">
<div>
<img src="assets/app-icon/launcher-icon-8x.png" alt="icon" width="150px">
</div>
<h1 class="wish-1">Happy New Year <span style="font-size: 60px;">2021</span></h1>
<p style="font-size: 26px; padding: 10px 20px;">
May this year bring new happiness, new goals, new achievements, and many new inspirations to your life. Wishing
you a year fully loaded with happiness.
</p>
<h1 style="font-size: 45px; margin: 10px;">Sri Amman Silks and Traders</h1>
<span style="font-size: 35px;">Minnampalli, Salem</span>
<div>
<button pButton type="button" (click)="navigate()" label="Continue Shopping" class="p-button-success p-mt-3 p-button-outlined"></button>
</div>
<div class="p-m-3 p-p-3"></div>
</div>
</div>
<div class="snowflakes" aria-hidden="true">
<div class="snowflake">
❅
</div>
<div class="snowflake">
❅
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❄
</div>
<div class="snowflake">
❅
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❄
</div>
<div class="snowflake">
❅
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❄
</div>
</div>
SCSS:
.about-container {
width: 100%;
display: table;
text-align: center;
color: white;
background-image: url("https://explore-share.imgix.net/wp-content/uploads/2018/08/wintry-1938580_960_720.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.first-content {
display: table-cell;
vertical-align: middle;
background-color: rgba(0, 0, 0, 0.5);
}
.wish-1 {
font-family: "Kalam";
font-weight: bold;
font-style: italic;
font-size: 50px;
animation: colorchange 5s infinite alternate;
}
@keyframes colorchange {
0% {
color: blue;
}
10% {
color: #8e44ad;
}
20% {
color: #1abc9c;
}
30% {
color: #d35400;
}
40% {
color: blue;
}
50% {
color: #34495e;
}
60% {
color: blue;
}
70% {
color: #2980b9;
}
80% {
color: #f1c40f;
}
90% {
color: #2980b9;
}
100% {
color: pink;
}
}
/* customizable snowflake styling */
.snowflake {
color: #4ec2f4;
font-size: 1em;
font-family: Arial;
text-shadow: 0 0 1px #000;
}
@-webkit-keyframes snowflakes-fall {
0% {
top: -10%;
}
100% {
top: 100%;
}
}
@-webkit-keyframes snowflakes-shake {
0% {
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
50% {
-webkit-transform: translateX(80px);
transform: translateX(80px);
}
100% {
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
}
@keyframes snowflakes-fall {
0% {
top: -10%;
}
100% {
top: 100%;
}
}
@keyframes snowflakes-shake {
0% {
transform: translateX(0px);
}
50% {
transform: translateX(80px);
}
100% {
transform: translateX(0px);
}
}
.snowflake {
position: fixed;
top: -10%;
z-index: 9999;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
-webkit-animation-name: snowflakes-fall, snowflakes-shake;
-webkit-animation-duration: 10s, 3s;
-webkit-animation-timing-function: linear, ease-in-out;
-webkit-animation-iteration-count: infinite, infinite;
-webkit-animation-play-state: running, running;
animation-name: snowflakes-fall, snowflakes-shake;
animation-duration: 10s, 3s;
animation-timing-function: linear, ease-in-out;
animation-iteration-count: infinite, infinite;
animation-play-state: running, running;
}
.snowflake:nth-of-type(0) {
left: 1%;
-webkit-animation-delay: 0s, 0s;
animation-delay: 0s, 0s;
}
.snowflake:nth-of-type(1) {
left: 10%;
-webkit-animation-delay: 1s, 1s;
animation-delay: 1s, 1s;
}
.snowflake:nth-of-type(2) {
left: 20%;
-webkit-animation-delay: 6s, 0.5s;
animation-delay: 6s, 0.5s;
}
.snowflake:nth-of-type(3) {
left: 30%;
-webkit-animation-delay: 4s, 2s;
animation-delay: 4s, 2s;
}
.snowflake:nth-of-type(4) {
left: 40%;
-webkit-animation-delay: 2s, 2s;
animation-delay: 2s, 2s;
}
.snowflake:nth-of-type(5) {
left: 50%;
-webkit-animation-delay: 8s, 3s;
animation-delay: 8s, 3s;
}
.snowflake:nth-of-type(6) {
left: 60%;
-webkit-animation-delay: 6s, 2s;
animation-delay: 6s, 2s;
}
.snowflake:nth-of-type(7) {
left: 70%;
-webkit-animation-delay: 2.5s, 1s;
animation-delay: 2.5s, 1s;
}
.snowflake:nth-of-type(8) {
left: 80%;
-webkit-animation-delay: 1s, 0s;
animation-delay: 1s, 0s;
}
.snowflake:nth-of-type(9) {
left: 90%;
-webkit-animation-delay: 3s, 1.5s;
animation-delay: 3s, 1.5s;
}
This page results as:
