I'm a beginner and I can't for the life of me get some simple jquery working with my html

I'm a beginner and I can't for the life of me get some simple jquery working with my html

My HTML is
<!DOCTYPE html>
<link type="text/css" rel="stylesheet" href="../../page.css"/>

<html>
 <head>
 <title>New</title>

 <script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
 </head>

 <body>

 <div class="image">
                            <img src="1.png"/></a>
                        </div>
                       
                        <p>
                        Hello World
                        </p>
                       
    </div>
    </body>

My own javascript in is:
function main() {

$('.image').fadeIn(1000);
 
}

$(document).ready(main);


I downloaded the jquery library and saved it in a folder called js.
I have my own javascript code called main and also saved in the folder js.
I'm trying to basically do anything with jquery but I can't get anything to work.
Here I'm just trying to make my image fade in and nothing works.
I just recently just went through the codeacademy and I can't get my own code working locally.
Please help, I'm a complete newbie in actual coding.