kyrosds/alwzrg.markdown

## alwzrg.markdown

      
    Raw
  

              alwzrg.markdown
            
          
    ALwzrg

A Pen by David  on CodePen.
License.

  
## index.html
<html>
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button class="navbar-toggle collapsed" type="button" data-target=".navbar-collapse" data-toggle="collapse" aria-expanded="false">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </button>
      <a id="name" class="navbar-brand" href="https://www.freecodecamp.com/kyrosds" target="_blank">David Sires</a>
    </div>
    <div id="link" class="col-sm-offset-10">
      <button type="button" class="btn btn-default navbar-btn"><a href="#top">About</a></button>
      <button type="button" class="btn btn-default navbar-btn"><a href="#portfolio">Portfolio</a></button>
      <button type="button" class="btn btn-default navbar-btn"><a href="#contact">Contact</a></button>
      <button type="button" class="btn btn-default navbar-btn"><a href="#links">Links</a></button>
    </div>
  </div>
</nav>

<div>
  <a id="top" name="about"></a>
</div>
<header>
  <div>
    <h1 id="intro">David Sires</h1></div>
  <div class="intro-text text-center">
    <div class="col-sm-8">
      <p>My name is David I am recent Graduate with a Bachelor's in Information Technology with an Advanced Certificate in Software Engineering. In school I studied C#, C++, Java, HTML, CSS, JavaScript, and .NET software languages. I also studied the fundamentals
        of the software development life cycle including the different development techniques such as agile, waterfall, spiral, and iterative methodologies. I am new to the software development field but am passionate about learning this field and I'm
        constantly practicing and refining my craft.</p>
      <hr id="divider" /><span class="skills">C#, C++, Java, Html, CSS, JavaScript, and .NET with more to come.</span>
    </div>
    <img src="https://avatars.githubusercontent.com/u/18743199?v=3">
  </div>
</header>

<body>
  <div id="main">
    <div id="backgroundImage">
    </div>
    <div class="container">
      <div>
        <a id="portfolio" name="about"></a>
        <h1 class="text-center">Portfolio</h1>
      </div>
      <div>
        <ul class="grid columns-2">
          <li><img src="http://fc04.deviantart.net/fs71/f/2011/282/3/a/u_s__army_wallpaper_by_gkyler-d4cdgc5.jpg" />
            <h3>US Army Veteran</h3>
            <p>Served in the US Army for 11 and half years.</p>
          </li>
          <li><img src="https://d2nyfqh3g1stw3.cloudfront.net/photos/university_of_phoenix_logo_9251.jpg" />
            <h3>University of Phoenix</h3>
            <p>Graduated from the University of Phoenix March 2016 with a Bachelor's in Information Technology with an Advanced Certificate in Software Engineering.</p>
          </li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
    <div>
      <section id="contact">
        <div class="left">
          <h2 class="text-center">Contact Me</h2>
          <div class="right">
            <p>Please feel free to contact me for any information you would like to know, such as resume or more about my experience. Thank you.</p>
          </div>
          <form id="contact_form" action="#" method="POST" enctype="multipart/form-data" style="margin-left: 40%">
            <div class="row">
              <label for="name">Your name:</label><br/>
              <input id="name" class="input" name="name" type="text" value="" size="20" style="height: 30px" /><br />
            </div>
            <div class="row">
              <label for="email">Your email:</label><br />
              <input id="email" class="input" name="email" type="text" value="" size="20" style="height: 30px" /><br />
            </div>
            <div class="row">
              <label for="message">Your message:</label><br />
              <textarea id="message" class="input" name="message" rows="10" cols="50"></textarea><br />
            </div>
            <input id="submit_button" type="submit" value="Send email" style="margin: 20px" />
          </form>
        </div>
      </section>
    </div>
  </div>
</body>

<footer>
  <div>
    <div class="left">
      <h2>About this page</h2>
      <p>compiled and edited by David Sires</p>
    </div>
    <div class="right">
      <a id="links" name="social links"></a>
      <h2 class="col-sm-offset-6">Feel free to contact me on any of the social mediums, I will reply as soon as possible.</h2>
      <h1 class="col-sm-offset-6">Social Links:</h1>
      <ul class="row">
        <li>
          <a href="https://www.linkedin.com/in/david-sires-1810893b" class="button social" target="_blank"><i class="fa fa-linkedin"></i></a>
        </li>
        <li>
          <a href="https://github.com/kyrosds" target="_blank"><i class="fa fa-github" style="color: #808080"></i></a>
        </li>
        <li>
          <a href="https://www.facebook.com/david.sires" target="_blank"><i class="fa fa-facebook"></i></a>
        </li>
        <li>
          <a href="https://twitter.com/kyrosds" target="_blank"><i class="fa fa-twitter"></i></a>
        </li>
        <li>
          <a id="google" href="https://plus.google.com/u/0/108515305807578411139/posts" target="_blank"><i class="fa fa-google-plus"></i></a>
        </li>
      </ul>
    </div>
  </div>
</footer>

## portfolio.markdown

      
    Raw
  

              portfolio.markdown
            
          
    Portfolio

A Pen by David  on CodePen.
License.

  
## script.js
$('#nav').affix({
      offset: {
        top: $('header').height()-$('#nav').height()
      }
});

$('body').scrollspy({ target: '#nav' })

$('.scroll-top').click(function(){
  $('body,html').animate({scrollTop:0},1000);
})
$('#nav .navbar-nav li>a').click(function(){
  var link = $(this).attr('href');
  var posi = $(link).offset().top;
  $('body,html').animate({scrollTop:posi},700);
});

## scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

## style.css
#name {
  font-size: 1.5em;
}

#link {
  font-size: .938em;
}

#main {
  position: relative;
}

body {
  background-color: #002244;
}

h1,
h2,
p,
h3,
label {
  color: #69BE28;
}

#intro {
  color: #f26b31;
  text-align: center;
  padding-bottom: 2em;
  font-size: 3em;
}

#container {
  position: absolute;
  top: 0;
  right: 0;
}

#backgroundImage {
  background-image: url(http://engineerblogs.org/wp-content/uploads/2011/08/Blue_Binary_Code_Jigsaw_Puzzle.jpg);
  opacity: .5;
  height: auto;
  width: auto;
  background-repeat: no-repeat;
  background-position: center;
}

#top {
  height: 2.5em;
  display: block;
}

header {
  margin: .625em;
  font-family: Oldtown, fantasy, sans-serif;
  font-size: 1.875em;
  padding: 5% 15%;
  color: #69BE28;
}

header img {
  border-radius: 10%;
  margin: 0 0 0;
  max-width: 50%;
  height: 12em;
  width: 12em;
}

#divider {
  border: none;
  height: .250em;
  background-color: #156;
}

#portfolio {
  display: block;
}

ul.grid {
  font-family: 'Times New Roman', Arial;
  color: #5B150E;
  list-style: none;
  font-size: .750em;
  margin: auto;
  padding-top: 5em;
}

ul.grid li {
  display: inline-block;
  padding: 2em 2em;
  margin: 0 0 2.5% 2.5%;
  border-radius: 10%;
  border: 0px solid #ddd;
  font-size: 1em;
  vertical-align: top;
  box-shadow: 0 0 5em #ddd;
  height: 35em;
}

ul.grid li img {
  width: 25em;
  height: 15em;
  margin: 0 22.5%;
  border-radius: 10%;
}

ul.grid li h3 {
  text-align: center;
  position: relative;
  font-weight: bold;
}

ul.grid li p {
  font-size: 2em;
  line-height: 1.25em;
  text-align: center;
  position: relative;
}

ul.grid.columns-2 li {
  width: 45%;
}

#contact {
  height: 8em;
  position: relative;
}

#contact p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  text-align: center;
}

#contact_form {
  margin-top: 4em;
}

#social links {
  display: block;
}

footer {
  margin-left: 10%;
  margin-right: 10%;
}

footer div.left {
  float: left;
  margin-top: 15%;
}

footer div.right {
  float: right;
  margin-top: 8%;
}

footer h1 {
  text-align: center;
}

footer h2 {
  font-family: serif;
  color: #0f9f44;
  text-align: center;
}

ul.row {
  list-style: none;
  margin-left: 62%;
}

ul.row li {
  display: inline;
  margin: 0 0 2.5% 2.5%;
  padding: .25em;
  position: relative;
}
#google {
  color: #d34836;
}
#google:hover {
  color: #ff4c4c;
}
ul.row li a:hover {
  background-color: transparent;
}

## styles
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
	<html>
	<nav class="navbar navbar-inverse navbar-fixed-top">
	<div class="container-fluid">
	<div class="navbar-header">
	<button class="navbar-toggle collapsed" type="button" data-target=".navbar-collapse" data-toggle="collapse" aria-expanded="false">
	<span class="sr-only">Toggle navigation</span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	</button>
	<a id="name" class="navbar-brand" href="https://www.freecodecamp.com/kyrosds" target="_blank">David Sires</a>
	</div>
	<div id="link" class="col-sm-offset-10">
	<button type="button" class="btn btn-default navbar-btn"><a href="#top">About</a></button>
	<button type="button" class="btn btn-default navbar-btn"><a href="#portfolio">Portfolio</a></button>
	<button type="button" class="btn btn-default navbar-btn"><a href="#contact">Contact</a></button>
	<button type="button" class="btn btn-default navbar-btn"><a href="#links">Links</a></button>
	</div>
	</div>
	</nav>

	<div>
	<a id="top" name="about"></a>
	</div>
	<header>
	<div>
	<h1 id="intro">David Sires</h1></div>
	<div class="intro-text text-center">
	<div class="col-sm-8">
	<p>My name is David I am recent Graduate with a Bachelor's in Information Technology with an Advanced Certificate in Software Engineering. In school I studied C#, C++, Java, HTML, CSS, JavaScript, and .NET software languages. I also studied the fundamentals
	of the software development life cycle including the different development techniques such as agile, waterfall, spiral, and iterative methodologies. I am new to the software development field but am passionate about learning this field and I'm
	constantly practicing and refining my craft.</p>
	<hr id="divider" /><span class="skills">C#, C++, Java, Html, CSS, JavaScript, and .NET with more to come.</span>
	</div>
	<img src="https://avatars.githubusercontent.com/u/18743199?v=3">
	</div>
	</header>

	<body>
	<div id="main">
	<div id="backgroundImage">
	</div>
	<div class="container">
	<div>
	<a id="portfolio" name="about"></a>
	<h1 class="text-center">Portfolio</h1>
	</div>
	<div>
	<ul class="grid columns-2">
	<li><img src="http://fc04.deviantart.net/fs71/f/2011/282/3/a/u_s__army_wallpaper_by_gkyler-d4cdgc5.jpg" />
	<h3>US Army Veteran</h3>
	<p>Served in the US Army for 11 and half years.</p>
	</li>
	<li><img src="https://d2nyfqh3g1stw3.cloudfront.net/photos/university_of_phoenix_logo_9251.jpg" />
	<h3>University of Phoenix</h3>
	<p>Graduated from the University of Phoenix March 2016 with a Bachelor's in Information Technology with an Advanced Certificate in Software Engineering.</p>
	</li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	</ul>
	</div>
	</div>
	<div>
	<section id="contact">
	<div class="left">
	<h2 class="text-center">Contact Me</h2>
	<div class="right">
	<p>Please feel free to contact me for any information you would like to know, such as resume or more about my experience. Thank you.</p>
	</div>
	<form id="contact_form" action="#" method="POST" enctype="multipart/form-data" style="margin-left: 40%">
	<div class="row">
	<label for="name">Your name:</label><br/>
	<input id="name" class="input" name="name" type="text" value="" size="20" style="height: 30px" /><br />
	</div>
	<div class="row">
	<label for="email">Your email:</label><br />
	<input id="email" class="input" name="email" type="text" value="" size="20" style="height: 30px" /><br />
	</div>
	<div class="row">
	<label for="message">Your message:</label><br />
	<textarea id="message" class="input" name="message" rows="10" cols="50"></textarea><br />
	</div>
	<input id="submit_button" type="submit" value="Send email" style="margin: 20px" />
	</form>
	</div>
	</section>
	</div>
	</div>
	</body>

	<footer>
	<div>
	<div class="left">
	<h2>About this page</h2>
	<p>compiled and edited by David Sires</p>
	</div>
	<div class="right">
	<a id="links" name="social links"></a>
	<h2 class="col-sm-offset-6">Feel free to contact me on any of the social mediums, I will reply as soon as possible.</h2>
	<h1 class="col-sm-offset-6">Social Links:</h1>
	<ul class="row">
	<li>
	<a href="https://www.linkedin.com/in/david-sires-1810893b" class="button social" target="_blank"><i class="fa fa-linkedin"></i></a>
	</li>
	<li>
	<a href="https://github.com/kyrosds" target="_blank"><i class="fa fa-github" style="color: #808080"></i></a>
	</li>
	<li>
	<a href="https://www.facebook.com/david.sires" target="_blank"><i class="fa fa-facebook"></i></a>
	</li>
	<li>
	<a href="https://twitter.com/kyrosds" target="_blank"><i class="fa fa-twitter"></i></a>
	</li>
	<li>
	<a id="google" href="https://plus.google.com/u/0/108515305807578411139/posts" target="_blank"><i class="fa fa-google-plus"></i></a>
	</li>
	</ul>
	</div>
	</div>
	</footer>
	$('#nav').affix({
	offset: {
	top: $('header').height()-$('#nav').height()
	}
	});

	$('body').scrollspy({ target: '#nav' })

	$('.scroll-top').click(function(){
	$('body,html').animate({scrollTop:0},1000);
	})
	$('#nav .navbar-nav li>a').click(function(){
	var link = $(this).attr('href');
	var posi = $(link).offset().top;
	$('body,html').animate({scrollTop:posi},700);
	});
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
	#name {
	font-size: 1.5em;
	}

	#link {
	font-size: .938em;
	}

	#main {
	position: relative;
	}

	body {
	background-color: #002244;
	}

	h1,
	h2,
	p,
	h3,
	label {
	color: #69BE28;
	}

	#intro {
	color: #f26b31;
	text-align: center;
	padding-bottom: 2em;
	font-size: 3em;
	}

	#container {
	position: absolute;
	top: 0;
	right: 0;
	}

	#backgroundImage {
	background-image: url(http://engineerblogs.org/wp-content/uploads/2011/08/Blue_Binary_Code_Jigsaw_Puzzle.jpg);
	opacity: .5;
	height: auto;
	width: auto;
	background-repeat: no-repeat;
	background-position: center;
	}

	#top {
	height: 2.5em;
	display: block;
	}

	header {
	margin: .625em;
	font-family: Oldtown, fantasy, sans-serif;
	font-size: 1.875em;
	padding: 5% 15%;
	color: #69BE28;
	}

	header img {
	border-radius: 10%;
	margin: 0 0 0;
	max-width: 50%;
	height: 12em;
	width: 12em;
	}

	#divider {
	border: none;
	height: .250em;
	background-color: #156;
	}

	#portfolio {
	display: block;
	}

	ul.grid {
	font-family: 'Times New Roman', Arial;
	color: #5B150E;
	list-style: none;
	font-size: .750em;
	margin: auto;
	padding-top: 5em;
	}

	ul.grid li {
	display: inline-block;
	padding: 2em 2em;
	margin: 0 0 2.5% 2.5%;
	border-radius: 10%;
	border: 0px solid #ddd;
	font-size: 1em;
	vertical-align: top;
	box-shadow: 0 0 5em #ddd;
	height: 35em;
	}

	ul.grid li img {
	width: 25em;
	height: 15em;
	margin: 0 22.5%;
	border-radius: 10%;
	}

	ul.grid li h3 {
	text-align: center;
	position: relative;
	font-weight: bold;
	}

	ul.grid li p {
	font-size: 2em;
	line-height: 1.25em;
	text-align: center;
	position: relative;
	}

	ul.grid.columns-2 li {
	width: 45%;
	}

	#contact {
	height: 8em;
	position: relative;
	}

	#contact p {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	text-align: center;
	}

	#contact_form {
	margin-top: 4em;
	}

	#social links {
	display: block;
	}

	footer {
	margin-left: 10%;
	margin-right: 10%;
	}

	footer div.left {
	float: left;
	margin-top: 15%;
	}

	footer div.right {
	float: right;
	margin-top: 8%;
	}

	footer h1 {
	text-align: center;
	}

	footer h2 {
	font-family: serif;
	color: #0f9f44;
	text-align: center;
	}

	ul.row {
	list-style: none;
	margin-left: 62%;
	}

	ul.row li {
	display: inline;
	margin: 0 0 2.5% 2.5%;
	padding: .25em;
	position: relative;
	}
	#google {
	color: #d34836;
	}
	#google:hover {
	color: #ff4c4c;
	}
	ul.row li a:hover {
	background-color: transparent;
	}
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" />
	<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
	<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />