<section class="author-archive">
<div class="container">
<h1>Some of my <a href="https://tutsplus.com/authors/george-martsoukos" target="_blank">Tuts+ Tutorials</a></h1>
<input type="radio" id="All" name="categories" value="All" checked>
<input type="radio" id="CSS" name="categories" value="CSS">
<input type="radio" id="JavaScript" name="categories" value="JavaScript">
<input type="radio" id="jQuery" name="categories" value="jQuery">
<input type="radio" id="WordPress" name="categories" value="WordPress">
<input type="radio" id="Slider" name="categories" value="Slider">
<input type="radio" id="fullPage.js" name="categories" value="fullPage.js">
<ol class="filters">
<li>
<label for="All">All</label>
</li>
<li>
<label for="CSS">CSS</label>
</li>
<li>
<label for="JavaScript">JavaScript</label>
</li>
<li>
<label for="jQuery">jQuery</label>
</li>
<li>
<label for="WordPress">WordPress</label>
</li>
<li>
<label for="Slider">Slider</label>
</li>
<li>
<label for="fullPage.js">fullPage.js</label>
</li>
</ol>
<ol class="posts">
<li class="post" data-category="CSS JavaScript">
<article>
<figure>
<a href="https://webdesign.tutsplus.com/tutorials/quick-tip-how-to-build-a-dead-simple-parallax-effect-with-css-javascript--cms-33061?_ga=2.146015156.1249101154.1555312171-2126893531.1553152868" target="_blank">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/parallax-pre.jpg" alt="">
</a>
<figcaption>
<ol class="post-categories">
<li>
<a href="">CSS</a>
</li>
<li>
<a href="">JavaScript</a>
</li>
</ol>
<h2 class="post-title">
<a href="https://webdesign.tutsplus.com/tutorials/quick-tip-how-to-build-a-dead-simple-parallax-effect-with-css-javascript--cms-33061?_ga=2.146015156.1249101154.1555312171-2126893531.1553152868" target="_blank">Quick Tip: Create a Very Simple Parallax Effect With CSS & JavaScript
</a>
</h2>
</figcaption>
</figure>
</article>
</li>
<li class="post" data-category="CSS JavaScript">
<article>
<figure>
<a href="https://webdesign.tutsplus.com/tutorials/how-to-build-a-portfolio-page-with-css-javascript--cms-32933?_ga=2.268974834.267848227.1555345574-242901505.1471790948" target="_blank">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/chart-pre.png" alt="">
</a>
<figcaption>
<ol class="post-categories">
<li>
<a href="">CSS</a>
</li>
<li>
<a href="">JavaScript</a>
</li>
</ol>
<h2 class="post-title">
<a href="https://webdesign.tutsplus.com/tutorials/how-to-build-a-portfolio-page-with-css-javascript--cms-32933?_ga=2.268974834.267848227.1555345574-242901505.1471790948" target="_blank">How to Build a Static Portfolio Page With CSS & JavaScript
</a>
</h2>
</figcaption>
</figure>
</article>
</li>
<li class="post" data-category="JavaScript WordPress">
<article>
<figure>
<a href="https://webdesign.tutsplus.com/tutorials/dropdown-navigation-how-to-maintain-the-selected-option-on-page-load-on-a-wordpress-site--cms-32211?_ga=2.3551667.267848227.1555345574-242901505.1471790948" target="_blank">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/pre-wp.png" alt="">
</a>
<figcaption>
<ol class="post-categories">
<li>
<a href="">JavaScript</a>
</li>
<li>
<a href="">WordPress</a>
</li>
</ol>
<h2 class="post-title">
<a href="https://webdesign.tutsplus.com/tutorials/dropdown-navigation-how-to-maintain-the-selected-option-on-page-load-on-a-wordpress-site--cms-32211?_ga=2.3551667.267848227.1555345574-242901505.1471790948" target="_blank">Dropdown Navigation: How to Maintain the Selected Option On WordPress
</a>
</h2>
</figcaption>
</figure>
</article>
</li>
<li class="post" data-category="CSS JavaScript">
<article>
<figure>
<a href="https://webdesign.tutsplus.com/tutorials/dropdown-navigation-how-to-maintain-the-selected-option-on-page-load--cms-32210?_ga=2.192885033.267848227.1555345574-242901505.1471790948" target="_blank">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/load-pre.png" alt="">
</a>
<figcaption>
<ol class="post-categories">
<li>
<a href="">CSS</a>
</li>
<li>
<a href="">JavaScript</a>
</li>
</ol>
<h2 class="post-title">
<a href="https://webdesign.tutsplus.com/tutorials/dropdown-navigation-how-to-maintain-the-selected-option-on-page-load--cms-32210?_ga=2.192885033.267848227.1555345574-242901505.1471790948" target="_blank">Dropdown Navigation: How to Maintain the Selected Option on Page Load
</a>
</h2>
</figcaption>
</figure>
</article>
</li>
<li class="post" data-category="CSS">
<article>
<figure>
<a href="https://webdesign.tutsplus.com/tutorials/quick-tip-how-to-enhance-a-page-with-css-animations--cms-32100?_ga=2.3551667.267848227.1555345574-242901505.1471790948" target="_blank">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/animations-pre.png" alt="">
</a>
<figcaption>
<ol class="post-categories">
<li>
<a href="">CSS</a>
</li>
</ol>
<h2 class="post-title">
<a href="https://webdesign.tutsplus.com/tutorials/quick-tip-how-to-enhance-a-page-with-css-animations--cms-32100?_ga=2.3551667.267848227.1555345574-242901505.1471790948" target="_blank">Enhance the Way a Web Page Loads With CSS Animations
</a>
</h2>
</figcaption>
</figure>
</article>
</li>
<li class="post" data-category="CSS">
<article>
<figure>
<a href="https://webdesign.tutsplus.com/tutorials/how-to-build-a-full-screen-responsive-page-with-flexbox--cms-32086?_ga=2.225771033.267848227.1555345574-242901505.1471790948" target="_blank">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/flex-pre.png" alt="">
</a>
<figcaption>
<ol class="post-categories">
<li>
<a href="">CSS</a>
</li>
</ol>
<h2 class="post-title">
<a href="https://webdesign.tutsplus.com/tutorials/how-to-build-a-full-screen-responsive-page-with-flexbox--cms-32086?_ga=2.225771033.267848227.1555345574-242901505.1471790948" target="_blank">How to Build a Full-Screen Responsive Page With Flexbox</a>
</h2>
</figcaption>
</figure>
</article>
</li>
<li class="post" data-category="fullPage.js">
<article>
<figure>
<a href="https://webdesign.tutsplus.com/tutorials/how-to-create-an-animated-spirit-day-presentation-with-fullpagejs--cms-32005?_ga=2.171060384.1249101154.1555312171-2126893531.1553152868" target="_blank">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/spirit-pre.jpg" alt="">
</a>
<figcaption>
<ol class="post-categories">
<li>
<a href="">fullPage.js</a>
</li>
</ol>
<h2 class="post-title">
<a href="https://webdesign.tutsplus.com/tutorials/how-to-create-an-animated-spirit-day-presentation-with-fullpagejs--cms-32005?_ga=2.171060384.1249101154.1555312171-2126893531.1553152868" target="_blank">How to Create an Animated Spirit Day Presentation With fullPage.js
</a>
</h2>
</figcaption>
</figure>
</article>
</li>
<li class="post" data-category="CSS JavaScript">
<article>
<figure>
<a href="https://webdesign.tutsplus.com/tutorials/quick-tip-how-to-manipulate-cursor-appearance-with-css--cms-31825?_ga=2.149104566.1249101154.1555312171-2126893531.1553152868" target="_blank">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/cursor-pre.jpg" alt="">
</a>
<figcaption>
<ol class="post-categories">
<li>
<a href="">CSS</a>
</li>
<li>
<a href="">JavaScript</a>
</li>
</ol>
<h2 class="post-title">
<a href="https://webdesign.tutsplus.com/tutorials/quick-tip-how-to-manipulate-cursor-appearance-with-css--cms-31825?_ga=2.149104566.1249101154.1555312171-2126893531.1553152868" target="_blank">Quick Tip: How to Manipulate the Cursor Appearance With CSS
</a>
</h2>
</figcaption>
</figure>
</article>
</li>
<li class="post" data-category="jQuery CSS Slider">
<article>
<figure>
<a href="https://webdesign.tutsplus.com/tutorials/how-to-build-a-full-screen-responsive-carousel-slider-with-owljs--cms-31771?_ga=2.214527703.1129106392.1555690352-242901505.1471790948" target="_blank">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/pre-oo.png" alt="">
</a>
<figcaption>
<ol class="post-categories">
<li>
<a href="">jQuery</a>
</li>
<li>
<a href="">CSS</a>
</li>
<li>
<a href="">Slider</a>
</li>
</ol>
<h2 class="post-title">
<a href="https://webdesign.tutsplus.com/tutorials/how-to-build-a-full-screen-responsive-carousel-slider-with-owljs--cms-31771?_ga=2.214527703.1129106392.1555690352-242901505.1471790948" target="_blank">How to Build a Full-Screen Responsive Carousel Slider With Owl.js
</a>
</h2>
</figcaption>
</figure>
</article>
</li>
<li class="post" data-category="jQuery CSS Slider">
<article>
<figure>
<a href="https://webdesign.tutsplus.com/tutorials/how-to-build-an-attractive-responsive-image-gallery-with-slickjs--cms-31355?_ga=2.245039813.1129106392.1555690352-242901505.1471790948" target="_blank">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/slick-pre.png" alt="">
</a>
<figcaption>
<ol class="post-categories">
<li>
<a href="">jQuery</a>
</li>
<li>
<a href="">CSS</a>
</li>
<li>
<a href="">Slider</a>
</li>
</ol>
<h2 class="post-title">
<a href="https://webdesign.tutsplus.com/tutorials/how-to-build-an-attractive-responsive-image-gallery-with-slickjs--cms-31355?_ga=2.245039813.1129106392.1555690352-242901505.1471790948" target="_blank">How to Build an Attractive Responsive Image Gallery With slick.js
</a>
</h2>
</figcaption>
</figure>
</article>
</li>
<li class="post" data-category="CSS JavaScript">
<article>
<figure>
<a href="https://webdesign.tutsplus.com/tutorials/a-simple-javascript-technique-for-filling-star-ratings--cms-29450?_ga=2.239800003.1129106392.1555690352-242901505.1471790948" target="_blank">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/stars-pre.png" alt="">
</a>
<figcaption>
<ol class="post-categories">
<li>
<a href="">CSS</a>
</li>
<li>
<a href="">JavaScript</a>
</li>
</ol>
<h2 class="post-title">
<a href="https://webdesign.tutsplus.com/tutorials/a-simple-javascript-technique-for-filling-star-ratings--cms-29450?_ga=2.239800003.1129106392.1555690352-242901505.1471790948" target="_blank">A Simple JavaScript Technique for Filling Star Ratings
</a>
</h2>
</figcaption>
</figure>
</article>
</li>
<li class="post" data-category="jQuery fullPage.js">
<article>
<figure>
<a href="https://webdesign.tutsplus.com/tutorials/quick-tip-scroll-animations-with-fullpagejs-and-animatecss--cms-25235?_ga=2.245041733.1129106392.1555690352-242901505.1471790948" target="_blank">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/scroll-preview.jpg" alt="">
</a>
<figcaption>
<ol class="post-categories">
<li>
<a href="">jQuery</a>
</li>
<li>
<a href="">fullPage.js</a>
</li>
</ol>
<h2 class="post-title">
<a href="https://webdesign.tutsplus.com/tutorials/quick-tip-scroll-animations-with-fullpagejs-and-animatecss--cms-25235?_ga=2.245041733.1129106392.1555690352-242901505.1471790948" target="_blank">Quick Tip: Scroll Animations With fullPage.js and Animate.css
</a>
</h2>
</figcaption>
</figure>
</article>
</li>
</ol>
</div>
</section>
<footer>
<div class="container">
<small>Made with <span>❤</span> by <a href="http://georgemartsoukos.com/" target="_blank">George Martsoukos</a>
</small>
</div>
</footer>/* RESET RULES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
--black: #3a3a3a;
--white: #fff;
--green: #49b293;
}
* {
margin: 0;
padding: 0;
}
img {
display: block;
max-width: 100%;
height: auto;
}
ol {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
}
body {
margin: 50px 0;
color: var(--black);
font: 1rem/1.3 sans-serif;
}
.author-archive {
padding: 1.5rem;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
h1 {
text-align: center;
margin-bottom: 2rem;
}
h1 a {
transition: all 0.1s;
}
h1 a:hover {
background: var(--green);
color: var(--white);
}
input[type="radio"] {
position: absolute;
left: -9999px;
}
/* FILTERS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.filters {
text-align: center;
margin-bottom: 2rem;
}
.filters * {
display: inline-block;
}
.filters label {
padding: 0.5rem 1rem;
margin-bottom: 0.25rem;
border-radius: 2rem;
min-width: 50px;
line-height: normal;
cursor: pointer;
transition: all 0.1s;
}
.filters label:hover {
background: var(--green);
color: var(--white);
}
/* FILTERED ELEMENTS (POSTS)
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.posts {
display: grid;
grid-gap: 1.5rem;
grid-template-columns: repeat(4, 1fr);
}
.posts .post {
background: #fafafa;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.posts .post-title {
font-size: 1.3rem;
}
.posts .post-title:hover {
text-decoration: underline;
}
.posts figcaption {
padding: 1rem;
}
.posts .post-categories {
margin-bottom: 0.75rem;
font-size: 0.75rem;
}
.posts .post-categories * {
display: inline-block;
}
.posts .post-categories li {
margin-bottom: 0.2rem;
}
.posts .post-categories a {
padding: 0.2rem 0.5rem;
border-radius: 1rem;
border: 1px solid;
line-height: normal;
transition: all 0.1s;
}
.posts .post-categories a:hover {
background: var(--green);
color: var(--white);
}
/* FILTERING RULES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
[value="All"]:checked ~ .filters [for="All"],
[value="CSS"]:checked ~ .filters [for="CSS"],
[value="JavaScript"]:checked ~ .filters [for="JavaScript"],
[value="jQuery"]:checked ~ .filters [for="jQuery"],
[value="WordPress"]:checked ~ .filters [for="WordPress"],
[value="Slider"]:checked ~ .filters [for="Slider"],
[value="fullPage.js"]:checked ~ .filters [for="fullPage.js"] {
background: var(--green);
color: var(--white);
}
[value="All"]:checked ~ .posts [data-category] {
display: block;
}
[value="CSS"]:checked ~ .posts .post:not([data-category~="CSS"]),
[value="JavaScript"]:checked ~ .posts .post:not([data-category~="JavaScript"]),
[value="jQuery"]:checked ~ .posts .post:not([data-category~="jQuery"]),
[value="WordPress"]:checked ~ .posts .post:not([data-category~="WordPress"]),
[value="Slider"]:checked ~ .posts .post:not([data-category~="Slider"]),
[value="fullPage.js"]:checked ~ .posts .post:not([data-category~="fullPage.js"]) {
display: none;
}
/* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
footer {
font-size: 1rem;
padding: 0 1.5rem;
text-align: right;
}
footer span {
color: #e31b23;
}
/* MQ
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 900px) {
.posts {
grid-template-columns: repeat(3, 1fr);
}
}
@media screen and (max-width: 650px) {
html {
font-size: 14px;
}
.posts {
grid-template-columns: repeat(2, 1fr);
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.