Skip to content

Instantly share code, notes, and snippets.

@ahmedtalaltwd7
ahmedtalaltwd7 / index.html
Created October 22, 2021 23:46
Material design Product Card
<div class="row">
<div class="col l4 m8 s12 offset-m2 offset-l4">
<div class="product-card">
<div class="card z-depth-4">
<div class="card-image">
<a href="#" class="btn-floating btn-large price waves-effect waves-light brown darken-3">5 €</a>
<!-- alternative image links:
http://i58.photobucket.com/albums/g249/Landry_Bete/dessert14_zpsg6u4skv6.jpg
https://www.dropbox.com/s/15xhr85exkhusgi/dessert14.jpg?raw=1 -->
<img src="https://res.cloudinary.com/landry-bete/image/upload/v1488769144/dessert14_trnhnj.jpg" alt="product-img">
@ahmedtalaltwd7
ahmedtalaltwd7 / pagination.html
Created December 2, 2021 00:54 — forked from sharu725/pagination.html
Jekyll Pagination
<!--
Before implementing this Jekyll snippet make sure
1. "plugins: jekyll-paginate" is added in the _config.yml file.
2. for loop has "paginator.post" instead of "site.posts".
-->
{% if paginator.total_pages > 1 %}
<div class="wj-pagination">
{% if paginator.previous_page %}
<a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">&laquo; Prev</a>
@ahmedtalaltwd7
ahmedtalaltwd7 / index.html
Created July 21, 2024 23:27
Responsive Grid Image Gallery ( Animation )
<main class='gallery'>
<div class='item' data-pos='0'><img src='https://images.unsplash.com/photo-1708247874023-f6d71a45113a?q=80&w=2344&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'></div>
<div class='item' data-pos='1'><img src='https://images.unsplash.com/photo-1437751059337-ea72d4f73fcf?q=80&w=2322&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'></div>
<div class='item' data-pos='2'><img src='https://images.unsplash.com/photo-1515594515116-863345d8507c?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'></div>
<div class='item' data-pos='3'><img src='https://images.unsplash.com/photo-1533106497176-45ae19e68ba2?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'></div>
<div class='item' data-pos='4'><img src='https://images.unsplash.com/photo-1517953377824-516f2dca803b?q=80&w=2378&auto=format&f