page 06 - showcase
<!DOCTYPE html>
<html lang="en" dir="ltr">
<!----------------------------------------------------
credits:
- isotope.js and imagesLoaded by Metafizzy
- showcase page by annasthms (april 2, 2019)
more info @ https://annasthms.tumblr.com/more/page/06
made for coding cabin's gridmania challenge
rules:
1. don't remove the credit
2. don't steal/claim as yours
3. don't use as a base code
thank you!! ♡♡♡
----------------------------------------------------->
<head>
<meta charset="utf-8">
<title>projects</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style media="screen">
@import url('https://fonts.googleapis.com/css?family=Maven+Pro');
*,
*::after,
*::before {
-webkit-box-sizing : border-box;
box-sizing : border-box;
position : relative;
}
/* EDIT THESE OPTIONS - they should be self-explanatory */
body {
--font-size : 16px;
--text : #0a0203;
--links : #ca6a89;
--link-hover : #222;
--page-background : #fff;
--header-background : #fcfafa;
--header-image-width : 200px;
--header-accent : #4E3131;
--filter-accent : #4E3131;
--filter-title-text : #fff;
--card-width : 300px;
--card-spacing : 2em;
--card-background : #fcfafa;
--card-tags-background : #4E3131;
--card-tags-text : #fff;
--card-progress-bar : #4E3131;
--card-progress-bar-height : 3px;
--card-progress-bar-background : rgba(78, 49, 49, 0.35);
--footer-avatar-size : 100px;
--footer-accent : #4E3131;
--footer-link-text : #fff;
}
body {
margin : 0;
color : var(--text);
overflow-x : hidden;
background-color : #fff;
background-color : var(--page-background);
font-family : "Maven Pro",
sans-serif;
font-size : var(--font-size);
-webkit-font-smoothing : antialiased;
-moz-osx-font-smoothing : grayscale;
line-height : 1.5em;
}
a {
color : #068570;
color : var(--links);
outline : none;
text-decoration : none;
}
a:focus,
a:hover {
color : var(--link-hover);
outline : none;
}
img {
display : block;
max-width : 100%;
height : auto;
object-fit : cover;
}
p:first-child {
margin-top : 0;
}
p:last-child {
margin-bottom : 0;
}
header {
display : grid;
width : 800px;
max-width : 95%;
margin : 5em auto;
grid-template-columns : var(--header-image-width) auto;
}
header > img {
width : var(--header-image-width);
height : 100%;
}
.page_info {
padding : 2em;
background : var(--header-background);
}
img + .page_info {
padding-left : 1.5em;
}
img + .page_info::before {
content : '';
display : block;
position : absolute;
top : 0;
left : 0;
left : calc(-1 * 6.992681194% / 4);
width : 6.992681194%;
height : 100%;
background : var(--header-background);
-ms-transform : skewX(-4deg);
-webkit-transform : skewX(-4deg);
transform : skewX(-4deg);
}
.page_title {
margin-bottom : 0.35em;
color : var(--header-accent);
font-size : 1.25em;
font-weight : bold;
}
.page_title a {
color : var(--header-accent);
}
.filters {
margin : 3em auto;
text-align : center;
}
.filters > div:not(:last-child) {
margin-bottom : 0.35em;
}
.filters .block div {
display : inline-block;
}
.filters .block .block_title {
margin-right : 0.75em;
padding : 0.3em 0.45em;
color : var(--filter-title-text);
background : var(--filter-accent);
line-height : 1.35em;
}
.filters .block .filter {
cursor : pointer;
}
.filters .block .filter:not(:last-child) {
margin-right : 0.35em;
}
.filters .filter.selected {
color : var(--filter-accent);
font-weight : bold;
}
.filters .reset {
display : inline-block;
margin-top : 0.5em;
padding : 0.3em 0.45em;
color : var(--filter-title-text);
opacity : 1;
background : var(--filter-accent);
text-transform : uppercase;
font-size : 0.8em;
line-height : 1.35em;
-o-transition : 0.25s opacity;
-webkit-transition : 0.25s opacity;
transition : 0.25s opacity;
cursor : pointer;
}
.filters .reset:not(.selected):hover {
opacity : 0.9;
}
.filters .reset.selected {
opacity : 0.65;
user-select : none;
cursor : not-allowed;
}
.container {
margin : 0 auto;
-o-transition : 0.25s width;
-webkit-transition : 0.25s width;
transition : 0.25s width;
}
.card {
width : var(--card-width);
max-width : calc(100vw - var(--card-spacing) * 2);
margin : calc(var(--card-spacing) + 1.5em) var(--card-spacing) var(--card-spacing);
opacity : 0;
-o-transition-property : opacity,
margin;
-webkit-transition-property : opacity,
margin;
transition-property : opacity,
margin;
-o-transition-duration : 0.35s;
-webkit-transition-duration : 0.35s;
transition-duration : 0.35s;
}
.container.show .card {
margin : var(--card-spacing);
opacity : 1;
}
.card img.lightbox {
cursor : zoom-in;
}
.info {
padding : 1em 1.5em 1.5em;
background : var(--card-background);
}
.info:first-child {
padding-top : 1.5em;
}
img + .info::before {
content : '';
display : block;
position : absolute;
top : 0;
top : calc(-1 * var(--card-width) * 0.06992681194 / 2);
left : 0;
width : 100%;
height : calc(350px * 0.06992681194);
height : calc(var(--card-width) * 0.06992681194);
background : var(--card-background);
-ms-transform : skewY(-4deg);
-webkit-transform : skewY(-4deg);
transform : skewY(-4deg);
}
.card img.lightbox + .info::after {
content : '+';
display : block;
position : absolute;
top : -0.6em;
left : -0.4em;
width : 1.2em;
height : 1.2em;
padding : 0.1em;
color : var(--card-tags-text);
border-radius : 100%;
background : var(--card-tags-background);
text-align : center;
font-size : 1.5em;
line-height : 0.9em;
}
.info div:last-child {
margin-bottom : 0;
}
.name {
margin-bottom : 0.15em;
font-size : 1.3em;
font-weight : bold;
}
.date {
margin-bottom : 0.65em;
font-size : 0.8em;
letter-spacing : 1px;
}
.tags {
margin-bottom : 0.25em;
}
.name + .tags {
margin-top : 1em;
}
.tags a,
.tags span {
display : inline-block;
margin-right : 0.5em;
margin-bottom : 0.5em;
padding : 0.35em 0.6em;
color : var(--card-tags-text);
border-radius : 0.65em;
background : var(--card-tags-background);
font-size : 0.8em;
line-height : 1.35em;
}
.tags span {
cursor : default;
}
.tags a {
text-decoration : underline;
-o-transition : 0.25s background;
-webkit-transition : 0.25s background;
transition : 0.25s background;
}
.tags a:hover {
background : var(--links);
}
.progress {
margin-top : 1em;
}
.progress .title {
color : var(--card-progress-bar);
text-transform : uppercase;
font-size : 0.75em;
line-height : 1.35em;
}
.progress .bar {
width : 100%;
height : var(--card-progress-bar-height);
background : var(--card-progress-bar-background);
}
.progress .bar .bar_prog {
height : 100%;
background : var(--card-progress-bar);
}
.no_results {
display : none;
text-align : center;
}
footer {
display : grid;
width : 800px;
max-width : 95%;
margin : 3em auto 5em;
align-items : start;
grid-template-columns : var(--footer-avatar-size) auto;
}
footer > img {
width : var(--footer-avatar-size);
height : var(--footer-avatar-size);
}
.blog_info {
padding : 0 2em;
}
.username {
margin-bottom : 0.35em;
color : var(--footer-accent);
font-size : 1.15em;
font-weight : bold;
}
.username a {
color : var(--footer-accent);
}
.username a:hover {
color : var(--link-hover);
}
.description {
margin-bottom : 0.5em;
}
.links a {
margin-right : 0.5em;
color : var(--footer-accent);
text-decoration : underline;
font-weight : bold;
}
.links a:hover {
color : var(--link-hover);
}
div#lightbox {
display : none;
position : fixed;
top : 0;
right : 0;
bottom : 0;
left : 0;
background : #fff;
}
div#lightbox img {
position : absolute;
top : 50%;
left : 50%;
width : auto;
max-width : 80%;
height : auto;
max-height : 80%;
-ms-transform : translate(-50%, -50%);
-webkit-transform : translate(-50%, -50%);
transform : translate(-50%, -50%);
}
iframe.tmblr-iframe.iframe-controls--desktop {
margin : 0.5em;
filter : invert(1);
transform : scale(0.7);
transform-origin : top right;
}
@media
screen
and (max-width : 600px) {
header {
display : block;
margin-top : 1em;
}
header > img {
display : none;
}
.page_info {
background : var(--page-background);
}
.page_info::before {
display : none !important;
}
footer {
display : block;
}
footer > img {
display : none;
}
}
</style>
</head>
<body>
<!-------------------------------
HEADER
======
to edit the header:
- change "header image url" to the url of the header image you want (keep the "")
- change "page title" to the page's title
- change "page description" to the page's description
-------------------------------->
<header>
<img src="header image url" alt="header image">
<div class="page_info">
<div class="page_title">page title</div>
<div class="page_description">page description</div>
</div>
</header>
<main>
<div class="filters">
<!-------------------------------
FILTERS
=======
to edit the filter categories:
1. change [filter category] to the category title
2. change the ".filter" in filter=".filter" to the filter name
* make sure to keep the "" and the .
NOTES
=====
* you can NOT repeat category titles; repetition of titles messes up the filtering
* to add additional categories, copy/paste the template below "paste additional categories here"
TEMPLATE
========
<div class="block">
<div class="block_title">filter category</div>
<div class="filter selected" filter="">all</div>
<div class="filter" filter=".filter">filter</div>
</div>
-------------------------------->
<div class="block">
<div class="block_title">filter category</div>
<div class="filter selected" filter="">all</div>
<div class="filter" filter=".filter">filter</div>
<div class="filter" filter=".filter">filter</div>
<div class="filter" filter=".filter">filter</div>
</div>
<!-- paste additional categories here -->
<div class="reset selected">reset</div>
</div>
<div class="container">
<!-------------------------------
CARDS
=====
to edit the cards:
- change "project image url" to the url of the image that represents the project (keeping the "")
- change "project name" to the name of the project
- this appears twice
- make sure to keep the "" for the alt=
- change 00.00.00 - 00.00.00 to the dates of the project
- if you do not need this line, you can delete <div class="date">00.00.00 - 00.00.00</div>
- change/add "tags" and links as needed
- for tags, simply change "tag" to the text you'd like
- for links, change "link" to the link's title, and change "url" to the url you'd like to link to (keeping the "")
- change "project description" to the project's description
- for progress bars:
- change "bar title" to the progress bar's title
- change 34% to the percentage you'd like the bar to be at
- for filters:
- add each filter to the class="card" of the card (found at the beginning), separating each with a space
example: <div class="card filter1 filter2">...</div>
NOTES
=====
* there is an option to have the project's image show in a lightbox if clicked
- to enable, add class="lightbox" right inside the > of the image
- make sure there is a space in front of class
* to add additional cards, copy/paste one of the templates below "paste additional cords here"
TEMPLATES
=========
without lightbox:
<div class="card">
<img src="project image url" alt="project name">
<div class="info">
<div class="name">project name</div>
<div class="date">00.00.00 - 00.00.00</div>
<div class="tags">
<span>tag</span>
<a href="url">link</a>
</div>
<div class="description">project description</div>
<div class="progress">
<div class="title">bar title</div>
<div class="bar">34%</div>
</div>
</div>
</div>
with lightbox:
<div class="card">
<img src="project image url" alt="project name" class="lightbox">
<div class="info">
<div class="name">project name</div>
<div class="date">00.00.00 - 00.00.00</div>
<div class="tags">
<span>tag</span>
<a href="url">link</a>
</div>
<div class="description">project description</div>
<div class="progress">
<div class="title">bar title</div>
<div class="bar">34%</div>
</div>
</div>
</div>
-------------------------------->
<div class="card">
<img src="project image url" alt="project name" class="lightbox">
<div class="info">
<div class="name">project name</div>
<div class="date">00.00.00 - 00.00.00</div>
<div class="tags">
<span>tag</span>
<a href="url">link</a>
</div>
<div class="description">project description</div>
<div class="progress">
<div class="title">bar title</div>
<div class="bar"></div>
</div>
</div>
</div>
<!-- paste additional cords here -->
<!-- text to show if there are no cards with the selected filter -->
<div class="no_results">nothing :(</div>
</div>
</main>
<!-------------------------------
FOOTER
======
the footer should fill in automatically, except for the links
to edit the links:
- change "url" to the url you'd like to link to (keep the "")
- change "link" to the link's title
- you may add/delete as many links as you'd like
-------------------------------->
<footer>
<img src="{PortraitURL-96}" alt="{Name}'s avatar">
<div class="blog_info">
<div class="username"><a href="/">{Name}</a></div>
<div class="description">{Description}</div>
<div class="links">
<a href="/">home</a>
<a href="/ask">ask</a>
<a href="/archive">archive</a>
<a href="url">link</a>
<a href="url">link</a>
<!-- add additional blog links here -->
</div>
</div>
</footer>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script src="https://static.tumblr.com/0podkko/sAipqg9fe/portfolio.js"></script>
<script type="text/javascript">
const iso = new Isotope('.container', {
itemSelector: '.card',
masonry: {
horizontalOrder: true,
fitWidth: true,
initLayout: false,
}
});
iso.once('layoutComplete', function(items) {
document.querySelector('.container').className += ' show';
});
iso.on('layoutComplete', function(items) {
if (items.length == 0) document.querySelector('.no_results').style.display = "block";
else document.querySelector('.no_results').style.display = "none";
});
const imgLoad = imagesLoaded('.card');
imgLoad.on('done', function(instance) {
iso.layout();
});
</script>
</body>
</html>
<html lang="en" dir="ltr">
<!----------------------------------------------------
credits:
- isotope.js and imagesLoaded by Metafizzy
- showcase page by annasthms (april 2, 2019)
more info @ https://annasthms.tumblr.com/more/page/06
made for coding cabin's gridmania challenge
rules:
1. don't remove the credit
2. don't steal/claim as yours
3. don't use as a base code
thank you!! ♡♡♡
----------------------------------------------------->
<head>
<meta charset="utf-8">
<title>projects</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style media="screen">
@import url('https://fonts.googleapis.com/css?family=Maven+Pro');
*,
*::after,
*::before {
-webkit-box-sizing : border-box;
box-sizing : border-box;
position : relative;
}
/* EDIT THESE OPTIONS - they should be self-explanatory */
body {
--font-size : 16px;
--text : #0a0203;
--links : #ca6a89;
--link-hover : #222;
--page-background : #fff;
--header-background : #fcfafa;
--header-image-width : 200px;
--header-accent : #4E3131;
--filter-accent : #4E3131;
--filter-title-text : #fff;
--card-width : 300px;
--card-spacing : 2em;
--card-background : #fcfafa;
--card-tags-background : #4E3131;
--card-tags-text : #fff;
--card-progress-bar : #4E3131;
--card-progress-bar-height : 3px;
--card-progress-bar-background : rgba(78, 49, 49, 0.35);
--footer-avatar-size : 100px;
--footer-accent : #4E3131;
--footer-link-text : #fff;
}
body {
margin : 0;
color : var(--text);
overflow-x : hidden;
background-color : #fff;
background-color : var(--page-background);
font-family : "Maven Pro",
sans-serif;
font-size : var(--font-size);
-webkit-font-smoothing : antialiased;
-moz-osx-font-smoothing : grayscale;
line-height : 1.5em;
}
a {
color : #068570;
color : var(--links);
outline : none;
text-decoration : none;
}
a:focus,
a:hover {
color : var(--link-hover);
outline : none;
}
img {
display : block;
max-width : 100%;
height : auto;
object-fit : cover;
}
p:first-child {
margin-top : 0;
}
p:last-child {
margin-bottom : 0;
}
header {
display : grid;
width : 800px;
max-width : 95%;
margin : 5em auto;
grid-template-columns : var(--header-image-width) auto;
}
header > img {
width : var(--header-image-width);
height : 100%;
}
.page_info {
padding : 2em;
background : var(--header-background);
}
img + .page_info {
padding-left : 1.5em;
}
img + .page_info::before {
content : '';
display : block;
position : absolute;
top : 0;
left : 0;
left : calc(-1 * 6.992681194% / 4);
width : 6.992681194%;
height : 100%;
background : var(--header-background);
-ms-transform : skewX(-4deg);
-webkit-transform : skewX(-4deg);
transform : skewX(-4deg);
}
.page_title {
margin-bottom : 0.35em;
color : var(--header-accent);
font-size : 1.25em;
font-weight : bold;
}
.page_title a {
color : var(--header-accent);
}
.filters {
margin : 3em auto;
text-align : center;
}
.filters > div:not(:last-child) {
margin-bottom : 0.35em;
}
.filters .block div {
display : inline-block;
}
.filters .block .block_title {
margin-right : 0.75em;
padding : 0.3em 0.45em;
color : var(--filter-title-text);
background : var(--filter-accent);
line-height : 1.35em;
}
.filters .block .filter {
cursor : pointer;
}
.filters .block .filter:not(:last-child) {
margin-right : 0.35em;
}
.filters .filter.selected {
color : var(--filter-accent);
font-weight : bold;
}
.filters .reset {
display : inline-block;
margin-top : 0.5em;
padding : 0.3em 0.45em;
color : var(--filter-title-text);
opacity : 1;
background : var(--filter-accent);
text-transform : uppercase;
font-size : 0.8em;
line-height : 1.35em;
-o-transition : 0.25s opacity;
-webkit-transition : 0.25s opacity;
transition : 0.25s opacity;
cursor : pointer;
}
.filters .reset:not(.selected):hover {
opacity : 0.9;
}
.filters .reset.selected {
opacity : 0.65;
user-select : none;
cursor : not-allowed;
}
.container {
margin : 0 auto;
-o-transition : 0.25s width;
-webkit-transition : 0.25s width;
transition : 0.25s width;
}
.card {
width : var(--card-width);
max-width : calc(100vw - var(--card-spacing) * 2);
margin : calc(var(--card-spacing) + 1.5em) var(--card-spacing) var(--card-spacing);
opacity : 0;
-o-transition-property : opacity,
margin;
-webkit-transition-property : opacity,
margin;
transition-property : opacity,
margin;
-o-transition-duration : 0.35s;
-webkit-transition-duration : 0.35s;
transition-duration : 0.35s;
}
.container.show .card {
margin : var(--card-spacing);
opacity : 1;
}
.card img.lightbox {
cursor : zoom-in;
}
.info {
padding : 1em 1.5em 1.5em;
background : var(--card-background);
}
.info:first-child {
padding-top : 1.5em;
}
img + .info::before {
content : '';
display : block;
position : absolute;
top : 0;
top : calc(-1 * var(--card-width) * 0.06992681194 / 2);
left : 0;
width : 100%;
height : calc(350px * 0.06992681194);
height : calc(var(--card-width) * 0.06992681194);
background : var(--card-background);
-ms-transform : skewY(-4deg);
-webkit-transform : skewY(-4deg);
transform : skewY(-4deg);
}
.card img.lightbox + .info::after {
content : '+';
display : block;
position : absolute;
top : -0.6em;
left : -0.4em;
width : 1.2em;
height : 1.2em;
padding : 0.1em;
color : var(--card-tags-text);
border-radius : 100%;
background : var(--card-tags-background);
text-align : center;
font-size : 1.5em;
line-height : 0.9em;
}
.info div:last-child {
margin-bottom : 0;
}
.name {
margin-bottom : 0.15em;
font-size : 1.3em;
font-weight : bold;
}
.date {
margin-bottom : 0.65em;
font-size : 0.8em;
letter-spacing : 1px;
}
.tags {
margin-bottom : 0.25em;
}
.name + .tags {
margin-top : 1em;
}
.tags a,
.tags span {
display : inline-block;
margin-right : 0.5em;
margin-bottom : 0.5em;
padding : 0.35em 0.6em;
color : var(--card-tags-text);
border-radius : 0.65em;
background : var(--card-tags-background);
font-size : 0.8em;
line-height : 1.35em;
}
.tags span {
cursor : default;
}
.tags a {
text-decoration : underline;
-o-transition : 0.25s background;
-webkit-transition : 0.25s background;
transition : 0.25s background;
}
.tags a:hover {
background : var(--links);
}
.progress {
margin-top : 1em;
}
.progress .title {
color : var(--card-progress-bar);
text-transform : uppercase;
font-size : 0.75em;
line-height : 1.35em;
}
.progress .bar {
width : 100%;
height : var(--card-progress-bar-height);
background : var(--card-progress-bar-background);
}
.progress .bar .bar_prog {
height : 100%;
background : var(--card-progress-bar);
}
.no_results {
display : none;
text-align : center;
}
footer {
display : grid;
width : 800px;
max-width : 95%;
margin : 3em auto 5em;
align-items : start;
grid-template-columns : var(--footer-avatar-size) auto;
}
footer > img {
width : var(--footer-avatar-size);
height : var(--footer-avatar-size);
}
.blog_info {
padding : 0 2em;
}
.username {
margin-bottom : 0.35em;
color : var(--footer-accent);
font-size : 1.15em;
font-weight : bold;
}
.username a {
color : var(--footer-accent);
}
.username a:hover {
color : var(--link-hover);
}
.description {
margin-bottom : 0.5em;
}
.links a {
margin-right : 0.5em;
color : var(--footer-accent);
text-decoration : underline;
font-weight : bold;
}
.links a:hover {
color : var(--link-hover);
}
div#lightbox {
display : none;
position : fixed;
top : 0;
right : 0;
bottom : 0;
left : 0;
background : #fff;
}
div#lightbox img {
position : absolute;
top : 50%;
left : 50%;
width : auto;
max-width : 80%;
height : auto;
max-height : 80%;
-ms-transform : translate(-50%, -50%);
-webkit-transform : translate(-50%, -50%);
transform : translate(-50%, -50%);
}
iframe.tmblr-iframe.iframe-controls--desktop {
margin : 0.5em;
filter : invert(1);
transform : scale(0.7);
transform-origin : top right;
}
@media
screen
and (max-width : 600px) {
header {
display : block;
margin-top : 1em;
}
header > img {
display : none;
}
.page_info {
background : var(--page-background);
}
.page_info::before {
display : none !important;
}
footer {
display : block;
}
footer > img {
display : none;
}
}
</style>
</head>
<body>
<!-------------------------------
HEADER
======
to edit the header:
- change "header image url" to the url of the header image you want (keep the "")
- change "page title" to the page's title
- change "page description" to the page's description
-------------------------------->
<header>
<img src="header image url" alt="header image">
<div class="page_info">
<div class="page_title">page title</div>
<div class="page_description">page description</div>
</div>
</header>
<main>
<div class="filters">
<!-------------------------------
FILTERS
=======
to edit the filter categories:
1. change [filter category] to the category title
2. change the ".filter" in filter=".filter" to the filter name
* make sure to keep the "" and the .
NOTES
=====
* you can NOT repeat category titles; repetition of titles messes up the filtering
* to add additional categories, copy/paste the template below "paste additional categories here"
TEMPLATE
========
<div class="block">
<div class="block_title">filter category</div>
<div class="filter selected" filter="">all</div>
<div class="filter" filter=".filter">filter</div>
</div>
-------------------------------->
<div class="block">
<div class="block_title">filter category</div>
<div class="filter selected" filter="">all</div>
<div class="filter" filter=".filter">filter</div>
<div class="filter" filter=".filter">filter</div>
<div class="filter" filter=".filter">filter</div>
</div>
<!-- paste additional categories here -->
<div class="reset selected">reset</div>
</div>
<div class="container">
<!-------------------------------
CARDS
=====
to edit the cards:
- change "project image url" to the url of the image that represents the project (keeping the "")
- change "project name" to the name of the project
- this appears twice
- make sure to keep the "" for the alt=
- change 00.00.00 - 00.00.00 to the dates of the project
- if you do not need this line, you can delete <div class="date">00.00.00 - 00.00.00</div>
- change/add "tags" and links as needed
- for tags, simply change "tag" to the text you'd like
- for links, change "link" to the link's title, and change "url" to the url you'd like to link to (keeping the "")
- change "project description" to the project's description
- for progress bars:
- change "bar title" to the progress bar's title
- change 34% to the percentage you'd like the bar to be at
- for filters:
- add each filter to the class="card" of the card (found at the beginning), separating each with a space
example: <div class="card filter1 filter2">...</div>
NOTES
=====
* there is an option to have the project's image show in a lightbox if clicked
- to enable, add class="lightbox" right inside the > of the image
- make sure there is a space in front of class
* to add additional cards, copy/paste one of the templates below "paste additional cords here"
TEMPLATES
=========
without lightbox:
<div class="card">
<img src="project image url" alt="project name">
<div class="info">
<div class="name">project name</div>
<div class="date">00.00.00 - 00.00.00</div>
<div class="tags">
<span>tag</span>
<a href="url">link</a>
</div>
<div class="description">project description</div>
<div class="progress">
<div class="title">bar title</div>
<div class="bar">34%</div>
</div>
</div>
</div>
with lightbox:
<div class="card">
<img src="project image url" alt="project name" class="lightbox">
<div class="info">
<div class="name">project name</div>
<div class="date">00.00.00 - 00.00.00</div>
<div class="tags">
<span>tag</span>
<a href="url">link</a>
</div>
<div class="description">project description</div>
<div class="progress">
<div class="title">bar title</div>
<div class="bar">34%</div>
</div>
</div>
</div>
-------------------------------->
<div class="card">
<img src="project image url" alt="project name" class="lightbox">
<div class="info">
<div class="name">project name</div>
<div class="date">00.00.00 - 00.00.00</div>
<div class="tags">
<span>tag</span>
<a href="url">link</a>
</div>
<div class="description">project description</div>
<div class="progress">
<div class="title">bar title</div>
<div class="bar"></div>
</div>
</div>
</div>
<!-- paste additional cords here -->
<!-- text to show if there are no cards with the selected filter -->
<div class="no_results">nothing :(</div>
</div>
</main>
<!-------------------------------
FOOTER
======
the footer should fill in automatically, except for the links
to edit the links:
- change "url" to the url you'd like to link to (keep the "")
- change "link" to the link's title
- you may add/delete as many links as you'd like
-------------------------------->
<footer>
<img src="{PortraitURL-96}" alt="{Name}'s avatar">
<div class="blog_info">
<div class="username"><a href="/">{Name}</a></div>
<div class="description">{Description}</div>
<div class="links">
<a href="/">home</a>
<a href="/ask">ask</a>
<a href="/archive">archive</a>
<a href="url">link</a>
<a href="url">link</a>
<!-- add additional blog links here -->
</div>
</div>
</footer>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script src="https://static.tumblr.com/0podkko/sAipqg9fe/portfolio.js"></script>
<script type="text/javascript">
const iso = new Isotope('.container', {
itemSelector: '.card',
masonry: {
horizontalOrder: true,
fitWidth: true,
initLayout: false,
}
});
iso.once('layoutComplete', function(items) {
document.querySelector('.container').className += ' show';
});
iso.on('layoutComplete', function(items) {
if (items.length == 0) document.querySelector('.no_results').style.display = "block";
else document.querySelector('.no_results').style.display = "none";
});
const imgLoad = imagesLoaded('.card');
imgLoad.on('done', function(instance) {
iso.layout();
});
</script>
</body>
</html>