Semantic-UI | Feed
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements.
A feed shows the user activity. For example Newsfeed on Facebook.
Example 1: This example creating the feed content using Semantic-ui.
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= rel="stylesheet" /> <script src= </script> </head> <body> <div style="margin-top: 20px" class="ui container"> <div class="ui feed"> <div class="event"> <div class="label"> <img src= </div> <div class="content"> <div class="summary"> <a class="user"> Geeksforgeeks </a> starting following you. <div class="date"> 2 Hour Ago </div> </div> <div class="meta"> <a class="like"> <i class="like icon"></i> 1k Likes </a> </div> </div> </div> <div class="event"> <div class="label"> <img src= </div> <div class="content"> <div class="summary"> <a>Geeksforgeeks</a> changed </br> thier profile picture <div class="date"> 6 days ago </div> </div> <div class="extra images"> <a><img src= </div> <div class="meta"> <a class="like"> <i class="like icon"></i> 120k Like </a> </div> </div> </div> <div class="event"> <div class="label"> <img src= </div> <div class="content"> <div class="summary"> <a>Geeksforgeeks</a> <div class="date"> 3 days ago </div> </div> <div class="extra text"> New courses are available on</br> 20% discount for summer. </div> <div class="meta"> <a class="like"> <i class="like icon"></i> 5 Likes </a> </div> </div> </div> </div> </div> </body> </html> |
Output:
Example 2: This example creating the feed content with icon using Semantic-ui.
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= rel="stylesheet" /> <script src= </script> </head> <body> <div style="margin-top: 20px" class="ui container"> <div class="ui feed"> <div class="event"> <div class="label"> <i class="computer icon"></i> </div> <div class="content"> <div class="summary"> Geeksforgeeks just launched new Courses. <div class="date"> 1 hour ago. </div> </div> </div> </div> </div> </div> </body> </html> |
Output:
Please Login to comment...