Skip to content

Instantly share code, notes, and snippets.

@calvinmorett

calvinmorett/Portfolio Xperiment.markdown

Created December 24, 2015 04:58
Show Gist options
  • Save calvinmorett/57449f4e65608c285465 to your computer and use it in GitHub Desktop.
Save calvinmorett/57449f4e65608c285465 to your computer and use it in GitHub Desktop.
Download ZIP
Portfolio Xperiment
Raw
index.html
<body>
<div class="responsive-menu">
<a href="#menu-toggle" class="crossRotate responsive-menu" id="menu-toggle"><i class="fa fa-angle-left timing"></i></a></div>
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand ">
<a href="http://www.calvinmorett.com">
<img src="http://calvinmorett.com/img/200.png" class="inverted brandimg">
</a>
</li>
<!--
<li class="main-nav timing">
<a href="#" class="timing,main-nav">Portfolio</a>
</li>
<li class="main-nav timing">
<a href="#" class="timing, main-nav">Shop</a>
</li>
-->
<li class="timing clearc gmai">
<a href="mailto:morettc@gmail.com">Email</a>
</li>
<hr>
<li class="beha timing white">
<a href="https://www.behance.net/morettc15cb">Behance</a>
</li>
<li class="link timing black">
<a href="https://linkedin.com/in/calvinmorett">LinkedIn</a>
</li>
<li class="twit timing white">
<a href="https://twitter.com/CalvinMorett">Twitter</a>
</li>
<li class="carg timing clearc">
<a href="http://cargocollective.com/calvinmorett">Cargo</a>
</li>
<li class="code timing white">
<a href="http://codepen.io/odisbey">Codepen</a>
</li>
<li class="pint timing black">
<a href="https://www.pinterest.com/morettc/">Pinterest</a>
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="container">
<div class="row">
<div class="col-1">Calvin is a mixed media and multimedia designer living and working in Upstate New York.</div>
<div class="col-1">He gained valuable print and editorial design experience in the newspaper industry while working along highly skilled colleagues over several years.</div>
<div class="col-1">He is currently crafting new projects in traditional and digital art, as well as creating user friendly web designs.</div>
<div class="col-1">He enjoys talking about new techniques and the process of art, music and everything creative. If you have any inquiries regarding work or wanna chat, he recommends getting in-touch through email.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
</body>
</html>
Raw
Portfolio Xperiment.markdown
Raw
script.js
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
$( ".crossRotate" ).click(function() {
if ( $( this ).css( "transform" ) == 'none' ){
$(this).css("transform","rotate(180deg)");
} else {
$(this).css("transform","" );
}
});
Raw
scripts
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
/*!
* Start Bootstrap - Simple Sidebar HTML Template (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
/* Toggle Styles */
*, :before, :after {
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html{margin:0 auto;}
body {
font: 2.5em 'Roboto', sans-serif bold;
color:rgb(77, 77, 77);
background: rgba(221, 205, 193, 1);
}
hr{
height:-1px;
overflow:hidden;
width:50px;
border-bottom:5px solid rgb(77, 77, 77);
}
a,a:active,a:visited{
transition:color .3s ease;}
a:hover{
transition:color .2s ease;}
#wrapper {
padding-left: 0;
-webkit-transition: all .45s ease;
-moz-transition: all .45s ease;
-o-transition: all .45s ease;
transition: all .45s ease;
}
#wrapper.toggled {
margin:1.5em auto;
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background:rgba(221, 205, 193, 0);
-webkit-transition: all 0.45s ease;
-moz-transition: all 0.45s ease;
-o-transition: all 0.45s ease;
transition: all 0.45s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 90%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {font-size:.85em;
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
margin: 4em 0;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: rgb(77, 77, 77);
}
.sidebar-nav li a:hover {
text-decoration: none;
color: inherit;
background:transparent;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
-webkit-animation: fadeIn 1.5s;
height: 100px;
font-size: .75em;
line-height: 60px;
margin-bottom:2em;
}
.sidebar-nav > .sidebar-brand a {
color: rgba(255,255,255,1);
}
.sidebar-nav > .sidebar-brand a:hover {
color: rgba(44, 60, 73,1);
background: none;
}
@media(min-width:768px) {
#wrapper {
padding-left: 250px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
.col-1{
overflow:hidden;
min-width:320px;
width:75%;
margin: 1.5em 0;
margin-right:8em;
}
.responsive-menu{
z-index:9999;
font-size:55px;
top:0;
left:10px;
border:none;
position:absolute;
}
.responsive-menu i{
color:rgb(77, 77, 77);
}
.responsive-menu i:hover{
background:transparent;
color:red;
}
.crossRotate {
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
outline: 0;
}
.crossRotate:active {
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
}
.timing{
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}
.inverted {
-webkit-filter: invert(70%);
filter: invert(70%);
}
.brandimg{ width:100px;height:100px;}
.main-nav:hover{background:#e02023;}
.white{color:#fff;}
.clearc{color:transparent;}
.black{color:#000;}
.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;}
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