Skip to content

Instantly share code, notes, and snippets.

@mikehow1984

mikehow1984/WQLpaR.markdown

Created November 20, 2015 01:48
Show Gist options
  • Save mikehow1984/2b9ea5c9afaa41f713b6 to your computer and use it in GitHub Desktop.
Save mikehow1984/2b9ea5c9afaa41f713b6 to your computer and use it in GitHub Desktop.
Download ZIP
WQLpaR
Raw
index.html
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<header>
<div id="Name" class="header-left">
<a href="http://aintuanengineer.com" class= "header-link">Michael Howard</a>
</div>
<nav class="menu">
<a href="#" class="toggle-nav header-link"><i class="fa fa-bars"></i></a>
<div class="nav-menu bar-links">
<a href="#main-title" class="header-link bar-links">Home</a>
<a href="#desc-page" class="header-link bar-links">About</a>
<a href="#portfolio" class="header-link bar-links">Portfolio</a>
<a href="#contact" class="header-link bar-links">Contact</a>
</div>
</nav>
</header>
<main>
<div id="main-title">
<div class="title">Michael Howard</div>
<div class="sub-title">
<h3>The Master of Cyberwizardry</h3></div>
<div class="below-title">
<div class="pro-link"><a href="http://github.com/mikehow1984/"><i class="fa fa-github-alt"></i> Github</a></div>
<div class="pro-link"><a href="http://www.freecodecamp.com/mikehow1984"><i class="fa fa-fire"></i> FreeCodeCamp</a></div>
<div class="pro-link"><a href="https://www.linkedin.com/in/michaelhoward1984"><i class="fa fa-linkedin-square"></i> Linkedin</a></div>
</div>
</div>
<div id="desc-page">
<div class="bio">
<p>Meet Michael Howard.</p>
<p>Electrical Engineer. Self-taught programmer. Self-taught web designer. Self-taught guitarist.</p>
<p>With a passion for learning and solving problems, Michael has taught himself a wide range of skills related to electronics and computers.</p>
<p>Learned languages and technologies: C++, Python, HTML5, CSS3, Javascript, jQuery, Django, Git</p>
<p>Currently learning: Java</p>
</div>
<div class="selfie"><img src="http://aintuanengineer.com/img/xuMkL9g.jpg" id="selfie">
</div>
</div>
<div class="portfolio" id="portfolio">
<div id="main-proj-title">Recent Projects</div>
<div id="projects">
<div class="project">
<a class="proj-link" href="https://github.com/mikehow1984/QUIKTYME" id="proj1"><i class="fa fa-github-alt"></i></a>
<div class="proj-title">Role Playing Game
<div class="proj-desc">C++, Django/mySQL</div>
</div>
</div>
<div class="project">
<a class="proj-link" href="https://github.com/mikehow1984/Arduino_SMB_Theme" id="proj2"><i class="fa fa-github-alt"></i></a>
<div class="proj-title">Arduino Mario Bros Theme Player
<div class="proj-desc">C++, Arduino Micro</div>
</div>
</div>
<div class="project">
<a class="proj-link" href="https://github.com/mikehow1984/QUIKTYME" id="proj3"><i class="fa fa-github-alt"></i></a>
<div class="proj-title">Placeholder
<div class="proj-desc">BASIC, Lisp, Java</div>
</div>
</div>
</div>
</div>
<div id="contact">
<div id="contact-text">Connect with Michael Howard: mikehow1005@gmail.com</div>
<div id="bottom-links">
<div class="pro-link"><a href="http://github.com/mikehow1984/"><i class="fa fa-github-alt"></i> Github</a></div>
<div class="pro-link"><a href="http://www.freecodecamp.com/mikehow1984"><i class="fa fa-fire"></i> FreeCodeCamp</a></div>
<div class="pro-link"><a href="https://www.linkedin.com/in/michaelhoward1984"><i class="fa fa-linkedin-square"></i> Linkedin</a></div>
</div>
</div>
</main>
<footer>
<div id="footer-links"><a href="#main-title">Home</a> - <a href="#desc-page">About</a> - <a href="#portfolio">Portfolio</a> - <a href="#contact">Contact</a></div>
</footer>
</body>
Raw
script.js
$(document).ready(function() {
jQuery('.toggle-nav').click(function(e) {
jQuery('.nav-menu a').toggleClass('bar-links');
jQuery('.nav-menu a').toggleClass('drop-down');
jQuery('div.nav-menu').toggleClass('bar-links');
jQuery('div.nav-menu').toggleClass('drop-down');
e.preventDefault();
});
});
Raw
scripts
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
Raw
style.css
body {
font-family: Verdana, Georgia, serif;
}
header {
opacity: 0.9;
height: 40px;
background-color: #93e0ec;
width: 100%;
position: fixed;
top: 0;
color: #000000;
z-index: 100;
padding: 0px 20px;
}
.header-link {
margin: 0px -3px;
color: #000000;
display: inline-block;
padding: 10px 20px;
background-color: #80bfff;
-webkit-transition: background-color .25s ease-in-out;
-moz-transition: background-color .25s ease-in-out;
transition: background-color .25s ease-in-out;
}
.header-link:hover {
text-decoration: none;
color: #000000;
background-color: #b3d9ff;
}
.header-left {
text-decoration: none;
display: inline-block;
float: left;
overflow: hidden;
}
.nav-menu{
float: right;
}
@media screen and (min-width: 600px) {
.toggle-nav {
display: none;
}
}
@media screen and (max-width: 600px) {
a.toggle-nav{
padding: 6px 10px;
font-size: 20px;
overflow: hidden;
float: right;
}
.bar-links{
display: none;
}
.nav-menu {
position: absolute;
top: 100%;
right: 20px;
width: 100%;
height: auto;
border-radius: 3px;
margin-right: -20px;
background: #99ccff;
overflow: hidden;
}
.nav-menu .drop-down{
display: block;
width: 100%;
}
}
#main-title {
text-align: center;
padding: 250px 0px 500px 0px;
color: #ffffff;
display: block;
background-image: url("http://aintuanengineer.com/img/84lI7CO.jpg");
background-attachment: fixed;
background-color: gray;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.title {
font-size: 60px;
font-weight: bold;
color: #99ccff;
text-shadow: 2px 2px #000000;
}
.below-title {
display: block;
margin: 0px 30px;
border-top: solid 1px;
color: #99ccff;
}
.sub-title {
font-weight: bold;
padding-bottom: 20px;
color: #99ccff;
text-shadow: 2px 2px #000000;
}
.pro-link {
font-size: 18px;
display: inline-block;
margin: 30px 10px;
}
.pro-link a {
padding: 10px 30px;
background-color: #99ccff;
border-radius: 8px;
border: solid 2px #000000;
color: #000000;
text-decoration: none;
color: #000000;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
transition: all .25s ease;
}
.pro-link a:hover {
background-color: #000000;
color: #ffffff;
}
#desc-page {
font-size: 20px;
padding: 250px 0px 500px 0px;
background-image: url("http://aintuanengineer.com/img/dFdfQhU.jpg") !important;
background-attachment: fixed;
background-color: gray;
background-size: cover;
}
.bio {
width: 50%;
background-color: #99ccff;
padding: 5px;
margin: 10px;
border: solid 1px;
border-radius: 5px;
font-size: 14px;
display: inline-block;
float: left;
}
#selfie {
width: 20%;
border: solid;
border-radius: 50%;
display: inline-block;
float: right;
margin: 0px 40px;
}
#portfolio {
padding: 20px 0px 500px 0px;
background-color: #80bfff;
background-image: url("http://aintuanengineer.com/img/Y7IqPQR.jpg");
background-attachment: fixed;
background-size: cover;
}
#main-proj-title {
font-size: 30px;
text-align: center;
display: block;
margin: 10px 0px;
font-weight: bold;
}
#projects {
margin: 30px 30px;
text-align: center;
}
.project {
text-align: center;
display: inline-block;
width: 350px;
margin: 5px 0px;
}
.project a {
width: 350px;
height: 200px;
border: solid 1px;
border-radius: 5px;
overflow: hidden;
display: inline-block;
}
#proj1 {
background: url("http://aintuanengineer.com/img/RKTNIpi.png");
background-size: cover;
}
#proj2 {
background: url("http://aintuanengineer.com/img/ytfVOo9.jpg");
background-size: cover;
}
#proj3 {
background: url("http://aintuanengineer.com/img/cat.gif");
background-size: cover;
}
.proj-link i {
opacity: 0;
-webkit-transition: opacity .5s ease;
-moz-transition: opacity .5s ease;
font-size: 96px;
text-align: center;
background-color: #000000;
padding: 55px 130px;
}
.proj-link:hover i {
opacity: 0.8;
}
a.proj-link {
text-decoration: none;
color: inherit;
}
.project a:hover {
opacity: 0.8;
}
.proj-title {
color: #ffffff;
background-color: #000000;
padding: 10px 0px;
opacity: 0.8;
}
.proj-desc {
font-style: italic;
}
#contact {
background-image: url("http://aintuanengineer.com/img/s12XaeX.jpg");
background-attachment: fixed;
background-color: gray;
background-size: cover;
height: 800px;
padding: 100px 30px;
}
#contact-text {
font-size: 24px;
width: 100%;
display: block;
float: left;
color: #ffffff;
}
#bottom-links {
width: 100%;
float: left;
}
#bottom-links .pro-link{
display: block;
}
#bottom-links a{
margin: 40px 0px;
}
#bottom-links a:hover {
-webkit-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
footer {
background-color: #93e0ec;
background-size: cover;
display: block;
width: 100%;
height: 150px;
}
#footer-links {
font-size: 12px;
margin: 0px 20px;
padding: 50px 0px 0px 0px;
}
#footer-links a {
padding: 10px;
}
Raw
styles
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment