Skip to content

Commit

Permalink
Merge pull request #61 from alexsmacd/master
Browse files Browse the repository at this point in the history 
Update layout.md
  • Loading branch information
@hakimel
hakimel authored Apr 23, 2024
2 parents ef07615 + ede82ad commit c5e7a08
Showing 1 changed file with 12 additions and 12 deletions.
24 changes: 12 additions & 12 deletions src/layout.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,18 +16,18 @@ The `r-stack` layout helper lets you center and place multiple elements on top o

```html
<div class="r-stack">
<img class="fragment" src="https://placekitten.com/450/300" width="450" height="300">
<img class="fragment" src="https://placekitten.com/300/450" width="300" height="450">
<img class="fragment" src="https://placekitten.com/400/400" width="400" height="400">
<img class="fragment" src="https://picsum.photos/450/300" width="450" height="300">
<img class="fragment" src="https://picsum.photos/300/450" width="300" height="450">
<img class="fragment" src="https://picsum.photos/400/400" width="400" height="400">
</div>
```
<div class="reveal reveal-example">
<div class="slides">
<section>
<div class="r-stack">
<img class="fragment" src="https://placekitten.com/450/300" width="450" height="300">
<img class="fragment" src="https://placekitten.com/300/450" width="300" height="450">
<img class="fragment" src="https://placekitten.com/400/400" width="400" height="400">
<img class="fragment" src="https://picsum.photos/450/300" width="450" height="300">
<img class="fragment" src="https://picsum.photos/300/450" width="300" height="450">
<img class="fragment" src="https://picsum.photos/400/400" width="400" height="400">
</div>
</section>
</div>
Expand All @@ -37,18 +37,18 @@ If you want to show each of the stacked elements individually you can adjust the

```html
<div class="r-stack">
<img class="fragment fade-out" data-fragment-index="0" src="https://placekitten.com/450/300" width="450" height="300">
<img class="fragment current-visible" data-fragment-index="0" src="https://placekitten.com/300/450" width="300" height="450">
<img class="fragment" src="https://placekitten.com/400/400" width="400" height="400">
<img class="fragment fade-out" data-fragment-index="0" src="https://picsum.photos/450/300" width="450" height="300">
<img class="fragment current-visible" data-fragment-index="0" src="https://picsum.photos/300/450" width="300" height="450">
<img class="fragment" src="https://picsum.photos/400/400" width="400" height="400">
</div>
```
<div class="reveal reveal-example">
<div class="slides">
<section>
<div class="r-stack">
<img class="fragment fade-out" data-fragment-index="0" src="https://placekitten.com/450/300" width="450" height="300">
<img class="fragment current-visible" data-fragment-index="0" src="https://placekitten.com/300/450" width="300" height="450">
<img class="fragment" src="https://placekitten.com/400/400" width="400" height="400">
<img class="fragment fade-out" data-fragment-index="0" src="https://picsum.photos/450/300" width="450" height="300">
<img class="fragment current-visible" data-fragment-index="0" src="https://picsum.photos/300/450" width="300" height="450">
<img class="fragment" src="https://picsum.photos/400/400" width="400" height="400">
</div>
</section>
</div>
Expand Down

0 comments on commit c5e7a08

Please sign in to comment.