After scouring through numerous Stack Overflow questions and conducting countless Google searches, I am still stumped by the issue at hand. As a beginner in web development, all I want is for this simple page to function properly. Can someone please point out where I may be going wrong? It's likely just a minor mistake with an easy fix. Apologies in advance. Thank you!
Snippet of My HTML head:
<head>
<meta charset="utf-8">
<title>Sheila Mary Daniels</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Local scripts and stylesheets -->
<link rel="stylesheet" href="style.css">
<script type = "text/javascript" src="script.js" charset="utf-8"></script>
<!-- jQuery -->
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" charset="utf-8"></script>
<!-- Bootstrap -->
<script type = "text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/>
<!-- Font Awesome -->
<script src="https://use.fontawesome.com/7dd8dcb030.js"></script>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Dancing+Script|Sofia" rel="stylesheet">
</head>
My CSS:
(fully operational)
body {
margin-top: 60px;
background-image: url("https://flowerillust.com/img/flower/flower-back0950.jpg");
background-size: cover;
}
#image {
display: block;
margin-left: auto;
margin-right: auto;
width: 600px;
height: 900px;
}
p {
font-size: 20px;
margin-bottom: 30px;
margin-top: 20px;
}
#header {
margin-bottom: 10px;
font-size: 70px;
color: Purple;
font-family: Dancing Script;
/* font-family: Sofia */
}
.scripture {
font-family: Dancing Script;
float: right;
margin-right: 150px;
}
a:hover {
text-decoration: underline;
}
My JavaScript:
$(document).ready(function() {
$("#header").hide().fadeIn(5000);
$("#image").hide().fadeIn(5000);
});
Despite my efforts, it seems that there's nothing fundamentally flawed with my code as showcased on my CodePen. Both my CSS and JS files are external, and as evident, the CSS executes perfectly. The root of my dilemma lies within the JS, but I can't quite pinpoint the error.
UPDATE:
In response to suggestions provided in comments, I proceeded to rearrange my <link> and <script> tags, yet the issue persists.