Home Page
<!doctype html>
<html>
<!--Information about the document -->
<head>
<!--Sets width of the webpage to the device-->
<meta name="viewport" content="width=device-width">
<meta charset="utf-8">
<!--Title of the webpage-->
<title>Jake Dudson | Portfolio</title>
<!--links CSS Style Sheet-->
<link rel="stylesheet" href="/css/style.css">
</head>
<!--websites body-->
<body>
<!--Header and Nav Bar in a header tag-->
<!--Documents header-->
<header>
<!--A section in the document-->
<!--Class in css-->
<div class="container">
<!--ID is used for element that are unique -->
<div id="pagetitle">
<!--Heading/title-->
<h1>Jake Dudson</h1>
</div>
<!-- Naviagtion-->
<nav>
<!--Unordered list-->
<ul>
<!--List Item with link attached-->
<li class="current"><a href="index.html">Home</a></li>
<li><a href="work.html">Work</a></li>
<li><a href="about.html">About Me</a></li>
</ul>
</nav>
</div>
</header>
<!--Similar to div its a section in the site-->
<section id ="mainimg">
<div class="container">
<h1>Jake Dudson | Portfolio</h1>
<!--Paragraph-->
<p>Welcome to my portfolio</p>
</div>
</section>
<section id="block">
<div class="container">
</div>
</section>
<!--This is for the section with subjects I have done-->
<section id="boxes">
<div class="container">
<div class="box">
<!--Imports image-->
<img src="images/UnityIcon.png" alt="Unity Icon">
<!-- Heading/title-->
<h3>Game Engines</h3>
<p>I have been working with Unity and have created mini-games</p>
</div>
<div class="box">
<img src="images/WebIcon.png" alt="Web Icon">
<h3>Web and Mobile App Development</h3>
<p>This portfolio is an example of the work done in this area.</p>
</div>
<div class="box">
<img src="images/Phone_Wireframe.png" alt="Mobile Icon">
<h3>Mobile Asset Creation</h3>
<p>Placeholder Placeholder Placeholder</p>
</div>
</div>
</section>
<!--Used for the footer at bottom of page to add some flair-->
<footer>
<div class="container">
</div>
</footer>
</body>
</html>
Work Menu
<!doctype html>
<html>
<!--Information about the document -->
<head>
<!--Sets width of the webpage to the device-->
<meta name="viewport" content="width=device-width">
<meta charset="utf-8">
<!--Title of the webpage-->
<title>Jake Dudson | Portfolio</title>
<!--links CSS Style Sheet-->
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<!--Header and Nav Bar in a header tag-->
<!--Documents header-->
<header>
<!--A section in the document-->
<!--Class in css-->
<div class="container">
<!--ID is used for element that are unique -->
<div id="pagetitle">
<!--Heading/title-->
<h1>Jake Dudson</h1>
</div>
<!-- Naviagtion-->
<nav>
<!--Unordered list-->
<ul>
<!--List Item with link attached-->
<li><a href="index.html">Home</a></li>
<li class="current"><a href="work.html">Work</a></li>
<li><a href="about.html">About Me</a></li>
</ul>
</nav>
</div>
</header>
<!--This is for the section with subjects I have done-->
<section id="main">
<div class="container">
<!--Defines an article-->
<article id="main-col">
<!--Tile/Heading-->
<h1 class="page-title">Work</h1>
<ul id="work">
<li><a href="gameengines.html">
<h3>Game Engines and Sound</h3>
<p>Unity, Audio, SSWB and 2D Platformer.</p>
</a></li>
<li><a href="webandapp.html">
<h3>Web and Mobile App Development</h3>
<p>HTML, CSS, PHP, JavaScript</p>
</a></li>
<li><a href="mobileasset.html">
<h3>Mobile Asset Creation</h3>
<p>PhotoShop, etc</p>
</a></li>
<li><a href="webtech.html">
<h3>Web Technologies</h3>
<p>Jobs and Skills, Mobile Industry, Internet Technology, Cyber Security etc.</p>
</a></li>
<li><a href="project.html">
<h3>Final Project</h3>
<p>I chose to do...</p>
</a></li>
</ul>
</article>
<!--Defines content at side of a page-->
<aside id="sidebar">
<div class="dark">
<h3>Links</h3>
<a href="https://drive.google.com/"><img src="/images/googledrive.png" alt="Google Drive"></a>
</div>
</aside>
</div>
</section>
<!--Used for the footer at bottom of page to add some flair-->
<footer>
<div class="container">
</div>
</footer>
</body>
</html>
Work Pages
<!doctype html>
<html>
<head>
<!--Sets width of the webpage to the device-->
<meta name="viewport" content="width=device-width">
<meta charset="utf-8">
<!--Title of the webpage-->
<title>Jake Dudson | Page Title</title>
<!--links CSS Style Sheet-->
<link rel="stylesheet" href="/css/style.css">
</head>
<!--websites body-->
<body>
<!--Header and Nav Bar in a header tag-->
<!--Documents header-->
<header>
<!--A section in the document-->
<!--Class in css-->
<div class="container">
<!--ID is used for element that are unique -->
<div id="pagetitle">
<!--Heading/title-->
<h1>Jake Dudson</h1>
</div>
<!-- Naviagtion-->
<nav>
<!--Unordered list-->
<ul>
<!--List Item with link attached-->
<li><a href="/index.html">Home</a></li>
<li><a href="/work.html">Work</a></li>
<li><a href="/about.html">About Me</a></li>
</ul>
</nav>
</div>
</header>
<!--This is for the section with subjects I have done-->
<!--Similar to div its a section in the site-->
<section id="main">
<div class="container">
<article id="main-col">
<h1 class="page-title">Internet Technology</h1>
<!--Table 1-->
<table class="cont-table">
<!--Table Row-->
<tr>
<!--Table Heading-->
<th>Table Title</th>
</tr>
<tr>
<!--Table Cells-->
<td>
<!--Paragraph-->
<p>Table data</p>
</td>
</tr>
</table>
<!--Break-->
<br>
<!--Table 2-->
<table class="cont-table">
<tr>
<th>Write a brief history of the Internet. You may provide a timeline of important dates where certain elements of the technology were revolutionised.</th>
</tr>
<tr>
<td>
<p>The world wide web is a set of interconnected networks. It contains millions of files and webpages to be accessed and they are all linked to each other through hyperlinks. To access the WWW you will need a browser. This will take you to the website you need.</p>
</td>
</tr>
</table>
<br>
</article>
<!--defines content at side of page-->
<aside id="sidebar">
<p> </p>
<div class="dark">
<h3>Links</h3>
<a href="https://drive.google.com/"><img src="/images/googledrive.png" alt="My Google Drive Files"></a>
</div>
</aside>
</div>
</section>
<!--Used for the footer at bottom of page to add some flair-->
<footer>
<div class="container">
</div>
</footer>
</body>
</html>
CSS
body{
/*specifies fonts*/
font-family: Arial, Helvetica, sans-serif;
/*Font size*/
font-size: 15px;
/*Sets line height*/
line-height: 1.5;
padding: 0;
margin: 0;
}
/*Global Styles*/
.container{
width: 80%;
margin: auto;
overflow: hidden;
}
ul{
margin: 0;
padding: 0;
}
.marginrem{
margin-bottom: 1px;
padding-bottom: 1px;
}
.dark{
padding: 15px;
background: #343838;
color: #ffffff;
margin-top: 10px;
margin-bottom: 10px;
}
.imgwid{
width: 100%;
}
/*Header Styles*/
header{
background: #343838;
color: #ffffff;
padding-top: 30px;
min-height: 70px;
border-bottom: #00d6fb 5px solid;
}
/* Any a tags in the header*/
header a{
color: #ffffff;
text-decoration: none;
font-size: 16px;
}
header li{
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #pagetitle{
float: left;
}
header #pagetitle h1{
margin: 0;
}
header nav{
float: right;
margin-top: 10px;
}
header .current a{
color: #00d6fb;
font-weight: bold;
}
header a:hover{
color: #00b0c9;
font-weight: bold;
}
/* Main Image of Homepage*/
#mainimg {
min-height: 400px;
background:url("../images/Capture.JPG") no-repeat 0 -400px;
text-align: center;
color: #ffffff;
/*cMakes it so its available for unsupported brosers*/
-webkit-filter: sepia(50%); /* Safari 6.0 - 9.0 */
filter: sepia(60%);
}
#mainimg h1{
margin-top: 100px;
font-size: 55px;
margin-bottom: 10px;
}
#mainimg p{
font-size: 20px;
}
#block{
padding: 30px;
color: #ffffff;
background: #343838;
border-top: #00d6fb 5px solid;
}
/*Boxes*/
#boxes{
margin-top: 20px;
}
#boxes .box{
float: left;
text-align: center;
width: 30%;
padding: 10px;
}
#boxes .box img{
width: 120px;
}
/*sidebar*/
aside#sidebar{
float: right;
width: 30%;
margin-top: 10px;
}
/*Main Coloumn*/
article#main-col{
float: left;
width: 65%;
}
/*Work Elements*/
ul#work li{
list-style: none;
padding: 20px;
border: #cccccc solid 1px;
margin-bottom: 5px;
background: #e6e6e6;
}
ul#work a{
text-decoration: none;
color: #000000;
}
/*Content Tables*/
.cont-table {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
.cont-table td, .cont-table th {
border: 1px solid #343838;
padding: 8px;
}
.cont-table th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #343838;
color: white;
}
/*Profile Icon*/
#circle{
width: 200px;
height: 200px;
background: white;
border: thick solid #2268AA;
border-radius: 50%;
margin-left: 25px;
margin-right: 25px;
margin-top: 25px;
float: left;
}
/*Footer Elements*/
footer{
padding: 20px;
margin-top: 20px;
color: #ffffff;
background-color: #005c67;
text-align: center;
}
/*Media Queries for mobile mode*/
/*media query to change content at certain sizes*/
@media(max-width : 800px ){
header #pagetitle,
header nav,
header nav li,
#boxes .box,
article#main-col,
aside#sidebar{
float: none;
text-align: center;
width: 100%;
}
header{
padding-bottom: 20px;
}
#mainimg h1{
margin-top: 40px;
}
#circle{
float: none;
margin: 0 auto;
}
}