<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
title
> Foundation CSS Orbit Slide Contents </
title
>
<
link
rel
=
"stylesheet"
href
=
crossorigin
=
"anonymous"
>
<
script
src
=
</
script
>
<
script
src
=
</
script
>
</
head
>
<
body
>
<
center
>
<
h2
style
=
"color: green;"
>
GeeksforGeeks
</
h2
>
<
strong
>
Foundation CSS Orbit Slide Contents
</
strong
>
</
center
>
<
div
class
=
"orbit"
role
=
"region"
data-orbit
data-use-m-u-i
=
"false"
>
<
ul
class
=
"orbit-container"
>
<
button
class
=
"orbit-previous"
aria-label
=
"previous"
>
<
span
class
=
"show-for-sr"
>Previous</
span
>
◀
</
button
>
<
button
class
=
"orbit-next"
aria-label
=
"next"
>
<
span
class
=
"show-for-sr"
>Next</
span
>
▶
</
button
>
<
li
class
=
"is-active orbit-slide"
>
<
div
>
<
h3
class
=
"text-center"
> GeeksforGeeks 1 </
h3
>
<
p
class
=
"text-center"
>
A Computer Science portal for geeks.
</
p
>
</
div
>
</
li
>
<
li
class
=
"orbit-slide"
>
<
div
>
<
h3
class
=
"text-center"
> GeeksforGeeks 2 </
h3
>
<
p
class
=
"text-center"
>
It contains well written, well thought
and well explained computer science and
programming articles.
</
p
>
</
div
>
</
li
>
<
li
class
=
"orbit-slide"
>
<
div
>
<
h3
class
=
"text-center"
> GeeksforGeeks 3 </
h3
>
<
p
class
=
"text-center"
>
Computer Science portal
</
p
>
</
div
>
</
li
>
</
ul
>
<
nav
class
=
"orbit-bullets"
>
<
button
class
=
"is-active"
data-slide
=
"0"
>
<
span
class
=
"show-for-sr"
>GeeksforGeeks 1</
span
>
<
span
class
=
"show-for-sr"
>Current Slide</
span
>
</
button
>
<
button
data-slide
=
"1"
>
<
span
class
=
"show-for-sr"
>GeeksforGeeks 2</
span
>
</
button
>
<
button
data-slide
=
"2"
>
<
span
class
=
"show-for-sr"
>GeeksforGeeks 3</
span
>
</
button
>
</
nav
>
</
div
>
<
script
>
$(document).ready(function () {
$(document).foundation();
})
</
script
>
</
body
>
</
html
>