Главная » Языки программирования

Users list templates html

Содержание
  1. 47 CSS Lists
  2. Related Articles
  3. Author
  4. Links
  5. Made with
  6. About a code
  7. Named Scroll-Timeline Vertical
  8. Author
  9. Links
  10. Made with
  11. About a code
  12. A Better OL (Numbered List with Circle Outline)
  13. Author
  14. Links
  15. Made with
  16. About a code
  17. Handwritten Shopping List with Custom markers
  18. Author
  19. Links
  20. Made with
  21. About a code
  22. Custom Properties Step Progress Indicator
  23. Author
  24. Links
  25. Made with
  26. About a code
  27. Compact Book Quotes
  28. Author
  29. Links
  30. Made with
  31. About a code
  32. Codepen Team Member List — Even/Odd Styles
  33. Author
  34. Links
  35. Made with
  36. About a code
  37. Reversed and Split List
  38. Author
  39. Links
  40. Made with
  41. About a code
  42. Reversed and Split List with ::before
  43. Author
  44. Links
  45. Made with
  46. About a code
  47. The Order of Operations
  48. Author
  49. Links
  50. Made with
  51. About a code
  52. Todo List with Sticky Notes
  53. Author
  54. Links
  55. Made with
  56. About a code
  57. Morphing Moonrocks
  58. Author
  59. Links
  60. Made with
  61. About a code
  62. Interactive Loose-Leaf Todo List
  63. Author
  64. Links
  65. Made with
  66. About a code
  67. Todo List with Little Details
  68. Author
  69. Links
  70. Made with
  71. About a code
  72. Stars List
  73. Author
  74. Links
  75. Made with
  76. About a code
  77. CSS3 List. Spinning Heart List-Style
  78. Author
  79. Links
  80. Made with
  81. About a code
  82. UL Cards with Depth
  83. Author
  84. Links
  85. Made with
  86. About a code
  87. OL Standing Cards
  88. Author
  89. Links
  90. Made with
  91. About a code
  92. UL Banner Cards
  93. Author
  94. Links
  95. Made with
  96. About a code
  97. OL Circle Cards
  98. Author
  99. Links
  100. Made with
  101. About a code
  102. UL Icon Cards
  103. Author
  104. Links
  105. Made with
  106. About a code
  107. UL-Circles with Icons
  108. Author
  109. Links
  110. Made with
  111. About a code
  112. OL Cards — Single Element
  113. Author
  114. Links
  115. Made with
  116. About a code
  117. Ordered List Arrow Cards
  118. Author
  119. Links
  120. Made with
  121. About a code
  122. Sticky Definition List
  123. Author
  124. Links
  125. Made with
  126. About a code
  127. Pure CSS To-Do
  128. Author
  129. Links
  130. Made with
  131. About a code
  132. CSS Pseudo Commas: Exploring Comma Rules in Nouns and Verbs
  133. Author
  134. Links
  135. Made with
  136. About a code
  137. Just Another Definition List, Grid, Sass, Responsive
  138. Author
  139. Links
  140. Made with
  141. About a code
  142. Take a Number Contact List
  143. Author
  144. Links
  145. Made with
  146. About a code
  147. Mini Insta-Friends Scrolling List Layout
  148. Author
  149. Links
  150. Made with
  151. About a code
  152. Inline Lists with Conditional Separators
  153. Author
  154. Links
  155. Made with
  156. About a code
  157. Forbes Leaderboard
  158. Author
  159. Links
  160. Made with
  161. About a code
  162. Pretty Sticky
  163. Author
  164. Links
  165. Made with
  166. About a code
  167. Checklist Animation — Only CSS
  168. Author
  169. Links
  170. Made with
  171. About a code
  172. 12nth Selectors
  173. Author
  174. Links
  175. Made with
  176. About a code
  177. Gradient Ordered List
  178. Author
  179. Bootstrap snippet and html example. light user list
  180. HTML code
  181. CSS code
  182. Bootstrap snippet and html example. User list page
  183. HTML code
  184. CSS code
  185. Bootstrap snippet and html example. table user list
  186. HTML code
  187. CSS code
  188. Similar snippets
  189. Trending now
  190. About this bootstrap example/template
  191. Bootstrap 3.2.0
  192. Responsive
  193. Crossbrowser compatibility
  194. semantic html 5
  195. Simple Integration
Читайте также:  Screen size media css

47 CSS Lists

Collection of hand-picked free HTML and CSS list style code examples from Codepen, GitHub, and other resources. Update of May 2021 collection. Twenty nine new examples.

Author

Made with

About a code

Named Scroll-Timeline Vertical

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: A Better OL (Numbered List with Circle Outline)

Author

Made with

About a code

A Better OL (Numbered List with Circle Outline)

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Handwritten Shopping List with Custom markers

Author

Made with

About a code

Handwritten Shopping List with Custom markers

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Custom Properties Step Progress Indicator

Author

Made with

About a code

Custom Properties Step Progress Indicator

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Compact Book Quotes

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Codepen Team Member List - Even/Odd Styles

Author

Made with

About a code

Codepen Team Member List — Even/Odd Styles

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Reversed and Split List

Author

Made with

About a code

Reversed and Split List

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Reversed and Split List with ::before

Author

Made with

About a code

Reversed and Split List with ::before

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: The Order of Operations

Author

Made with

About a code

The Order of Operations

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Todo List with Sticky Notes

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Morphing Moonrocks

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Interactive Loose-Leaf Todo List

Author

Made with

About a code

Interactive Loose-Leaf Todo List

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Todo List with Little Details

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Stars List

Author

Made with

About a code

Stars List

Compatible browsers: Chrome, Edge, Opera, Safari

Demo image: CSS3 List. Spinning Heart List-Style

Author

Made with

About a code

CSS3 List. Spinning Heart List-Style

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: UL Cards with Depth

Author

Made with

About a code

UL Cards with Depth

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: OL Standing Cards

Author

Made with

About a code

OL Standing Cards

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: UL Banner Cards

Author

Made with

About a code

UL Banner Cards

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: OL Circle Cards

Author

Made with

About a code

OL Circle Cards

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: UL Icon Cards

Author

Made with

About a code

UL Icon Cards

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: UL-Circles with Icons

Author

Made with

About a code

UL-Circles with Icons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: OL Cards - Single Element

Author

Made with

About a code

OL Cards — Single Element

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Ordered List Arrow Cards

Author

Made with

About a code

Ordered List Arrow Cards

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Sticky Definition List

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Pure CSS To-Do

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

CSS Pseudo Commas: Exploring Comma Rules in Nouns and Verbs

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Just Another Definition List, Grid, Sass, Responsive

Author

Made with

About a code

Just Another Definition List, Grid, Sass, Responsive

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Take a Number Contact List

Author

Made with

About a code

Take a Number Contact List

A little experiment displaying contact links.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Mini Insta-Friends Scrolling List Layout

Author

Made with

About a code

Mini Insta-Friends Scrolling List Layout

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Inline Lists with Conditional Separators

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Forbes Leaderboard

A quick leaderboard for the forbes under 40 list.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Pretty Sticky

A simple example highlighting how awesome CSS position: sticky can be.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Checklist Animation — Only CSS

Simple checklist animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

12nth Selectors

CSS list with custom counter and scroll effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Gradient Ordered List

Author

Made with

About a code

Gradient Ordered List

A simple, styled ordered list using SCSS and HTML5. The gradient background transitions from one, to another, and back again. IE11 friendly.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Simple CSS Check List

Author

Источник

Bootstrap snippet and html example. light user list

This html snippet was created to help web designers, web developers, front-end and back-end developer save time. Use it for free in your project and build your app faster, You can also download the HTML, CSS, and JS code.
Tags: users,list,job,candidate,user-list

HTML code

This is the html code used to create this bootstrap snippet, You can copy and paste the following html code inside a page with bootstrap 4.5.0 included, to get the result that you can see in the preview selection

Brooke Kelly

  
  • Information Technology
    • 
  
  • Rolling Meadows, IL 60008
    • 


    Ronald Bradley
    
  
  • Human Resources
    • 
  
  • Monroe Township, NJ 08831
    • 


    Rafael Briggs
    
  
  • Recruitment Consultancy
    • 
  
  • Haines City, FL 33844
    • 


    Vickie Meyer
    
  
  • Human Resources
    • 
  
  • Minneapolis, MN 55406
    • 


    Nichole Haynes
    
  
  • Information Technology
    • 
  
  • Botchergate, Carlisle
    • 


    Candidate NameAction
    Shortlisted
    Shortlisted
    Shortlisted
    Shortlisted
    Shortlisted
    • 2
    • 3
    • .
    • 25
    • Next
      •

    CSS code

    This is the css code used to create this bootstrap snippet, You can copy and paste the following css code inside a page with bootstrap 4.5.0 included, to get the result that you can see in the preview selection

    body < background-color: #f8f9fa!important >.p-4 < padding: 1.5rem!important; >.mb-0, .my-0 < margin-bottom: 0!important; >.shadow-sm < box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important; >/* user-dashboard-info-box */ .user-dashboard-info-box .candidates-list .thumb < margin-right: 20px; >.user-dashboard-info-box .candidates-list .thumb img < width: 80px; height: 80px; -o-object-fit: cover; object-fit: cover; overflow: hidden; border-radius: 50%; >.user-dashboard-info-box .title < display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 30px 0; >.user-dashboard-info-box .candidates-list td < vertical-align: middle; >.user-dashboard-info-box td li < margin: 0 4px; >.user-dashboard-info-box .table thead th < border-bottom: none; >.table.manage-candidates-top th < border: 0; >.user-dashboard-info-box .candidate-list-favourite-time .candidate-list-favourite < margin-bottom: 10px; >.table.manage-candidates-top < min-width: 650px; >.user-dashboard-info-box .candidate-list-details ul < color: #969696; >/* Candidate List */ .candidate-list < background: #ffffff; display: -webkit-box; display: -ms-flexbox; display: flex; border-bottom: 1px solid #eeeeee; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 20px; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; >.candidate-list:hover < -webkit-box-shadow: 0px 0px 34px 4px rgba(33, 37, 41, 0.06); box-shadow: 0px 0px 34px 4px rgba(33, 37, 41, 0.06); position: relative; z-index: 99; >.candidate-list:hover a.candidate-list-favourite < color: #e74c3c; -webkit-box-shadow: -1px 4px 10px 1px rgba(24, 111, 201, 0.1); box-shadow: -1px 4px 10px 1px rgba(24, 111, 201, 0.1); >.candidate-list .candidate-list-image < margin-right: 25px; -webkit-box-flex: 0; -ms-flex: 0 0 80px; flex: 0 0 80px; border: none; >.candidate-list .candidate-list-image img < width: 80px; height: 80px; -o-object-fit: cover; object-fit: cover; >.candidate-list-title < margin-bottom: 5px; >.candidate-list-details ul < display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 0px; >.candidate-list-details ul li < margin: 5px 10px 5px 0px; font-size: 13px; >.candidate-list .candidate-list-favourite-time < margin-left: auto; text-align: center; font-size: 13px; -webkit-box-flex: 0; -ms-flex: 0 0 90px; flex: 0 0 90px; >.candidate-list .candidate-list-favourite-time span < display: block; margin: 0 auto; >.candidate-list .candidate-list-favourite-time .candidate-list-favourite < display: inline-block; position: relative; height: 40px; width: 40px; line-height: 40px; border: 1px solid #eeeeee; border-radius: 100%; text-align: center; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; margin-bottom: 20px; font-size: 16px; color: #646f79; >.candidate-list .candidate-list-favourite-time .candidate-list-favourite:hover < background: #ffffff; color: #e74c3c; >.candidate-banner .candidate-list:hover < position: inherit; -webkit-box-shadow: inherit; box-shadow: inherit; z-index: inherit; >.bg-white < background-color: #ffffff !important; >.p-4 < padding: 1.5rem!important; >.mb-0, .my-0 < margin-bottom: 0!important; >.shadow-sm < box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important; >.user-dashboard-info-box .candidates-list .thumb

    Источник

    Bootstrap snippet and html example. User list page

    This html snippet was created to help web designers, web developers, front-end and back-end developer save time. Use it for free in your project and build your app faster, You can also download the HTML, CSS, and JS code.
    Tags: user-list

    HTML code

    This is the html code used to create this bootstrap snippet, You can copy and paste the following html code inside a page with bootstrap 3.3.6 included, to get the result that you can see in the preview selection

    UserCreatedInactive[email protected]Users list templates htmlActive[email protected]Users list templates htmlBanned[email protected]Users list templates htmlPending[email protected]Users list templates htmlActive[email protected]Users list templates htmlInactive[email protected]Users list templates htmlActive[email protected]Users list templates htmlBanned[email protected]Users list templates htmlPending[email protected]Users list templates htmlActive[email protected]
      
  
    • 1
      • 
  
    • 2
      • 
  
    • 3
      • 
  
    • 4
      • 
  
    • 5
      •

    CSS code

    This is the css code used to create this bootstrap snippet, You can copy and paste the following css code inside a page with bootstrap 3.3.6 included, to get the result that you can see in the preview selection

    body /* USER LIST TABLE */ .user-list tbody td > img < position: relative; max-width: 50px; float: left; margin-right: 15px; >.user-list tbody td .user-link < display: block; font-size: 1.25em; padding-top: 3px; margin-left: 60px; >.user-list tbody td .user-subhead < font-size: 0.875em; font-style: italic; >/* TABLES */ .table < border-collapse: separate; >.table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th < background-color: #eee; >.table thead > tr > th < border-bottom: 1px solid #C2C2C2; padding-bottom: 0; >.table tbody > tr > td < font-size: 0.875em; background: #f5f5f5; border-top: 10px solid #fff; vertical-align: middle; padding: 12px 8px; >.table tbody > tr > td:first-child, .table thead > tr > th:first-child < padding-left: 20px; >.table thead > tr > th span < border-bottom: 2px solid #C2C2C2; display: inline-block; padding: 0 5px; padding-bottom: 5px; font-weight: normal; >.table thead > tr > th > a span < color: #344644; >.table thead > tr > th > a span:after < content: "\f0dc"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; margin-left: 5px; font-size: 0.75em; >.table thead > tr > th > a.asc span:after < content: "\f0dd"; >.table thead > tr > th > a.desc span:after < content: "\f0de"; >.table thead > tr > th > a:hover span < text-decoration: none; color: #2bb6a3; border-color: #2bb6a3; >.table.table-hover tbody > tr > td < -webkit-transition: background-color 0.15s ease-in-out 0s; transition: background-color 0.15s ease-in-out 0s; >.table tbody tr td .call-type < display: block; font-size: 0.75em; text-align: center; >.table tbody tr td .first-line < line-height: 1.5; font-weight: 400; font-size: 1.125em; >.table tbody tr td .first-line span < font-size: 0.875em; color: #969696; font-weight: 300; >.table tbody tr td .second-line < font-size: 0.875em; line-height: 1.2; >.table a.table-link < margin: 0 5px; font-size: 1.125em; >.table a.table-link:hover < text-decoration: none; color: #2aa493; >.table a.table-link.danger < color: #fe635f; >.table a.table-link.danger:hover < color: #dd504c; >.table-products tbody > tr > td < background: none; border: none; border-bottom: 1px solid #ebebeb; -webkit-transition: background-color 0.15s ease-in-out 0s; transition: background-color 0.15s ease-in-out 0s; position: relative; >.table-products tbody > tr:hover > td < text-decoration: none; background-color: #f6f6f6; >.table-products .name < display: block; font-weight: 600; padding-bottom: 7px; >.table-products .price < display: block; text-decoration: none; width: 50%; float: left; font-size: 0.875em; >.table-products .price > i < color: #8dc859; >.table-products .warranty < display: block; text-decoration: none; width: 50%; float: left; font-size: 0.875em; >.table-products .warranty > i < color: #f1c40f; >.table tbody > tr.table-line-fb > td < background-color: #9daccb; color: #262525; >.table tbody > tr.table-line-twitter > td < background-color: #9fccff; color: #262525; >.table tbody > tr.table-line-plus > td < background-color: #eea59c; color: #262525; >.table-stats .status-social-icon < font-size: 1.9em; vertical-align: bottom; >.table-stats .table-line-fb .status-social-icon < color: #556484; >.table-stats .table-line-twitter .status-social-icon < color: #5885b8; >.table-stats .table-line-plus .status-social-icon

    Источник

    Bootstrap snippet and html example. table user list

    This html snippet was created to help web designers, web developers, front-end and back-end developer save time. Use it for free in your project and build your app faster, You can also download the HTML, CSS, and JS code.
    Tags: user-list

    HTML code

    This is the html code used to create this bootstrap snippet, You can copy and paste the following html code inside a page with bootstrap 3.2.0 included, to get the result that you can see in the preview selection

      
     
     
     
     
      User Created Email        Users list templates html  2013/08/12 pending  [email protected]        Users list templates html  2013/08/12 Active  [email protected]        Users list templates html  2013/08/12 inactive  [email protected]

    CSS code

    This is the css code used to create this bootstrap snippet, You can copy and paste the following css code inside a page with bootstrap 3.2.0 included, to get the result that you can see in the preview selection

    body < background:#eee; >.main-box.no-header < padding-top: 20px; >.main-box < background: #FFFFFF; -webkit-box-shadow: 1px 1px 2px 0 #CCCCCC; -moz-box-shadow: 1px 1px 2px 0 #CCCCCC; -o-box-shadow: 1px 1px 2px 0 #CCCCCC; -ms-box-shadow: 1px 1px 2px 0 #CCCCCC; box-shadow: 1px 1px 2px 0 #CCCCCC; margin-bottom: 16px; -webikt-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; >.table a.table-link.danger < color: #e74c3c; >.label < border-radius: 3px; font-size: 0.875em; font-weight: 600; >.user-list tbody td .user-subhead < font-size: 0.875em; font-style: italic; >.user-list tbody td .user-link < display: block; font-size: 1.25em; padding-top: 3px; margin-left: 60px; >a < color: #3498db; outline: none!important; >.user-list tbody td>img < position: relative; max-width: 50px; float: left; margin-right: 15px; >.table thead tr th < text-transform: uppercase; font-size: 0.875em; >.table thead tr th < border-bottom: 2px solid #e7ebee; >.table tbody tr td:first-child < font-size: 1.125em; font-weight: 300; >.table tbody tr td < font-size: 0.875em; vertical-align: middle; border-top: 1px solid #e7ebee; padding: 12px 8px; >a:hover

    Similar snippets

    Find more similar snippets using the following tags:user-list

    Bootstrap example and template. light user list

    Bootstrap example and template. General Search Results

    Bootstrap example and template. bs4 beta user list with badges

    bs4 beta user list with badges

    Bootstrap example and template. bs4 candidates listing page

    bs4 candidates listing page

    Bootstrap example and template. bs5 dark footer

    Bootstrap example and template. profile edit data and skills

    profile edit data and skills

    Bootstrap example and template. profile with data and skills

    profile with data and skills

    Bootstrap example and template. bs5 edit profile account details

    bs5 edit profile account details

    Bootstrap example and template. table user list

    About this bootstrap example/template

    This example/template, table user list, was published on Aug 23rd 2014, 22:43 by Bootdey Admin and it is free.

    We hope you will enjoy this awesome snippet and stay tuned for the latest updates, bootdey snippets are already used in thousands of blogs, websites and projects. We believe it will save your precious time and gives trendy look to your next web project.

    We always try to offer the best beautiful and responsive source of Bootstrap code examples and components.

    This code example currectly have 68.9K views, Using this bootstrap snippet you have the following benefits:

    Bootstrap 3.2.0

    This code example is based on bootstrap 3.2.0 and the grid system of this framework

    Responsive

    Based on bootstrap framework makes all the layouts perfectly responsive for all devices

    Crossbrowser compatibility

    Tested on all major browsers, it works smoothly on all of them

    semantic html 5

    Built on html / css3 the code quality is really amazing

    Simple Integration

    This code example can be simply integrated on existing sites and new ones too, all you need to do is copy the code and start working

    Источник

    Оцените статью