How to fix hover effect not happening

How to fix hover effect not happening - html

Basically, I am using two separate css files, but the hover effect for the icon buttons won't work. I tried putting it in a separate div, but it wouldn't work. I even tried putting one of the css files contents into a tag in the body of the html file. I don't know what else to do. Any ideas on how to fix it?
/*first file*/
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-size: 10px;
font-family: "Roboto Cn", sans-serif;
}
body {
-ms-overflow-x: hidden;
overflow-x: hidden;
}
a {
text-decoration: none;
color: #eee;
}
header {
width: 100%;
height: 100vh;
background: -webkit-linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.5)), url("https://img00.deviantart.net/a06b/i/2018/116/b/f/goldenadrien_and_friends_family_diner_v_2_by_goldenadrien-dc9xvji.png") center top no-repeat;
background: -o-linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.5)), url("https://img00.deviantart.net/a06b/i/2018/116/b/f/goldenadrien_and_friends_family_diner_v_2_by_goldenadrien-dc9xvji.png") center top no-repeat;
background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.5)), url("https://img00.deviantart.net/a06b/i/2018/116/b/f/goldenadrien_and_friends_family_diner_v_2_by_goldenadrien-dc9xvji.png") center top no-repeat;
background-size: cover;
}
p {
position: relative;
text-align: center;
font-family: 'Roboto Cn', sans-serif;
font-size: 50px;
top: 50%;
left: 0;
text-shadow: 0 0 3px #FF0000, 0 0 5px yellow;
z-index:2;
}
.container {
max-width: 120rem;
width: 90%;
margin: 0 auto;
}
nav {
padding-top: 5rem;
display: flex;
display: -webkit-flex;
justify-content: space-between;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
align-items: center;
-webkit-align-items: center;
text-transform: uppercase;
font-size: 1.6rem;
}
.brand {
font-size: 3rem;
font-weight: 300;
-webkit-transform: translateX(-1000px);
-o-transform: translateX(-1000px);
-moz-transform: translateX(-1000px);
-ms-transform: translateX(-1000px);
transform: translateX(-1000px);
-webkit-animation: slideIn 0.5s forwards;
-o-animation: slideIn 0.5s forwards;
-moz-animation: slideIn 0.5s forwards;
animation: slideIn 0.5s forwards;
}
.brand .textgradient {
font-size: 3rem;
font-weight: 300;
background: -webkit-linear-gradient(to left, goldenrod, yellow, goldenrod, yellow);
background: -o-linear-gradient(to left, goldenrod, yellow, goldenrod, yellow);
background: linear-gradient(to left, goldenrod, yellow, goldenrod, yellow);
background-size: 400%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: textGradient 4s linear infinite;
-o-animation: textGradient 4s linear infinite;
-moz-animation: textGradient 4s linear infinite;
animation: textGradient 4s linear infinite;
}
#-webkit-keyframes textGradient {
0% {
background-position: 0%;
}
100% {
background-position: 90%;
}
}
#-o-keyframes textGradient {
0% {
background-position: 0%;
}
100% {
background-position: 90%;
}
}
#-moz-keyframes textGradient {
0% {
background-position: 0%;
}
100% {
background-position: 90%;
}
}
#keyframes textGradient {
0% {
background-position: 0%;
}
100% {
background-position: 90%;
}
}
.brand .textgradient2 {
font-size: 3rem;
font-weight: 300;
background: -webkit-linear-gradient(to right, darkred, #F80F01, darkred, #F80F01);
background: -o-linear-gradient(to right, darkred, #F80F01, darkred, #F80F01);
background: linear-gradient(to right, darkred, #F80F01, darkred, #F80F01);
background-size: 400%;
background-position: 0%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: textGradient 4s linear infinite;
-o-animation: textGradient 4s linear infinite;
-moz-animation: textGradient 4s linear infinite;
animation: textGradient 4s linear infinite;
}
.brand .textgradient3 {
font-size: 3rem;
font-weight: 300;
background: -webkit-linear-gradient(to right, #0036DA, navy, #0036DA, navy);
background: -o-linear-gradient(to right, #0036DA, navy, #0036DA, navy);
background: linear-gradient(to right, #0036DA, navy, #0036DA, navy);
background-size: 400%;
background-position: 0%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: textGradient 4s linear infinite;
-o-animation: textGradient 4s linear infinite;
-moz-animation: textGradient 4s linear infinite;
animation: textGradient 4s linear infinite;
}
#-webkit-keyframes textGradient {
0% {
background-position: 0%;
}
100% {
background-position: 90%;
}
}
#-o-keyframes textGradient {
0% {
background-position: 0%;
}
100% {
background-position: 90%;
}
}
#-moz-keyframes textGradient {
0% {
background-position: 0%;
}
100% {
background-position: 90%;
}
}
#keyframes textGradient {
0% {
background-position: 0%;
}
100% {
background-position: 90%;
}
}
nav.ulnav ul {
display: flex;
display: -webkit-flex;
}
nav ul.ulnav li.linav {
list-style: none;
-webkit-transform: translateX(1000px);
-o-transform: translateX(1000px);
-moz-transform: translateX(1000px);
-ms-transform: translateX(1000px);
transform: translateX(1000px);
-webkit-animation: slideIn 0.5s forwards;
-o-animation: slideIn 0.5s forwards;
-moz-animation: slideIn 0.5s forwards;
animation: slideIn 0.5s forwards;
}
nav ul.ulnav li.linav:nth-child(1) {
-webkit-animation-delay: 0s;
-o-animation-delay: 0s;
-moz-animation-delay: 0s;
animation-delay: 0s;
}
nav ul.ulnav li.linav:nth-child(2) {
-webkit-animation-delay: 0.5s;
-o-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}
nav ul.ulnav li.linav:nth-child(3) {
-webkit-animation-delay: 1s;
-o-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
nav ul.ulnav li.linav:nth-child(4) {
-webkit-animation-delay: 1.5s;
-o-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
animation-delay: 1.5s;
}
nav ul.ulnav li.linav a {
padding: 1rem 0;
margin: 0 3rem;
position: relative;
letter-spacing: 2px;
}
nav ul.ulnav li.linav a:last-child {
margin-right: 0;
}
nav ul.ulnav li.linav a:before,
nav ul.ulnav li.linav a:after {
content: '';
position: absolute;
width: 100%;
height: 2px;
left: 0;
background-color: gold;
-webkit-transform: scaleX(0);
-o-transform: scaleX(0);
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all .5s;
-o-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
nav ul.ulnav li.linav:nth-child(1) a:before,
nav ul.ulnav li.linav:nth-child(1) a:after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background: linear-gradient(to right, goldenrod, yellow);
background-color: crimson;
}
nav ul.ulnav li.linav:nth-child(2) a:before,
nav ul.ulnav li.linav:nth-child(2) a:after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background: linear-gradient(to right, darkred, #F80F01);
}
nav ul.ulnav li.linav:nth-child(3) a:before,
nav ul.ulnav li.linav:nth-child(3) a:after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background: linear-gradient(to right, #0036DA, navy);
}
nav ul.ulnav li.linav:nth-child(4) a:before {
content: '';
position: absolute;
width: 100%;
height: 2px;
background: linear-gradient(to right, darkred, #F80F01);
}
nav ul.ulnav li.linav:nth-child(4) a:after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background: linear-gradient(to right, navy, #0036DA)
}
nav ul.ulnav li.linav a:before {
top: 0;
-webkit-transform-origin: left;
-o-transform-origin: left;
-moz-transform-origin: left;
-ms-transform-origin: left;
transform-origin: left;
}
nav ul.ulnav li.linav a:after {
bottom: 0;
-webkit-transform-origin: right;
-o-transform-origin: right;
-moz-transform-origin: right;
-ms-transform-origin: right;
transform-origin: right;
}
nav ul.ulnav li.linav a:hover:before,
nav ul.ulnav li.linav a:hover:after {
-webkit-transform: scaleX(1);
-o-transform: scaleX(1);
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
#-webkit-keyframes slideIn {
from {
}
to {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
/*second file*/
.c {
margin: 0;
padding: 0;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
min-height: 100vh;
}
ul {
margin: 0;
padding: 0;
display: -webkit-flex;
display: flex;
}
ul li.b {
position: relative;
list-style: none;
width: 100px;
height: 100px;
margin: 0 10px;
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ul li.b:before, ul li.b:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-filter: blur(20px);
filter: blur(20px);
opacity: 0;
-webkit-transition: 1s;
-o-transition: 1s;
-moz-transition: 1s;
transition: 1s;
z-index: -1;
}
ul li.b:after {
-webkit-filter: blur(40px);
filter: blur(40px);
}
ul li.b:hover:before, ul li.b:hover:after {
opacity: 1;
}
ul li.b a {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
text-align: center;
line-height: 80px;
color: #fff;
background: #000;
font-size: 36px;
-webkit-border-radius: 50%;
border-radius: 50%;
}
ul li.b a.fab {
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-webkit-transition: 0.5s;
-o-transition: 0.5s;
-moz-transition: 0.5s;
transition: 0.5s;
-webkit-transform: rotateY(0deg) scale(0.8);
-ms-transform: rotateY(0deg) scale(0.8);
-o-transform: rotateY(0deg) scale(0.8);
-moz-transform: rotateY(0deg) scale(0.8);
transform: rotateY(0deg) scale(0.8);
opacity: 0.2;
}
ul li.b a:hover.fab {
opacity: 1;
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
-moz-transform: scale(1.2);
transform: scale(1.2);
}
ul li.b:nth-child(1) a, ul li.b:nth-child(1):before, ul li.b:nth-child(1):after {
background: linear-gradient(45deg, #adc0b3, #1dc200);
}
ul li.b:nth-child(2) a, ul li.b:nth-child(2):before, ul li.b:nth-child(2):after {
background: linear-gradient(45deg, #7289da, #053bff);
}
ul li.b:nth-child(3) a, ul li.b:nth-child(3):before, ul li.b:nth-child(3):after {
background: linear-gradient(45deg, #ff3863, #f10);
}
ul li.b:nth-child(4) a, ul li.b:nth-child(4):before, ul li.b:nth-child(4):after {
background: linear-gradient(45deg, #f0d, #90f);
}
.glitch {
font-size: 130px;
line-height: 1;
font-family: 'Poppins', sans-serif;
font-weight: 700;
position: absolute;
top: 80%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin: 0;
text-decoration: none;
color: #fff;
}
.glitch:before, .glitch:after {
display:block;
content: 'Discord Server Link Is Currently Unavailable.';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0.8;
} .glitch:after {
color: #f0f;
z-index: -2;
} .glitch:before {
color: #0ff;
z-index: -1;
}
.glitch:before {
-webkit-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
-moz-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
}
.glitch:after {
-webkit-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
-moz-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
}
#-webkit-keyframes glitch {
0% {
-webkit-transform: translate(0px);
transform: translate(0px);
}
20% {
-webkit-transform: translate(-5px, 5px);
transform: translate(-5px, 5px);
}
40% {
-webkit-transform: translate(-5px, -5px);
transform: translate(-5px, -5px);
}
60% {
-webkit-transform: translate(5px, 5px);
transform: translate(5px, 5px);
}
80% {
-webkit-transform: translate(5px, -5px);
transform: translate(5px, -5px);
}
100% {
-webkit-transform: translate(0px);
transform: translate(0px);
}
}
#-moz-keyframes glitch {
0% {
-moz-transform: translate(0px);
transform: translate(0px);
}
20% {
-moz-transform: translate(-5px, 5px);
transform: translate(-5px, 5px);
}
40% {
-moz-transform: translate(-5px, -5px);
transform: translate(-5px, -5px);
}
60% {
-moz-transform: translate(5px, 5px);
transform: translate(5px, 5px);
}
80% {
-moz-transform: translate(5px, -5px);
transform: translate(5px, -5px);
}
100% {
-moz-transform: translate(0px);
transform: translate(0px);
}
}
#-o-keyframes glitch {
0% {
-o-transform: translate(0px);
transform: translate(0px);
}
20% {
-o-transform: translate(-5px, 5px);
transform: translate(-5px, 5px);
}
40% {
-o-transform: translate(-5px, -5px);
transform: translate(-5px, -5px);
}
60% {
-o-transform: translate(5px, 5px);
transform: translate(5px, 5px);
}
80% {
-o-transform: translate(5px, -5px);
transform: translate(5px, -5px);
}
100% {
-o-transform: translate(0px);
transform: translate(0px);
}
}
#-moz-keyframes glitch {
0% {
-moz-transform: translate(0px);
transform: translate(0px);
}
20% {
-moz-transform: translate(-5px, 5px);
transform: translate(-5px, 5px);
}
40% {
-moz-transform: translate(-5px, -5px);
transform: translate(-5px, -5px);
}
60% {
-moz-transform: translate(5px, 5px);
transform: translate(5px, 5px);
}
80% {
-moz-transform: translate(5px, -5px);
transform: translate(5px, -5px);
}
100% {
-moz-transform: translate(0px);
transform: translate(0px);
}
}
#keyframes glitch {
0% {
transform: translate(0px);
}
20% {
transform: translate(-5px, 5px);
}
40% {
transform: translate(-5px, -5px);
}
60% {
transform: translate(5px, 5px);
}
80% {
transform: translate(5px, -5px);
}
100% {
transform: translate(0px);
}
}
.glitch {
font-size: 25px;
line-height: 1;
font-family: 'Poppins', sans-serif;
font-weight: 100;
position: absolute;
bottom:10px;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin: 0;
text-decoration: none;
color: #fff;
}
.glitch:before, .glitch:after {
display:block;
content: 'Discord Server Link Is Currently Unavailable';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0.8;
} .glitch:after {
color: #f0f;
z-index: -2;
} .glitch:before {
color: #0ff;
z-index: -1;
}
.glitch:before {
-webkit-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
-moz-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
}
.glitch:after {
-webkit-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
-moz-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
}
#-webkit-keyframes glitch {
0% {
-webkit-transform: translate(0px);
transform: translate(0px);
}
20% {
-webkit-transform: translate(-5px, 5px);
transform: translate(-5px, 5px);
}
40% {
-webkit-transform: translate(-5px, -5px);
transform: translate(-5px, -5px);
}
60% {
-webkit-transform: translate(5px, 5px);
transform: translate(5px, 5px);
}
80% {
-webkit-transform: translate(5px, -5px);
transform: translate(5px, -5px);
}
100% {
-webkit-transform: translate(0px);
transform: translate(0px);
}
}
#-o-keyframes glitch {
0% {
-o-transform: translate(0px);
transform: translate(0px);
}
20% {
-o-transform: translate(-5px, 5px);
transform: translate(-5px, 5px);
}
40% {
-o-transform: translate(-5px, -5px);
transform: translate(-5px, -5px);
}
60% {
-o-transform: translate(5px, 5px);
transform: translate(5px, 5px);
}
80% {
-o-transform: translate(5px, -5px);
transform: translate(5px, -5px);
}
100% {
-o-transform: translate(0px);
transform: translate(0px);
}
}
#-moz-keyframes glitch {
0% {
-moz-transform: translate(0px);
transform: translate(0px);
}
20% {
-moz-transform: translate(-5px, 5px);
transform: translate(-5px, 5px);
}
40% {
-moz-transform: translate(-5px, -5px);
transform: translate(-5px, -5px);
}
60% {
-moz-transform: translate(5px, 5px);
transform: translate(5px, 5px);
}
80% {
-moz-transform: translate(5px, -5px);
transform: translate(5px, -5px);
}
100% {
-moz-transform: translate(0px);
transform: translate(0px);
}
}
#keyframes glitch {
0% {
transform: translate(0px);
}
20% {
transform: translate(-5px, 5px);
}
40% {
transform: translate(-5px, -5px);
}
60% {
transform: translate(5px, 5px);
}
80% {
transform: translate(5px, -5px);
}
100% {
transform: translate(0px);
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GoldenAdrien's Social Accounts</title>
<link rel="stylesheet" href="css/home.css" type='text/css'>
<link rel='stylesheet' type='text/css' href='css/style.css'>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
<body>
<header>
<div class="container">
<nav>
<h1 class="brand"><a class='nav' href="index1.html"><span class="textgradient">Golden</span><span class="textgradient2">Adr</span><span class="textgradient3">ien</span></a></h1>
<ul class="ulnav">
<li class="linav"><a class='nav' href="#">Home</a></li>
<li class="linav"><a class='nav2' href="social-accounts.html">Social Links</a></li>
<li class="linav"><a class='nav3' href="#">Programs</a></li>
<li class="linav"><a class='nav4' href="#">Contact Me</a></li>
</ul>
</nav>
</div>
<div class='c'>
<ul>
<li class='b'><i class="fab fa-deviantart" aria-hidden="true"></i></li>
<li class='b'><i class="fab fa-discord" aria-hidden="true"></i></li>
<li class='b'><i class="fab fa-youtube" aria-hidden="true"></i></li>
<li class='b'><i class="fab fa-github" aria-hidden="true"></i></li>
</ul>
Discord Server Link Is Currently Unavailable.
</div>
</header>
</body>
</html>

add z-index:0 to ul li.b in order to create a stacking context and avoid the pseudo element where you set z-index:-1 to go behind:
There is also a selector issue (you are missing a space)
/*first file*/
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-size: 10px;
font-family: "Roboto Cn", sans-serif;
}
body {
-ms-overflow-x: hidden;
overflow-x: hidden;
}
a {
text-decoration: none;
color: #eee;
}
header {
width: 100%;
height: 100vh;
background: -webkit-linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.5)), url("https://img00.deviantart.net/a06b/i/2018/116/b/f/goldenadrien_and_friends_family_diner_v_2_by_goldenadrien-dc9xvji.png") center top no-repeat;
background: -o-linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.5)), url("https://img00.deviantart.net/a06b/i/2018/116/b/f/goldenadrien_and_friends_family_diner_v_2_by_goldenadrien-dc9xvji.png") center top no-repeat;
background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.5)), url("https://img00.deviantart.net/a06b/i/2018/116/b/f/goldenadrien_and_friends_family_diner_v_2_by_goldenadrien-dc9xvji.png") center top no-repeat;
background-size: cover;
}
p {
position: relative;
text-align: center;
font-family: 'Roboto Cn', sans-serif;
font-size: 50px;
top: 50%;
left: 0;
text-shadow: 0 0 3px #FF0000, 0 0 5px yellow;
z-index:2;
}
.container {
max-width: 120rem;
width: 90%;
margin: 0 auto;
}
nav {
padding-top: 5rem;
display: flex;
display: -webkit-flex;
justify-content: space-between;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
align-items: center;
-webkit-align-items: center;
text-transform: uppercase;
font-size: 1.6rem;
}
.brand {
font-size: 3rem;
font-weight: 300;
-webkit-transform: translateX(-1000px);
-o-transform: translateX(-1000px);
-moz-transform: translateX(-1000px);
-ms-transform: translateX(-1000px);
transform: translateX(-1000px);
-webkit-animation: slideIn 0.5s forwards;
-o-animation: slideIn 0.5s forwards;
-moz-animation: slideIn 0.5s forwards;
animation: slideIn 0.5s forwards;
}
.brand .textgradient {
font-size: 3rem;
font-weight: 300;
background: -webkit-linear-gradient(to left, goldenrod, yellow, goldenrod, yellow);
background: -o-linear-gradient(to left, goldenrod, yellow, goldenrod, yellow);
background: linear-gradient(to left, goldenrod, yellow, goldenrod, yellow);
background-size: 400%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: textGradient 4s linear infinite;
-o-animation: textGradient 4s linear infinite;
-moz-animation: textGradient 4s linear infinite;
animation: textGradient 4s linear infinite;
}
#-webkit-keyframes textGradient {
0% {
background-position: 0%;
}
100% {
background-position: 90%;
}
}
#-o-keyframes textGradient {
0% {
background-position: 0%;
}
100% {
background-position: 90%;
}
}
#-moz-keyframes textGradient {
0% {
background-position: 0%;
}
100% {
background-position: 90%;
}
}
#keyframes textGradient {
0% {
background-position: 0%;
}
100% {
background-position: 90%;
}
}
.brand .textgradient2 {
font-size: 3rem;
font-weight: 300;
background: -webkit-linear-gradient(to right, darkred, #F80F01, darkred, #F80F01);
background: -o-linear-gradient(to right, darkred, #F80F01, darkred, #F80F01);
background: linear-gradient(to right, darkred, #F80F01, darkred, #F80F01);
background-size: 400%;
background-position: 0%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: textGradient 4s linear infinite;
-o-animation: textGradient 4s linear infinite;
-moz-animation: textGradient 4s linear infinite;
animation: textGradient 4s linear infinite;
}
.brand .textgradient3 {
font-size: 3rem;
font-weight: 300;
background: -webkit-linear-gradient(to right, #0036DA, navy, #0036DA, navy);
background: -o-linear-gradient(to right, #0036DA, navy, #0036DA, navy);
background: linear-gradient(to right, #0036DA, navy, #0036DA, navy);
background-size: 400%;
background-position: 0%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: textGradient 4s linear infinite;
-o-animation: textGradient 4s linear infinite;
-moz-animation: textGradient 4s linear infinite;
animation: textGradient 4s linear infinite;
}
#-webkit-keyframes textGradient {
0% {
background-position: 0%;
}
100% {
background-position: 90%;
}
}
#-o-keyframes textGradient {
0% {
background-position: 0%;
}
100% {
background-position: 90%;
}
}
#-moz-keyframes textGradient {
0% {
background-position: 0%;
}
100% {
background-position: 90%;
}
}
#keyframes textGradient {
0% {
background-position: 0%;
}
100% {
background-position: 90%;
}
}
nav.ulnav ul {
display: flex;
display: -webkit-flex;
}
nav ul.ulnav li.linav {
list-style: none;
-webkit-transform: translateX(1000px);
-o-transform: translateX(1000px);
-moz-transform: translateX(1000px);
-ms-transform: translateX(1000px);
transform: translateX(1000px);
-webkit-animation: slideIn 0.5s forwards;
-o-animation: slideIn 0.5s forwards;
-moz-animation: slideIn 0.5s forwards;
animation: slideIn 0.5s forwards;
}
nav ul.ulnav li.linav:nth-child(1) {
-webkit-animation-delay: 0s;
-o-animation-delay: 0s;
-moz-animation-delay: 0s;
animation-delay: 0s;
}
nav ul.ulnav li.linav:nth-child(2) {
-webkit-animation-delay: 0.5s;
-o-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}
nav ul.ulnav li.linav:nth-child(3) {
-webkit-animation-delay: 1s;
-o-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
nav ul.ulnav li.linav:nth-child(4) {
-webkit-animation-delay: 1.5s;
-o-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
animation-delay: 1.5s;
}
nav ul.ulnav li.linav a {
padding: 1rem 0;
margin: 0 3rem;
position: relative;
letter-spacing: 2px;
}
nav ul.ulnav li.linav a:last-child {
margin-right: 0;
}
nav ul.ulnav li.linav a:before,
nav ul.ulnav li.linav a:after {
content: '';
position: absolute;
width: 100%;
height: 2px;
left: 0;
background-color: gold;
-webkit-transform: scaleX(0);
-o-transform: scaleX(0);
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all .5s;
-o-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
nav ul.ulnav li.linav:nth-child(1) a:before,
nav ul.ulnav li.linav:nth-child(1) a:after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background: linear-gradient(to right, goldenrod, yellow);
background-color: crimson;
}
nav ul.ulnav li.linav:nth-child(2) a:before,
nav ul.ulnav li.linav:nth-child(2) a:after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background: linear-gradient(to right, darkred, #F80F01);
}
nav ul.ulnav li.linav:nth-child(3) a:before,
nav ul.ulnav li.linav:nth-child(3) a:after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background: linear-gradient(to right, #0036DA, navy);
}
nav ul.ulnav li.linav:nth-child(4) a:before {
content: '';
position: absolute;
width: 100%;
height: 2px;
background: linear-gradient(to right, darkred, #F80F01);
}
nav ul.ulnav li.linav:nth-child(4) a:after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background: linear-gradient(to right, navy, #0036DA)
}
nav ul.ulnav li.linav a:before {
top: 0;
-webkit-transform-origin: left;
-o-transform-origin: left;
-moz-transform-origin: left;
-ms-transform-origin: left;
transform-origin: left;
}
nav ul.ulnav li.linav a:after {
bottom: 0;
-webkit-transform-origin: right;
-o-transform-origin: right;
-moz-transform-origin: right;
-ms-transform-origin: right;
transform-origin: right;
}
nav ul.ulnav li.linav a:hover:before,
nav ul.ulnav li.linav a:hover:after {
-webkit-transform: scaleX(1);
-o-transform: scaleX(1);
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
#-webkit-keyframes slideIn {
from {
}
to {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
/*second file*/
.c {
margin: 0;
padding: 0;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
min-height: 100vh;
}
ul {
margin: 0;
padding: 0;
display: -webkit-flex;
display: flex;
}
ul li.b {
position: relative;
z-index:0;
list-style: none;
width: 100px;
height: 100px;
margin: 0 10px;
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ul li.b:before, ul li.b:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-filter: blur(20px);
filter: blur(20px);
opacity: 0;
-webkit-transition: 1s;
-o-transition: 1s;
-moz-transition: 1s;
transition: 1s;
z-index: -1;
}
ul li.b:after {
-webkit-filter: blur(40px);
filter: blur(40px);
}
ul li.b:hover:before, ul li.b:hover:after {
opacity: 1;
}
ul li.b a {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
text-align: center;
line-height: 80px;
color: #fff;
background: #000;
font-size: 36px;
-webkit-border-radius: 50%;
border-radius: 50%;
}
ul li.b a .fab {
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-webkit-transition: 0.5s;
-o-transition: 0.5s;
-moz-transition: 0.5s;
transition: 0.5s;
-webkit-transform: rotateY(0deg) scale(0.8);
-ms-transform: rotateY(0deg) scale(0.8);
-o-transform: rotateY(0deg) scale(0.8);
-moz-transform: rotateY(0deg) scale(0.8);
transform: rotateY(0deg) scale(0.8);
opacity: 0.2;
}
ul li.b a:hover .fab {
opacity: 1;
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
-moz-transform: scale(1.2);
transform: scale(1.2);
}
ul li.b:nth-child(1) a, ul li.b:nth-child(1):before, ul li.b:nth-child(1):after {
background: linear-gradient(45deg, #adc0b3, #1dc200);
}
ul li.b:nth-child(2) a, ul li.b:nth-child(2):before, ul li.b:nth-child(2):after {
background: linear-gradient(45deg, #7289da, #053bff);
}
ul li.b:nth-child(3) a, ul li.b:nth-child(3):before, ul li.b:nth-child(3):after {
background: linear-gradient(45deg, #ff3863, #f10);
}
ul li.b:nth-child(4) a, ul li.b:nth-child(4):before, ul li.b:nth-child(4):after {
background: linear-gradient(45deg, #f0d, #90f);
}
.glitch {
font-size: 130px;
line-height: 1;
font-family: 'Poppins', sans-serif;
font-weight: 700;
position: absolute;
top: 80%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin: 0;
text-decoration: none;
color: #fff;
}
.glitch:before, .glitch:after {
display:block;
content: 'Discord Server Link Is Currently Unavailable.';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0.8;
} .glitch:after {
color: #f0f;
z-index: -2;
} .glitch:before {
color: #0ff;
z-index: -1;
}
.glitch:before {
-webkit-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
-moz-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
}
.glitch:after {
-webkit-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
-moz-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
}
#-webkit-keyframes glitch {
0% {
-webkit-transform: translate(0px);
transform: translate(0px);
}
20% {
-webkit-transform: translate(-5px, 5px);
transform: translate(-5px, 5px);
}
40% {
-webkit-transform: translate(-5px, -5px);
transform: translate(-5px, -5px);
}
60% {
-webkit-transform: translate(5px, 5px);
transform: translate(5px, 5px);
}
80% {
-webkit-transform: translate(5px, -5px);
transform: translate(5px, -5px);
}
100% {
-webkit-transform: translate(0px);
transform: translate(0px);
}
}
#-moz-keyframes glitch {
0% {
-moz-transform: translate(0px);
transform: translate(0px);
}
20% {
-moz-transform: translate(-5px, 5px);
transform: translate(-5px, 5px);
}
40% {
-moz-transform: translate(-5px, -5px);
transform: translate(-5px, -5px);
}
60% {
-moz-transform: translate(5px, 5px);
transform: translate(5px, 5px);
}
80% {
-moz-transform: translate(5px, -5px);
transform: translate(5px, -5px);
}
100% {
-moz-transform: translate(0px);
transform: translate(0px);
}
}
#-o-keyframes glitch {
0% {
-o-transform: translate(0px);
transform: translate(0px);
}
20% {
-o-transform: translate(-5px, 5px);
transform: translate(-5px, 5px);
}
40% {
-o-transform: translate(-5px, -5px);
transform: translate(-5px, -5px);
}
60% {
-o-transform: translate(5px, 5px);
transform: translate(5px, 5px);
}
80% {
-o-transform: translate(5px, -5px);
transform: translate(5px, -5px);
}
100% {
-o-transform: translate(0px);
transform: translate(0px);
}
}
#-moz-keyframes glitch {
0% {
-moz-transform: translate(0px);
transform: translate(0px);
}
20% {
-moz-transform: translate(-5px, 5px);
transform: translate(-5px, 5px);
}
40% {
-moz-transform: translate(-5px, -5px);
transform: translate(-5px, -5px);
}
60% {
-moz-transform: translate(5px, 5px);
transform: translate(5px, 5px);
}
80% {
-moz-transform: translate(5px, -5px);
transform: translate(5px, -5px);
}
100% {
-moz-transform: translate(0px);
transform: translate(0px);
}
}
#keyframes glitch {
0% {
transform: translate(0px);
}
20% {
transform: translate(-5px, 5px);
}
40% {
transform: translate(-5px, -5px);
}
60% {
transform: translate(5px, 5px);
}
80% {
transform: translate(5px, -5px);
}
100% {
transform: translate(0px);
}
}
.glitch {
font-size: 25px;
line-height: 1;
font-family: 'Poppins', sans-serif;
font-weight: 100;
position: absolute;
bottom:10px;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin: 0;
text-decoration: none;
color: #fff;
}
.glitch:before, .glitch:after {
display:block;
content: 'Discord Server Link Is Currently Unavailable';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0.8;
} .glitch:after {
color: #f0f;
z-index: -2;
} .glitch:before {
color: #0ff;
z-index: -1;
}
.glitch:before {
-webkit-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
-moz-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
}
.glitch:after {
-webkit-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
-moz-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
}
#-webkit-keyframes glitch {
0% {
-webkit-transform: translate(0px);
transform: translate(0px);
}
20% {
-webkit-transform: translate(-5px, 5px);
transform: translate(-5px, 5px);
}
40% {
-webkit-transform: translate(-5px, -5px);
transform: translate(-5px, -5px);
}
60% {
-webkit-transform: translate(5px, 5px);
transform: translate(5px, 5px);
}
80% {
-webkit-transform: translate(5px, -5px);
transform: translate(5px, -5px);
}
100% {
-webkit-transform: translate(0px);
transform: translate(0px);
}
}
#-o-keyframes glitch {
0% {
-o-transform: translate(0px);
transform: translate(0px);
}
20% {
-o-transform: translate(-5px, 5px);
transform: translate(-5px, 5px);
}
40% {
-o-transform: translate(-5px, -5px);
transform: translate(-5px, -5px);
}
60% {
-o-transform: translate(5px, 5px);
transform: translate(5px, 5px);
}
80% {
-o-transform: translate(5px, -5px);
transform: translate(5px, -5px);
}
100% {
-o-transform: translate(0px);
transform: translate(0px);
}
}
#-moz-keyframes glitch {
0% {
-moz-transform: translate(0px);
transform: translate(0px);
}
20% {
-moz-transform: translate(-5px, 5px);
transform: translate(-5px, 5px);
}
40% {
-moz-transform: translate(-5px, -5px);
transform: translate(-5px, -5px);
}
60% {
-moz-transform: translate(5px, 5px);
transform: translate(5px, 5px);
}
80% {
-moz-transform: translate(5px, -5px);
transform: translate(5px, -5px);
}
100% {
-moz-transform: translate(0px);
transform: translate(0px);
}
}
#keyframes glitch {
0% {
transform: translate(0px);
}
20% {
transform: translate(-5px, 5px);
}
40% {
transform: translate(-5px, -5px);
}
60% {
transform: translate(5px, 5px);
}
80% {
transform: translate(5px, -5px);
}
100% {
transform: translate(0px);
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GoldenAdrien's Social Accounts</title>
<link rel="stylesheet" href="css/home.css" type='text/css'>
<link rel='stylesheet' type='text/css' href='css/style.css'>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
<body>
<header>
<div class="container">
<nav>
<h1 class="brand"><a class='nav' href="index1.html"><span class="textgradient">Golden</span><span class="textgradient2">Adr</span><span class="textgradient3">ien</span></a></h1>
<ul class="ulnav">
<li class="linav"><a class='nav' href="#">Home</a></li>
<li class="linav"><a class='nav2' href="social-accounts.html">Social Links</a></li>
<li class="linav"><a class='nav3' href="#">Programs</a></li>
<li class="linav"><a class='nav4' href="#">Contact Me</a></li>
</ul>
</nav>
</div>
<div class='c'>
<ul>
<li class='b'><i class="fab fa-deviantart" aria-hidden="true"></i></li>
<li class='b'><i class="fab fa-discord" aria-hidden="true"></i></li>
<li class='b'><i class="fab fa-youtube" aria-hidden="true"></i></li>
<li class='b'><i class="fab fa-github" aria-hidden="true"></i></li>
</ul>
Discord Server Link Is Currently Unavailable.
</div>
</header>
</body>
</html>
Related: Why can't an element with a z-index value cover its child?

Related

Pictures don't align and won't scale properly

I am making a site for my school project. I am stumbling upon some problems...
I want to make a tab with links, in which when you press upon an image you will get send to the topic. I think I am trying to much at the same time, because I want my site to function on different screen resolution.
(Note: not everything is working and don't mind the random notes, they are in Dutch. I'm still working on the site)
Here is my HTML and CSS:
BODY { font-family: Andalus, Helvetica, sans-serif; background-color: black; color: black; font-size: 15px; margin: 0px; padding: 0px; width: 100%; height:100%;-webkit-animation: color-change-2x 2s linear infinite alternate both;
animation: color-change-2x 3s linear infinite alternate both;}
div#box1 {border-color:#666666; max-width: 100% ; max-height: 80px;
display: block; height: 10%;background-color:#666666 ;margin-top: -120px;-webkit-animation: slide-bottom 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-bottom 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
div#box2 { border-color:#585858 ;margin-left:auto; max-width: 100% ; height: 855px; display: block; color: black; background-color: #585858; margin-top:100px; -webkit-animation: color-change-2x 2s linear infinite alternate both;
animation: color-change-2x 3s linear infinite alternate both;}
div#box4 { border-style:none; margin-left: 810px; margin-top: 450px; width: 279px; height: 330px; background-color: none;}
div#titel1 {margin-top: 100px; background-color: #00000000}
div#txt2 {margin-top:100px; font-size: 20px; margin-left: 100px}
/* Voor #links pagina */
div#links1 {margin-top: 250px; margin-left: 50px;}
div#links2 {margin-top: 250px; margin-left: 300px;}
de img { margin-left: 50px; margin-top: 0px;}
da img { margin-left: 1000; margin-top: -500px;}
div#flash {margin-top:400px; font-size: 45px; margin-left: 350px}
p {background-color: none; color: black; padding: 1px; margin-top: 0px; width: 965px; margin-bottom: 0px; margin-left: 20px; margin-right: 5px; position: relative; line-height: 15px}
H1 { font-size: 85px; background-color: #00000000; margin-left: 550px; }
H2 { margin-top: 25px; margin-left: 355px; color: #db0000}
.lijst { list-style-type: none; padding: 0px; margin-top: 20px; margin-left: 5px; font-size: 15px; color: crimson;}
.sublijst { list-style-type:disc; padding: 0px; margin-left: 20px; font-size: 13px; font-size: 15px}
.pageselect { font-weight: bold; color: #757575;}
.nextpage { float: right; margin-right: 5px;}
a:link { color: black;}
a:visited { color: black;}
b:link { color: grey;}
b:visited { color: grey;}
iframe {border: 5px; border-style: groove; border-color: black}
hr {color: black}
br {text-align: justify; color: black; font-family: inherit; font-size: 10px; margin-left: 5px}
a:hover img { display:block; }
b:hover img { display:block; }
div#box1{width:100%;}
div#box2{width:100%;}
div#box3{width:100%;}
body{ overflow: hidden;}
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
margin-top: 20px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #4f4f4f;
color: black;
-webkit-animation: heartbeat 1.5s ease-in-out infinite both;
animation: heartbeat 1.5s ease-in-out infinite both;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #4a0900;
color: white;
}
/* ----------------------------------------------
* Generated by Animista on 2020-4-18 14:7:8
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: #cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation slide-bottom
* ----------------------------------------
*/
#-webkit-keyframes slide-bottom {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(100px);
transform: translateY(100px);
}
}
#keyframes slide-bottom {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(100px);
transform: translateY(100px);
}
}
#-webkit-keyframes bounce-in-top {
0% {
-webkit-transform: translateY(-500px);
transform: translateY(-500px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: translateY(-65px);
transform: translateY(-65px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: translateY(-28px);
transform: translateY(-28px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
90% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
#keyframes bounce-in-top {
0% {
-webkit-transform: translateY(-500px);
transform: translateY(-500px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: translateY(-65px);
transform: translateY(-65px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: translateY(-28px);
transform: translateY(-28px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
90% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
#-webkit-keyframes color-change-2x {
0% {
background: #717171;
}
100% {
background: #979797;
}
}
#keyframes color-change-2x {
0% {
background: #717171;
}
100% {
background: #979797;
}
}
#-webkit-keyframes jello-horizontal {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
#keyframes jello-horizontal {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
#-webkit-keyframes heartbeat {
from {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
10% {
-webkit-transform: scale(0.91);
transform: scale(0.91);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
17% {
-webkit-transform: scale(0.98);
transform: scale(0.98);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
33% {
-webkit-transform: scale(0.87);
transform: scale(0.87);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
#keyframes heartbeat {
from {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
10% {
-webkit-transform: scale(0.91);
transform: scale(0.91);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
17% {
-webkit-transform: scale(0.98);
transform: scale(0.98);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
33% {
-webkit-transform: scale(0.87);
transform: scale(0.87);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
#-webkit-keyframes scale-in-ver-center {
0% {
-webkit-transform: scaleY(0);
transform: scaleY(0);
opacity: 1;
}
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
opacity: 1;
}
}
#keyframes scale-in-ver-center {
0% {
-webkit-transform: scaleY(0);
transform: scaleY(0);
opacity: 1;
}
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
opacity: 1;
}
}
.blinking{
animation:blinkingText 2s infinite;
}
#keyframes blinkingText{
0%{ color: #D70606; }
49%{ color: #D70606; }
60%{ color: transparent; }
99%{ color:transparent; }
100%{ color: #D70606; }
}
/* Als er iet mis is gebeurt het vast hier */
#media only screen and (min-width: 768px) {
/* For desktop: */
.txt1 {width: 50%;}
#media only screen and (min-width: 600px) {
/* For tablets: */
.txt1 {width: 25%;}
/* For mobile phones: */
[class*="txt-"] {
width: 100%;
/* ..... */
<HTML>
<HEAD>
<TITLE>Links</TITLE>
<LINK HREF="stylesheet.css" REL="stylesheet" TYPE="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<BODY>
<div id="box1">
<div class="topnav">
Home
<a class="active" href="links.html">Links</a>
Contact
About
</div>
</div>
<style>
img {
width:;
height: auto;
max-height: 1000px;
max-width: 1000px;
min-height: 500px;
min-width: 500px;
}
</style>
<div style="margin-top: 10%; margin-left: 10%">
<!- Deepweb photo: https://f.cyberdrop.cc/deep-web-icon-on-white-background-vector-22619325%20(3)-4z9zvu8O.png
Darkweb photo: https://f.cyberdrop.cc/deep-web-icon-on-white-background-vector-22619325%20(2)-7bmJyo5v.png -!>
<img src="https://f.cyberdrop.cc/deep-web-icon-on-white-background-vector-22619325%20(3)-4z9zvu8O.png" title="Deepweb"; width="500"; height="500"></div>
<br>
<br>
<div style="margin-top: -32%; margin-left: 60%">
<img src="https://f.cyberdrop.cc/deep-web-icon-on-white-background-vector-22619325%20(2)-7bmJyo5v.png" title="Darkweb"; width="500"; height="500">
</div>
</BODY>
</HEAD>
</HTML>
I hope somebody can help me with fixing these problems, and also feedback on the site would also be nice.

Ok, since this is a school project there a lot of things you should look of, the first thing that got in my eyes are that you put your Body inside your head. The structure for HTML is the following:
<html>
<head></head>
<body>
...
</body>
</html>
Then a second thing that you should look for is, that you format your code in a good way, especially in your CSS (teacher will grade it better, when the code looks better and you can read it easily) for example in CSS your common way was to write .class{background:black; color:white; display:block} which isnt a good way to write it, try write it like:
.class{
background: black;
color: white;
display: block;
}
much more readable and your teacher will like it.
And as you might thing, this will create a file with a hight number of lines, which is already the case in your css file. You have tons of animations in your main css file, you can simply create a new css file (name it animations.css) store the animations in it and link it to your html page. This will keep everything clean and more readable.
As a third thing to look for is, to strictly seperate HTML and CSS. Since HTML5 its not Standard anymore to use the HTML-tag "style" when the Project is for an actual IT class or something you will get worse grading for it. And as you might realized when you mix togheter the style tag in html (<div style="margin:10px; padding:5px">) and the normal css files, you lose the clarity about your project.
Ok as a last Tip for your project (you asked for feedback), there are a neat thing called "grid" which is absolutley amazing for responsive sites (the thing you spoke about with "it should work on diffrent screens") when grid is to complicated you can still use "flex" which is easy to use, but isnt as powerful as grid. It will fix your problem with 2 lines, and will be responsive (the thing with on every screen). I provided a little Example at the bottom, i changed the code a lot (basically did everything i wrote at the top).
For the Code:
look at the class ".imgwrapper" it will hopefully fix your problem when i understand it right, and as a tip to it the values with vw and vw (f.e. 100vw) is something you should use when youre working responsive, its basically the percentage of your current screen view: https://www.w3schools.com/cssref/css_units.asp
Kindest Regards Raqha
.imgwrapper {
margin-top: 40vh;
width: 100vw;
height: 80vh;
display: flex;
justify-content: space-around;
}
.imgwrapper img {
width: 30vw;
}
BODY {
font-family: Andalus, Helvetica, sans-serif;
background-color: black;
color: black;
font-size: 15px;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
-webkit-animation: color-change-2x 2s linear infinite alternate both;
animation: color-change-2x 3s linear infinite alternate both;
}
div#box1 {
border-color: #666666;
max-width: 100%;
max-height: 80px;
display: block;
height: 10%;
background-color: #666666;
margin-top: -120px;
-webkit-animation: slide-bottom 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-bottom 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
div#box2 {
border-color: #585858;
margin-left: auto;
max-width: 100%;
height: 855px;
display: block;
color: black;
background-color: #585858;
margin-top: 100px;
-webkit-animation: color-change-2x 2s linear infinite alternate both;
animation: color-change-2x 3s linear infinite alternate both;
}
div#box4 {
border-style: none;
margin-left: 810px;
margin-top: 450px;
width: 279px;
height: 330px;
background-color: none;
}
div#titel1 {
margin-top: 100px;
background-color: #00000000
}
div#txt2 {
margin-top: 100px;
font-size: 20px;
margin-left: 100px
}
/* Voor #links pagina */
div#links1 {
margin-top: 250px;
margin-left: 50px;
}
div#links2 {
margin-top: 250px;
margin-left: 300px;
}
div#flash {
margin-top: 400px;
font-size: 45px;
margin-left: 350px
}
p {
background-color: none;
color: black;
padding: 1px;
margin-top: 0px;
width: 965px;
margin-bottom: 0px;
margin-left: 20px;
margin-right: 5px;
position: relative;
line-height: 15px
}
H1 {
font-size: 85px;
background-color: #00000000;
margin-left: 550px;
}
H2 {
margin-top: 25px;
margin-left: 355px;
color: #db0000
}
.lijst {
list-style-type: none;
padding: 0px;
margin-top: 20px;
margin-left: 5px;
font-size: 15px;
color: crimson;
}
.sublijst {
list-style-type: disc;
padding: 0px;
margin-left: 20px;
font-size: 13px;
font-size: 15px
}
.pageselect {
font-weight: bold;
color: #757575;
}
.nextpage {
float: right;
margin-right: 5px;
}
a:link {
color: black;
}
a:visited {
color: black;
}
b:link {
color: grey;
}
b:visited {
color: grey;
}
iframe {
border: 5px;
border-style: groove;
border-color: black
}
hr {
color: black
}
br {
text-align: justify;
color: black;
font-family: inherit;
font-size: 10px;
margin-left: 5px
}
/* a:hover img { display:block; }
b:hover img { display:block; } */
div#box1 {
width: 100%;
}
div#box2 {
width: 100%;
}
div#box3 {
width: 100%;
}
body {
overflow-x: hidden;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
margin-top: 20px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #4f4f4f;
color: black;
-webkit-animation: heartbeat 1.5s ease-in-out infinite both;
animation: heartbeat 1.5s ease-in-out infinite both;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #4a0900;
color: white;
}
/* ----------------------------------------------
* Generated by Animista on 2020-4-18 14:7:8
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: #cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation slide-bottom
* ----------------------------------------
*/
#-webkit-keyframes slide-bottom {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(100px);
transform: translateY(100px);
}
}
#keyframes slide-bottom {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(100px);
transform: translateY(100px);
}
}
#-webkit-keyframes bounce-in-top {
0% {
-webkit-transform: translateY(-500px);
transform: translateY(-500px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: translateY(-65px);
transform: translateY(-65px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: translateY(-28px);
transform: translateY(-28px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
90% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
#keyframes bounce-in-top {
0% {
-webkit-transform: translateY(-500px);
transform: translateY(-500px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: translateY(-65px);
transform: translateY(-65px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: translateY(-28px);
transform: translateY(-28px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
90% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
#-webkit-keyframes color-change-2x {
0% {
background: #717171;
}
100% {
background: #979797;
}
}
#keyframes color-change-2x {
0% {
background: #717171;
}
100% {
background: #979797;
}
}
#-webkit-keyframes jello-horizontal {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
#keyframes jello-horizontal {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
#-webkit-keyframes heartbeat {
from {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
10% {
-webkit-transform: scale(0.91);
transform: scale(0.91);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
17% {
-webkit-transform: scale(0.98);
transform: scale(0.98);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
33% {
-webkit-transform: scale(0.87);
transform: scale(0.87);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
#keyframes heartbeat {
from {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
10% {
-webkit-transform: scale(0.91);
transform: scale(0.91);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
17% {
-webkit-transform: scale(0.98);
transform: scale(0.98);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
33% {
-webkit-transform: scale(0.87);
transform: scale(0.87);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
#-webkit-keyframes scale-in-ver-center {
0% {
-webkit-transform: scaleY(0);
transform: scaleY(0);
opacity: 1;
}
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
opacity: 1;
}
}
#keyframes scale-in-ver-center {
0% {
-webkit-transform: scaleY(0);
transform: scaleY(0);
opacity: 1;
}
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
opacity: 1;
}
}
.blinking {
animation: blinkingText 2s infinite;
}
#keyframes blinkingText {
0% {
color: #D70606;
}
49% {
color: #D70606;
}
60% {
color: transparent;
}
99% {
color: transparent;
}
100% {
color: #D70606;
}
}
/* Als er iet mis is gebeurt het vast hier */
#media only screen and (min-width: 768px) {
/* For desktop: */
.txt1 {
width: 50%;
}
}
<HTML>
<HEAD>
<TITLE>Links</TITLE>
<LINK HREF="style.css" REL="stylesheet" TYPE="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</HEAD>
<BODY>
<div id="box1">
<div class="topnav">
Home
<a class="active" href="links.html">Links</a>
Contact
About
</div>
</div>
<div class="imgwrapper">
<div>
<a href="deepweb.html">
<img src="https://f.cyberdrop.cc/deep-web-icon-on-white-background-vector-22619325%20(3)-4z9zvu8O.png" ></a>
</div>
<div>
<a href="darkweb.html"><img
src="https://f.cyberdrop.cc/deep-web-icon-on-white-background-vector-22619325%20(2)-7bmJyo5v.png"></a>
</div>
</BODY>
</HTML>

how to add pulse animation with one after other in css like traffic lights blinks continously

I have two circles with pulse animation infinite times. Now I need animating the circle one after another continuously with infinite times. I tried pulsation the circle infinite times. I have added delay animation but it is not working I don't why. Please kindly refer the code and help to achieve that functionality:
HTML:
<div class="inner">one</div>
<div class="inner1">two</div>
Css:
.inner {
width: 74px;
height: 74px;
background: #fff;
border:1px solid #000;
position: relative;
text-align:center;
border-radius: 50%;
margin-bottom:20px;
text-align: center;
-webkit-animation: pulse 1s infinite;
}
.inner1 {
width: 74px;
height: 74px;
background: #fff;
border:1px solid #000;
position: relative;
border-radius: 50%;
text-align: center;
-webkit-animation: pulse 2s infinite;
}
#-webkit-keyframes pulse {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05)
}
to {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
#keyframes pulse {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05)
}
to {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
.pulse {
-webkit-animation-name: pulse;
animation-name: pulse
}
thanks in advance

You can add the same class to all circles for common properties. The only properties you need different for each is animation-delay.
You can use a small jQuery code to set that for any number of divs. I have created an example for 3 divs, but feel free to extend it.
let els = $(".inner"),
length = $(".inner").length
els.each(function(index) {
$(this).css('animation-delay', (index / length) + 's')
})
.inner {
display: inline-block;
vertical-align: top;
width: 74px;
height: 74px;
background: #fff;
border: 1px solid #000;
position: relative;
text-align: center;
border-radius: 50%;
margin-bottom: 20px;
text-align: center;
margin: 10px;
animation: pulse 1s infinite linear;
}
#keyframes pulse {
0% {
transform: scaleX(1)
}
50% {
transform: scale3d(1.05, 1.05, 1.05)
}
to {
transform: scaleX(1)
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="inner">one</div>
<div class="inner">two</div>
<div class="inner">three</div>

animation-delay is working:
.inner {
width: 74px;
height: 74px;
background: #fff;
border: 1px solid #000;
position: relative;
text-align: center;
border-radius: 50%;
margin-bottom: 20px;
text-align: center;
-webkit-animation: pulse 1s infinite;
}
.inner1 {
width: 74px;
height: 74px;
background: #fff;
border: 1px solid #000;
position: relative;
border-radius: 50%;
text-align: center;
-webkit-animation: pulse 2s infinite;
animation-delay: 5s
}
#-webkit-keyframes pulse {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05)
}
to {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
#keyframes pulse {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05)
}
to {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
.pulse {
-webkit-animation-name: pulse;
animation-name: pulse
}
<div class="inner">one
</div>
<div class="inner1">two
</div>

Only Add animation Delay= .5s; and reduce second animation time with 1s
HTML:
<div class="inner">one</div>
<div class="inner1">two</div>
CSS:
.inner {
width: 74px;
height: 74px;
background: #fff;
border:1px solid #000;
position: relative;
text-align:center;
border-radius: 50%;
margin-bottom:20px;
text-align: center;
-webkit-animation: pulse 1s infinite;
}
.inner1 {
width: 74px;
height: 74px;
background: #fff;
border:1px solid #000;
position: relative;
border-radius: 50%;
text-align: center;
-webkit-animation: pulse 1s infinite;
animation-delay: .5s;
}
#-webkit-keyframes pulse {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05)
}
to {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
#keyframes pulse {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05)
}
to {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
.pulse {
-webkit-animation-name: pulse;
animation-name: pulse
}

Why does my website have the white box at the bottom?

Basically I have a website that has a section with a white bar at the bottom. I don't know how to get rid of it. Yes I know that others have asked this question, however I don't want a bar that won't work with my image. Any ideas? Also, I am using two css files. I separated them with comments, so hopefully it won't be two confusing which code is from which file
/*first file*/
* {
margin: 0;
padding: 0;
border: 0 none;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
html {
font-size: 10px;
font-family: "Roboto Cn", sans-serif;
}
body {
-ms-overflow-x: hidden;
overflow-x: hidden;
}
a {
text-decoration: none;
color: #eee;
}
header {
width: 100%;
height: 100vh;
background: -webkit-linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.5)), url("../images/gafd.png") center top no-repeat;
background: -o-linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.5)), url("https://img00.deviantart.net/a06b/i/2018/116/b/f/goldenadrien_and_friends_family_diner_v_2_by_goldenadrien-dc9xvji.png") center top no-repeat;
background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.5)), url("https://img00.deviantart.net/a06b/i/2018/116/b/f/goldenadrien_and_friends_family_diner_v_2_by_goldenadrien-dc9xvji.png") center top no-repeat;
background-size: cover;
}
p {
position: relative;
text-align: center;
font-family: 'Roboto Cn', sans-serif;
font-size: 50px;
top: 50%;
left: 0;
text-shadow: 0 0 3px #FF0000, 0 0 5px yellow;
z-index:2;
}
.container {
max-width: 120rem;
width: 90%;
margin: 0 auto;
}
nav {
padding-top: 5rem;
display: flex;
display: -webkit-flex;
justify-content: space-between;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
align-items: center;
-webkit-align-items: center;
text-transform: uppercase;
font-size: 1.6rem;
}
.brand {
font-size: 3rem;
font-weight: 300;
-webkit-transform: translateX(-1000px);
-o-transform: translateX(-1000px);
-moz-transform: translateX(-1000px);
-ms-transform: translateX(-1000px);
transform: translateX(-1000px);
-webkit-animation: slideIn 0.5s forwards;
-o-animation: slideIn 0.5s forwards;
-moz-animation: slideIn 0.5s forwards;
animation: slideIn 0.5s forwards;
}
.brand .textgradient {
font-size: 3rem;
font-weight: 300;
background: -webkit-linear-gradient(to left, goldenrod, yellow, goldenrod, yellow);
background: -o-linear-gradient(to left, goldenrod, yellow, goldenrod, yellow);
background: linear-gradient(to left, goldenrod, yellow, goldenrod, yellow);
background-size: 400%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: textGradient 4s linear infinite;
-o-animation: textGradient 4s linear infinite;
-moz-animation: textGradient 4s linear infinite;
animation: textGradient 4s linear infinite;
}
#-webkit-keyframes textGradient {
0% {
background-position: 0%;
}
100% {
background-position: 90%;
}
}
#-o-keyframes textGradient {
0% {
background-position: 0%;
}
100% {
background-position: 90%;
}
}
#-moz-keyframes textGradient {
0% {
background-position: 0%;
}
100% {
background-position: 90%;
}
}
#keyframes textGradient {
0% {
background-position: 0%;
}
100% {
background-position: 90%;
}
}
.brand .textgradient2 {
font-size: 3rem;
font-weight: 300;
background: -webkit-linear-gradient(to right, darkred, #F80F01, darkred, #F80F01);
background: -o-linear-gradient(to right, darkred, #F80F01, darkred, #F80F01);
background: linear-gradient(to right, darkred, #F80F01, darkred, #F80F01);
background-size: 400%;
background-position: 0%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: textGradient 4s linear infinite;
-o-animation: textGradient 4s linear infinite;
-moz-animation: textGradient 4s linear infinite;
animation: textGradient 4s linear infinite;
}
.brand .textgradient3 {
font-size: 3rem;
font-weight: 300;
background: -webkit-linear-gradient(to right, #0036DA, navy, #0036DA, navy);
background: -o-linear-gradient(to right, #0036DA, navy, #0036DA, navy);
background: linear-gradient(to right, #0036DA, navy, #0036DA, navy);
background-size: 400%;
background-position: 0%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: textGradient 4s linear infinite;
-o-animation: textGradient 4s linear infinite;
-moz-animation: textGradient 4s linear infinite;
animation: textGradient 4s linear infinite;
}
#-webkit-keyframes textGradient {
0% {
background-position: 0%;
}
100% {
background-position: 90%;
}
}
#-o-keyframes textGradient {
0% {
background-position: 0%;
}
100% {
background-position: 90%;
}
}
#-moz-keyframes textGradient {
0% {
background-position: 0%;
}
100% {
background-position: 90%;
}
}
#keyframes textGradient {
0% {
background-position: 0%;
}
100% {
background-position: 90%;
}
}
nav ul {
display: flex;
display: -webkit-flex;
}
nav ul li.linav {
list-style: none;
-webkit-transform: translateX(1000px);
-o-transform: translateX(1000px);
-moz-transform: translateX(1000px);
-ms-transform: translateX(1000px);
transform: translateX(1000px);
-webkit-animation: slideIn 0.5s forwards;
-o-animation: slideIn 0.5s forwards;
-moz-animation: slideIn 0.5s forwards;
animation: slideIn 0.5s forwards;
}
nav ul li.linav:nth-child(1) {
-webkit-animation-delay: 0;
-o-animation-delay: 0;
-moz-animation-delay: 0;
animation-delay: 0;
}
nav ul li.linav:nth-child(2) {
-webkit-animation-delay: 0.5s;
-o-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}
nav ul li.linav:nth-child(3) {
-webkit-animation-delay: 1s;
-o-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
nav ul li.linav:nth-child(4) {
-webkit-animation-delay: 1.5s;
-o-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
animation-delay: 1.5s;
}
nav ul li.linav a {
padding: 1rem 0;
margin: 0 3rem;
position: relative;
letter-spacing: 2px;
}
nav ul li.linav a:last-child {
margin-right: 0;
}
nav ul li.linav a:before,
nav ul li.linav a:after {
content: '';
position: absolute;
width: 100%;
height: 2px;
left: 0;
background-color: gold;
-webkit-transform: scaleX(0);
-o-transform: scaleX(0);
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all .5s;
-o-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
nav ul li.linav:nth-child(1) a:before,
nav ul li.linav:nth-child(1) a:after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background: linear-gradient(to right, goldenrod, yellow);
background-color: crimson;
}
nav ul li.linav:nth-child(2) a:before,
nav ul li.linav:nth-child(2) a:after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background: linear-gradient(to right, darkred, #F80F01);
}
nav ul li.linav:nth-child(3) a:before,
nav ul li.linav:nth-child(3) a:after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background: linear-gradient(to right, #0036DA, navy);
}
nav ul li.linav:nth-child(4) a:before {
content: '';
position: absolute;
width: 100%;
height: 2px;
background: linear-gradient(to right, darkred, #F80F01);
}
nav ul li.linav:nth-child(4) a:after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background: linear-gradient(to right, navy, #0036DA)
}
nav ul li.linav a:before {
top: 0;
-webkit-transform-origin: left;
-o-transform-origin: left;
-moz-transform-origin: left;
-ms-transform-origin: left;
transform-origin: left;
}
nav ul li.linav a:after {
bottom: 0;
-webkit-transform-origin: right;
-o-transform-origin: right;
-moz-transform-origin: right;
-ms-transform-origin: right;
transform-origin: right;
}
nav ul li.linav a:hover:before,
nav ul li.linav a:hover:after {
-webkit-transform: scaleX(1);
-o-transform: scaleX(1);
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
#-webkit-keyframes slideIn {
from {
}
to {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
/*second file*/
.c {
margin: 0;
padding: 0;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
min-height: 100vh;
}
ul {
margin: 0;
padding: 0;
display: -webkit-flex;
display: flex;
}
ul li.b {
z-index:0;
position: relative;
list-style: none;
width: 100px;
height: 100px;
margin: 0 10px;
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ul li.b:before, ul li.b:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-filter: blur(20px);
filter: blur(20px);
opacity: 0;
-webkit-transition: 1s;
-o-transition: 1s;
-moz-transition: 1s;
transition: 1s;
z-index: -1;
}
ul li.b:after {
-webkit-filter: blur(40px);
filter: blur(40px);
}
ul li.b:hover:before, ul li.b:hover:after {
opacity: 1;
}
ul li.b a {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
text-align: center;
line-height: 80px;
color: #fff;
background: #000;
font-size: 36px;
-webkit-border-radius: 50%;
border-radius: 50%;
}
ul li.b a .fab {
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-webkit-transition: 0.5s;
-o-transition: 0.5s;
-moz-transition: 0.5s;
transition: 0.5s;
-webkit-transform: rotateY(0deg) scale(0.8);
-ms-transform: rotateY(0deg) scale(0.8);
-o-transform: rotateY(0deg) scale(0.8);
-moz-transform: rotateY(0deg) scale(0.8);
transform: rotateY(0deg) scale(0.8);
opacity: 0.2;
}
ul li.b a:hover .fab {
opacity: 1;
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
-moz-transform: scale(1.2);
transform: scale(1.2);
}
ul li.b:nth-child(1) a, ul li.b:nth-child(1):before, ul li.b:nth-child(1):after {
background: linear-gradient(45deg, #adc0b3, #1dc200);
}
ul li.b:nth-child(2) a, ul li.b:nth-child(2):before, ul li.b:nth-child(2):after {
background: linear-gradient(45deg, #7289da, #053bff);
}
ul li.b:nth-child(3) a, ul li.b:nth-child(3):before, ul li.b:nth-child(3):after {
background: linear-gradient(45deg, #ff3863, #f10);
}
ul li.b:nth-child(4) a, ul li.b:nth-child(4):before, ul li.b:nth-child(4):after {
background: linear-gradient(45deg, #f0d, #90f);
}
.glitch {
font-size: 130px;
line-height: 1;
font-family: 'Poppins', sans-serif;
font-weight: 700;
position: absolute;
top: 80%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin: 0;
text-decoration: none;
color: #fff;
}
.glitch:before, .glitch:after {
display:block;
content: 'Discord Server Link Is Currently Unavailable.';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0.8;
} .glitch:after {
color: #f0f;
z-index: -2;
} .glitch:before {
color: #0ff;
z-index: -1;
}
.glitch:before {
-webkit-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
-moz-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
}
.glitch:after {
-webkit-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
-moz-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
}
#-webkit-keyframes glitch {
0% {
-webkit-transform: translate(0px);
transform: translate(0px);
}
20% {
-webkit-transform: translate(-5px, 5px);
transform: translate(-5px, 5px);
}
40% {
-webkit-transform: translate(-5px, -5px);
transform: translate(-5px, -5px);
}
60% {
-webkit-transform: translate(5px, 5px);
transform: translate(5px, 5px);
}
80% {
-webkit-transform: translate(5px, -5px);
transform: translate(5px, -5px);
}
100% {
-webkit-transform: translate(0px);
transform: translate(0px);
}
}
#-moz-keyframes glitch {
0% {
-moz-transform: translate(0px);
transform: translate(0px);
}
20% {
-moz-transform: translate(-5px, 5px);
transform: translate(-5px, 5px);
}
40% {
-moz-transform: translate(-5px, -5px);
transform: translate(-5px, -5px);
}
60% {
-moz-transform: translate(5px, 5px);
transform: translate(5px, 5px);
}
80% {
-moz-transform: translate(5px, -5px);
transform: translate(5px, -5px);
}
100% {
-moz-transform: translate(0px);
transform: translate(0px);
}
}
#-o-keyframes glitch {
0% {
-o-transform: translate(0px);
transform: translate(0px);
}
20% {
-o-transform: translate(-5px, 5px);
transform: translate(-5px, 5px);
}
40% {
-o-transform: translate(-5px, -5px);
transform: translate(-5px, -5px);
}
60% {
-o-transform: translate(5px, 5px);
transform: translate(5px, 5px);
}
80% {
-o-transform: translate(5px, -5px);
transform: translate(5px, -5px);
}
100% {
-o-transform: translate(0px);
transform: translate(0px);
}
}
#-moz-keyframes glitch {
0% {
-moz-transform: translate(0px);
transform: translate(0px);
}
20% {
-moz-transform: translate(-5px, 5px);
transform: translate(-5px, 5px);
}
40% {
-moz-transform: translate(-5px, -5px);
transform: translate(-5px, -5px);
}
60% {
-moz-transform: translate(5px, 5px);
transform: translate(5px, 5px);
}
80% {
-moz-transform: translate(5px, -5px);
transform: translate(5px, -5px);
}
100% {
-moz-transform: translate(0px);
transform: translate(0px);
}
}
#keyframes glitch {
0% {
transform: translate(0px);
}
20% {
transform: translate(-5px, 5px);
}
40% {
transform: translate(-5px, -5px);
}
60% {
transform: translate(5px, 5px);
}
80% {
transform: translate(5px, -5px);
}
100% {
transform: translate(0px);
}
}
.glitch {
font-size: 25px;
line-height: 1;
font-family: 'Poppins', sans-serif;
font-weight: 100;
position: absolute;
bottom:10px;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin: 0;
text-decoration: none;
color: #fff;
}
.glitch:before, .glitch:after {
display:block;
content: 'Discord Server Link Is Currently Unavailable';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0.8;
} .glitch:after {
color: #f0f;
z-index: -2;
} .glitch:before {
color: #0ff;
z-index: -1;
}
.glitch:before {
-webkit-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
-moz-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
}
.glitch:after {
-webkit-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
-moz-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
}
#-webkit-keyframes glitch {
0% {
-webkit-transform: translate(0px);
transform: translate(0px);
}
20% {
-webkit-transform: translate(-5px, 5px);
transform: translate(-5px, 5px);
}
40% {
-webkit-transform: translate(-5px, -5px);
transform: translate(-5px, -5px);
}
60% {
-webkit-transform: translate(5px, 5px);
transform: translate(5px, 5px);
}
80% {
-webkit-transform: translate(5px, -5px);
transform: translate(5px, -5px);
}
100% {
-webkit-transform: translate(0px);
transform: translate(0px);
}
}
#-o-keyframes glitch {
0% {
-o-transform: translate(0px);
transform: translate(0px);
}
20% {
-o-transform: translate(-5px, 5px);
transform: translate(-5px, 5px);
}
40% {
-o-transform: translate(-5px, -5px);
transform: translate(-5px, -5px);
}
60% {
-o-transform: translate(5px, 5px);
transform: translate(5px, 5px);
}
80% {
-o-transform: translate(5px, -5px);
transform: translate(5px, -5px);
}
100% {
-o-transform: translate(0px);
transform: translate(0px);
}
}
#-moz-keyframes glitch {
0% {
-moz-transform: translate(0px);
transform: translate(0px);
}
20% {
-moz-transform: translate(-5px, 5px);
transform: translate(-5px, 5px);
}
40% {
-moz-transform: translate(-5px, -5px);
transform: translate(-5px, -5px);
}
60% {
-moz-transform: translate(5px, 5px);
transform: translate(5px, 5px);
}
80% {
-moz-transform: translate(5px, -5px);
transform: translate(5px, -5px);
}
100% {
-moz-transform: translate(0px);
transform: translate(0px);
}
}
#keyframes glitch {
0% {
transform: translate(0px);
}
20% {
transform: translate(-5px, 5px);
}
40% {
transform: translate(-5px, -5px);
}
60% {
transform: translate(5px, 5px);
}
80% {
transform: translate(5px, -5px);
}
100% {
transform: translate(0px);
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GoldenAdrien's Social Accounts</title>
<link rel="stylesheet" href="css/home.css" type='text/css'>
<link rel='stylesheet' type='text/css' href='css/style.css'>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
<body>
<header>
<div class="container">
<nav>
<h1 class="brand"><a class='nav' href="index"><span class="textgradient">Golden</span><span class="textgradient2">Adr</span><span class="textgradient3">ien</span></a></h1>
<ul class="ulnav">
<li class="linav"><a class='nav' href="index">Home</a></li>
<li class="linav"><a class='nav2' href="#">Social Links</a></li>
<li class="linav"><a class='nav3' href="#">Programs</a></li>
<li class="linav"><a class='nav4' href="#">Contact Me</a></li>
</ul>
</nav>
</div>
<div class='c'>
<ul>
<li class='b'><i class="fab fa-deviantart" aria-hidden="true"></i></li>
<li class='b'><i class="fab fa-discord" aria-hidden="true"></i></li>
<li class='b'><i class="fab fa-youtube" aria-hidden="true"></i></li>
<li class='b'><i class="fab fa-github" aria-hidden="true"></i></li>
</ul>
Discord Server Link Is Currently Unavailable.
</div>
</header>
</body>
</html>

Inline WebSVG doesn't have crisp lines?

I have an svg background that starts as separated then in 3 secs of page load, is moved to form the background. You can see a large triangle from the start that has rather poor quality and is very choppy, what could be the cause of this?
Here is a Codepen link for example.
CSS
html,
body,
.avatar {
/* position: absolute; */
width: 100%;
/* height: 100%; */
display: block;
}
body {
background: -webkit-linear-gradient(90deg, #4CB8C4 10%, #3CD3AD 90%); /* Chrome 10+, Saf5.1+ */
background: -moz-linear-gradient(90deg, #4CB8C4 10%, #3CD3AD 90%); /* FF3.6+ */
background: -ms-linear-gradient(90deg, #4CB8C4 10%, #3CD3AD 90%); /* IE10 */
background: -o-linear-gradient(90deg, #4CB8C4 10%, #3CD3AD 90%); /* Opera 11.10+ */
background: linear-gradient(90deg, #4CB8C4 10%, #3CD3AD 90%); /* W3C */
}
.avatar {
z-index: 800;
}
.avatar path {
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transition: all 3s ease;
transition: all 3s ease;
-webkit-transform: translate(0);
-ms-transform: translate(0);
transform: translate(0);
}
.avatar path:nth-of-type(4n+1) {
-webkit-animation: p1 3s ease 1;
animation: p1 3s ease 1;
}
.avatar path:nth-of-type(4n+2) {
-webkit-animation: p2 3s ease 1;
animation: p2 3s ease 1;
}
.avatar path:nth-of-type(4n+3) {
-webkit-animation: p3 3s ease 1;
animation: p3 3s ease 1;
}
.avatar path:nth-of-type(4n+4) {
-webkit-animation: p4 3s ease 1;
animation: p4 3s ease 1;
}
.hover {
position: absolute;
width: 40%;
height: 40vw;
top: 50%;
left: 30%;
margin-top: -20vw;
border-radius: 50%;
cursor: pointer;
z-index: 1000;
visibility: hidden;
-webkit-animation: waitforit 0 ease-in 3s 1 forwards;
animation: waitforit 0 ease-in 3s 1 forwards;
}
.hover:hover + .avatar path:nth-of-type(4n+1) {
-webkit-transform: translate(800%, 400%) rotate(-690deg) translateZ(0);
transform: translate(800%, 400%) rotate(-690deg) translateZ(0);
}
.hover:hover + .avatar path:nth-of-type(4n+2) {
-webkit-transform: translate(-700%, 600%) rotate(-720deg) translateZ(0);
transform: translate(-700%, 600%) rotate(-720deg) translateZ(0);
}
.hover:hover + .avatar path:nth-of-type(4n+3) {
-webkit-transform: translate(-900%, -500%) rotate(-820deg) translateZ(0);
transform: translate(-900%, -500%) rotate(-820deg) translateZ(0);
}
.hover:hover + .avatar path:nth-of-type(4n+4) {
-webkit-transform: translate(700%, -800%) rotate(-950deg) translateZ(0);
transform: translate(700%, -800%) rotate(-950deg) translateZ(0);
}
p {
position: absolute;
bottom: 0.5em;
font-family: sans-serif;
font-weight: 100;
letter-spacing: 0.1em;
color: #fff;
border-left: 20px solid #fff;
padding: 2px 0 0 4px;
left: -50%;
-webkit-animation: infromleft 0.5s ease-in 1 forwards;
animation: infromleft 0.5s ease-in 1 forwards;
}
#-webkit-keyframes p1 {
0% {
-webkit-transform: translate(-300%, -700%) rotate(520deg) translateZ(0);
transform: translate(-300%, -700%) rotate(520deg) translateZ(0);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
#keyframes p1 {
0% {
-webkit-transform: translate(-300%, -700%) rotate(520deg) translateZ(0);
transform: translate(-300%, -700%) rotate(520deg) translateZ(0);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
#-webkit-keyframes p2 {
0% {
-webkit-transform: translate(400%, -900%) rotate(850deg) translateZ(0);
transform: translate(400%, -900%) rotate(850deg) translateZ(0);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
#keyframes p2 {
0% {
-webkit-transform: translate(400%, -900%) rotate(850deg) translateZ(0);
transform: translate(400%, -900%) rotate(850deg) translateZ(0);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
#-webkit-keyframes p3 {
0% {
-webkit-transform: translate(500%, 900%) rotate(325deg) translateZ(0);
transform: translate(500%, 900%) rotate(325deg) translateZ(0);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
#keyframes p3 {
0% {
-webkit-transform: translate(500%, 900%) rotate(325deg) translateZ(0);
transform: translate(500%, 900%) rotate(325deg) translateZ(0);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
#-webkit-keyframes p4 {
0% {
-webkit-transform: translate(-500%, 900%) rotate(748deg) translateZ(0);
transform: translate(-500%, 900%) rotate(748deg) translateZ(0);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
#keyframes p4 {
0% {
-webkit-transform: translate(-500%, 900%) rotate(748deg) translateZ(0);
transform: translate(-500%, 900%) rotate(748deg) translateZ(0);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
#-webkit-keyframes waitforit {
0% {
visibility: hidden;
}
100% {
visibility: visible;
}
}
#keyframes waitforit {
0% {
visibility: hidden;
}
100% {
visibility: visible;
}
}
#-webkit-keyframes infromleft {
0% {
left: -50%;
}
100% {
left: 0;
}
}
#keyframes infromleft {
0% {
left: -50%;
}
100% {
left: 0;
}
}
Thanks for the help everyone.

Alright, so #Sirko pointed out it was using a PNG as a source, so this is partly credited to him.
I was changing the colors of my triangles earlier on in AI, and I clicked the gradient mesh tool and added extra points to my triangle, which in turn caused that single triangle to be treated as a .png.
Thanks for the help everyone, appreciate it!

Not able to change font HTML/CSS

For some reason, I am unable to change the font of any of my text on the website. I have a feeling something in one of the CSS files is overriding this. Here are some of my CSS files:
Style:
#import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,900");
#import url("font-awesome.min.css");
/* Basic */
body, input, select, textarea {
color: white;
font-size: 15pt;
font-weight: 300 !important;
letter-spacing: -0.025em;
line-height: 1.75em;
}
body {
}
body.loading * {
-moz-animation: none !important;
-webkit-animation: none !important;
-o-animation: none !important;
-ms-animation: none !important;
animation: none !important;
}
a {
-moz-transition: border-color 0.2s ease-in-out;
-webkit-transition: border-color 0.2s ease-in-out;
-o-transition: border-color 0.2s ease-in-out;
-ms-transition: border-color 0.2s ease-in-out;
transition: border-color 0.2s ease-in-out;
border-bottom: dotted 1px;
color: inherit;
outline: 0;
text-decoration: none;
}
a:hover {
border-color: transparent;
}
/* Icon */
.icon:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-transform: none !important;
}
.icon > .label {
display: none;
}
/* Wrapper */
#-moz-keyframes wrapper { 0% { opacity: 0; } 100% { opacity: 1; } }
#-webkit-keyframes wrapper { 0% { opacity: 0; } 100% { opacity: 1; } }
#-o-keyframes wrapper { 0% { opacity: 0; } 100% { opacity: 1; } }
#-ms-keyframes wrapper { 0% { opacity: 0; } 100% { opacity: 1; } }
#keyframes wrapper { 0% { opacity: 0; } 100% { opacity: 1; } }
/* BG */
/* Overlay */
#-moz-keyframes overlay { 0% { opacity: 0; } 100% { opacity: 1; } }
#-webkit-keyframes overlay { 0% { opacity: 0; } 100% { opacity: 1; } }
#-o-keyframes overlay { 0% { opacity: 0; } 100% { opacity: 1; } }
#-ms-keyframes overlay { 0% { opacity: 0; } 100% { opacity: 1; } }
#keyframes overlay { 0% { opacity: 0; } 100% { opacity: 1; } }
#overlay {
-moz-animation: overlay 1.5s 1.5s forwards;
-webkit-animation: overlay 1.5s 1.5s forwards;
-o-animation: overlay 1.5s 1.5s forwards;
-ms-animation: overlay 1.5s 1.5s forwards;
animation: overlay 1.5s 1.5s forwards;
background-attachment: fixed, fixed;
background-image: url("images/overlay-pattern.png"), url("images/bg.jpg");
background-position: top left, center center;
background-repeat: repeat, no-repeat;
background-size: auto, cover;
height: 100%;
left: 0;
opacity: 0;
position: fixed;
top: 0;
width: 100%;
}
/* Main */
#main {
height: 100%;
left: 0;
position: fixed;
text-align: center;
top: 0;
font-family: "Times New Roman";
width: 100%;
}
#main:before {
content: '';
display: inline-block;
height: 100%;
margin-right: 0;
vertical-align: middle;
width: 1px;
}
/* Header */
#-moz-keyframes header { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -o-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } }
#-webkit-keyframes header { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -o-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } }
#-o-keyframes header { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -o-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } }
#-ms-keyframes header { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -o-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } }
#keyframes header { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -o-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } }
#-moz-keyframes nav-icons { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -o-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } }
#-webkit-keyframes nav-icons { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -o-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } }
#-o-keyframes nav-icons { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -o-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } }
#-ms-keyframes nav-icons { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -o-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } }
#keyframes nav-icons { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -o-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } }
#header {
-moz-animation: header 1s 2.25s forwards;
-webkit-animation: header 1s 2.25s forwards;
-o-animation: header 1s 2.25s forwards;
-ms-animation: header 1s 2.25s forwards;
animation: header 1s 2.25s forwards;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
cursor: default;
display: inline-block;
opacity: 0;
position: relative;
text-align: center;
top: -1em;
vertical-align: middle;
width: 90%;
}
#header h1 {
font-size: 4.35em;
font-weight: 900;
letter-spacing: -0.035em;
line-height: 1em;
}
#FirstP{
margin-top: -120px;
font-size: 10px;
}
#Noah{
margin-right: 700px;
font-size: 10px;
}
#ThirdP{
margin-left: 700px;
margin-top: -120px;
font-size: 10px;
}
#FourthP{
font-size: 10px;
}
#FifthP{
margin-left:700px;
margin-top: -125px;
font-size: 10px
}
#SixthP{
margin-right: 700px;
margin-top: -115px;
font-size: 10px;
}
#header p {
font-size: 1.25em;
margin: 0.75em 0 0.25em 0;
opacity: 0.75;
}
#header nav {
margin: 1.5em 0 0 0;
}
#header nav li:nth-child(1) {
-moz-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
-o-animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
animation-delay: 2.5s;
}
#header nav li:nth-child(2) {
-moz-animation-delay: 2.75s;
-webkit-animation-delay: 2.75s;
-o-animation-delay: 2.75s;
-ms-animation-delay: 2.75s;
animation-delay: 2.75s;
}
#header nav li:nth-child(3) {
-moz-animation-delay: 3s;
-webkit-animation-delay: 3s;
-o-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
#header nav li:nth-child(4) {
-moz-animation-delay: 3.25s;
-webkit-animation-delay: 3.25s;
-o-animation-delay: 3.25s;
-ms-animation-delay: 3.25s;
animation-delay: 3.25s;
}
#header nav li:nth-child(5) {
-moz-animation-delay: 3.5s;
-webkit-animation-delay: 3.5s;
-o-animation-delay: 3.5s;
-ms-animation-delay: 3.5s;
animation-delay: 3.5s;
}
#header nav li:nth-child(6) {
-moz-animation-delay: 3.75s;
-webkit-animation-delay: 3.75s;
-o-animation-delay: 3.75s;
-ms-animation-delay: 3.75s;
animation-delay: 3.75s;
}
#header nav li:nth-child(7) {
-moz-animation-delay: 4s;
-webkit-animation-delay: 4s;
-o-animation-delay: 4s;
-ms-animation-delay: 4s;
animation-delay: 4s;
}
#header nav li:nth-child(8) {
-moz-animation-delay: 4.25s;
-webkit-animation-delay: 4.25s;
-o-animation-delay: 4.25s;
-ms-animation-delay: 4.25s;
animation-delay: 4.25s;
}
#header nav li:nth-child(9) {
-moz-animation-delay: 4.5s;
-webkit-animation-delay: 4.5s;
-o-animation-delay: 4.5s;
-ms-animation-delay: 4.5s;
animation-delay: 4.5s;
}
#header nav li:nth-child(10) {
-moz-animation-delay: 4.75s;
-webkit-animation-delay: 4.75s;
-o-animation-delay: 4.75s;
-ms-animation-delay: 4.75s;
animation-delay: 4.75s;
}
#header nav a {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
border: 0;
display: inline-block;
}
#header nav a:before {
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
border-radius: 100%;
border: solid 1px white;
display: block;
font-size: 1.75em;
height: 2.5em;
line-height: 2.5em;
position: relative;
text-align: center;
top: 0;
width: 2.5em;
}
#header nav a:hover:before {
background-color: rgba(255, 255, 255, 0.175);
color: white;
}
#header nav a:active {
font-size: 0.95em;
background: none;
}
#header nav a:active:before {
background-color: rgba(255, 255, 255, 0.35);
color: white;
}
#header nav a span {
display: none;
}
#footer {
background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%);
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%);
background-image: -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%);
background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%);
background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%);
cursor: default;
height: 6em;
left: 0;
line-height: 8em;
width: 100%;
}`

Perhaps your text is inside the #main div hence getting the times new roman font? Hard to tell without the markup but it does'nt seem like there's an error with font import-
Tried with the top part of your css to set font to source sans pro like so:
p {
font-family:'source sans pro'
}
which seems to work: http://jsfiddle.net/61uzrL80/

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

How to fix hover effect not happening - html

Related

Pictures don't align and won't scale properly

how to add pulse animation with one after other in css like traffic lights blinks continously

Why does my website have the white box at the bottom?

Inline WebSVG doesn't have crisp lines?

Not able to change font HTML/CSS

Categories

Resources