Skip to content

Instantly share code, notes, and snippets.

@M-Porter

M-Porter/Hipster-Portfolio.markdown

Created August 26, 2014 13:26
Show Gist options
  • Save M-Porter/cd11ae04c0ebd16e4399 to your computer and use it in GitHub Desktop.
Save M-Porter/cd11ae04c0ebd16e4399 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Matt Porter.
Raw
Hipster-Portfolio.markdown
Raw
index.html
<body>
<div class="title">
Matt Porter
</div>
<div class="nav">
<div class="container">
<div id="home" class="button1 line start">
Home
</div>
<div id="portfolio" class="button1 line mid">
Portfolio
</div>
<div id="contact" class="button1 line mid">
Contact
</div>
<div id="other" class="button1 line end">
Other
</div>
</div>
</div>
<div id="content" class="content">
<div id="mainContent" style="display: block;">
<p>Quisque sagittis vitae nisi vestibulum aliquet. Proin ac sagittis velit. Quisque in fringilla nulla. Sed mattis porttitor risus dapibus porta. Pellentesque ligula enim, porta et ornare vel, posuere a sem. Vestibulum aliquam non nulla eget adipiscing. Vivamus imperdiet, justo sit amet dignissim sollicitudin, neque felis dapibus leo, at tempus lorem leo sed lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris rhoncus facilisis lectus. Curabitur tincidunt auctor commodo. Mauris id commodo mauris, sit amet sodales leo. Donec scelerisque suscipit consectetur. Pellentesque aliquam, sem ac auctor hendrerit, ipsum justo fermentum magna, sit amet mattis magna tortor.</p>
</div>
<div id="portfolioContent" style="display: none;">
<p>Quisque sagittis vitae nisi vestibulum aliquet. Proin ac sagittis velit. Quisque in fringilla nulla. Sed mattis porttitor risus dapibus porta. Pellentesque ligula enim, porta et ornare vel, posuere a sem. Vestibulum aliquam non nulla eget adipiscing. Vivamus imperdiet, justo sit amet dignissim sollicitudin, neque felis dapibus leo, at tempus lorem leo sed lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris rhoncus facilisis lectus. Curabitur tincidunt auctor commodo. Mauris id commodo mauris, sit amet sodales leo. Donec scelerisque suscipit consectetur. Pellentesque aliquam, sem ac auctor hendrerit, ipsum justo fermentum magna, sit amet mattis magna tortor.</p>
</div>
<div id="contactContent" style="display: none;">
<form>
<div class="space"><input type="text" id="formName" placeholder="Name" required></div>
<div class="space"><input type="email" id="formEmail" placeholder="Email" required></div>
<div class="space"><textarea type="text" id="formText" placeholder="Reason For Contacting" required></textarea></div>
<button id="submit" onclick="sendMail();">Submit</button>
</form>
</div>
<div id="otherContent" style="display: none;">
<p>Quisque sagittis vitae nisi vestibulum aliquet. Proin ac sagittis velit. Quisque in fringilla nulla. Sed mattis porttitor risus dapibus porta. Pellentesque ligula enim, porta et ornare vel, posuere a sem. Vestibulum aliquam non nulla eget adipiscing. Vivamus imperdiet, justo sit amet dignissim sollicitudin, neque felis dapibus leo, at tempus lorem leo sed lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris rhoncus facilisis lectus. Curabitur tincidunt auctor commodo. Mauris id commodo mauris, sit amet sodales leo. Donec scelerisque suscipit consectetur. Pellentesque aliquam, sem ac auctor hendrerit, ipsum justo fermentum magna, sit amet mattis magna tortor.</p>
</div>
</div>
</body>
Raw
script.js
document.getElementById('home').addEventListener('click', function(e) {
document.getElementById('mainContent').style.display = 'block';
document.getElementById('portfolioContent').style.display = 'none';
document.getElementById('contactContent').style.display = 'none';
document.getElementById('otherContent').style.display = 'none';
});
document.getElementById('portfolio').addEventListener('click', function(e) {
document.getElementById('mainContent').style.display = 'none';
document.getElementById('portfolioContent').style.display = 'block';
document.getElementById('contactContent').style.display = 'none';
document.getElementById('otherContent').style.display = 'none';
});
document.getElementById('contact').addEventListener('click', function(e) {
document.getElementById('mainContent').style.display = 'none';
document.getElementById('portfolioContent').style.display = 'none';
document.getElementById('contactContent').style.display = 'block';
document.getElementById('otherContent').style.display = 'none';
});
document.getElementById('other').addEventListener('click', function(e) {
document.getElementById('mainContent').style.display = 'none';
document.getElementById('portfolioContent').style.display = 'none';
document.getElementById('contactContent').style.display = 'none';
document.getElementById('otherContent').style.display = 'block';
});
function sendMail() {
}
Raw
style.css
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import url(http://fonts.googleapis.com/css?family=Oswald);
@import url(http://fonts.googleapis.com/css?family=Lobster);
body {
font-family: 'Oswald', sans-serif;
padding: 0;
margin: 0;
width: 100%;
background: #E6E6DC;
overflox-x: hidden;
}
div.content {
width: 500px;
margin: 45px auto;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
text-align: justify;
text-justify: inter-word;
}
div.title {
font-family: 'Lobster', cursive;
width: 500px;
margin: 0 auto;
text-align: center;
font-size: 86px;
line-height:200px;
text-align:center;
text-shadow:
0px 1px #003e58,
0px 2px #003e58,
0px 3px #003e58,
0px 4px #003e58,
0px 5px #003e58,
0px 6px #00628B,
0px 6px 10px rgba(1,1,1,0.25),
0px 6px 3px rgba(1,1,1,0.8);
color: #00628B;
transform: rotate3d(1, 2.0, 3.0, -10deg) skewX(-10deg);
-webkit-transform: rotate3d(1, 2.0, 3.0, -10deg) skewX(-10deg);
-o-transform: rotate3d(1, 2.0, 3.0, -10deg) skewX(-10deg);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
div.container {
position: relative;
display: inline-block;
left: -50%;
}
.space {
margin: 15px 0;
}
form {
}
button {
position: relative;
box-shadow:
0px 1px #003e58,
0px 2px #003e58,
0px 3px #003e58,
0px 4px #003e58,
0px 5px #003e58,
0px 5px 10px rgba(1,1,1,0.25),
0px 5px 3px rgba(1,1,1,0.8);
background: #00628B;
color: #ffffff;
text-shadow: 0px -2px #003e58;
border: solid 1px #003e58;
border-radius: 2px;
outline: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transition:top 0.1s, border-bottom 0.1s, box-shadow 0.1s;
}
button:hover {
outline: 0;
top: 2px;
box-shadow:
0px 1px #003e58,
0px 2px #003e58,
0px 3px #003e58,
0px 4px #003e58,
0px 4px 5px rgba(1,1,1,0.25),
0px 4px 1px rgba(1,1,1,0.6);
transition:top 0.1s, border-bottom 0.1s, box-shadow 0.1s;
}
button:active {
outline: 0;
top: 4px;
box-shadow:
0px 1px #003e58,
0px 1px 5px rgba(1,1,1,0.25);
transition:top 0.1s, border-bottom 0.1s, box-shadow 0.1s;
}
label {
text-align: center;
line-height: 40px;
font-family: 'Oswald', sans-serif;
font-size: 22px;
display: block;
}
input {
background: #E6E6DC;
color: #00628B;
outline: 0;
text-align: center;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
width: 80%;
display: block;
margin: 0 auto;
padding: 15px 0;
border: 0px;
border-bottom: solid 1px rgba(1,1,1,0.2);
}
textarea {
text-align: center;
background: #E6E6DC;
color: #00628B;
outline: 0;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
display: block;
margin: 0 auto;
width: 80%;
height: 100px;
border: 0px;
border-bottom: solid 1px rgba(1,1,1,0.2);
max-width: 80%;
}
input:focus, textarea:focus {
outline: 0;
}
button {
width: 100px;
height: 35px;
margin: 15px auto;
font-family: 'Oswald', sans-serif;
font-size: 16px;
display: block;
}
div.line {
margin: 5px 0px;
display: inline;
}
.nav {
position: relative;
display: inline-block;
left: 50%;
}
.start {
border-radius: 5px 0 0 5px;
}
.mid {
border-radius: 1px;
}
.end {
border-radius: 0 5px 5px 0;
}
div.button1 {
position: relative;
color: #ffffff;
text-shadow: 0px -2px #003e58;
padding: 10px 25px;
font-size: 28px;
top: 0px;
width: 100%;
text-align: center;
background: #00628B;
border: solid 1px #003e58;
border-bottom: solid 10px #003e58;
box-shadow: 0 2px 10px rgba(1, 1, 1, 0.25);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transition:top 0.1s, border-bottom 0.1s, box-shadow 0.1s;
}
div.button1:hover {
top: 4px;
border-bottom: solid 6px #003e58;
box-shadow: 0 1px 10px rgba(1, 1, 1, 0.25);
transition:top 0.1s, border-bottom 0.1s, box-shadow 0.1s;
}
div.button1:active {
top: 9px;
border-bottom: solid 1px #003e58;
box-shadow: 0 0px 0px rgba(1, 1, 1, 0.25);
transition:top 0.1s, border-bottom 0.1s, box-shadow 0.1s;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment