<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
code<div class="global-navigation">
<a href="#0" class="global-menu-close">
<svg class="icon-x" xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
<path d="M1.41 0l-1.41 1.41.72.72 1.78 1.81-1.78 1.78-.72.69 1.41 1.44.72-.72 1.81-1.81 1.78 1.81.69.72 1.44-1.44-.72-.69-1.81-1.78 1.81-1.81.72-.72-1.44-1.41-.69.72-1.78 1.78-1.81-1.78-.72-.72z" />
</svg>
Close
</a>
<nav role='navigation'>
<h3>Playwrights</h3>
<ul>
<li><a href="#">Core Writers</a></li>
<li><a href="#">Jerome Fellows</a></li>
<li><a href="#">McKnight Fellows in Playwriting</a></li>
<li><a href="#">McKnight National Residency and Commission Recipient</a></li>
<li><a href="#">McKnight Theater Artist Fellows</a></li>
<li><a href="#">Member Playwrights</a></li>
<li><a href="#">Core Apprencies</a></li>
<li><a href="#">Affiliated Writers</a></li>
</ul>
</nav>
</div>
<header class="site-header">
<div class="main-nav-bar">
<div class="icon-menu global-menu-toggle"></div>
<div class="icon-search"></div>
<div class="pwc-logo">
<img src="https://pwcenter.org/sites/all/themes/pwc_theme/images/pwc-logo-small.png" alt="" />
</div>
<ul class="main-navigation">
<li><a href="#0">Playwrights & Programs</a></li>
<li><a href="#0">Events</a></li>
<li><a href="#0">Classes & Resources</a></li>
<li><a href="#0">News</a></li>
<li><a href="#0">Give</a></li>
<li><a href="#0">About</a></li>
</ul>
</div>
<hr />
<div class="member-nav-bar group">
<div class="member-dropdown">
<a href="#0">Dashboard ↓</a>
<ul>
<li><a href="#0">Opportunities</a></li>
<li><a href="#0">Toolkit</a></li>
<li><a href="#0">Articles</a></li>
<li><a href="#0">Directory</a></li>
<li><a href="#0">Successes</a></li>
<li><a href="#0">Bulletins</a></li>
<li><a href="#0">Tutorials</a></li>
<li><a href="#0">Benefits</a></li>
<li><a href="#0">Other Services</a></li>
</ul>
</div>
<div class="new-this-week"><span>34</span> new this week</div>
<div class="member-dropdown member-nav-buttons">
<a href="#0" class="actions-button">Actions ↓</a>
<ul>
<li><a href="#0">My Bookmarks</a></li>
<!-- <li><a href="#0">Post a success</a></li>
<li><a href="#0">Post a bulletin</a></li>-->
</ul>
</div>
</div>
</header>
<div class="page">
<div class="hero-image">
<div class="hero-inside">
<h1>Member Dashboard</h1>
<nav class="dashboard-navigation">
<ul>
<li><a href="#0">Opportunities</a></li>
<li><a href="#0">Articles</a></li>
<li><a href="#0">Directory</a></li>
<li><a href="#0">Forums</a></li>
<li><a href="#0">Script feedback</a></li>
<li><a href="#0">Member readings</a></li>
<li><a href="#0">Member discounts</a></li>
<li><a href="#0">F.A.Q.s</a></li>
</ul>
</div>
</nav>
</div>
<div class="page-content group">
<h2>Most recent</h2>
<section>
<div class="grid">
<div class="grid-item">
<h3>Opportunity</h3>
</div>
<div class="grid-item">
<h3>Success</h3>
</div>
<div class="grid-item">
<h3>Article</h3>
<h2><a href="https://s.codepen.io/ryanaripley/debug/LpaVja">5 Promopts to jumpstart your weekend writing</a></h2>
<p>by <a href="#0">Sarah Playwright</a></p>
</div>
<div class="grid-item">
<h3>Bulletin</h3>
</div>
<div class="grid-item">
<h3>Opportunity</h3>
</div>
<div class="grid-item">
<h3>Article</h3>
</div>
<div class="grid-item">
<h3>Bulletin</h3>
</div>
<div class="grid-item">
<h3>Opportunity</h3>
</div>
<div class="grid-item">
<h3>Opportunity</h3>
</div>
<div class="grid-item">
<h3>Success</h3>
</div>
<div class="grid-item">
<h3>Success</h3>
</div>
<div class="grid-item">
<h3>Inspiration</h3>
</div>
<div class="grid-item">
<h3>Opportunity</h3>
</div>
<div class="grid-item">
<h3>Article</h3>
</div>
<div class="grid-item">
<h3>Bulletin</h3>
</div>
</div>
</section>
</div>
</div>
@import url(https://fonts.googleapis.com/css?family=Lato:300,700,300italic);
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.group:after {
content: "";
display: table;
clear: both;
}
a {
color: black;
text-decoration: none;
}
h2 {
text-transform: uppercase;
}
html, body {
background: #e2e2e2;
color: rgb(51,51,51);
font-family: "Lato";
height: 100%;
position: relative;
}
.site-header {
background: white;
border-bottom: 1px solid rgb(200,200,200);
box-shadow: 0 0 16px rgba(0,0,0,.2);
position: fixed;
top: 0;
z-index: 99;
width: 100%;
}
.site-header .main-nav-bar,
.site-header .member-nav-bar {
margin: 0 auto;
width: 96%;
max-width: 1096px;
}
.site-header .main-nav-bar {
padding: .5em 0;
}
.site-header .icon-menu,
.site-header .icon-search,
.site-header .pwc-logo {
display: inline-block;
}
.site-header .icon-menu,
.site-header .icon-search {
background-color: #efefef;
cursor: pointer;
height: 30px;
margin-right: 5px;
transition: background .15s ease-in-out;
width: 30px;
}
.site-header .icon-menu:hover,
.site-header .icon-search:hover {
background-color: #94d6dc;
}
.site-header .icon-menu {
background: #efefef url(https://pwcenter.org/sites/all/themes/pwc_theme/images/btn-menu.png) no-repeat center center;
}
.site-header .icon-search {
background: #efefef url(https://pwcenter.org/sites/all/themes/pwc_theme/images/icon-search.png) no-repeat center center;
}
.site-header .pwc-logo {
bottom: 6px;
margin: 0 10px 0 20px;
position: relative;
}
.main-navigation {
display: inline-block;
list-style-type: none;
margin: 0 auto;
position: absolute;
width: 96%;
}
@media (max-width: 950px) {
.main-navigation {
display: none;
}
}
.main-navigation li {
display: inline-block;
}
.main-navigation a,
.main-navigation a:visited {
color: rgb(51,51,51);
display: inline-block;
font-size: 13px;
font-weight: 700;
padding: .5em 1em .7em;
text-decoration: none;
text-transform: uppercase;
transition: color .15s ease-in-out;
}
.main-navigation a:hover {
color: #94d6dc;
}
.site-header hr {
border: 0;
height: 1px;
background: rgb(200,200,200);
}
.site-header .member-nav-bar {
padding: 1em 0;
}
.global-navigation {
background: rgba(0,0,0,.9);
box-shadow: 5px 0px 16px rgba(0,0,0,.4);
display: block;
overflow: auto;
position: fixed;
top: 0;
bottom: 0;
left: -20em;
transition: left .25s ease-in-out;
width: 18em;
z-index: 100;
}
.global-navigation.is-open {
left: 0;
}
.global-navigation .icon-x {
height: .8em;
width: .8em;
margin-right: .2em;
}
.global-navigation .icon-x path {
fill: white;
transition: fill .15s ease-in-out;
}
.global-navigation a:hover .icon-x path {
fill: #94d6dc;
}
.global-navigation ul {
list-style-type: none;
}
.global-navigation a,
.global-navigation a:visited,
.global-navigation h3 {
color: white;
display: inline-block;
font-size: 1rem;
font-weight: 300;
padding: .4rem 1.5rem;
text-decoration: none;
text-transform: uppercase;
transition: color .15s ease-in-out;
width: 100%;
}
.global-navigation .global-menu-close {
font-size: 1.3em;
margin-bottom: .5em;
padding-top: 1.2rem;
}
.global-navigation h3 {
color: rgb(175,175,175);
font-weight: 900;
margin: 0;
}
.global-navigation a:hover {
color: #94d6dc;
}
.member-dropdown {
display: inline-block;
position: relative;
}
.member-dropdown ul {
background: white;
display: inline-block;
max-height: 0;
list-style-type: none;
visibility: hidden;
overflow: hidden;
position: absolute;
transition: all .2s ease-in-out;
}
.member-dropdown:hover ul {
box-shadow: 5px 10px 10px rgba(0,0,0,.2);
display: inline-block;
max-height: 1000px;
visibility: visible;
}
.member-dropdown li {
}
.member-dropdown a {
display: inline-block;
font-size: 15px;
padding: 10px 18px;
text-align: center;
text-transform: uppercase;
border: 1px solid #999;
color: rgb(51,51,51) !important;
min-width: 12em;
transition: background .12s ease-in-out;
}
.member-dropdown li a {
border-bottom: 0;
}
.member-dropdown li:first-of-type a {
border-top: 0;
}
.member-dropdown li:last-of-type a {
border-bottom: 1px solid #999;
}
.member-dropdown a:hover,
.member-dropdown a:target {
background: #94d6dc;
}
.member-dropdown a:active {
background: #94d6dc;
}
.member-dropdown ul a {
}
.member-dropdown a:hover {
color: #94d6dc;
}
.member-nav-buttons {
display: inline;
clear: none;
float: right;
}
@media (min-width: 840px) {
.member-nav-buttons .actions-button {
display: none;
}
.member-nav-buttons.member-dropdown ul {
max-height: 1000px;
visibility: visible;
right: 0;
width: 36em;
}
.member-nav-buttons.member-dropdown ul:hover {
box-shadow: none;
}
.member-nav-buttons.member-dropdown li {
}
.member-nav-buttons.member-dropdown li a {
border: 1px solid #999;
float: right;
margin-left: .5em;
}
}
.new-this-week {
display: none;
}
@media (min-width: 530px) {
.new-this-week {
display: inline-block;
font-size: .8em;
padding: .3em;
}
.new-this-week span {
background: #851951;
border-radius: 50%;
display: inline-block;
color: white;
height: 1.5em;
font-size: .9em;
padding: 2px;
text-align: center;
width: 1.5em;
}
}
.page {
margin-top: 108px;
position: relative;
}
.page-content {
height: 100%;
margin: 0 auto;
padding: 1em 0;
width: 96%;
max-width: 1096px;
}
.hero-image {
background-color: #333;
background: url(https://googledrive.com/host/0B4CY4UYxIyNXflVCSHNIZ294cm5XZGFRTmRBRGRDM2FQOEdjUFMzUmV1UHZvUlZKS3BJUFU/notebook.jpg) no-repeat center center fixed;
background-size: cover;
min-height: 20em;
padding: 5em 0;
position: relative;
text-align: center;
}
.hero-inside {
background: rgba(0,0,0,.6);
display: inline-block;
padding: 2em 4em;
width: 80%;
max-width: 1096px;
}
@media (max-width: 650px) {
.hero-image {
display: none;
}
}
.hero-image h1 {
color: white;
font-size: 3em;
margin: 0 0 .5em 0;
text-transform: uppercase;
}
.dashboard-navigation ul {
list-style-type: none;
margin: 0;
width: 100%;
}
.dashboard-navigation li {
}
.dashboard-navigation a {
background: white;
border: 1px solid #333;
color: #333;
display: inline-block;
padding: 1.5em 0;
text-decoration: none;
margin-bottom: 1em;
float: left;
text-transform: uppercase;
transition: all .15s ease-in-out;
width: 100%;
}
.dashboard-navigation a:hover,
.dashboard-navigation a:target {
background: #94d6dc;
}
/*.dashboard-navigation li:last-of-type a {
background: #851951;
color: white;
}
.dashboard-navigation li:last-of-type a:hover,
.dashboard-navigation li:last-of-type a:target {
background: #60173d;
}*/
@media (min-width: 600px) and (max-width: 1000px) {
.dashboard-navigation a {
margin-right: 2%;
margin-bottom: 2%;
width: 49%;
}
.dashboard-navigation li:nth-of-type(2n) a {
margin-right: 0;
}
}
@media (min-width: 1001px) {
.dashboard-navigation a {
margin-right: 2%;
margin-bottom: 2%;
width: 23.5%;
}
.dashboard-navigation li:nth-of-type(4n) a {
margin-right: 0;
}
}
section {
margin-top: 1em;
}
.grid {
}
.grid-item {
height: 16em;
background: white;
padding: .3em .6em;
margin: 0 1% 2%;
transition: box-shadow .15s ease-in-out;
width: 98%;
}
.grid-item h2 {
font-size: 1.2em;
margin: .4em 0;
}
.grid-item p a {
color: #94d6dc;
font-weight: 700;
}
/*.grid-item:hover {
box-shadow: 0 0 18px rgba(0,0,0,.2);
}*/
@media (min-width: 600px) {
.grid-item {
width: 48%;
}
}
@media (min-width: 800px) {
.grid-item {
width: 31.33333%;
}
}
.grid-item:nth-of-type(1n) {
height: 21em;
}
.grid-item:nth-of-type(2n) {
height: 14em;
}
.grid-item:nth-of-type(3n) {
height: 16em;
}
.grid-item h3 {
color: #851951;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
}
/* Add additional button styles */
.cta,
.cta-primary,
.cta-secondary {
margin-right: 5px !important;
-webkit-transition: all .15s ease-out;
-moz-transition: all .15s ease-out;
-o-transition: all .15s ease-out;
transition: all .15s ease-out;
}
.cta:hover, .cta:target {
background: #444 !important;
}
.cta:active {
background: #555 !important;
}
.cta-primary,
.cta-secondary,
.cta-important {
display: inline-block;
font-size: 15px;
margin-right: 5px;
padding: 10px 18px;
text-transform: uppercase;
}
.cta-primary:last-of-type,
.cta-secondary:last-of-type,
.cta-important:last-of-type, {
margin-right: 0 !important;
}
.cta-primary {
background: #94d6dc; /* Secondary palette darker blue */
color: white !important;
}
.cta-primary:hover, .cta-primary:target {
background: #78bbc1;
}
.cta-primary:active {
background: #67abaf;
}
.cta-secondary {
border: 1px solid #999;
color: rgb(51,51,51) !important;
}
.cta-secondary:hover, .cta-secondary:target {
background: #94d6dc;
}
.cta-secondary:active {
background: #94d6dc;
}
.cta-important {
background: #ee370d; /* Red color */
color: white !important;
}
.cta-important:hover, .cta-important:target {
background: #ff4b23;
}
.cta-important:active {
background: #ff6647;
}
$(document).ready(function() {
$('.grid').masonry({
// options
itemSelector: '.grid-item'
});
var toggleGlobalMenu = function() {
$(".global-navigation").toggleClass("is-open");
};
$(".global-menu-toggle").click(function() {
toggleGlobalMenu();
});
$(".global-menu-close").click(function() {
toggleGlobalMenu();
});
});
