HTML5 Template | Rex's Personal Site

Bootstrap: http://getbootstrap.com

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset="UTF-8">
        <title>Site title</title>
     
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
 
    </head>
    <body>
 
        <header>
            <div class="container">
                
            </div>
        </header><!-- End of header -->
     
     
        <div id="content">
            <div class="container">
                <form id="iform" name="iform" action="/test/video/upload" method="post" enctype="multipart/form-data">
                    <input type="file" name="file">
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div><!-- End of Wrapper -->
        </div><!-- End of content -->
         
         
        <footer>
            <div class="container">
                footer
            </div>
        </footer><!-- End of footer -->
     

        <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
 
        <script>
        $(document).ready(function(){
 
        });
        </script>
 
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Site title</title>

</head>

<body>

</div>

</header>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

</div>

</div>

footer

</div>

</footer>

$(document).ready(function(){

});

</script>

</body>

</html>

layout.css

body{font-family:Arial, Helvetica, sans-serif;}
#header > .wrapper, #content > .wrapper, #footer > .wrapper{width:860px; margin:0 auto;}


/* Header */
#header{height:191px;}
#header > .wrapper{}
#header > .wrapper > .top{height:53px;background:#dfdfdf;padding:0 58px;}
#header > .wrapper > .middle{height:84px;padding:0 58px;}
#header > .wrapper > .menu{height:47px; background:#d0000e;padding:0 58px;}


/* Content */
#content{}


/* Footer */
#footer{height:51px;}
#footer > .wrapper{background:#e2e2e2; height:100%;padding:15px 58px;}

body{font-family:Arial, Helvetica, sans-serif;}

#header > .wrapper, #content > .wrapper, #footer > .wrapper{width:860px; margin:0 auto;}

/* Header */

#header{height:191px;}

#header > .wrapper{}

#header > .wrapper > .top{height:53px;background:#dfdfdf;padding:0 58px;}

#header > .wrapper > .middle{height:84px;padding:0 58px;}

#header > .wrapper > .menu{height:47px; background:#d0000e;padding:0 58px;}

/* Content */

#content{}

/* Footer */

#footer{height:51px;}

#footer > .wrapper{background:#e2e2e2; height:100%;padding:15px 58px;}

M	T	W	T	F	S	S
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31