<!--Matching Tragedy v5
Currently: responsive
Coming soon: database-driven (PHP/MySQL), Git repository, SASS-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<title>A Matching Tragedy - Web Design and Development</title>
<!-- CSS Stylesheets -->
<link href="vendors/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Fira+Sans:400,300,400italic,700' rel='stylesheet' type='text/css'>
<link href="lib/css/mtstyle.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<a name="top"></a>
<header class="main-header">
<nav class="navbar-fixed-top">
<div class="row">
<a href="#top">
<i class="fa fa-home logo"></i>
</a>
<ul class="main-nav">
<li><a href="#portfolio" title="Portfolio section">Portfolio</a></li>
<li><a href="#about" title="About section">About</a></li>
<li><a href="#contact" title="Contact section">Contact</a></li>
</ul>
</div>
</nav>
<a name="home"></a>
<div class="hero-text-box">
<h1>Human-centric designer.<br />
Strategic developer.<br />
Versatile creator.</h1>
</div>
</header>
<div class="container">
<section class="section-portfolio js--section-portfolio" id="portfolio">
<div class="row">
<h2>Selected Portfolio</h2>
</div>
<div class="row portfolio-row">
<div class="col-md-3 col-xs-6">
<div class="portfolio">
<a href="http://www.matchingtragedy.com/newsite/site/southseattle.html" class="portfolio-link" title="South Seattle College programs">
<div style="background-image: url(http://www.matchingtragedy.com/newsite/lib/images/sscprogramsTh.jpg);" class="portfolio-image">
<div class="para-image-test">
<p>South Seattle College</p>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="portfolio">
<a href="http://www.matchingtragedy.com/newsite/site/tdaredesign.html" class="portfolio-link" title="Trade Alliance site redesign">
<div style="background-image: url(http://www.matchingtragedy.com/newsite/lib/images/sitemockTh.jpg);" class="portfolio-image">
<div class="para-image-test">
<p>Trade Alliance Site</p>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="portfolio">
<a href="http://www.matchingtragedy.com/newsite/site/irbc.html" class="portfolio-link" title="IRBC site design">
<div style="background-image: url(http://www.matchingtragedy.com/newsite/lib/images/irbcTh.jpg);" class="portfolio-image">
<div class="para-image-test">
<p>IRBC site</p>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="portfolio">
<a href="http://www.matchingtragedy.com/newsite/brand/tdalogo.html" class="portfolio-link" title="TDA Logo">
<div style="background-image: url(http://www.matchingtragedy.com/newsite/lib/images/tdanewlogoTh.jpg);" class="portfolio-image">
<div class="para-image-test">
<p>TDA logo redesign</p>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="row portfolio-row">
<div class="col-md-3 col-xs-6">
<div class="portfolio">
<a href="http://www.matchingtragedy.com/newsite/print/whitefolder.html" class="portfolio-link" title="About the TDA folder">
<div style="background-image: url(http://www.matchingtragedy.com/newsite/lib/images/whitefolderTh.jpg);" class="portfolio-image">
<div class="para-image-test">
<p>"About The TDA" folder</p>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="portfolio">
<a href="http://www.matchingtragedy.com/newsite/print/greaterseattle.html" class="portfolio-link" title="Greater Seattle brochure">
<div style="background-image: url(http://www.matchingtragedy.com/newsite/lib/images/greaterseattleTh.jpg);" class="portfolio-image">
<div class="para-image-test">
<p>Greater Seattle brochure</p>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="portfolio">
<a href="http://www.matchingtragedy.com/newsite/print/messages.html" class="portfolio-link" title="Greater Seattle Messages">
<div style="background-image: url(http://www.matchingtragedy.com/newsite/lib/images/messagesTh.jpg);" class="portfolio-image">
<div class="para-image-test">
<p>Greater Seattle Messages</p>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="portfolio">
<a href="http://www.matchingtragedy.com/newsite/print/cleanbooklet.html" class="portfolio-link" title="Cleantech Trip brochure">
<div style="background-image: url(http://www.matchingtragedy.com/newsite/lib/images/cleantechcoverTh.jpg);" class="portfolio-image">
<div class="para-image-test">
<p>Cleantech trip brochure </p>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="row portfolio-row">
<div class="col-md-3 col-xs-6">
<div class="portfolio">
<a href="http://www.matchingtragedy.com/newsite/art/radioactive.html" class="portfolio-link" title="Radioactive lyrics poster">
<div style="background-image: url(http://www.matchingtragedy.com/newsite/lib/images/radioactiveTh.jpg);" class="portfolio-image">
<div class="para-image-test">
<p>"Radioactive" lyrics </p>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="portfolio">
<a href="http://www.matchingtragedy.com/newsite/art/songbird.html" class="portfolio-link">
<div style="background-image: url(http://www.matchingtragedy.com/newsite/lib/images/songbirdTh.jpg);" class="portfolio-image" title="Typographic Songbird poster">
<div class="para-image-test">
<p>Typographic Songbird</p>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="portfolio">
<a href="http://www.matchingtragedy.com/newsite/art/fantasytree.html" class="portfolio-link" title="Fantasy Tree">
<div style="background-image: url(http://www.matchingtragedy.com/newsite/lib/images/fantasytreeTh.jpg);" class="portfolio-image">
<div class="para-image-test">
<p>Fantasy Tree</p>
</div>
</div>
</a>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="portfolio">
<a href="http://www.matchingtragedy.com/newsite/print/lunarnewyear2013.html" class="portfolio-link" title="Lunar New Year">
<div style="background-image: url(http://www.matchingtragedy.com/newsite/lib/images/LNY2013Th.jpg);" class="portfolio-image">
<div class="para-image-test">
<p>Lunar New Year</p>
</div>
</div>
</a>
</div>
</div>
</div>
</section>
</div>
<div class="container-fluid fluid-background">
<section class="section-about js--section-about" id="about">
<div class="row">
<h2 class="skills-head">About</h2>
</div>
<div class="row">
<div class="about-text">
<p class="about-me">Hi, I'm Cortney. I'm a front-end developer and designer in Seattle. I am also an artist, a writer, a creative, and a geek. I create beautiful, usable websites and graphics, and I seek knowledge, which keeps me abreast of the latest trends and standards. I hand-code, because I am a maker.</p>
<p class="about-me">I'm a digital native who's worked in gaming, education, and the non-profit sector, and managed a bar. I have a degree in design and development, and I'm currently teaching myself JSON APIs, AngularJS, Python, Ruby, and more about the back end because I really, really like databases.</p>
<p class="about-me">I am currently available for freelance and contract work.</p>
</div>
</div>
<div class="row about-row">
<div class="col-md-6 col-xs-12">
<div class="skills-box-1">
<h3 class="left skills-head-2">My Skills</h3>
<img class="skills-chart" src="http://www.matchingtragedy.com/newsite/lib/css/img/skills-chart.png" alt="Bar chart of my skills by category" />
</div>
</div>
<div class="col-md-6 col-xs-12">
<div class="skills-box-2">
<h3 class="skills-head">A Few Facts</h3>
<ul class="skills-box">
<li>I have tattoos in Calibri and Candara</li>
<li>It's a tossup between Iron Man and Phoenix</li>
<li>I built the Lego Ultimate Millennium Falcon</li>
<li>I never want to stop creating</li>
<li>There's no way to pick a favorite color or author</li>
<li>I have 45 Sharpies</li>
<li>I own three Macs and one PC; this is not enough</li>
</ul>
</div>
</div>
</div>
</section>
</div>
<div class="container">
<section class="section-contact js--section-contact" id="contact">
<div class="row">
<h2>Contact</h2>
</div>
<div class="row social">
<div class="col-md-3 col-xs-6">
<div class="social-buttons">
<a href="https://www.twitter.com/@matchingtragedy" title="Me @ Twitter"><i class="fa fa-twitter"></i></a>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="social-buttons">
<a href="https://github.com/matchingtragedy" title="Me @ Github"><i class="fa fa-github"></i></a>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="social-buttons">
<a href="https://www.linkedin.com/in/cjmarabetta" title="Me @ LinkedIn"><i class="fa fa-linkedin"></i></a>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="social-buttons">
<a href="https://www.freecodecamp.com/matchingtragedy" title="Me @ FreeCodeCamp"><i class="fa fa-fire"></i></a>
</div>
</div>
</div>
</section>
</div>
<footer class="footer-full">
<div class="row footer-row">
<div class="col-md-6 col-xs-12">
<div class="footer-text">
<p>© 2009-2016 C.J. Marabetta
<br />
<i class="fa fa-envelope"></i> cjmarabetta@gmail.com</p>
</div>
</div>
<div class="col-md-6 col-xs-12">
<!--<div class="footer-nav">-->
<ul class="footer-links">
<li><a href="#portfolio" title="portfolio">Portfolio</a></li>
<li><a href="#about" title="About">About</a></li>
<li><a href="#contact" title="Contact">Contact</a></li>
<!--<li><a href="#" title="My resume">Résumé</a></li>-->
</ul>
<!--</div>-->
</div>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="vendors/js/bootstrap.min.js"></script>
<script src="lib/js/scripts.js"></script>
</body>
</html>
/*CSS for matchingtragedy.com v5 - bootstrap responsive.*/
/*March 2016*/
/*General notes*/
/* 0800a8 - blue
005f3d - green
4f0d67 - purple
03b3b0 - turquoise
d4af37 - gold*/
/*---------------------------------*/
/* BASIC SETUP */
/*---------------------------------*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-color: #ffffff;
color: #777777;
min-height: 100%;
position: relative;
}
body {
font-family: 'Fira Sans', 'Arial', sans-serif;
font-weight: 400;
font-size: 20px;
text-rendering: optimizeLegibility;
width: 100%;
margin-bottom: 90px;
}
.clearfix {
zoom: 1;
}
.clearfix:after {
content: ' ';
clear: both;
display: block;
visibility: hidden;
}
/*---------------------------------*/
/* REUSABLE COMPONENTS */
/*---------------------------------*/
.row {
max-width: 100%;
margin: 0 auto;
}
section {
padding: 80px 0px;
}
/*----------- HEADINGS ------------*/
h1 {
color: #ffffff;
font-size: 250%;
line-height: 145%;
letter-spacing: 1px;
}
h1.headline {
color: #0800a8;
font-size: 180%;
word-spacing: 4px;
margin-top: 40px;
text-align: center;r
}
h2 {
color: #0800a8;
font-size: 150%;
padding-bottom: 10px;
text-align: center;
letter-spacing: 1px;
}
h2:after {
display: block;
height: 2px;
background-color: #4f0d67;
content: " ";
width: 100px;
margin: 0 auto;
margin-top: 20px;
}
h2.skills-head:after {
background-color: #d4af37;
}
h3 {
color: #0800a8;
font-size: 125%;
margin-left: 5%
}
h3.left {
margin-left: 25%;
}
/*-----------GENERIC LINKS---------*/
a {
text-decoration: none;
}
/*---------------------------------*/
/* HEADER */
/*---------------------------------*/
.main-header {
background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(http://www.matchingtragedy.com/newsite/lib/css/img/pencils.jpg);
background-size: cover;
background-position: center;
background-attachment: fixed;
height: 100vh;
position: relative;
}
nav {
background-color: #0800a8;
height: 65px;
box-shadow: 3px 3px 10px 0 #000000;
}
.main-nav {
float: right;
list-style: none;
margin-top: 20px;
}
.main-nav li {
display: inline-block;
margin-right: 40px;
}
.main-nav li a:link,
.main-nav li a:visited {
padding: 6px 0px;
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 90%;
border-bottom: 2px solid transparent;
transition: border-bottom 0.2s;
}
.main-nav li a:hover,
.main-nav li a:active {
border-bottom: 2px solid #d4af37;
}
.hero-text-box {
position: absolute;
width: 44%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.logo {
font-size: 150%;
color: #ffffff;
width: auto;
float: left;
margin-left: 2%;
margin-top: 20px;
}
/*---------INNER PAGE HEADER-------*/
.inner-header {
background-image: none;
}
/*---------------------------------*/
/* PORTFOLIO */
/*---------------------------------*/
.section-portfolio {
margin-top: 60px;
padding: 0px;
}
.portfolio-row {
margin-top: 40px;
margin-bottom: 40px;
}
.portfolio {
position: relative;
width: 100%;
padding-bottom: 100%;
margin: 25px 0;
background-color: #f2f2f2;
border-radius: 50%;
transition: all 1s linear;
overflow: hidden;
box-shadow: inset 3px 3px 10px 0 #000000;
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
}
.portfolio-link {
text-decoration: none;
}
.portfolio-image {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
border-radius: 50%;
opacity: 0.5;
transform: scale(1.15);
transition: all 1s linear;
}
.portfolio-image:hover {
opacity: 1;
transform: scale(1);
}
.para-image-test {
display: block;
color: #ffffff;
height: 70%;
width: 70%;
border-radius: 50%;
position: absolute;
top: 15%;
left: 15%;
padding: 10%;
border: 2px solid #ffffff;
background-color: #0800a8;
opacity: 0.0;
transition: all 1s linear;
}
.para-image-test:hover {
box-shadow: 3px 3px 10px 0 #000000;
opacity: 0.8;
}
.para-image-test p {
color: #ffffff;
display: block;
height: 92%;
width: 92%;
padding-top: 15%;
padding-left: 15%;
font-size: 70%;
}
/*-------INNER PAGE PORTFOLIO-------*/
.bodytext {
width: 100%;
margin-left: 5%;
line-height: 145%;
}
.bodytext p {
margin-bottom: 10px;
}
.full-image img {
width: 100%;
margin: 5px;
}
.visit-button {
background-color: #0800a8;
border-radius: 10px;
padding: 5px 10px;
display: inline-block;
margin-top: 20px;
}
.visit-button a:link,
.visit-button a:active,
.visit-button a:hover,
.visit-button a:visited {
color: #ffffff;
}
/*---------------------------------*/
/* ABOUT */
/*---------------------------------*/
.fluid-background {
background-color: #4f0d67;
width: 100vw;
color: #ffffff;
}
.about-row {
margin: 9%;
}
.about-text {
width: 60%;
margin: 40px auto 0 auto;
line-height: 150%;
}
.skills-head {
color: #ffffff;
}
.skills-head-2 {
color: #0800a8;
}
.skills-chart {
width: 90%;
margin-left: 10%;
margin-top: 2%;
background-color: #ffffff;
}
.skills-box-1,
.skills-box-2 {
padding: 5% 5% 5% 2%;
}
.skills-box-1 {
background-color: #ffffff;
}
.skills-box ul {
list-style: none;
}
.skills-box ul li {
margin: 5px 0;
}
p.about-me {
margin: 10px auto;
}
/*---------------------------------*/
/* CONTACT */
/*---------------------------------*/
.section-contact {
margin-top: 60px;
margin-bottom: 60px;
padding: 0 0 60px 0;
}
.social {
margin-top: 40px;
}
.social-buttons {
font-size: 400%;
text-align: center;
margin-bottom: 10%;
transform: scale(1);
transition: transform .1s linear;
}
.social-buttons:hover {
transform: scale(0.85);
}
.social-buttons a {
color: #0800a8;
opacity: 1.0;
}
.social-buttons a:hover {
opacity: .7;
}
/*---------------------------------*/
/* FOOTER */
/*---------------------------------*/
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 150px;
background-color: #f0f0f0;
}
.footer-row {
margin-top: 70px;
width: 70%;
}
.footer-text {
float: left;
font-size: 70%;
color: #0800a8;
text-align: center;
margin-left: 10%;
}
.footer-links {
float: right;
}
.footer-links li {
display: inline-block;
margin-right: 40px;
}
.footer-links a,
.footer-links a:visited {
color: #0800a8;
font-size: 80%;
text-decoration: none;
border-bottom: 2px solid transparent;
transition: border-bottom 0.2s;
}
.footer-links a:active,
.footer-links a:hover {
border-bottom: 2px solid #d4af37;
}
$(document).ready(function() {
$('h1').click(function() {
$(this).css('background-color', '#00ff00');
})
/*Scroll to sections because anchor links just aren't good enough*/
$('.js--scroll-to-portfolio').click(function(){
$('html, body').animate({scrollTop: $('.js--section-portfolio').offset().top}, 1000);
});
$('.js--scroll-to-about').click(function(){
$('html, body').animate({scrollTop: $('.js--section-about').offset().top}, 1000);
});
$('.js--scroll-to-contact').click(function(){
$('html, body').animate({scrollTop: $('.js--section-contact').offset().top}, 1000);
});
/*Navigation scroll*/
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
});
Also see: Tab Triggers