SaraSoueidan

.box{
    border:1px dashed white;
    box-shadow:0px 0px 0px 3px black;
}/*we created one border, the dashed one, and the illusion of a wider area by adding a slight
box shadow*/

SaraSoueidan

<h1> CSS3 Testimonials Slider</h1>
<div class="container">
  <input type="radio" name="nav" id="first" checked/>
  <input type="radio" name="nav" id="second" />
  <input type="radio" name="nav" id="third" />
  
  <label for="first" class="first"></label>
<label for="second"  class="second"></label>
<label for="third" class="third"></label>
 

SaraSoueidan

Moving from jQuery

Events

// jQuery
$(document).ready(function() {
  // code
})

SaraSoueidan

/*
Animate.css - http://daneden.me/animate
LICENSED UNDER THE  MIT LICENSE (MIT)

Copyright (c) 2012 Dan Eden

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

SaraSoueidan

eleventyConfig.addCollection("articles", function(collection) {
        return collection.getFilteredByGlob("./src/content/articles/**/*.md").filter((item) => {
            return !item.data.draft && item.date <= now;
        }).reverse();
    });

SaraSoueidan

---
title: Articles
# permalink: /articles/
layout: layouts/main.html

pagination:
  data: collections.articles
  size: 3
  alias: articles
permalink: 'articles{% if pagination.pageNumber > 0 %}/page/{{ pagination.pageNumber }}{% endif %}/index.html'

SaraSoueidan

<nav class="c-collection-pagination" aria-labelledby="pagination-label">
  <h2 id="pagination-label" class="visually-hidden">Pagination</h2>
  <ul>
    <li>
        {% if page.url != pagination.href.first %}<a href="{{ pagination.href.first }}">First</a>
        {% else %}First{% endif %}
    </li>
    <li>
        {% if page.url != pagination.href.last %}<a href="{{ pagination.href.last }}">Last</a>
        {% else %}Last{% endif %}

SaraSoueidan

/**
 * Mixin scrollbar
 */
@mixin scrollbar($size, $primary, $secondary: lighten($primary, 25%)) {
  ::-webkit-scrollbar {
		width:  $size;
		height: $size;
	}

	::-webkit-scrollbar-thumb {

SaraSoueidan

/*
* HTML5 Boilerplate
*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/

/* ==========================================================================
Base styles: opinionated defaults

SaraSoueidan

/**
 * Simulate a click event.
 * @public
 * @param {Element} elem  the element to simulate a click on
 */
var simulateClick = function (elem) {
	// Create our event (with options)
	var evt = new MouseEvent('click', {
		bubbles: true,
		cancelable: true,