Bootstrap snippet: Project Detail

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: project



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container-fluid primary-content"> <!-- PRIMARY CONTENT HEADING --> <div class="primary-content-heading clearfix"> <h2>PROJECT TITLE</h2> <hr style="border:1px solid #fff"> <div class="sticky-content pull-right"> <div class="btn-group btn-dropdown"> <button type="button" class="btn btn-default btn-sm btn-favorites" data-toggle="dropdown"><i class="fa fa-android-star"></i> Favorites</button> <ul class="dropdown-menu dropdown-menu-right list-inline"> <li><a href="#"><i class="fa fa-pie-graph"></i> <span>Statistics</span></a></li> <li><a href="#"><i class="fa fa-email"></i> <span>Inbox</span></a></li> <li><a href="#"><i class="fa fa-chatboxes"></i> <span>Chat</span></a></li> <li><a href="#"><i class="fa fa-help-circled"></i> <span>Help</span></a></li> <li><a href="#"><i class="fa fa-gear-a"></i> <span>Settings</span></a></li> <li><a href="#"><i class="fa fa-help-buoy"></i> <span>Support</span></a></li> </ul> </div> <button type="button" class="btn btn-default btn-sm btn-quick-task" data-toggle="modal" data-target="#quick-task-modal"><i class="fa fa-edit"></i> Quick Task</button> <br> <br> </div> <!-- quick task modal --> <div class="modal fade" id="quick-task-modal" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">Quick Task</h4> </div> <div class="modal-body"> <form class="form-horizontal" role="form"> <div class="form-group"> <label for="task-title" class="control-label sr-only">Title</label> <div class="col-sm-12"> <input type="text" class="form-control" id="task-title" placeholder="Title"> </div> </div> <div class="form-group"> <label class="control-label sr-only">Description</label> <div class="col-sm-12"> <textarea class="form-control" name="task-description" rows="5" cols="30" placeholder="Description"></textarea> </div> </div> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save Task</button> </form> </div> </div> </div> </div> <!-- end quick task modal --> </div> <!-- END PRIMARY CONTENT HEADING --> <div class="row"> <div class="col-md-8"> <div class="project-section general-info"> <h3>General Info</h3> <button type="button" class="btn btn-sm btn-default pull-right"><i class="fa fa-compose"></i> Edit Project</button> <p>Rapidiously monetize orthogonal platforms with 24/7 convergence. Uniquely create error-free alignments for customized users. Credibly facilitate just in time benefits rather than user friendly imperatives. Continually promote extensible process improvements whereas virtual. Enthusiastically pontificate proactive infrastructures vis-a-vis value-added products. Enthusiastically coordinate pandemic platforms rather than team building best practices. Globally facilitate plug-and-play materials and interoperable interfaces. Enthusiastically.</p> <div class="row"> <div class="col-sm-9"> <dl class="dl-horizontal"> <dt>Date:</dt> <dd>20-09-2014 - 20-12-2014</dd> <dt>Duration:</dt> <dd>90 days <span class="text-muted"><small>(50 days remaining)</small></span></dd> <dt>Client:</dt> <dd><a href="#">ZenArt</a></dd> <dt>Priority:</dt> <dd><span class="label label-danger">HIGH</span></dd> <dt>Status:</dt> <dd><span class="label label-success">ACTIVE</span></dd> <dt>Team:</dt> <dd> <ul class="list-inline team-list"> <li> <img src="http://bootdey.com/img/Content/avatar/avatar1.png" class="img-circle" alt="Avatar"> <p><a href="#"><strong>Antonius</strong></a></p> <span class="text-muted">Project Leader</span> </li> <li> <img src="http://bootdey.com/img/Content/avatar/avatar2.png" class="img-circle" alt="Avatar"> <p><a href="#"><strong>Michael</strong></a></p> <span class="text-muted">Art Director</span> </li> <li> <img src="http://bootdey.com/img/Content/avatar/avatar3.png" class="img-circle" alt="Avatar"> <p><a href="#"><strong>Stella Ray</strong></a></p> <span class="text-muted">Account Executive</span> </li> <li> <img src="http://bootdey.com/img/Content/avatar/avatar4.png" class="img-circle" alt="Avatar"> <p><a href="#"><strong>Jane Doe</strong></a></p> <span class="text-muted">Marketing</span> </li> <li> <img src="http://bootdey.com/img/Content/avatar/avatar5.png" class="img-circle" alt="Avatar"> <p><a href="#"><strong>Jason</strong></a></p> <span class="text-muted">Operational</span> </li> <li class="team-add"> <i class="fa fa-person"></i> <button type="button" class="btn btn-sm btn-default"><i class="fa fa-plus-circled"></i> Add</button> </li> </ul> </dd> </dl> </div> <div class="col-sm-3"> <div class="status-chart project-progress bottom-30px"> <div class="pie-chart" data-percent="60"><span class="percent">60%</span><canvas height="100" width="100"></canvas></div> <span class="chart-title">OVERALL PROGRESS</span> </div> </div> </div> </div> <div class="project-section activity"> <h3>Activity</h3> <ul class="list-unstyled project-activity-list"> <li> <div class="media activity-item"> <i class="fa fa-checkmark-circled pull-left text-success"></i> <div class="media-body"> <p class="activity-title">All project tasks are on schedule</p> <small class="text-muted">2m ago</small> </div> </div> </li> <li> <div class="media activity-item"> <a href="#" class="pull-left"> <img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="Avatar" class="media-object avatar"> </a> <div class="media-body"> <p class="activity-title"><a href="#">Michael</a> has achieved 80% of his completed tasks</p> <small class="text-muted">36m ago</small> </div> <div class="btn-group pull-right activity-actions"> <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-ios-arrow-down"></i> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu dropdown-menu-right" role="menu"> <li><a href="#">Message Michael</a></li> <li><a href="#">Assign Task</a></li> </ul> </div> </div> </li> <li> <div class="media activity-item"> <i class="fa fa-unlocked pull-left text-danger"></i> <div class="media-body"> <p class="activity-title">You have unsecure file permission on this project. Go to <a href="">File Manager</a> to fix it</p> <small class="text-muted">1h ago</small> </div> </div> </li> <li> <div class="media activity-item"> <a href="#" class="pull-left"> <img src="http://bootdey.com/img/Content/avatar/avatar2.png" alt="Avatar" class="media-object avatar"> </a> <div class="media-body"> <p class="activity-title"><a href="#">Jason</a> has been added to the team</p> <small class="text-muted">2h ago</small> </div> <div class="btn-group pull-right activity-actions"> <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-ios-arrow-down"></i> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu dropdown-menu-right" role="menu"> <li><a href="#">Message Jason</a></li> <li><a href="#">Assign Task</a></li> </ul> </div> </div> </li> <li> <div class="media activity-item"> <i class="fa fa-file-word-o pull-left"></i> <div class="media-body"> <p class="activity-title">New file <a href="#">Project Proposalv2.docx</a> has been uploaded by <a href="#">Antonius</a></p> <small class="text-muted">3h ago</small> </div> </div> </li> <li> <div class="media activity-item"> <i class="fa fa-printer pull-left text-warning"></i> <div class="media-body"> <p class="activity-title">You have <a href="#">pending documents</a> on the printer server</p> <small class="text-muted">23h ago</small> </div> </div> </li> <li> <div class="media activity-item"> <i class="fa fa-flag pull-left text-success"></i> <div class="media-body"> <p class="activity-title">Project: <a href="#">Phase 1</a> has been flagged as completed by <a href="#">Antonius</a></p> <small class="text-muted">Yesterday</small> </div> </div> </li> <li> <div class="media activity-item"> <a href="#" class="pull-left"> <img src="http://bootdey.com/img/Content/avatar/avatar3.png" alt="Avatar" class="media-object avatar"> </a> <div class="media-body"> <p class="activity-title"><a href="#">Jane Doe</a> has updated file <a href="#">Marketing Campaign.docx</a></p> <small class="text-muted">Yesterday</small> <div class="activity-attachment"> <div class="well well-sm"> <strong>Revision Note:</strong> <p>Professionally evolve corporate services without ethical leadership. Proactively re-engineer client-focused infrastructures before alternative potentialities. Competently predominate just in time e-tailers for leveraged solutions.</p> </div> </div> </div> <div class="btn-group pull-right activity-actions"> <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-ios-arrow-down"></i> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu dropdown-menu-right" role="menu"> <li><a href="#">Message Jane Doe</a></li> <li><a href="#">Assign Task</a></li> </ul> </div> </div> </li> </ul> <button type="button" class="btn btn-default center-block"><i class="fa fa-ios-refresh"></i> Load more</button> </div> </div> <div class="col-md-4"> <!-- MY TODO LIST --> <div class="widget"> <div class="widget-header clearfix"> <h3><i class="fa fa-calendar"></i> <span>MY TODO LIST</span></h3> <div class="btn-group widget-header-toolbar"> <a href="#" title="Expand/Collapse" class="btn btn-link btn-toggle-expand"><i class="fa fa-ios-arrow-up"></i></a> <a href="#" title="Remove" class="btn btn-link btn-remove"><i class="fa fa-ios-close-empty"></i></a> </div> </div> <div class="widget-content"> <ul class="list-unstyled simple-todo-list"> <li> <label class="fancy-checkbox"> <input type="checkbox" checked="checked"> <span class="todo-text">Upload new revision</span> </label> </li> <li> <label class="fancy-checkbox"> <input type="checkbox"> <span class="todo-text">Responsive test</span> </label> </li> <li> <label class="fancy-checkbox"> <input type="checkbox" checked="checked"> <span class="todo-text">Cross-browser check</span> </label> </li> <li> <label class="fancy-checkbox"> <input type="checkbox"> <span class="todo-text">Social media research</span> </label> </li> <li> <label class="fancy-checkbox"> <input type="checkbox"> <span class="todo-text">Conduct A/B test</span> </label> </li> </ul> </div> </div> <!-- END MY TODO LIST --> <!-- RECENT FILES --> <div class="widget"> <div class="widget-header clearfix"> <h3><i class="fa fa-document"></i> <span>RECENT FILES</span></h3> <div class="btn-group widget-header-toolbar"> <a href="#" title="Expand/Collapse" class="btn btn-link btn-toggle-expand"><i class="fa fa-ios-arrow-up"></i></a> <a href="#" title="Remove" class="btn btn-link btn-remove"><i class="fa fa-ios-close-empty"></i></a> </div> </div> <div class="widget-content"> <ul class="fa-ul recent-file-list bottom-30px"> <li><i class="fa-li fa fa-file-pdf-o"></i><a href="#">Project Requirements.pdf</a></li> <li><i class="fa-li fa fa-file-word-o"></i><a href="#">[DRAFT] System Specifications.docx</a></li> <li><i class="fa-li fa fa-file-picture-o"></i><a href="#">Marketing Content-v2.jpg</a></li> <li><i class="fa-li fa fa-file-zip-o"></i><a href="#">All-files-backup.zip</a></li> </ul> <button type="button" class="btn btn-sm btn-primary"><i class="fa fa-upload"></i> Upload</button> <a href="#" class="btn btn-sm btn-default"><i class="fa fa-folder"></i> See all files</a> </div> </div> <!-- END RECENT FILES --> </div> </div> </div>
body { background-image: url('http://demo.thedevelovers.com/dashboard/queenadmin-1.2/assets/img/gray_jean.png?1353438653'); background-repeat: repeat; min-height: 1585px; } /*------------------------------------------------*/ /* Page: Project details /*------------------------------------------------*/ .project-section { margin-bottom: 30px; } .project-section h3 { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; margin-top: 0; } .project-section.activity h3 { margin-bottom: 0; } .project-section dl { margin-top: 20px; margin-bottom: 0; } .project-section dl dd { margin-bottom: 10px; } @media screen and (min-width: 768px) { .project-section dl.dl-horizontal dt { width: 95px; margin-bottom: 10px; } .project-section dl.dl-horizontal dd { margin-left: 105px; margin-bottom: 0; } } .project-section ul.team-list { margin-top: 10px; } .project-section ul.team-list > li { text-align: center; margin-bottom: 15px; padding: 0 10px; } .project-section ul.team-list > li img { width: 40px; margin-bottom: 8px; } .project-section ul.team-list > li p { margin-bottom: 0; line-height: 1; } .project-section ul.team-list > li span { font-size: 10px; } .project-section ul.team-list > li.team-add > i { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; display: block; margin: 0 auto; margin-bottom: 17px; width: 40px; height: 40px; font-size: 28px; background-color: #ccc; color: inherit; } .project-section ul.team-list > li.team-add .btn { position: relative; top: -7px; } ul.project-activity-list > li { border-top: 1px dashed #CCC; } ul.project-activity-list > li:first-child { border-top: none; } ul.project-activity-list > li .activity-item .avatar, ul.project-activity-list > li .activity-item > i { width: 24px; } ul.project-activity-list > li .activity-item > i { font-size: 24px; } .project-progress { margin-top: 20px; } .project-progress .pie-chart { width: 100px; } .project-progress .pie-chart .percent { line-height: 100px; } .project-progress .percent, .project-progress .chart-title { color: inherit; } /* widgets */ .widget { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; border-width: 1px; border-style: solid; margin-bottom: 20px; background-color: #fff; border-color: #d0d0d0; } .widget .widget-header h3, .widget.widget-no-header h3 { margin-top: 0; font-size: 14px; color: #6a6a6a; } .widget.widget-transparent { border: none; background: transparent; } .widget .widget-header { padding: 0 10px; border-bottom: 1px solid #fff; background-color: #e9e9e9; } .widget .widget-header h3 { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; margin-bottom: 0; line-height: 40px; float: left; } @media screen and (max-width: 480px) { .widget .widget-header h3 { display: block; float: none; } } .widget .widget-header h3 i { width: 18px; padding: 10px 0; font-size: 16px; color: #6A6A6A; } .widget .widget-header .btn-group > a, .widget .widget-header .btn-group .dropdown-toggle .icon { color: #838383; } .widget .widget-header .btn-group > a:hover, .widget .widget-header .btn-group > a:focus, .widget .widget-header .btn-group .dropdown-toggle .icon:hover, .widget .widget-header .btn-group .dropdown-toggle .icon:focus { color: #505050; } .widget .widget-header .widget-header-toolbar { float: right; width: auto; margin-left: 15px; } @media screen and (max-width: 480px) { .widget .widget-header .widget-header-toolbar { display: block; position: initial; } } .widget .widget-header .widget-header-toolbar.btn-group { top: 5px; } @media screen and (max-width: 480px) { .widget .widget-header .widget-header-toolbar.btn-group > .btn { top: -5px; } } .widget .widget-header .widget-header-toolbar .label { position: relative; top: 11px; padding: 5px; font-size: 85%; } @media screen and (max-width: 480px) { .widget .widget-header .widget-header-toolbar .label { top: 0; } } .widget .widget-header .widget-header-toolbar .label i { font-size: 14px; } .widget .widget-header .widget-header-toolbar .btn-xs { top: 5px; } .widget .widget-header .widget-header-toolbar .btn-link { padding: 0 0 0 15px; } .widget .widget-header .widget-header-toolbar .btn-link i { font-size: 28px; line-height: 1; } .widget .widget-header .widget-header-toolbar .btn-link:first-child { padding-left: 0; } .widget .widget-header .widget-header-toolbar .progress { width: 150px; position: relative; top: 19px; } @media screen and (max-width: 480px) { .widget .widget-header .widget-header-toolbar .progress { top: 0; } } .widget .widget-header .widget-header-toolbar .progress .progress-bar { font-size: 10px; line-height: 1.5; } .widget .widget-header .nav-tabs { border-bottom: none; } .widget .widget-header .nav-tabs > li > a { height: 41px; } .widget .widget-header .nav-tabs > li > a, .widget .widget-header .nav-tabs > li > a:hover, .widget .widget-header .nav-tabs > li > a:focus { border-top: none; border-bottom: none; } .widget .widget-header .nav-justified > li > a { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; } .widget .widget-header .nav-justified > li:first-child > a { -moz-border-radius-topleft: 2px; -webkit-border-top-left-radius: 2px; border-top-left-radius: 2px; } .widget .widget-header .nav-justified > li:last-child > a { -moz-border-radius-topright: 2px; -webkit-border-top-right-radius: 2px; border-top-right-radius: 2px; margin-right: -1px; } .widget .widget-content { padding: 20px; } .widget .widget-footer { padding: 7px 10px; background-color: #e9e9e9; } .widget .widget-footer .progress { margin-bottom: 0; } .widget-header-toolbar .pagination-sm { margin-bottom: 0; margin-top: 5px; } .widget-header-toolbar .onoffswitch > label:first-child { margin-bottom: 0; top: 3px; } .widget-header-toolbar .fancy-checkbox { margin-bottom: 0; position: relative; top: 4px; } .widget-header-toolbar .fancy-checkbox input[type="checkbox"] + span { margin-right: 0; } .widget-header-toolbar .badge { margin-top: 10px; } @media screen and (max-width: 480px) { .widget-header-toolbar .badge { margin-top: 0; } }
Dey-Dey

Project Detail

Dey-Dey
  Jun 20th, 10:54
1.5K Views