Skip to content

Instantly share code, notes, and snippets.

@dephora

dephora/Material Portfolio Messaround - Dark.markdown

Last active October 28, 2015 05:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dephora/ea57bf2e2240a7b82e50 to your computer and use it in GitHub Desktop.
Save dephora/ea57bf2e2240a7b82e50 to your computer and use it in GitHub Desktop.
Download ZIP
Material Portfolio Messaround - Dark
Raw
index.html
html
body
// NAVBAR
.navbar-wrapper
.container
nav.navbar.navbar-default.navbar-fixed-top
.container
.navbar-header
button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='#navbar', aria-expanded='false', aria-controls='navbar')
span.sr-only Toggle navigation
span.icon-bar
span.icon-bar
span.icon-bar
// a.navbar-brand.skewed(href='#') Portfolio
#navbar.navbar-collapse.collapse
ul.nav.navbar-nav.navbar-right
li.skewed
a(href='#landing') Home
li.skewed
a(href='#about') About
li.skewed
a(href='#works') Works
li.skewed
a(href='#contact') Contact
// SECTION: LANDING
section.component.parallax.image-dark-red-a(id="landing")
.container-fluid
.row
.col-md-8.col-md-offset-4.col-lg-6.col-lg-offset-5
h2.p-t-175.text-right The Portfolio of Matt D.
p.text-right The greatest successes, most brilliant failures.
// SECTION: ABOUT
section.component.bg-darkest-gray(id='about')
.container
.row
.col-md-8.col-md-offset-2.text-center
h2 About Me
h5 I'm currently harnessing my non-existent super powers to transform myself into a developer extradonaire.
i.fa.fa-power-off.fa-3x
h3 Super Powers
p As noted above, those skills are currently in progress so I won't bore you with the details or embarass myself. However if you check back at a later date, you might, just might stumble across something new!
// SECTION: WORKS
section.component.parallax.image-dark-red-b(id='works')
.container
.row
.col-md-12
h2.text-center The Works
.row
.col-md-4
.card-header Resident Evil 642
.card
img(class="img-responsive" src="http://www.twinfinite.net/wp-content/uploads/2015/03/312122.jpg")
.col-md-4
.card-header Pokemon: A Horror Story
.card
img(class="img-responsive" src="http://i.ytimg.com/vi/CRI3RnrisVA/maxresdefault.jpg")
.col-md-4
.card-header Final Fantasy 249
.card
img(class="img-responsive" src="http://199.101.98.242/media/images/157749-Dissidia_-_Final_Fantasy_(USA)-3.jpg")
.row.p-t-40
.col-md-4
.card-header Leia vs. Lara Croft
.card
img(class="img-responsive" src="http://www.androidcentral.com/sites/androidcentral.com/files/styles/larger/public/article_images/2015/04/lara-croft-relic-run.jpg?itok=Tv90jXyA")
.col-md-4
.card-header Cthulhu: Man's Best Friend
.card
img(class="img-responsive" src="http://images.alphacoders.com/509/509983.jpg")
.col-md-4
.card-header He-Man vs. Han Solo
.card
img(class="img-responsive" src="http://cdn.3news.co.nz/3news/AM/2013/10/22/318193/he-man1.jpg")
// SECTION: CONTACT
section.component.bg-darkest-gray(id='contact')
.container
.row
.col-md-8.col-md-offset-2.text-center
h2 Contact Me
h5 I would love to put all of my personal information on the Internet but something tells me that is a bad idea.
i.fa.fa-phone.fa-3x
h3 By Phone
p Did you really believe the fancy phone icon above would open up your dialer? There might be a hidden div in the page that exposes this information, go on, look for it! I'll be expecting a call.
// SECTION: EXTRAS
section.component.parallax.landing.image-dark-red-c(id="extras")
.container
.row
.col-md-12
h2.text-center Extras
p.text-center This area is under construction, check back later!
// SECTION: FOOTER
section.component.bg-darkest-gray(id='footer')
.container
.row
.col-md-4
h2 Credits Due
p I take no credit for the images on this page. All images may be subject to copyright.
p Material design images done by DaKoder.
span
a(href="http://dakoder.deviantart.com/" target="_blank") http://dakoder.deviantart.com/
.col-md-3.col-md-offset-1
h2 This Page
p This page was created for educational use only.
p All works are purely fictional.
.col-md-2.col-md-offset-1
h2 Social
a.fa-stack.fa-lg(href="#")
i.fa.fa-square-o.fa-stack-2x
i.fa.fa-linkedin.fa-stack-1x
a.fa-stack.fa-lg(href="#")
i.fa.fa-square-o.fa-stack-2x
i.fa.fa-google.fa-stack-1x
a.fa-stack.fa-lg(href="#")
i.fa.fa-square-o.fa-stack-2x
i.fa.fa-facebook.fa-stack-1x
a.fa-stack.fa-lg(href="#")
i.fa.fa-square-o.fa-stack-2x
i.fa.fa-twitter.fa-stack-1x
p.copyright © 2015 Dephora
Raw
Material Portfolio Messaround - Dark.markdown
Raw
script.js
$(document).ready(function() {
// Navbar hover
$('.navbar-nav>li.skewed').hover(function() {
$(this).animate({ 'height': '90px',
'margin-right': '25px',
'margin-left': '-15px',
'background-color': 'rgb(20, 213, 233)'
});
}, function() {
$(this).animate({ 'height': '50px',
'margin-right': '5px',
'margin-left': '5px',
'background-color': '#E9503C'
});
});
// Navbar Scroll To Section
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 1200, 'swing', function () {
window.location.hash = target;
});
});
});
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>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.2/jquery.scrollTo.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-localScroll/1.3.5/jquery.localScroll.min.js"></script>
Raw
style.css
/*---------------------------------------------------
[Table of Contents]
1. Global UI
1a. Variables: Colors
1b. Styles: Colors
1c. Box-Sizing
1d. Components
i. Cards
1e. Navbar
2. Section Styles
2a. Global Section Styles
2b. Section: Landing
2c. Section: About
2d. Section: Works
2e. Section: Contact
2f. Section: Extras
2g. Footer
3. Backgrounds
4. Responsive
---------------------------------------------------*/
/****************************************************/
/* GLOBAL UI*/
/****************************************************/
@import url(https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900);
@import url(https://fonts.googleapis.com/css?family=Dosis:100,200,300,400,500,600,700,800,900);
html {
}
body {
font-family: 'Raleway', serif;
font-size: 1.4em;
}
/************** VARIABLES: COLORS **************/
$theme-gray: #bebebe;
$matching-blue: rgb(60, 213, 233);
$mostly-white: rgba(255, 255, 255, .95);
$darkest-gray: rgb(47,47, 47);
$primary-red: #E9503C;
$yellow: #F1F059;
$primary-blue: #2196f3;
$dark-blue: #1976d2;
$light-blue: #bbdefb;
$lime: #E4E948;
$semi-white: rgba(255, 255, 255, .7);
$red: rgba(255, 56, 56, .8);
$mint: #CBF0E9;
$skyblue: #04B9D3;
$brightblue: #80FDF9;
$greenblue: #04A0B9;
$greenblue-text: rgba(0, 104, 116, .9);
$mat-dark-primary: rgba(0, 0, 0, .87);
$mat-dark-primary-light: rgba(0, 0, 0, .7);
$mat-dark-secondary: rgba(0, 0, 0, .54);
$darkgray: #333;
$darkcyan: #111617;
$darkgray-on-red: #2a2a2a;
/************** STYLES: COLORS **************/
.bg-darkest-gray {
background-color: $darkest-gray;
}
.bg-darkcyan {
background-color: $darkcyan;
}
.bg-mint {
background-color: $mint;
}
.bg-greenblue {
background-color: $greenblue;
}
.bg-skyblue {
background-color: $skyblue;
}
.bg-brightblue {
background-color: $brightblue;
}
/************** BOX-SIZING **************/
.p-t-40 {
padding-top: 40px;
}
.p-t-100 {
padding-top: 100px;
}
.p-t-175 {
padding-top: 175px;
}
.p-t-200 {
padding-top: 200px;
}
.p-t-225 {
padding-top: 2250px;
}
.p-b-40 {
padding-bottom: 40px;
}
.p-b-50 {
padding-bottom: 50px;
}
.p-b-75 {
padding-bottom: 750px;
}
.p-b-100 {
padding-bottom: 100px;
}
.p-b-115 {
padding-bottom: 115px;
}
.p-l-65 {
padding-left: 65px;
}
.p-l-115 {
padding-left: 115px;
}
.p-r-50 {
padding-right: 50px;
}
.p-r-80 {
padding-right: 80px;
}
.p-r-100 {
padding-right: 100px;
}
/************** COMPONENTS **************/
/***** CARDS ****/
.card {
background: rgba(0, 0, 0, .7);
position: relative;
border-radius: 2px;
height: 540px;
width: 100%;
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.card-header {
background-color: $primary-red;
color: $darkgray-on-red;
border-radius: 2px;
height: 50px;
position: relative;
width: 100%;
margin-bottom: 5px;
text-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
padding: 8px 0;
font-size: 1.5em;
font-weight: 400;
text-align: center;
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.card img {
height: 100%;
}
.card:after, .card:before {
position:absolute;
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.card:before {
content:'\A';
width:100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.6);
}
.card:after {
/* content: attr(data-content); */
width:100%;
color:#fff;
z-index:1;
bottom:0;
padding:4px 10px;
/* text-align:center; */
/* background:red; */
box-sizing:border-box;
-moz-box-sizing:border-box;
}
.card:hover:after, .card:hover:before {
opacity:1;
}
/************** NAVBAR **************/
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
position: absolute;
top: 0;
/* right: 0; */
/* left: 0; */
z-index: 20;
}
/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container {
padding-right: 0;
padding-left: 0;
}
.navbar-wrapper .navbar {
padding-right: 45px;
padding-left: 15px;
}
.navbar-wrapper .navbar .container {
width: auto;
/* margin-right: 30px; */
/* margin-left: 30px; */
}
nav.navbar {
font-size: 1.1em;
}
.navbar.navbar-default {
background-color: transparent;
border-color: transparent;
}
.navbar.navbar-default a.navbar-brand.skewed {
margin-right: 5px;
margin-left: 5px;
height: 50px;
transform: skew(318deg);
background: #E7ED49;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.navbar-nav>li.skewed {
margin-right: 5px;
margin-left: 5px;
height: 50px;
transform: skew(318deg);
background: $primary-red;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.navbar-default .navbar-nav>li>a {
color : $darkgray-on-red;
font-weight: 300;
padding: 15px 25px;
transform: skew(42deg);
/* text-shadow: 2px 2px rgba(0,0,0, 0.1); */
text-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
/****************************************************/
/* SECTION STYLES */
/****************************************************/
/************** GLOBAL SECTION STYLES **************/
section.component i.fa {
color: $primary-red;
text-shadow: 0 3px 3px rgba(0,0,0,0.16), 0 3px 3px rgba(0,0,0,0.23);
padding-top: 30px;
}
section.component {
color: $mostly-white;
padding-top: 70px;
font-family: 'Dosis', serif;
padding-bottom: 120px;
}
section.component h2 {
color: $matching-blue;
margin-bottom: 30px;
font-size: 2.8em;
font-weight: 400;
text-shadow: 0 3px 3px rgba(0,0,0,0.16), 0 3px 3px rgba(0,0,0,0.23);
text-transform: uppercase;
}
section.component h3 {
margin-bottom: 20px;
font-size: 2.2em;
font-weight: 400;
text-shadow: 0 3px 3px rgba(0,0,0,0.16), 0 3px 3px rgba(0,0,0,0.23);
color: $matching-blue;
}
section.component h5 {
margin-bottom: 40px;
font-size: 2em;
font-weight: 300;
text-shadow: 0 3px 3px rgba(0,0,0,0.16), 0 3px 3px rgba(0,0,0,0.23);
}
section.component p {
margin-bottom: 20px;
font-size: 1.6em;
font-weight: 400;
text-shadow: 0 3px 3px rgba(0,0,0,0.16), 0 3px 3px rgba(0,0,0,0.23);
}
section.component.content {
padding: 30px;
}
section.component.parallax {
min-height: 1000px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
section.component.image-1 {
background: radial-gradient(ellipse at center, #1f3649 0%, #17253d 44%, #040d11 100%);
color: white;
}
/************** SECTION: LANDING **************/
#landing h2,
#landing p {
padding-right: 50px;
}
#landing p {
color: $theme-gray;
}
/************** SECTION: ABOUT **************/
/************** SECTION: WORKS **************/
#works div[class*="col-"] {
margin-bottom: 60px;
}
/************** SECTION: EXTRAS **************/
#extras p {
color: #fff;
}
/************** SECTION: FOOTER **************/
#footer {
padding-top: 30px;
padding-bottom: 30px;
text-align: center;
}
#footer i.fa {
padding-top: 0;
color: $primary-red;
}
#footer i.fa.fa-stack-1x {
padding-top: 0;
color: $mostly-white;
}
#footer h2 {
font-size: 1.7em;
margin-bottom: 20px;
}
#footer p {
font-size: 1.3em;
}
#footer a {
font-size: 1.15em;
text-decoration: none;
color: $matching-blue;
}
#footer div[class*="col-"] {
margin-bottom: 50px;
}
#footer p.copyright {
font-size: 1.15em;
margin-top: 50px;
color: $semi-white;
}
/****************************************************/
/* BACKGROUNDS */
/****************************************************/
section.component.image-2 {
background-image: url(http://lh3.googleusercontent.com/-alKGdDNrZpk/VF5nZFBacnI/AAAAAAAAZfM/u6LmXTEmysk/w958-h724-no/14%2B-%2B18);
}
section.component.image-3 {
background-image: url(http://www.topofandroid.com/wp-content/uploads/2015/05/Android-L-Material-Design-Wallpapers-12.jpg);
}
section.component.image-4 {
background-image: url(https://lh3.googleusercontent.com/-alKGdDNrZpk/VF5nZFBacnI/AAAAAAAAZfM/u6LmXTEmysk/w958-h724-no/14%2B-%2B18);
}
section.component.image-5 {
background-image: url(http://substantial.com/assets/images/blog/2015/05/materialdesign_blog.png);
}
section.component.image-5b {
background-image: url(https://cdn-images.xda-developers.com/direct/3/3/9/3/1/1/8/Design.jpg);
}
section.component.image-6 {
background-image: url(http://lh5.googleusercontent.com/-7fiskJ9M42I/VF5nZGXuOKI/AAAAAAAAZlU/kEXZl1E_QQc/w958-h539-no/14%2B-%2B110);
}
section.component.image-7 {
background-image: url(http://lh3.googleusercontent.com/-b_fSb0VJPYk/VF5nZCpXx3I/AAAAAAAAavs/tVSt6--l1Yk/s765-no/14%2B-%2B14);
}
section.component.image-8 {
background-image: url(http://www.topofandroid.com/wp-content/uploads/2015/05/Android-L-Material-Design-Wallpapers-12.jpg);
}
section.component.image-9 {
background-image: url(http://wallpaperspal.com/wp-content/uploads/Material-Design-Blue-Scheme-Wallpaper.jpg);
}
section.component.image-10 {
background-image: url(http://4.bp.blogspot.com/-LM_oSHCnkLo/VJmEHDx_BQI/AAAAAAAAGGM/6a6PDdHyIJE/s0/2.png);
}
section.component.image-12 {
background-image: url(http://likefon.com/uploads/p1g/android-l-material-design-3707.jpg);
}
section.component.image-dark-red-a {
background-image: url(http://orig11.deviantart.net/20eb/f/2015/030/6/f/_minflat__dark_material_design_wallpaper__4k__by_dakoder-d8fjqzu.jpg);
}
section.component.image-dark-red-b {
background-image: url(http://4kwallpapers.co/wp-content/uploads/2015/07/Dark-Material-Design-4K-Wallpaper.jpg);
}
section.component.image-dark-red-c{
background-image: url(https://4.bp.blogspot.com/-flxbcly7cB8/VYUiSrhkj3I/AAAAAAABofw/kwrMmHvsyWY/s0/Dark_Material_Design3_wallpaper.jpg);
}
/****************************************************/
/* RESPONSIVE */
/****************************************************/
@media (min-width: 992px) {
// SECTION: LANDING
#landing p {
font-size: 1.8em;
padding-right: 100px;
}
// SECTION: WORKS
.card {
height: 385px
}
// SECTION: FOOTER
#footer {
text-align: left;
}
#footer p.copyright {
margin-top: 41px;
}
}
@media (min-width: 1200px) {
// SECTION: LANDING
#landing h2 {
padding-right: 10px;
}
#landing p {
padding-right: 70px;
}
}
Raw
styles
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment