Web Design

Web page personal profile

by Neil Daley

HTML

<!DOCTYPE html>
<!--
	Neil Daley Website
	Project for Neil Daley, Associates of Science in
		Computer Programming and Systems Analysis.
	
	
	Main Web Page
	Author: Neil Daley
	Date: 7/30/2018
	
	Filename: index.html
	Supporting files: neilbio.css, header.js
	www.webtechneil.com
-->


<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
	<title>Mr Daley</title>
	<link href="./css/neilbio.css" rel="stylesheet" type="text/css">
</head>

  <body onload="draw();">
       
    <h1 class="center">
      Neil Daley
    </h1>
    
    
    </br></br>
    <!-- <hr> -->
    <div class="fancy" >
      <span>
        <canvas id="circle" width="100" height="100">
          <!-- <img src="./images/NeilPic.png"  />  -->
      </canvas>
      </span>
    </div>
    <h4 class="center" >
      Information Technology
    </h4>
    
    <div class="center" >
    <a target="_blank" title="follow me on Twitter" href="http://www.twitter.com/LuvtechnologyND"><img alt="follow me on Twitter" src="https://c866088.ssl.cf3.rackcdn.com/assets/twitter30x30.png" border=0></a>
    <a target="_blank" title="follow me on facebook" href="https://www.facebook.com/neil.daley.142"><img alt="follow me on facebook" src="https://c866088.ssl.cf3.rackcdn.com/assets/facebook30x30.png" border=0></a>
    <script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script>
      <script type="IN/Share" data-url="https://www.linkedin.com/in/neil-daley-70926a159" data-counter="top"></script>
      <!--<script type="text/javascript" src="https://platform.linkedin.com/badges/js/profile.js" async defer></script>
      <div class="LI-profile-badge"  data-version="v1" data-size="medium" data-locale="en_US" data-type="vertical" data-theme="light" data-vanity="neil-daley-70926a159"><a class="LI-simple-link" href='https://www.linkedin.com/in/neil-daley-70926a159?trk=profile-badge'>Neil Daley</a></div>
      <a href="https://twitter.com/TwitterDev?ref_src=twsrc%5Etfw"...

CSS

@import
url(https://fonts.googleapis.com/css? family=Cinzel+Decorative:400,900);

body {
  /* font-family: 'Cinzel Decorative', cursive; */
  font-family: "Segoe UI Light", cursive;
  background: url(https://s.cdpn.io/3/blurry-blue.jpg);
  background-size: cover;
  color: white;
}

.fancy {
  <!-- line-height: 0.5; -->
  line-height: 0.5;
  text-align: center;
}
.fancy span {
  display: inline-block;
  position: relative;  
}
.fancy span:before,
.fancy span:after {
  content: "";
  position: absolute;
  height: 5px;
  border-bottom: 1px solid white;
  border-top: 1px solid white;
  top: 0;
  width: 100px;
  <!-- width: 600px; -->
}
.fancy span:before {
  right: 100%;
  margin-right: 15px;
}
.fancy span:after {
  left: 100%;
  margin-left: 15px;
}

header {
  display: block;
}

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: 200px;
  margin-right: 200px;
  border-style: inset;
  border-width: 1px;
}

.center {
  text-align: center;
  /* font-family: "courier"; 
  font-family: "Cinzel Decorative", cursive; */
}

.circular--landscape {
  display: inline-block;
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 50%;
}

.circular--landscape img {
  width: auto;
  height: 100%;
  margin-left: -50px;
}







.boxleft {
  float: left;
  width: 300px;
  height: 500px;
  border-radius: 10px;
  /*background-color: blue;*/
  background: linear-gradient(#0066ff, #0099ff, #00ccff);
}
/*
.boxinner1 {
  float: left;
  width: 300px;
  height: 20px;
  border-radius: 10px;
}

.boxinner2 {
  float: left;
  width: 300px;
  height: 20px;
  border-radius: 10px;
}*/

p.center {
    text-align: center;
    color: white;
}

p.large {
    font-size: 100%;
}

nav ul {
	-webkit-font-smoothing:antialiased;
	text-shadow:0 1px 0 #FFF;
    background: #ddd;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

nav li {
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
   ...

JavaScript

jQuery("h1").fitText(1.2);

function draw()
  {
var canvas = document.getElementById('circle');
if (canvas.getContext)
{
var ctx = canvas.getContext('2d'); 
var X = canvas.width / 2;
var Y = canvas.height / 2;
var R = 45;
ctx.beginPath();
ctx.arc(X, Y, R, 0, 2 * Math.PI, false);
ctx.lineWidth = 3;
//ctx.strokeStyle = '#FF0000';
  ctx.strokeStyle = '#FFFFFF';
ctx.stroke();
}
}