Categories
28°C, New York
Home CSS Foundation CSS Kitchen Sink Orbit

Foundation CSS Kitchen Sink Orbit

Foundation CSS Kitchen Sink

Foundation CSS is the frontend framework of CSS, built by the ZURB foundation in September 2011, that is used to develop responsive websites, apps, and emails that work perfectly on any device. It is written using HTML, CSS, and Javascript and is used by many famous companies like Amazon, Facebook, eBay, etc. It uses packages like Grunt and Libsass for fast coding and controlling and Saas compiler to make development faster.  

Kitchen Sink has the elements to work in websites and applications. The Orbit is used to create the slider that swipes the elements using the orbit class.

Foundation CSS Kitchen Sink Orbit Classes:

  • orbit: It is used to create the slider with some elements.
  • orbit-container: It is used to create a container.
  • orbit-previous: It is used to navigate to the previous container.
  • orbit-next: It is used to navigate to the next container.
  • orbit-slide: It is used to create an orbit container slide.

Syntax:

<div class="orbit" data-orbit>
    <ul class="orbit-container">
        <button class="orbit-previous">Content</button>
        <button class="orbit-next">Content</button>
        <li class="is-active orbit-slide"> Content </li>
    </ul>
</div>

Example 1: This example describes the Kitchen Sink Orbit Class in Foundation CSS.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Foundation CSS Kitchen Sink Orbit</title>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" 
          crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" 
            crossorigin="anonymous">
    </script>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
    </script>
</head>
  
<body>
    <center>
        <h1 style="color: green;">
            w3wiki
        </h1> 
        <strong>
            Foundation CSS Kitchen Sink Orbit
        </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 Slide</span>
◀ 
            </button>
            <button class="orbit-next" 
                    aria-label="next"> 
                <span class="show-for-sr">Next Slide</span>
▶ 
             </button>
            <li class="is-active orbit-slide">
                <div>
                    <h3 class="text-center">First slide</h3>
                    <p class="text-center">
                        A Computer Science portal for Beginner. 
                        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">Second slide</h3>
                    <p class="text-center">
                        w3wiki.net was created with 
                        a goal in mind to provide well written, 
                        well thought and well explained solutions 
                        for selected questions.
                    </p>
  
                </div>
            </li>
        </ul>
        <nav class="orbit-bullets">
            <button class="is-active" 
                    data-slide="0">
               <span class="show-for-sr">First slide</span>
               <span class="show-for-sr">Current Slide</span> 
            </button>
            <button data-slide="1"> 
                <span class="show-for-sr">Second slide</span>
            </button>
        </nav>
    </div>
    <script>
        $(document).ready(function() {
            $(document).foundation();
        })
    </script>
</body>
  
</html>
 






                        









													
													
												

												
												

													
													
Output:

													
													
												

												
												

													
													
Kitchen Sink Orbit

													
													
												

												
												

													
													
Example 2: This example describes the orbit class that contains different contents.

													
													
												

												
												

													
													


HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html lang="en"> 


  


<head> 


    <title>Foundation CSS Kitchen Sink</title> 


    <link rel="stylesheet" href= 


"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" 


          crossorigin="anonymous"> 


    <script src= 


"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" 


            crossorigin="anonymous"> 


    </script> 


    <link rel="stylesheet" href= 


"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 


    <script src= 


"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> 


    </script> 


    <script src= 


"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> 


    </script> 


    <style> 


        .center { 


            display: block; 


            margin-left: auto; 


            margin-right: auto; 


        } 


    </style> 


</head> 


  


<body> 


    <center> 


        <h1 style="color: green;"> 


            w3wiki 


        </h1> 


        <strong>Foundation CSS Kitchen Sink Orbit</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 Slide</span> 


◀ 


            </button> 


            <button class="orbit-next" 


                    aria-label="next"> 


                <span class="show-for-sr">Next Slide</span> 


▶ 


            </button> 


            <li class="is-active orbit-slide"> 


                <div> 


                    <h3 class="text-center">First slide</h3> 


                    <p class="text-center"> 


                        A Computer Science portal for Beginner. 


                        It contains well written, well thought 


                        and well explained computer science and  


                        programming articles. Billions of Users,  


                        Millions of Articles Published, Thousands 


                        Got Hired by Top Companies and the numbers 


                        are still growing. Free Tutorials, Millions 


                        of Articles, Live, Online and Classroom Courses, 


                        Frequent Coding Competitions ,Webinars by  


                        Industry Experts, Internship opportunities  


                        and Job Opportunities. 


                    </p> 


  


                </div> 


            </li> 


            <li class="orbit-slide"> 


                <div> 


                    <h3 class="text-center">Second slide</h3> 


                    <p class="text-center"> 


                        w3wiki.net was created with  


                        a goal in mind to provide well written, 


                        well thought and well explained solutions 


                        for selected questions. Billions of Users, 


                        Millions of Articles Published,  


                        Thousands Got Hired by Top Companies 


                        and the numbers are still growing.  


                        Free Tutorials, Millions of Articles,  


                        Live, Online and Classroom Courses , 


                        Frequent Coding Competitions , 


                        Webinars by Industry Experts, Internship 


                        opportunities and Job Opportunities. 


                    </p> 


  


                </div> 


            </li> 


            <li class="orbit-slide"> 


                <div> 


                    <h3 class="text-center">Third slide</h3> 


                    <p class="text-center"> 


                        w3wiki.net was created with  


                        a goal in mind to provide well written, 


                        well thought and well explained solutions 


                        for selected questions. Billions of Users, 


                        Millions of Articles Published,  


                        Thousands Got Hired by Top Companies 


                        and the numbers are still growing.  


                        Free Tutorials, Millions of Articles,  


                        Live, Online and Classroom Courses , 


                        Frequent Coding Competitions , 


                        Webinars by Industry Experts, Internship 


                        opportunities and Job Opportunities. 


                    </p> 


  


                </div> 


            </li> 


            <li class="orbit-slide"> 


                <div> 


                    <h3 class="text-center">Fourth slide</h3> 


                    <img class="center" src= 


"https://media.w3wiki.net/wp-content/cdn-uploads/20190710102234/download3.png" 


                         alt="GFG_logo"> 


                </div> 


            </li> 


            <li class="orbit-slide"> 


                <div> 


                    <h3 class="text-center">Fifth slide</h3> 


                    <p class="text-center"> 


                        w3wiki.net was created with  


                        a goal in mind to provide well written, 


                        well thought and well explained solutions 


                        for selected questions. Billions of Users, 


                        Millions of Articles Published,  


                        Thousands Got Hired by Top Companies 


                        and the numbers are still growing.  


                        Free Tutorials, Millions of Articles,  


                        Live, Online and Classroom Courses , 


                        Frequent Coding Competitions , 


                        Webinars by Industry Experts, Internship 


                        opportunities and Job Opportunities. 


                    </p> 


  


                </div> 


            </li> 


        </ul> 


        <nav class="orbit-bullets"> 


            <button class="is-active" data-slide="0">  


                <span class="show-for-sr">First slide</span>  


                <span class="show-for-sr">Current Slide</span>  


            </button> 


            <button data-slide="1">  


                <span class="show-for-sr">Second slide</span>  


            </button> 


            <button data-slide="2">  


                <span class="show-for-sr">Third slide</span>  


            </button> 


            <button data-slide="3">  


                <span class="show-for-sr">Fourth slide</span>  


            </button> 


            <button data-slide="4">  


                <span class="show-for-sr">Fifth slide</span>  


            </button> 


        </nav> 


    </div> 


    <script> 


        $(document).ready(function() { 


            $(document).foundation(); 


        }) 


    </script> 


</body> 


</html>



















                        







                        









													
													
												

												
												

													
													
Output:

													
													
												

												
												

													
													
Kitchen Sink Orbit

													
													
												

												
												

													
													
Reference: https://get.foundation/sites/docs/kitchen-sink.html#orbit

													
													
												

												
												

													
													

													
													
												

												
												

													
													

													
													
												

												
												

													
													

													
													
												

												
													
											

											
										

									

									

										
										
Tags:

										
										#Foundation
										
										#Foundation-Kitchen-Sink
										
										#Geeks-Premier-League-2022
										
										#CSS
										
										#Geeks Premier League
										
										#Web Technologies
										
										

									

									

										

											
										

										

											
											
												Foundation CSS Kitchen Sink