Donate. I desperately need donations to survive due to my health

Get paid by answering surveys Click here

Click here to donate

Remote/Work from Home jobs

When I add www. in front of my website url, I cannot see the snowfall on Website #5 - Snowfall, why is this, link in description?

on

I am currently working on a 180 website challenge to complete on https://taniaswebpages.com. Specifically website #5, is supposed to showcase a green background with words that say merry Christmas and happy holidays. There is also supposed to be white snowfall.

However, when I add www. in front of the webpage url (https://www.taniaswebpage.com), the snowfall goes away. Why does this happen?

I will attach my code, incase there is something wrong with it. If someone could please tell me what they think it might be I would really appreciate it.

HTML:

<!DOCTYPE html>
<html lang="en" dir=ltr>
<head>
<meta charset="utf-8">
<link href="taniaWebsite3.css" type=text/css rel=stylesheet>
</head>

<body class="mainpage4">
<div class="container1">
 <span class="Words1">Merry Christmas</span>
    <span class="Words2"> and Happy Holidays!!</span>
</div>

<div class="image">
    <div class="snow1"></div>
    <div class="snow2"></div>

</div>
</body>
</html>

css:

body.mainpage4{
margin:0;
padding:0;
background-color:darkseagreen;
}

.container1{
text-align:center;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
width:100%;
}

.container1 span{
text-transform:uppercase;
display:block;
}

 .Words1{
color:forestgreen;
font-family:monospace;
font-size:50px;
font-weight:600;
letter-spacing:6px;
margin-bottom:3px;
  position:relative; 
}

.Words2{
color:red;
font-family:monospace;
font-size:45px;
font-weight:550;
letter-spacing:4px;
animation:blinkingText 1s linear infinite;   
 }

 @keyframes blinkingText{
 0%{color: #f00;}
 49%{color: transparent;}
 50%{color: transparent;}
 99%{color:transparent;}
 100%{color: #f00;}
}

.image{
 background-size:cover;
width:100%;
 height:7000px;
 position:relative;
   overflow:hidden;
}

.snow1{
background:url(snow.png);
background-repeat:repeat;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
animation:snowfall 3s infinite linear;

}

.snow2{
background:url(snow.png);
background-repeat:repeat;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
animation:snowfall 8s infinite linear;

}

@keyframes snowfall
{
0%
{
    background-position: 0px 0px
}

100%
{
    background-position: 100px 650px
} 

@keyframes snowfallSecond
{
0%
{
    background-position: 0px -100px
}

100%
{
    background-position: 0px 650px
}
}

Comments

Post a Comment