As someone who is just dipping their toes into the world of coding, I've been experimenting with code in my free time. However, I've encountered an issue with a certain code where the CSS seems to have a noticeable delay. Upon initial loading, the background turns solid pink for a moment, the font changes, and the social media icons at the bottom of the screen don't show up. Despite searching for solutions, I couldn't quite grasp the answers provided as I'm relatively new to coding, only having started about 3 weeks ago.
Below you will find both my HTML and CSS code:
/* BODY */
body {
background-image: url('https://i.ibb.co/vPn6tqR/clouds.jpg');
}
.cover-body {
background-color: #ffd5cd;
font-family: 'Libre Baskerville', serif;
color: #8675a9;
position: relative;
text-align: center;
height: 100%;
}
.cover-btn {
font-size: 80%;
font-weight: bold;
color: #8675a9;
letter-spacing: 1.5px;
border-width: medium;
}
.cover-btn:hover {
color: #2e2933;
}
.cover-header {
font-family: 'Great Vibes', cursive;
font-size: 6rem;
}
.cover-p {
margin-top: 15%;
margin-left: 20%;
font-size: 1.5rem;
}
.pc-cover-logo {
height: 6rem;
width: 7rem;
position: absolute;
right: 63%;
bottom:84%;
}
/* FOOTER */
a {
color: #8675a9;
}
a:hover {
color: #c3aed6;
}
.footer {
font-size: 80%;
margin-top: 6%;
margin-bottom: 0;
}
.social-media-icons {
word-spacing: 1.5rem;
padding-bottom: 2rem;
}<!DOCTYPE html>
<html lang="en>
<!-- HEAD -->
<head>
...
<!-- Font Awesome -->
</head>
<!-- BODY -->
...
<!-- FOOTER -->
If you have any suggestions or guidance, they would be greatly appreciated!