Github Commit List
How do I make an github commit list?
Big fan of @github and @mdo, love the updates. What is a github commit list? How do you make a github commit list? This script and codes were developed by Pongstr on 21 September 2022, Wednesday.
Github Commit List Previews
Github Commit List - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Github Commit List</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/octicons/2.0.2/octicons.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="main-container"> <div class="group-list-container"> <div class="group-list-title"> <span class="octicon octicon-git-commit"></span> <span>Commits on Sep 09, 2014</span> </div> <ol class="group-list"> <li class="group-list-item"> <div class="group-list-avatar"> <img src="https://avatars1.githubusercontent.com/u/962502?v=2&s=72" alt=""> </div> <div class="group-list-body"> <h5 class="group-list-body-title"> <a class="message-link" href="#">Vivamus convallis ligula sem, vitae accumsan lacus</a> <a class="issue-link" href="#">#64</a> <span class="text-expander inline"><a href="#" data-toggle="expander">…</a></span> </h5> <p class="group-list-body-meta"> <a class="author-link" href="#">pongstr</a> <span>authored 10 hours ago</span> </p> <p class="group-list-body-desc" data-expand="true"> Duis ex arcu, pulvinar at volutpat nec, posuere ut dui. Vivamus ullamcorper </p> </div> <div class="group-list-links"> <div class="group-list-btn-group"> <a href="#"> <i class="octicon octicon-clippy"></i> </a> <a href="#"> <i class="sha-icon octicon octicon-diff"></i> </a> </div> <div class="group-list-btn-group"> <a href="#"> <i class="octicon octicon-code"></i> </a> </div> </div> </li> <li class="group-list-item"> <div class="group-list-avatar"> <img src="https://avatars0.githubusercontent.com/u/1888261?v=2&s=120" alt=""> </div> <div class="group-list-body"> <h5 class="group-list-body-title"> <a class="message-link" href="#">Nam sit amet</a> <a class="issue-link" href="#">#66</a> <a class="message-link" href="#">consectetur arcu, vitae</a> <span class="text-expander inline"><a href="#" data-toggle="expander">…</a></span> </h5> <p class="group-list-body-meta"> <a class="author-link" href="#">pongstr</a> <span>authored 10 hours ago</span> </p> <p class="group-list-body-desc" data-expand> Duis ex arcu, pulvinar at volutpat nec, posuere ut dui. Vivamus ullamcorper </p> </div> <div class="group-list-links"> <div class="group-list-btn-group"> <a href="#"> <i class="octicon octicon-clippy"></i> </a> <a href="#"> <i class="sha-icon octicon octicon-diff"></i> </a> </div> <div class="group-list-btn-group"> <a href="#"> <i class="octicon octicon-code"></i> </a> </div> </div> </li> <li class="group-list-item"> <div class="group-list-avatar"> <img src="https://avatars1.githubusercontent.com/u/962502?v=2&s=72" alt=""> </div> <div class="group-list-body"> <h5 class="group-list-body-title"> <a class="message-link" href="#">Vivamus convallis ligula sem, vitae accumsan lacus</a> <a class="issue-link" href="#">#64</a> <span class="text-expander inline"><a href="#" data-toggle="expander">…</a></span> </h5> <p class="group-list-body-meta"> <a class="author-link" href="#">pongstr</a> <span>authored 10 hours ago</span> </p> <p class="group-list-body-desc" data-expand="true"> Duis ex arcu, pulvinar at volutpat nec, posuere ut dui. Vivamus ullamcorper </p> </div> <div class="group-list-links"> <div class="group-list-btn-group"> <a href="#"> <i class="octicon octicon-clippy"></i> </a> <a href="#"> <i class="sha-icon octicon octicon-diff"></i> </a> </div> <div class="group-list-btn-group"> <a href="#"> <i class="octicon octicon-code"></i> </a> </div> </div> </li> <li class="group-list-item"> <div class="group-list-avatar"> <img src="https://avatars0.githubusercontent.com/u/1888261?v=2&s=120" alt=""> </div> <div class="group-list-body"> <h5 class="group-list-body-title"> <a class="message-link" href="#">Nam sit amet</a> <a class="issue-link" href="#">#66</a> <a class="message-link" href="#">consectetur arcu, vitae</a> <span class="text-expander inline"><a href="#" data-toggle="expander">…</a></span> </h5> <p class="group-list-body-meta"> <a class="author-link" href="#">pongstr</a> <span>authored 10 hours ago</span> </p> <p class="group-list-body-desc" data-expand> Duis ex arcu, pulvinar at volutpat nec, posuere ut dui. Vivamus ullamcorper </p> </div> <div class="group-list-links"> <div class="group-list-btn-group"> <a href="#"> <i class="octicon octicon-clippy"></i> </a> <a href="#"> <i class="sha-icon octicon octicon-diff"></i> </a> </div> <div class="group-list-btn-group"> <a href="#"> <i class="octicon octicon-code"></i> </a> </div> </div> </li> </ol> <div class="group-list-title"> <span class="octicon octicon-git-commit"></span> <span>Commits on Sep 09, 2014</span> </div> <ol class="group-list"> <li class="group-list-item"> <div class="group-list-avatar"> <img src="https://avatars1.githubusercontent.com/u/962502?v=2&s=72" alt=""> </div> <div class="group-list-body"> <h5 class="group-list-body-title"> <a class="message-link" href="#">Vivamus convallis ligula sem, vitae accumsan lacus</a> <a class="issue-link" href="#">#64</a> <span class="text-expander inline"><a href="#" data-toggle="expander">…</a></span> </h5> <p class="group-list-body-meta"> <a class="author-link" href="#">pongstr</a> <span>authored 10 hours ago</span> </p> <p class="group-list-body-desc" data-expand="true"> Duis ex arcu, pulvinar at volutpat nec, posuere ut dui. Vivamus ullamcorper </p> </div> <div class="group-list-links"> <div class="group-list-btn-group"> <a href="#"> <i class="octicon octicon-clippy"></i> </a> <a href="#"> <i class="sha-icon octicon octicon-diff"></i> </a> </div> <div class="group-list-btn-group"> <a href="#"> <i class="octicon octicon-code"></i> </a> </div> </div> </li> <li class="group-list-item"> <div class="group-list-avatar"> <img src="https://avatars0.githubusercontent.com/u/1888261?v=2&s=120" alt=""> </div> <div class="group-list-body"> <h5 class="group-list-body-title"> <a class="message-link" href="#">Nam sit amet</a> <a class="issue-link" href="#">#66</a> <a class="message-link" href="#">consectetur arcu, vitae</a> <span class="text-expander inline"><a href="#" data-toggle="expander">…</a></span> </h5> <p class="group-list-body-meta"> <a class="author-link" href="#">pongstr</a> <span>authored 10 hours ago</span> </p> <p class="group-list-body-desc" data-expand> Duis ex arcu, pulvinar at volutpat nec, posuere ut dui. Vivamus ullamcorper </p> </div> <div class="group-list-links"> <div class="group-list-btn-group"> <a href="#"> <i class="octicon octicon-clippy"></i> </a> <a href="#"> <i class="sha-icon octicon octicon-diff"></i> </a> </div> <div class="group-list-btn-group"> <a href="#"> <i class="octicon octicon-code"></i> </a> </div> </div> </li> <li class="group-list-item"> <div class="group-list-avatar"> <img src="https://avatars1.githubusercontent.com/u/962502?v=2&s=72" alt=""> </div> <div class="group-list-body"> <h5 class="group-list-body-title"> <a class="message-link" href="#">Vivamus convallis ligula sem, vitae accumsan lacus</a> <a class="issue-link" href="#">#64</a> <span class="text-expander inline"><a href="#" data-toggle="expander">…</a></span> </h5> <p class="group-list-body-meta"> <a class="author-link" href="#">pongstr</a> <span>authored 10 hours ago</span> </p> <p class="group-list-body-desc" data-expand="true"> Duis ex arcu, pulvinar at volutpat nec, posuere ut dui. Vivamus ullamcorper </p> </div> <div class="group-list-links"> <div class="group-list-btn-group"> <a href="#"> <i class="octicon octicon-clippy"></i> </a> <a href="#"> <i class="sha-icon octicon octicon-diff"></i> </a> </div> <div class="group-list-btn-group"> <a href="#"> <i class="octicon octicon-code"></i> </a> </div> </div> </li> <li class="group-list-item"> <div class="group-list-avatar"> <img src="https://avatars0.githubusercontent.com/u/1888261?v=2&s=120" alt=""> </div> <div class="group-list-body"> <h5 class="group-list-body-title"> <a class="message-link" href="#">Nam sit amet</a> <a class="issue-link" href="#">#66</a> <a class="message-link" href="#">consectetur arcu, vitae</a> <span class="text-expander inline"><a href="#" data-toggle="expander">…</a></span> </h5> <p class="group-list-body-meta"> <a class="author-link" href="#">pongstr</a> <span>authored 10 hours ago</span> </p> <p class="group-list-body-desc" data-expand> Duis ex arcu, pulvinar at volutpat nec, posuere ut dui. Vivamus ullamcorper </p> </div> <div class="group-list-links"> <div class="group-list-btn-group"> <a href="#"> <i class="octicon octicon-clippy"></i> </a> <a href="#"> <i class="sha-icon octicon octicon-diff"></i> </a> </div> <div class="group-list-btn-group"> <a href="#"> <i class="octicon octicon-code"></i> </a> </div> </div> </li> </ol> </div> <div class="text-center"> <div class="group-list-btn-group group-list-btn-group-large"> <a href="#"> <span class="octicon octicon-arrow-left"></span> </a> <a href="#"> <span class="octicon octicon-arrow-right"></span> </a> </div> </div> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Github Commit List - Script Codes CSS Codes
*,
*:before,
*:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
html,
body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.4; color: #999;
}
a,
a:visited,
a:focus { color: #4183c4; text-decoration: none;
}
a:hover { color: #4b89c7;
}
.text-left { text-align: left;
}
.text-right { text-align: right;
}
.text-center { text-align: center;
}
.text-justify { text-align: justify;
}
.main-container { padding: 0;
}
.main-container:before, .main-container:after { display: table; content: " ";
}
.main-container:after { clear: both;
}
@media (min-width: 992px), (max-width: 1200px) { .main-container { margin-left: 15px; margin-right: 15px; padding: 10px; }
}
@media (min-width: 1000px), (min-width: 1200px) { .main-container { width: 980px; margin-left: auto; margin-right: auto; }
}
.group-list-container { position: relative; margin-left: -15px; margin-right: -15px; margin-bottom: 20px; padding-left: 30px;
}
.group-list-container:before, .group-list-container:after { display: table; content: " ";
}
.group-list-container:after { clear: both;
}
.group-list-container:before { position: absolute; top: 0; left: 6px; z-index: -1; content: " "; display: block; width: 2px; height: 98.5%; background-color: rgba(153, 153, 153, 0.15);
}
@media (max-width: 480px) { .group-list-container { padding-left: 15px; } .group-list-container:before { left: 2px; }
}
.group-list-title { display: block; margin-top: 15px; margin-left: -30px; margin-bottom: 0; font-size: 13px; color: #666; line-height: 1; background-color: #fff;
}
.group-list-title:before, .group-list-title:after { display: table; content: " ";
}
.group-list-title:after { clear: both;
}
.group-list-title .octicon { color: #cccccc;
}
@media (max-width: 480px) { .group-list-title { margin-left: -19px; }
}
.group-list { position: relative; width: 100%; padding: 0;
}
.group-list-item { position: relative; display: table; table-layout: fixed; width: 100%; margin-top: -1px; border: 1px solid #ebebeb;
}
.group-list-item:hover { z-index: 2; background-color: rgba(65, 131, 196, 0.05);
}
.group-list-avatar,
.group-list-body,
.group-list-links { display: table-cell; vertical-align: top; padding: 10px 10px 5px;
}
@media (max-width: 480px) { .group-list-avatar, .group-list-body, .group-list-links { display: block; float: left; padding: 5px; }
}
@media (max-width: 480px) { .group-list-avatar { width: 18%; }
}
@media (min-width: 768px) { .group-list-avatar { width: 6%; }
}
@media (min-width: 992px) { .group-list-avatar { width: 5%; }
}
@media (min-width: 1200px) { .group-list-avatar { width: 5%; }
}
.group-list-avatar img { width: 36px; height: 36px;
}
.group-list-body { width: 60%;
}
.group-list-body .group-list-body-title,
.group-list-body .group-list-body-meta,
.group-list-body .group-list-body-desc { margin-top: 0;
}
@media (max-width: 480px) { .group-list-body { width: 82%; }
}
.group-list-body .group-list-body-title { margin-bottom: 0; padding: 0; font-size: 16px; font-weight: 500; color: #666;
}
.group-list-body .group-list-body-title a:hover { text-decoration: underline;
}
@media (max-width: 480px) { .group-list-body .group-list-body-title { font-size: 13px; line-height: 1; }
}
.group-list-body .group-list-body-title .message-link { color: #595959;
}
.group-list-body .group-list-body-title .text-expander { position: relative; top: -1px; display: inline-block; margin-left: 5px; line-height: 0;
}
.group-list-body .group-list-body-title .text-expander a { display: inline-block; height: 12px; padding: 0 5px; font-size: 12px; font-weight: bold; line-height: 6px; color: #555; text-decoration: none; vertical-align: middle; background: #ddd; border-radius: 1px;
}
.group-list-body .group-list-body-title .text-expander a:hover { background-color: #b3b3b3;
}
.group-list-body .group-list-body-meta { margin-bottom: 5px; font-size: 12px;
}
.group-list-body .group-list-body-meta a:hover { text-decoration: underline;
}
.group-list-body .group-list-body-meta .author-link { color: #737373;
}
.group-list-body .group-list-body-desc { margin: 0; padding-left: 10px; font-size: 12px; border-left: 1px solid rgba(153, 153, 153, 0.55);
}
[data-expand] { display: none;
}
[data-expand].active { display: block;
}
.group-list-links { width: 30%; text-align: right; vertical-align: middle;
}
.group-list-btn-group { display: inline-block; margin-left: 5px; margin-right: 5px;
}
.group-list-btn-group a, .group-list-btn-group button { position: relative; display: inline-block; height: 29px; margin-left: -3px; margin-right: -2px; padding: 5px 8px; font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; line-height: 1.4; text-align: center; vertical-align: middle; border: 1px solid #d9d9d9; background-color: #fff;
}
.group-list-btn-group a:hover, .group-list-btn-group button:hover { z-index: 2; color: #fff; border-color: #3876b4; background-color: #4183c4;
}
.group-list-btn-group a:first-child, .group-list-btn-group button:first-child { border-top-left-radius: 3px; border-bottom-left-radius: 3px;
}
.group-list-btn-group a:last-child, .group-list-btn-group button:last-child { border-top-right-radius: 3px; border-bottom-right-radius: 3px;
}
.group-list-btn-group a span, .group-list-btn-group button span { font-size: 12px; font-weight: bold;
}
.group-list-btn-group.group-list-btn-group-large a, .group-list-btn-group.group-list-btn-group-large button { height: 40px; padding: 10px 16px;
}
.group-list-btn-group.group-list-btn-group-large a span, .group-list-btn-group.group-list-btn-group-large button span { font-size: 18px;
}
@media (max-width: 480px) { .group-list-btn-group { display: none; }
}
Github Commit List - Script Codes JS Codes
+function ($) { 'use strict'; function Expander (element, options) { var toggle = element ? element: '[data-toggle=expander]', option = options ? options: null; $(toggle).on('click', function (e) { $(this).parents('li') .find('[data-expand]') .toggleClass('active'); e.preventDefault(); }); }; $(document).on('load', Expander());
}(window.jQuery);
| Developer | Pongstr |
| Username | pongstr |
| Uploaded | September 21, 2022 |
| Rating | 3 |
| Size | 5,728 Kb |
| Views | 26,312 |
Do you need developer help for Github Commit List?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Pongstr (pongstr) Script Codes
| Name | Size |
| Flexbox | 2,368 Kb |
| Bootstrap Blank State | 4,771 Kb |
| A Pen by Pongstr | 4,239 Kb |
| User List | 2,323 Kb |
| CSS3 Ribbons | 8,224 Kb |
| Off-Canvas | 5,427 Kb |
| A Pen by Pongstr | 2,207 Kb |
| Spinner | 1,880 Kb |
| Work in progress | 2,570 Kb |
| Email Form | 4,908 Kb |
Create amazing sales emails with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Simple Responsive Text | Fbrz | 2,282 Kb |
| Mostly Fluid | Mccreath | 3,308 Kb |
| Google Maps API Ground Overlay | Boycetrus | 2,961 Kb |
| Ball physics | Blackkbot | 3,874 Kb |
| Material design - button rainbow circle | Kunukn | 3,652 Kb |
| ASCII triangle image overlay | Mitchdot | 2,200 Kb |
| Css3 only dropdown menu | Riogrande | 2,519 Kb |
| Shop Talk logo made in CSS | Hugo | 19,368 Kb |
| A Pen by Paul Sullivan | Pwsm50 | 2,349 Kb |
| HTML5 Breakout | Jaysalvat | 4,873 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!