Despite my efforts to initialize the code, I am still unable to display the images. I've only been coding for two days, so I'm clueless about what else could be causing this issue. Here is the current state of my code. Thank you in advance!
<!DOCTYPE html>
<html>
<head>
<title>About Me</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<link rel="stylesheet" type="text/css" href="bio.css">
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script src="jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="parallax-container">
<div class="parallax"><img src="http://kids.nationalgeographic.com/content/dam/kids/photos/animals/Mammals/H-P/pig-young-closeup.ngsversion.1412640764383.adapt.945.1.jpg"></div>
</div>
<div class="row container">
<h2>About Me</h2>
<p>brief description about myself</p>
</div>
<div class="parallax-container">
<div class="parallax"><img src="http://kids.nationalgeographic.com/content/dam/kids/photos/animals/Mammals/H-P/pig-young-closeup.ngsversion.1412640764383.adapt.945.1.jpg"></div>
</div>
<script>
$(document).ready(function(){
$('.parallax').parallax();
});
</script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>