Skip to content

Instantly share code, notes, and snippets.

@calvinmorett

calvinmorett/Portfolio Rehash.markdown

Created December 6, 2015 09:36
Show Gist options
  • Save calvinmorett/190f8df66f73421388a8 to your computer and use it in GitHub Desktop.
Save calvinmorett/190f8df66f73421388a8 to your computer and use it in GitHub Desktop.
Download ZIP
Portfolio Rehash
Raw
index.html
<body>
<div id="wrapper" class="clear">
<div id="one">
<h1 class="title">Introduction</h1>
<section class="border">
<p class="p1">Hello, my name is <span>Calvin Morett</span> & I develop and create visuals for <span2>Print and the Web.</span2> If you can't find me I'm probably creating <span>funky websites</span>, <span2>drawing</span2>, or <span>curating music.</span></p>
<blockquote>Recognizing the need is the primary condition for design.</blockquote><p class="author1"><a href="xxx" class="a2">charles eame</a></p>
<p>I routinely craft with a <span2>minimalistic style</span2>, but I don't shy away from doing <span>highly detailed work</span> or <span>fine art.</span> My motivation is being able to <span2>inspire a new generation of creative thinkers.</span2></p>
<blockquote>I found I could say things with color and shapes that I couldn't say any other way—things I had no words for.</blockquote><p class="author2"><a href="xxx" class="a2">georgia o'keeffe</a></p>
<p>I live to <span>design</span>, to <span2>create</span2> & would love to collaborate and help you <span>solve your design problems</span>. For all inquiries regarding any-time <span2>job offers</span2> please get in touch, I'm a <span>first-class listener.</span>
</section></div>
<div id="two">
<h1 class="title">My Work</h1>
<table>
<thead>
<tr>
<th>Title</th>
<th>Media</th>
<th>Source</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Title">Raw Color</td>
<td data-label="Media">Print</td>
<td data-label="Source"><a href="https://www.behance.net/gallery/30353545/Raw-Color-The-Circles-of-David-Smith">Link</a></td>
</tr>
<tr>
<td data-label="Title">Horizontal Scrolling</td>
<td data-label="Media">Tutorial</td>
<td data-label="Source"><a href="http://cargocollective.com/calvinmorett/Incorporate-Horizontal-Scrolling">Link</a></td>
</tr>
<tr>
<td data-label="Title">King's Garden Party</td>
<td data-label="Media">Print</td>
<td data-label="Source"><a href="https://www.behance.net/gallery/30353373/A-Kings-Garden-Party">Link</a></td>
</tr>
<tr>
<td data-label="Title">Well Dunn</td>
<td data-label="Media">Print</td>
<td data-label="Source"><a href="https://www.behance.net/gallery/30353419/Well-Dunn">Link</a></td>
</tr>
<tr>
<td data-label="Title">Minds of Winter</td>
<td data-label="Media">Print</td>
<td data-label="Source"><a href="https://www.behance.net/gallery/30353235/Minds-of-Winter">Link</a></td>
</tr>
<tr>
<td data-label="Title">Rashi Fein</td>
<td data-label="Media">Print</td>
<td data-label="Source"><a href="https://www.behance.net/gallery/30353471/Rashi-Fein">Link</a></td>
</tr>
<tr>
<td data-label="Title">PulseRende</td>
<td data-label="Media">Web</td>
<td data-label="Source"><a href="http://codepen.io/odisbey/full/LpoqaJ/">Link</a></td>
</tr>
<!--
<tr>
<td data-label="Title">Four Seasons</td>
<td data-label="Media">Web</td>
<td data-label="Source"><a href="http://www.fourseasonsnaturalfoods.com/">Link</a></td>
</tr>
<tr>
<td data-label="Title">Freshrr</td>
<td data-label="Media">Web</td>
<td data-label="Source"><a href="http://www.freshrr.com/">Link</a></td>
</tr>
<tr>
<td data-label="Title">So Flippin' Good</td>
<td data-label="Media">Web</td>
<td data-label="Source"><a href="http://codepen.io/odisbey/full/pjMQLe">Link</a></td>
</tr>
<tr>
<td data-label="Title">Newspaper</td>
<td data-label="Media">Print</td>
<td data-label="Source"><a href="xxx">Link</a></td>
</tr>
<tr>
<td data-label="Title">Website</td>
<td data-label="Media">Web</td>
<td data-label="Source"><a href="xxx">Link</a></td>
</tr>
<tr>
<td data-label="Title">Newspaper</td>
<td data-label="Media">Print</td>
<td data-label="Source"><a href="xxx">Link</a></td>
</tr>
<tr>
<td data-label="Title">Website</td>
<td data-label="Media">Web</td>
<td data-label="Source"><a href="xxx">Link</a></td>
</tr>
<tr>
<td data-label="Title">Newspaper</td>
<td data-label="Media">Print</td>
<td data-label="Source"><a href="xxx">Link</a></td>
</tr>
<tr>
<td data-label="Title">Website</td>
<td data-label="Media">Web</td>
<td data-label="Source"><a href="xxx">Link</a></td>
</tr>
-->
</tbody>
</table>
</div>
<div id="three">
<h1 class="title">On the Web</h1>
<table>
<thead>
<tr>
<th>Portal</th>
<th>Source</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Portal">Email</td>
<td data-label="Source"><a href="mailto:morettc@gmail.com" class="gmai">Link</a></td>
</tr>
<tr>
<td data-label="Portal">Behance</td>
<td data-label="Source"><a href="https://www.behance.net/morettc15cb" class="beha">Link</a></td>
</tr>
<tr>
<td data-label="Portal">Cargo</td>
<td data-label="Source"><a href="http://cargocollective.com/calvinmorett" class="carg">Link</a></td>
</tr>
<tr>
<td data-label="Portal">LinkedIn</td>
<td data-label="Source"><a href="https://linkedin.com/in/calvinmorett" class="link">Link</a></td>
</tr>
<tr>
<td data-label="Portal">Codepen</td>
<td data-label="Source"><a href="http://codepen.io/odisbey" class="code">Link</a></td>
</tr>
<tr>
<td data-label="Portal">Stack Overflow</td>
<td data-label="Source"><a href="http://stackexchange.com/users/7397067/c-morett" class="stak">Link</a></td>
</tr>
<tr>
<td data-label="Portal">Twitter</td>
<td data-label="Source"><a href="https://twitter.com/CalvinMorett" class="twit">Link</a></td>
</tr>
<tr>
<td data-label="Portal">Pinterest</td>
<td data-label="Source"><a href="https://www.pinterest.com/morettc/" class="pint">Link</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
<link href='https://fonts.googleapis.com/css?family=Yantramanav:400,500,700,900,300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Mr+Dafoe' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Kurale' rel='stylesheet' type='text/css'>
Raw
style.css
*,
html{
margin: 0 auto;
padding: 0;
}
svg{
width: 600px;
height: 120px;
display: block;
position: relative;
overflow: hidden;
margin:20px 15px;
background: black;
}
body {
vertical-align: baseline;
background: #ccc url('http://cdn.backgroundhost.com/backgrounds/subtlepatterns/texturetastic_gray.png') repeat;
font-size: 20px;
font-family: 'Yantramanav', sans-serif;
color: #444;
line-height: 1.85em;
margin: 0 auto;
height:100%;
}
.clear {
clear: both;
}
blockquote { font-size: 100%;
background: rgba(97, 116, 113, 0.3);
border-left: 50px solid rgba(102, 129, 137, 0.0);
margin: .5em 10px 1.5em 10px;
padding: 0.5em 10px;
line-height: initial;
font-weight: 400;
letter-spacing: 5px;
text-transform: lowercase;
font-style: italic;
-webkit-background-clip: text;
color: #937B5A;
background: -webkit-linear-gradient(#AE6C1F, rgba(127, 123, 100, 0.47), rgba(48, 53, 51, 0.93));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.author1{
color: #444;
float: left;
top: 341.65px;
position: absolute;
margin-left: -58px;
transform: rotate(90deg);
letter-spacing:-1.125px;
}
.author2{
color:#444;
float:left;
top:697.75px;
position:absolute;
margin-left:-90px;
transform:rotate(90deg);
letter-spacing:1.75px;
}
.a2{color:transparent;
background:rgba(102, 129, 137, 0.56);}
blockquote:before {
color: #ccc;
font-size: 4em;
line-height: 10px;
margin-right: 0.25em;
vertical-align: -0.4em;
}
blockquote p {
display: inline;
}
#wrapper {
margin: 0 auto;
width:100%;
vertical-align: baseline;
}
#one {
float: left;
overflow: hidden;
width: 420px;
margin:.5em auto 1em;
padding: .3em 1em .25em 1em;
}
#one .p1{
}
#two,#three {
float: left;
overflow: hidden;
width: 420px;
margin:.5em auto 1em;
padding: .3em 1em .25em 1em;
}
span,span2 {
padding: 2px;
font-weight: bold;
color: #333;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
p {
text-align: justify;
padding: 0 10px 30px 10px;
letter-spacing: -.5px;
}
.p1:first-child:first-letter {
float: left;
font-size: 80px;
line-height: .5em;
padding: 15px 25px 12px 10px;
overflow: show;
margin-top: 5px;
margin-right: 10px;
font-family: 'Mr Dafoe', cursive;
-webkit-font-smoothing: auto;
color: transparent;
background: -webkit-linear-gradient(#5B0CE2, rgba(26, 144, 138, 0.42), #60DEAC);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color:#222;
}
.title {
color:#333;
letter-spacing:.1125em;
border:2px solid #333;
background:rgba(255,255,255,.25);
-webkit-font-smoothing: antialiased;
position: relative;
margin:.5em auto 1em;
padding: .3em 1em .25em 1em;
text-align: center;
text-transform: uppercase;
background: linear-gradient(to bottom, rgba(94, 143, 144, 0.25) 0%,rgba(51, 144, 210, 0.31) 12%,rgba(22, 183, 112, 0.28) 25%,rgba(219, 186, 103, 0) 39%,rgba(255, 255, 255, 0.65) 50%,rgba(125, 187, 172, 0.42) 51%,rgba(152, 218, 163, 0.47) 60%,rgba(41, 220, 136, 0) 76%,rgba(142, 166, 98, 0.4) 91%,rgba(199, 198, 182, 0.65) 100%););
}
.title:after {
position: absolute;
top: 100%;
left: 50%;
width: 240px;
height: 4px;
margin-left: -120px;
content: '';
background-color: #333;
}
a {
padding:5px 20px;
background: #58AABC;
color: #fff;
text-decoration: none;
}
a:hover {
color: #fff;
background:rgba(88, 170, 188, 0.75);
text-decoration: none;
}
table {
width: 100%;
margin: 0;
padding: 0;
border-collapse: collapse;
border-spacing: 0;
}
table tr {
border: 1px solid #444;
padding: 5px;
}
table th,
table td {
padding: 10px;
text-align: center;
}
table th {
text-transform: uppercase;
font-size: 14px;
font-weight:900;
letter-spacing: 1px;
}
@media screen and (max-width: 1030px) {
#two{display:none;}
#three{
padding:6px 20px;
}
}
@media screen and (max-width: 600px) {
a {
padding:5px 20px;
background: #58AABC;
color: #fff;
text-decoration: none;
}
a:hover {
color: #fff;
text-decoration: none;
}
#two{display:none;}
table {
border: 0;
}
table thead {
display: none;
}
table tr {
margin-bottom: 10px;
display: block;
border-bottom: 2px solid #444;
}
table td {
display: block;
text-align: right;
font-size: 13px;
border-bottom: 1px dotted #444;
}
table td:last-child {
border-bottom: 0;
}
table td:before {
content: attr(data-label);
float: left;
text-transform: uppercase;
font-weight: bold;
}
}
.carg:hover{background:#00c462;}
.pint:hover{background:#cb2027;}
.beha:hover{background:#008CFF;}
.link:hover{background:#4875B4;}
.twit:hover{background:#33CCFF;}
.code:hover{background:#212121;}
.stak:hover{background:#f58233;}
.gmai:hover{background:#dd4b39;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment