Not able to change font HTML/CSS

Not able to change font HTML/CSS - html

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/

Related

Centering a span inside a div

I have a rotating text slider on my website that uses keyframe transitions.
I have all the text centered but the text inside the span sits to the side and I have tried everything I can think of to center it with no job.
/*Sentence*/
.sentence{
color: #999;
font-size: 3em;
text-align:center;
}
/*Wrapper*/
.wrapper{
font-family: serif;
text-align:center;
position: relative;
width: 100%;
}
/*Vertical Sliding*/
.slidingVertical{
display: inline;
}
.slidingVertical span{
animation: topToBottom 12.5s linear infinite 0s;
-ms-animation: topToBottom 12.5s linear infinite 0s;
-webkit-animation: topToBottom 12.5s linear infinite 0s;
color: #00abe9;
opacity: 0;
overflow: hidden;
position: absolute;
}
.slidingVertical span:nth-child(2){
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.slidingVertical span:nth-child(3){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.slidingVertical span:nth-child(4){
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
.slidingVertical span:nth-child(5){
animation-delay: 10s;
-ms-animation-delay: 10s;
-webkit-animation-delay: 10s;
}
/*topToBottom Animation*/
#-moz-keyframes topToBottom{
0% { opacity: 0; }
5% { opacity: 0; -moz-transform: translateY(-50px); }
10% { opacity: 1; -moz-transform: translateY(0px); }
25% { opacity: 1; -moz-transform: translateY(0px); }
30% { opacity: 0; -moz-transform: translateY(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-webkit-keyframes topToBottom{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: translateY(-50px); }
10% { opacity: 1; -webkit-transform: translateY(0px); }
25% { opacity: 1; -webkit-transform: translateY(0px); }
30% { opacity: 0; -webkit-transform: translateY(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-ms-keyframes topToBottom{
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: translateY(-50px); }
10% { opacity: 1; -ms-transform: translateY(0px); }
25% { opacity: 1; -ms-transform: translateY(0px); }
30% { opacity: 0; -ms-transform: translateY(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
<section class="wrapper">
<div class="sentence">
<p>header text - why use our service</p>
<div class="slidingVertical">
<span style="color:white; background:#018fcf">Best service on the market</span>
<span style="color:white; background:#0e7dcb">reason 1</span>
<span style="color:white; background:#1977B0">Long reason 2 - best value for money</span>
<span style="color:white; background:#276cb1">reason 3</span>
<span style="color:white; background:#125eaa">reason 5</span>
</div>
<br>
<p>footer text - service is epic</p>
</div>
</section>
Also as you will see, the span doesnt fit to the size of the text and forces the text to wrap.
I have tried increasing the div and span to 100% width but that seems to decrease it to 0 for some strange reason.

It's because you position your spans absolutely - you need to center that absolute by adding left:50% and translating the x back -50%
I have also added position relative to your container:
/*Sentence*/
.sentence{
color: #999;
font-size: 3em;
text-align:center;
}
/*Wrapper*/
.wrapper{
font-family: serif;
text-align:center;
position: relative;
width: 100%;
}
/*Vertical Sliding*/
.slidingVertical{
position:relative;
}
.slidingVertical span{
animation: topToBottom 12.5s linear infinite 0s;
-ms-animation: topToBottom 12.5s linear infinite 0s;
-webkit-animation: topToBottom 12.5s linear infinite 0s;
color: #00abe9;
opacity: 0;
overflow: hidden;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
.slidingVertical span:nth-child(2){
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.slidingVertical span:nth-child(3){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.slidingVertical span:nth-child(4){
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
.slidingVertical span:nth-child(5){
animation-delay: 10s;
-ms-animation-delay: 10s;
-webkit-animation-delay: 10s;
}
/*topToBottom Animation*/
#-moz-keyframes topToBottom{
0% { opacity: 0; -moz-transform: translate(-50%, -50px); }
5% { opacity: 0; -moz-transform: translate(-50%, -50px); }
10% { opacity: 1; -moz-transform: translate(-50%, 0px); }
25% { opacity: 1; -moz-transform: translate(-50%, 0px); }
30% { opacity: 0; -moz-transform: translate(-50%, 50px); }
80% { opacity: 0; -moz-transform: translate(-50%, 50px); }
100% { opacity: 0; -moz-transform: translate(-50%, 50px); }
}
#-webkit-keyframes topToBottom{
0% { opacity: 0; -webkit-transform: translate(-50%, -50px); }
5% { opacity: 0; -webkit-transform: translate(-50%, -50px); }
10% { opacity: 1; -webkit-transform: translate(-50%, 0px); }
25% { opacity: 1; -webkit-transform: translate(-50%, 0px); }
30% { opacity: 0; -webkit-transform: translate(-50%, 50px); }
80% { opacity: 0; -webkit-transform: translate(-50%, 50px); }
100% { opacity: 0; -webkit-transform: translate(-50%, 50px); }
}
#-ms-keyframes topToBottom{
0% { opacity: 0; -ms-transform: translate(-50%, -50px); }
5% { opacity: 0; -ms-transform: translate(-50%, -50px); }
10% { opacity: 1; -ms-transform: translate(-50%, 0px); }
25% { opacity: 1; -ms-transform: translate(-50%, 0px); }
30% { opacity: 0; -ms-transform: translate(-50%, 50px); }
80% { opacity: 0;-ms-transform: translate(-50%, 50px); }
100% { opacity: 0;-ms-transform: translate(-50%, 50px); }
}
<section class="wrapper">
<div class="sentence">
<p>header text - why use our service</p>
<div class="slidingVertical">
<span style="color:white; background:#018fcf">Best service on the market</span>
<span style="color:white; background:#0e7dcb">reason 1</span>
<span style="color:white; background:#1977B0">Long reason 2 - best value for money</span>
<span style="color:white; background:#276cb1">reason 3</span>
<span style="color:white; background:#125eaa">reason 5</span>
</div>
<br>
<p>footer text - service is epic</p>
</div>
</section>

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>

How to fix hover effect not happening

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?

delay css class property when js is disabled

I am working on a project. I want to run some css property after 4000 ms. I want to run this only when javascript is disabled(if js is enabled, It will remove that class.).
How can I do this. Is it possible? If not any other solution?
Thanks for help in advance.

I didn't find any answer on web. So I tried last 3 days only for this and finally I got the solution. Here is the solution:
$(window).load(function() {
$(".loader").delay(3000).fadeOut(500, function() {
$(".main-cont").hide();
});
})
body {
margin: 0px;
padding: 0px;
background-color: #4CAF50;
color: #FFF;
font-family: arial;
font-size: 20px;
}
.main-cont {
background-color: #3F51B5;
width: 100vw;
height: 100vh;
display: inline-block;
padding-top: calc(50vh - 20px);
position: fixed;
text-align: center;
line-height: 20px;
opacity: 0;
-webkit-animation: css-delay 0ms infinite ease-in-out;
-moz-animation: css-delay 0ms infinite ease-in-out;
-ms-animation: css-delay 0ms infinite ease-in-out;
-o-animation: css-delay 0ms infinite ease-in-out;
-khtml-animation: css-delay 0ms infinite ease-in-out;
animation: css-delay 0ms infinite ease-in-out;
-webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
animation-iteration-count: 1;
animation-delay : 10s; /* time for delay animation */
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.cont {
text-align: center;
display: block;
line-height: 20px;
padding-top: calc(50vh - 20px);
}
#keyframes css-delay {
0% {
opacity: 0;
display: none;
}
100% {
opacity: 1;
display: block;
}
}
/* this is only for loading animation */
.loader {
height: 100vh;
width: 100%;
display: inline-block;
/* display: none; */
position: fixed;
z-index: 0;
background-color: #333;
}
.sk-circle {
margin: 100px auto;
width: 40px;
height: 40px;
position: relative;
}
.sk-circle .sk-child {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.sk-circle .sk-child:before {
content: '';
display: block;
margin: 0 auto;
width: 15%;
height: 15%;
background-color: #FFF;
border-radius: 100%;
-webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
}
.sk-circle .sk-circle2 {
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg); }
.sk-circle .sk-circle3 {
-webkit-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg); }
.sk-circle .sk-circle4 {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); }
.sk-circle .sk-circle5 {
-webkit-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg); }
.sk-circle .sk-circle6 {
-webkit-transform: rotate(150deg);
-ms-transform: rotate(150deg);
transform: rotate(150deg); }
.sk-circle .sk-circle7 {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg); }
.sk-circle .sk-circle8 {
-webkit-transform: rotate(210deg);
-ms-transform: rotate(210deg);
transform: rotate(210deg); }
.sk-circle .sk-circle9 {
-webkit-transform: rotate(240deg);
-ms-transform: rotate(240deg);
transform: rotate(240deg); }
.sk-circle .sk-circle10 {
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg); }
.sk-circle .sk-circle11 {
-webkit-transform: rotate(300deg);
-ms-transform: rotate(300deg);
transform: rotate(300deg); }
.sk-circle .sk-circle12 {
-webkit-transform: rotate(330deg);
-ms-transform: rotate(330deg);
transform: rotate(330deg); }
.sk-circle .sk-circle2:before {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s; }
.sk-circle .sk-circle3:before {
-webkit-animation-delay: -1s;
animation-delay: -1s; }
.sk-circle .sk-circle4:before {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s; }
.sk-circle .sk-circle5:before {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s; }
.sk-circle .sk-circle6:before {
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s; }
.sk-circle .sk-circle7:before {
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s; }
.sk-circle .sk-circle8:before {
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s; }
.sk-circle .sk-circle9:before {
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s; }
.sk-circle .sk-circle10:before {
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s; }
.sk-circle .sk-circle11:before {
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s; }
.sk-circle .sk-circle12:before {
-webkit-animation-delay: -0.1s;
animation-delay: -0.1s; }
#-webkit-keyframes sk-circleBounceDelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
} 40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes sk-circleBounceDelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
} 40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="loader">
<div class="sk-circle">
<div class="sk-circle1 sk-child"></div>
<div class="sk-circle2 sk-child"></div>
<div class="sk-circle3 sk-child"></div>
<div class="sk-circle4 sk-child"></div>
<div class="sk-circle5 sk-child"></div>
<div class="sk-circle6 sk-child"></div>
<div class="sk-circle7 sk-child"></div>
<div class="sk-circle8 sk-child"></div>
<div class="sk-circle9 sk-child"></div>
<div class="sk-circle10 sk-child"></div>
<div class="sk-circle11 sk-child"></div>
<div class="sk-circle12 sk-child"></div>
</div>
</div>
<div class="main-cont">
<a>please enable javascript on your browser.<br>
(uncomment out all js to see content.)
</a>
</div>
<div class="cont">
<a>all of youre contents.<br>
(just comment out all js to see result.)
</a>
</div>

how can animate image

I want to stop this animation again and again, also when animations is finished spacecraft go right & fly with rotates.
jsfiddle
/* Table of contents
---------------
- Imports
- Mixins
- Extends
- Main Elements
*/
/*
IMPORTS
*/
#import url("http://fonts.googleapis.com/css?family=Montserrat");
/*
MIXINS
*/
/*
EXTENDS
*/
.center-hv, .ufo {
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/*
CONTAINER
*/
.loading {
font-family: 'Montserrat', sans-serif;
background-color: #2e5b8d;
color: white;
position: fixed;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
top: 0;
left: 0;
-webkit-transition: 2s ease-in-out;
-moz-transition: 2s ease-in-out;
-o-transition: 2s ease-in-out;
-ms-transition: 2s ease-in-out;
transition: 2s ease-in-out;
}
/*
MAIN ELEMENTS
*/
.ufo {
position: absolute;
background-image: url("http://www.picz.ge/img/s2/1503/25/d/d3ea7c2c9736.png");
width: 130px;
height: 256px;
top: 55%;
}
.ufo.light {
background-image: url("http://biacosta.com/img/loading/ufoLight.png");
opacity: 0;
-webkit-animation: 3s ease-in-out infinite normal running;
-moz-animation: 3s ease-in-out infinite normal running;
-o-animation: 3s ease-in-out infinite normal running;
-ms-animation: 3s ease-in-out infinite normal running;
animation: 3s ease-in-out infinite normal running;
-webkit-animation-name: switch;
-moz-animation-name: switch;
-o-animation-name: switch;
-ms-animation-name: switch;
animation-name: switch;
}
#-webkit-keyframes switch {
30% {
opacity: 0;
}
40% {
opacity: 1;
}
80% {
opacity: 1;
}
90% {
opacity: 0;
}
}
#-moz-keyframes switch {
30% {
opacity: 0;
}
40% {
opacity: 1;
}
80% {
opacity: 1;
}
90% {
opacity: 0;
}
}
#keyframes switch {
30% {
opacity: 0;
}
40% {
opacity: 1;
}
80% {
opacity: 1;
}
90% {
opacity: 0;
}
}
.small-ghost {
position: absolute;
background-image: url("http://www.picz.ge/img/s2/1503/25/9/93b31db2958a.png");
width: 61px;
height: 53px;
bottom: 15px;
opacity: 1;
-webkit-animation: 3s ease-in-out infinite normal;
-moz-animation: 3s ease-in-out infinite normal;
-o-animation: 3s ease-in-out infinite normal;
-ms-animation: 3s ease-in-out infinite normal;
animation: 3s ease-in-out infinite normal;
-webkit-animation-name: float;
-moz-animation-name: float;
-o-animation-name: float;
-ms-animation-name: float;
animation-name: float;
right: 32px;
}
#-webkit-keyframes float {
0% {
opacity: 1;
bottom: 15px;
}
20% {
opacity: 1;
}
50% {
opacity: 0.5;
bottom: 15px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
90% {
bottom: 150px;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
opacity: 0;
}
}
#-moz-keyframes float {
0% {
opacity: 0;
bottom: 15px;
}
20% {
opacity: 1;
}
50% {
opacity: 0.5;
right: 45px;
bottom: 15px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
90% {
right: 45px;
bottom: 150px;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
opacity: 0;
}
}
#keyframes float {
0% {
opacity: 0;
right: -130px;
bottom: 15px;
}
20% {
opacity: 1;
}
50% {
opacity: 0.5;
right: 45px;
bottom: 15px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
90% {
right: 45px;
bottom: 150px;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
opacity: 0;
}
}
<div class="loading">
<div class="ufo light"></div>
<div class="ufo">
<div class="small-ghost"></div>
</div>

i want to stop this animation
If you do not want the animation to be infinite then replace all infinite values in all animation (with its suffixes) properties with 1. This value is related to animation-iteration-count so animation count will be 1 instead of infinite.
After that a small enchantment left in .small-ghost. It should have initial opacity set to 0 to be hidden after the animation.
https://jsfiddle.net/g1uh1Lsk/1/
also when animations is finished spacecraft go right & fly with rotates.
It's better to try to make this part by yourself and then ask a concrete question if something goes wrong.

We Keep Coding

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

Not able to change font HTML/CSS - html

Related

Centering a span inside a div

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

How to fix hover effect not happening

delay css class property when js is disabled

how can animate image

Categories

Resources