"social media post "
Semantic UI 2.2.10 Snippet by shu3aybbadran

Post to Facebook Tweet this

<link href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <!-- meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>ALPHA SOCIAL KIT</title> <!-- semantic ui CSS --> <link rel="stylesheet" href="css/semantic.css"> <link rel="stylesheet" href="css/alpha.css"> </head> <body> <div class="ui grid"> <div class="four wide column">website</div> <!-- main --> <div class="six wide column"> <!-- publich post--> <div class="publish"> <div class="ui top attached tabular menu"> <a class="item active" data-tab="publish-text">Post</a> <a class="item" data-tab="publish-album">Album</a> <a class="item" data-tab="publish-live">Live</a> </div> <div class="ui bottom attached tab segment active" data-tab="publish-text"> <h5 class="ui header"> <div class="content"> share with <div class="ui inline dropdown"> <div class="text">public</div> <i class="dropdown icon"></i> <div class="menu"> <div class="item" data-text="public"><i class="world icon"></i> public</div> <div class="item" data-text="friends"><i class="users icon"></i> friends</div> <div class="item" data-text="only me"><i class="lock icon"></i> only me</div> </div> </div> </div> </h5> <div class="ui form"> <div class="field"> <textarea rows="2">Any Creative Idea for Today</textarea> </div> <div class="ui basic segment"> <i class="user plus icon"></i> <a class="ui image label"> <img src="img/elliot.jpg"> Elliot </a> <a class="ui image label"> <img src="img/elliot.jpg"> shadi </a> </div> <button class="ui basic button"> <i class="file image outline icon"></i> Add Photo/Video </button> <button class="ui basic button"> <i class="smile icon"></i> Feeling </button> <button class="ui basic button"> <i class="add user icon"></i> tag </button> <button class="ui basic button"> ... </button> <div class="ui hidden divider"></div> <button class="ui fluid primary button"> Publish </button> </div> </div> <div class="ui bottom attached tab segment" data-tab="publish-album"> <form class="ui form"> <div class="two fields"> <div class="field"> <label>album name</label> <input name="album-name"type="text"> </div> <div class="field"> <label>album location</label> <input name="album-location"type="text"> </div> </div> <div class="field"> <label>album description</label> <input name="album-description" type="text"> </div> <div class="ui hidden divider"></div> <div class="ui placeholder segment"> <div class="ui icon header"> <i class="file image outline icon"></i> Add Your Favorite Photos/Videos </div> <div class="ui primary button">Add</div> </div> <button class="ui fluid primary button"> Publish </button> </form> </div> <div class="ui bottom attached tab segment" data-tab="publish-live"> Third </div> </div> <!-- posts --> <!-- post --> <div class="ui fluid card"> <div class="content"> <div class="right floated meta">14h</div> <img class="ui avatar image" src="img/elliot.jpg"> Elliot </div> <div class="image"> <img src="https://via.placeholder.com/350x150"> </div> <div class="content"> <div class="description"> Elliot requested permission to view your contact details Elliot requested permission to view your contact details </div> </div> <div class="content"> <span class="right floated"> <i class="comment icon"></i> 3 comments </span> <i class="heart outline like icon"></i> 17 likes </div> <div class="extra content"> <div class="ui large transparent left icon input"> <i class="heart outline icon"></i> <input placeholder="Add Comment..." type="text"> </div> </div> </div><!-- post --> <!-- post text--> <div class="ui fluid card"> <div class="content"> <div class="right floated meta">14h</div> <img class="ui avatar image" src="img/elliot.jpg"> Elliot with Elliot and Elliot. </div> <div class="content"> <div class="description"> Elliot requested permission to view your contact details Elliot requested permission to view your contact details Elliot requested permission to view your contact details Elliot requested permission to view your contact details </div> </div> <div class="content"> <span class="right floated"> <i class="comment icon"></i> 3 comments </span> <i class="heart outline like icon"></i> 17 likes </div> <div class="ui comments padded secondary basic segment"> <div class="comment"> <a class="avatar"> <img src="img/elliot.jpg"> </a> <div class="content"> <a class="author">Stevie Feliciano</a> <div class="metadata"> <div class="date">2 days ago</div> <div class="rating"> <i class="star icon"></i> 5 Faves </div> </div> <div class="text"> Hey guys,nt is helping you read this documentation. </div> </div> </div> <div class="comment"> <a class="avatar"> <img src="img/elliot.jpg"> </a> <div class="content"> <a class="author">Stevie Feliciano</a> <div class="metadata"> <div class="date">2 days ago</div> <div class="rating"> <i class="star icon"></i> 5 Faves </div> </div> <div class="text"> Hey guys,nt is helping you read this documentation. </div> </div> </div> </div> <div class="extra content"> <div class="ui large transparent left icon input"> <i class="heart outline icon"></i> <input placeholder="Add Comment..." type="text"> </div> </div> </div><!-- post text --> <!-- post with 2 images --> <div class="ui fluid card"> <div class="content"> <div class="right floated meta">14h</div> <img class="ui avatar image" src="img/elliot.jpg"> Elliot </div> <div class="ui slide masked reveal image"> <div class="ui black ribbon label"> <i class="images outline icon"></i> 2 </div> <img src="https://via.placeholder.com/350x150" class="visible content"> <img src="https://via.placeholder.com/350x150" class="hidden content"> </div> <div class="content"> <div class="description"> Elliot requested permission to view your contact details Elliot requested permission to view your contact details </div> </div> <div class="content"> <span class="right floated"> <i class="comment icon"></i> 3 comments </span> <i class="heart outline like icon"></i> 17 likes </div> <div class="extra content"> <div class="ui large transparent left icon input"> <i class="heart outline icon"></i> <input placeholder="Add Comment..." type="text"> </div> </div> </div><!-- post with 2 images --> </div><!-- /main --> <div class="five wide column">extra</div> <div class="one wide column black">message</div> </div><!-- / grid --> </body> <script src="js/jquery.min.js"></script> <script src="js/semantic.js"></script> <script> $('.menu .item') .tab() ; $('.ui.dropdown') .dropdown() ; </script> </html>
$('.ui.dropdown') .dropdown() ;

Related: See More

Vue Argon Design System

Questions / Comments: