How do I get this div fade in when the page loads?

I'm trying to get the two text boxes as well as the three images to fade in as soon as the page loads. I've tried using a bit of jQuery with .onload but I can't seem to figure it out.

Here's the JSFiddle

HTML Code

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Me</title>
<script src="../js/modernizr.custom.85628.js"></script>
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Montserrat:700' rel='stylesheet' type='text/css'>
<link href="../css/normalize.css" rel="stylesheet" type="text/css" />
<link rel="icon" type="text/css" href="../images/favicon.png" />

<script type="text/javascript">
$(document).ready(function(e) {

});


</script>
</head>

<body>
<section class="main_front">
<nav id="nav_container">

<div class="logo"><img src="../images/logo.png" height="65px" /></div><!--end of logo-->
<ul class="right_links">
<li class="nav_li"><a href="#">Goals</a></li>
<li class="nav_li"><a href="#">School Site</li></a>
<li class="nav_li"><a href="#">Web Design</li></a>
<li class="nav_li"><a href="#">Summer</li></a>
<li class="nav_li"><a href="#">Schedule</li></a>
</ul><!--end of right_links-->

</nav><!--end of nav_container-->
<div class="all_home">

<div class="home">
<div class="home_content">
Total Recall
</div><!--end of home_content-->

<div class="home_content2">
<p>A webpage about me.</p>
</div><!--end of home_content2-->
</div><!--end of home-->

<div class="home_imgs">

<div class="iphone">
<img src="../images/iphone.png" width="75" height="130" />
</div><!--end of iphone-->

<div class="computer">
<img src="../images/computer.png" width="135" height="130" />
</div><!--end of computer-->

<div class="ipad">
<img src="../images/ipad-outline.png" width="95" height="130" />
</div><!--end of ipad-->
</div><!--end of home_imgs-->

</div><!--end of all_home-->
</section><!--end of main_front-->



<section class="footer">
<div class="contact">
<div class="phonenumber">
<img src="../images/23194.png" width="20" height="20" /> 239-XXX-XXXX
</div><!--end of phonenumber-->
<div class="email">
<img src="../images/icon-ios7-email-outline-128.png" width="23" height="23" class="mail_icon"/>
<a href="mailto:[email protected]">[email protected]</a>
</div><!--end of email-->
</div><!--end of contact-->
</section><!--end of footer-->
</body>
</html>

CSS Code

@charset "utf-8";
/* CSS Document */

body {
    margin:0;
    margin:none;    
}

.logo {
    float:left;
    margin-top:5px; 
}

.main_front {
    width:100%;
    height:90vh;
    background-color:#A9D2F1;   
}

/* .nav_links {
    width:1600px;
    height:100px;
    margin:auto;
    color:white;    
} */

.nav_li {
    float:right;
    margin-right:20px;
}




#nav_container {
    width:100%;
    height:79px;    
    /*background-color:#82B5E8;*/
    background-image:url(../images/nav_container_bg.png);
}

.right_links {
    width:70%;
    float:right;
    list-style-type:none;
    text-align:center;
}

.right_links a {
    display:inline-block;
    list-style-type:none;
    text-decoration:none;
    color:white;
    font-size:17px;
    margin-top:0px;
    height:30px;
    padding-top:15px;
    font-family:Montserrat, "Arial Black", Gadget, sans-serif;
}

.right_links li {
    width:130px;
    height:40px;    
    line-height:10px;
    text-align:center;  
    border-radius:15px;
    transition:all 0.5s;
    -moz-transition:all 0.5s;
    -webkit-transition:all 0.5s;
    -ms-transition:all 0.5s;
}

.right_links li a {
    display:block;
    width:130px;
    height:40px;
}



.right_links li:hover {
    background-color:rgba(22,96,131,0.5);

}   

.phonenumber {
    font-size:20px;
    text-align:center;  
    margin-right:25px;
}

.phonenumber img {
    margin-top:4px; 
}

.contact {
    width:500px;
    height:9vh;
    background-color:#80b1e1;   
    border-radius:5px;
    margin:auto;
    position:relative;
}

.email {
    font-size:20px;
    text-align:center;
    margin-top:5px;
}

.mail_icon {
    position:absolute;
    margin-left:-25px;
    margin-top:1px;
}

.email a {
    color:#000;
    text-decoration:none;
    transition:0.3s;    
}

.email a:hover {
    color:#313131;
}   

.footer {
    width:100%;
    height:10vh;
    background-color:#8FC6ED;
}   

.all_home {
    width:100%;
    height:700px;
    margin:auto;
}

.home_content {
    width:175px;
    height:30px;
    background-color:#6886CC;
    border-radius:15px;
    margin:auto;
    position:relative;
    margin-top:30px;
    padding:15px;
    padding-bottom:20px;
    padding-left:25px;
    padding-right:25px;
    color:#ffffff;
    font-size:32px;
    text-align:center;
}

.home_content2 {
    width:275px;
    height:40px;
    background-color:#6886CC;
    border-radius:10px;
    margin:auto;
    position:relative;
    color:#ffffff;
    font-size:22px;
    text-align:center;
    margin-top:25px;
    line-height:40px;
    padding-left:10px;
    padding-right:10px;
}

.home_imgs {
    display:inline;
    width:600px;
    height:300px;
    margin:auto;
    position:relative;
}

.iphone {   
    margin-top:20px;
    float:left; 
    margin-left:511px;
}

.computer {
    margin-top:21px;
    margin-left:61px;
    float:left;
}

.ipad {
    margin-top:20px;
    margin-left:56px;
    float:left;
}

Solution

You do not include jQuery in your page source thus you cant use it.

Also to fade in elements you need to hide them first, via css

.all_home {    
  display:none;
}

or javascript

jQuery('.all_home').hide().fadeIn(200);

Also note that jQuery provides a handy shortcut for document ready calls:

jQuery(function () {
  // I'm called when the document loaded
})