"extarasjas"
Bootstrap 3.0.0 Snippet by ahmedmoyasin

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--<link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">--> <meta name="mobile-web-app-capable" content="yes"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <!-- Icons --> <link rel="shortcut icon" sizes="196x196" href="/bootcards-demo-app/images/apple-touch-icon-144x144.png"> <link rel="shortcut icon" sizes="128x128" href="/bootcards-demo-app/images/apple-touch-icon-120x120.png"> <!-- For iPhone with high-resolution Retina display running iOS ≥ 7: --> <link rel="apple-touch-icon" sizes="120x120" href="/bootcards-demo-app/images/apple-touch-icon-120x120.png"> <!-- For iPad with high-resolution Retina display running iOS ≤ 6: --> <link rel="apple-touch-icon" sizes="144x144" href="/bootcards-demo-app/images/apple-touch-icon-144x144.png"> <!-- Splash Screen Images --> <!-- iOS 6 & 7 iPad (retina, portrait) --> <link href="/bootcards-demo-app/images/bootcards-splash-768x1004@2x.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <!-- iOS 6 & 7 iPad (retina, landscape) --> <link href="/bootcards-demo-app/images/bootcards-splash-1024x748@2x.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <!-- iOS 6 iPad (portrait) --> <link href="/bootcards-demo-app/images/bootcards-splash-1024x748.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image"> <!-- iOS 6 iPad (landscape) --> <link href="/bootcards-demo-app/images/bootcards-splash-768x1004.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image"> <!-- iOS 6 & 7 iPhone 5 --> <link href="/bootcards-demo-app/images/bootcards-splash-320x548@2x.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <!-- iOS 6 & 7 iPhone (retina) --> <link href="/bootcards-demo-app/images/bootcards-splash-320x460@2x.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <!-- iOS 6 iPhone --> <link href="/bootcards-demo-app/images/bootcards-splash-320x460.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image"> <title>Customers</title> <!-- 1.1.2 --> <!-- Load the required CSS libraries --> <!-- bootstrap --> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <!-- Bootcards CSS file (different for desktop, iOS and Android, included Bootstrap CSS) --> <link href="//cdnjs.cloudflare.com/ajax/libs/bootcards/1.1.2/css/bootcards-desktop.min.css" rel="stylesheet" type="text/css"> <link href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet"> <link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <script>var isDesktop = true;</script> <!-- Custom CSS for the demo app --> <link href="/bootcards-demo-app/css/bootcards-demo-app.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> --> <script src="/bower_components/jquery/dist/jquery.min.js"></script> </head> <body id="bootcards" cz-shortcut-listen="true"> <!-- fixed top navbar --> <div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <button type="button" class="btn btn-default btn-back navbar-left pull-left hidden" onclick="history.back()"> <i class="fa fa-lg fa-chevron-left"></i><span>Back</span> </button> <!-- menu button to show/ hide the off canvas slider --> <button type="button" class="btn btn-default btn-menu navbar-left pull-left offCanvasToggle" data-toggle="offcanvas" style="opacity: 1;"> <i class="fa fa-lg fa-bars"></i><span>Menu</span> </button> <a class="navbar-brand no-break-out" title="Customers" href="/">VendorAPP</a> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class=""> <a href="/dashboard" data-pjax="#main" data-title="Customers" <i="" class="fa fa-dashboard"> Dashboard </a> </li> <li class="active"> <a href="/companies" data-pjax="#main" data-title="Companies" <i="" class="fa fa-list-alt"> My Projects </a> </li> <li> <a href="/contacts" data-pjax="#main" data-title="Contacts" <i="" class="fa fa-users"> Hirings </a> </li> <li> <a href="/notes" data-pjax="#main" data-title="Notes" <i="" class="fa fa-envelope-o"> Messages </a> </li> <li> <a href="/settings" data-pjax="#main" data-title="Settings" <i="" class="fa fa-gears"> Settings </a> </li> <li> <a href="/sign_out" data-pjax="#main" data-title="Log_out" <i="" class="fa fa-power-off"> Log out </a> </li> </ul> </div> </div> </div> <!-- slide in menu (mobile only) --> <nav id="offCanvasMenu" class="navmenu offcanvas offcanvas-left"> <ul class="nav"> <li class=""> <a href="/dashboard" data-pjax="#main" data-title="Customers"> <i class="fa fa-lg fa-dashboard"></i> Dashboard </a> </li> <li class="active"> <a href="/companies" data-pjax="#main" data-title="Companies"> <i class="fa fa-lg fa-building-o"></i> Companies </a> </li> <li> <a href="/contacts" data-pjax="#main" data-title="Contacts"> <i class="fa fa-lg fa-users"></i> Contacts </a> </li> <li> <a href="/notes" data-pjax="#main" data-title="Notes"> <i class="fa fa-lg fa-clipboard"></i> Notes </a> </li> <li> <a href="/charts" data-pjax="#main" data-title="Charts"> <i class="fa fa-lg fa-bar-chart-o"></i> Charts </a> </li> <li> <a href="/settings" data-pjax="#main" data-title="Settings"> <i class="fa fa-lg fa-gears"></i> Settings </a> </li> </ul> <div style="margin-top:20px; padding-left: 20px; font-size: 12px; color: #777">v1.1.2</div> </nav> <div class="container bootcards-container" id="main"> <div class="row"> <div class="col-sm-6 bootcards-list" id="list" data-title="Companies"> <div class="panel panel-default"> <div class="panel-body"> <div class="search-form"> <div class="row"> <div class="col-xs-9"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search Projects..."> <i class="fa fa-search"></i> </div> </div> <div class="col-xs-3"> <a class="btn btn-primary btn-block" href="/companies/add" data-toggle="modal" data-target="#editModal"> <i class="fa fa-plus"></i> <span>Add new</span> </a> </div> </div> </div> </div> <div class="list-group"> <a class="list-group-item pjax active" href="/companies/o8v9urr7vchs"> <div class="row"> <div class="col-sm-1"> <span class="label label-warning">Open</span> </div> <div class="col-sm-8"> <h4 class="list-group-item-heading">Arabic - Meeting with clients from UAE</h4> <p class="list-group-item-text">Onsite - Starting 26.08.2017 - 09:00</p> <!--IF current_user is Vendor, show name of client (Organisation or Individual) that posted the project--> <p class="list-group-item-text">Client: ACME Africa ltd.</p> </div> <div class="col-sm-3"> <span class="label label-default">12:10 AM</span> <!--IF current_user is User, show name of user that posted the project--> <p class="list-group-item-text">John Masin</p> </div> </div> </a> <a class="list-group-item pjax" href="/companies/l483t0vx6vwg"> <div class="row"> <div class="col-sm-1"> <span class="label label-warning">Open</span> </div> <div class="col-sm-8"> <h4 class="list-group-item-heading">Spanish - Home visit (school parents)</h4> <p class="list-group-item-text">Onsite - Starting 23.08.2017 - 11:00</p> <p class="list-group-item-text">Client: Gasene Elementary Sch. </p> </div> <div class="col-sm-3"> <span class="label label-default">11:05 AM</span> <p class="list-group-item-text">John Masin</p> </div> </div> </a> <a class="list-group-item pjax" href="/companies/99kkk8tvfxts"> <div class="row"> <div class="col-sm-1"> <span class="label label-success">Closed</span> </div> <div class="col-sm-8"> <h4 class="list-group-item-heading">Polish - Lawyer prison visit</h4> <p class="list-group-item-text">Telephone - Starting 23.08.2017 - 11:00</p> <p class="list-group-item-text">Client: Nalna county office </p> </div> <div class="col-sm-3"> <span class="label label-default">July 10</span> <p class="list-group-item-text">Anette Ibda</p> </div> </div> </a> <a class="list-group-item pjax" href="/companies/9r6e6fl7ak8w"> <div class="row"> <div class="col-sm-1"> <span class="label label-default">{Status}</span> </div> <div class="col-sm-8"> <h4 class="list-group-item-heading">{Project Language} - {Project Title}</h4> <p class="list-group-item-text">{Project Type} - From {Start date} - {start time}</p> <p class="list-group-item-text">Client: {Company/individual name} - </p> </div> <div class="col-sm-3"> <span class="label label-default">{Created_at}</span> <p class="list-group-item-text">{Posted_by}</p> </div> </div> </a> </div> </div> </div> <div class="col-sm-6 bootcards-cards" id="listDetails"> <div id="companyCard"> <div class="btn-group btn-group-justified"> <a href="#" class="btn btn-default active">Project details</a> <a href="#" class="btn btn-default">Offers</a> <a href="#" class="btn btn-default">Messages</a> <a href="#" class="btn btn-default">Hirings</a> </div> <div class="panel panel-default"> <div class="panel-heading clearfix"> <h3 class="panel-title pull-left">Meeting with clients from UAE</h3> <div class="btn-group pull-right visible-xs"> <a class="btn btn-primary" href="/companies/o8v9urr7vchs/edit" data-toggle="modal" data-target="#editModal"> <i class="fa fa-pencil"></i> <span>Edit</span> </a> </div> <a class="btn btn-primary pull-right hidden-xs" href="/companies/o8v9urr7vchs/edit" data-toggle="modal" data-target="#editModal"> <i class="fa fa-pencil"></i> <span>Edit</span> </a> </div> <div class="list-group"> <div class="list-group-item"> <p class="list-group-item-text">Language</p> <h4 class="list-group-item-heading">Arabic</h4> </div> <div class="list-group-item"> <p class="list-group-item-text">Project description: Lorem Ipsum er rett og slett dummytekst fra og for trykkeindustrien. Lorem Ipsum har vært bransjens standard for dummytekst helt siden 1500-tallet, da en ukjent boktrykker stokket en mengde bokstaver for å lage et prøveeksemplar av en bok.</p> </div> <div class="list-group-item"> <p class="list-group-item-text">Project type</p> <h4 class="list-group-item-heading">Onsite interpreting</h4> </div> <div class="list-group-item"> <p class="list-group-item-text">Location</p> <h4 class="list-group-item-heading">Site street address #X-Y</h4> <p class="list-group-item-text">Location description: Standardbiten av Lorem Ipsum brukt siden 1500-tallet er gjengitt nedenfor for spesielt interesserte. Seksjon 1.10.32 og 1.10.33. </p> </div> <div class="list-group-item"> <p class="list-group-item-text">Who can apply for this project?</p> <div class="btn-group btn-toggle"> <button class="btn btn-sm btn-default">Public</button> <button class="btn btn-sm btn-primary active">Invited Only</button> </div> </div> </div> </div> </div> <!--list of activities--> <div> <div class="panel panel-default"> <div class="panel-heading clearfix"> <h3 class="panel-title pull-left">Sessions</h3> <div class="btn-group pull-right"> <a class="btn btn-primary" href="/companies/o8v9urr7vchs/notes/add" data-toggle="modal" data-target="#editModal"> <i class="fa fa-plus"></i> <span>Add new</span> </a> </div> </div> <div class="list-group"> <a class="list-group-item pjax" href="/companies/o8v9urr7vchs/notes/ucw9gtbjq7ls"> <p class="list-group-item-text">Mandag 07 August 2017 kl. 09:00 - 15:00</p> </a> <a class="list-group-item pjax" href="/companies/o8v9urr7vchs/notes/1rhen4xigta0w"> <p class="list-group-item-text">Tirsdag 08 August 2017 kl. 09:00 - 15:00</p> </a> <a class="list-group-item pjax" href="/companies/o8v9urr7vchs/notes/1rhen4xigta0z"> <p class="list-group-item-text">Onsdag 09 August 2017 kl. 09:00 - 15:00</p> </a> <a class="list-group-item pjax" href="/companies/o8v9urr7vchs/notes/1i9wzyz6po45c"> <p class="list-group-item-text">Torsdag 10 August 2017 kl. 09:00 - 15:00</p> </a> <a class="list-group-item pjax" href="/companies/o8v9urr7vchs/notes/1f30c639s1534"> <p class="list-group-item-text">Fredag 11 August 2017 kl. 09:00 - 15:00</p> </a> </div> </div> </div> <!--list of contacts--> <div> <div class="panel panel-default"> <div class="panel-heading clearfix"> <h3 class="panel-title pull-left">Invitees</h3> <div class="btn-group pull-right"> <a class="btn btn-primary" href="/companies/o8v9urr7vchs/contacts/add" data-toggle="modal" data-target="#editModal"> <i class="fa fa-plus"></i> <span>Invite more</span> </a> </div> </div> <div class="list-group"> <a class="list-group-item pjax" href="/contacts/kNQv7Urv7AzX"> <img src="https://cdn.pixabay.com/photo/2013/07/13/10/07/man-156584__480.png" class="img-rounded pull-left"> <h4 class="list-group-item-heading">Booth, Mark</h4> <p class="list-group-item-text">Level # - Qualification level name</p> </a> <a class="list-group-item pjax" href="/contacts/Zum5QaksnT38"> <img src="https://cdn.pixabay.com/photo/2014/04/03/10/32/businessman-310819__480.png" class="img-rounded pull-left"> <h4 class="list-group-item-heading">Sherman, Wayne</h4> <p class="list-group-item-text">Level # - Qualification level name</p> </a> <a class="list-group-item pjax" href="/contacts/ftBZ9u64tAgq"> <img src="https://cdn.pixabay.com/photo/2014/04/03/10/32/user-310807__480.png" class="img-rounded pull-left"> <h4 class="list-group-item-heading">Shin, Danny</h4> <p class="list-group-item-text">Level # - Qualification level name</p> </a> </div> </div> </div> </div> </div> </div> <!-- fixed tabbed footer --> <div class="navbar navbar-default navbar-fixed-bottom"> <div class="container"> <div class="bootcards-desktop-footer clearfix"> <p class="pull-left">Bootcards v1.1.2</p> </div> <div class="btn-group"> <a href="/dashboard" class="btn btn-default" data-pjax="#main" data-title="Customers"> <i class="fa fa-2x fa-dashboard"></i> Dashboard </a> <a href="/companies" class="btn btn-default active" data-pjax="#main" data-title="Companies"> <i class="fa fa-2x fa-building-o"></i> Companies </a> <a href="/contacts" class="btn btn-default" data-pjax="#main" data-title="Contacts"> <i class="fa fa-2x fa-users"></i> Contacts </a> <a href="/notes" class="btn btn-default" data-pjax="#main" data-title="Notes"> <i class="fa fa-2x fa-clipboard"></i> Notes </a> <a href="/charts" class="btn btn-default" data-pjax="#main" data-title="Charts"> <i class="fa fa-2x fa-bar-chart-o"></i> Charts </a> <a href="/settings" class="btn btn-default" data-pjax="#main" data-title="Settings"> <i class="fa fa-2x fa-gears"></i> Settings </a> </div> </div> </div> <!-- Load the required JavaScript libraries --> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.pjax/1.9.2/jquery.pjax.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.3/fastclick.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script> <!-- Bootcards JS file --> <script src="//cdnjs.cloudflare.com/ajax/libs/bootcards/1.1.2/js/bootcards.min.js"></script> <script src="/bootcards-demo-app/js/bootcards-demo-app.js"></script> <!--modals--> <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModal" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"></div> </div> </div> <div class="modal fade" id="docsModal" tabindex="-1" role="dialog" aria-labelledby="docsModal" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"></div> </div> </div> <script type="text/javascript"> //highlight first list group option (if non active yet) if ( $('.list-group a.active').length === 0 ) { $('.list-group a').first().addClass('active'); } bootcards.init( { offCanvasHideOnMainClick : true, offCanvasBackdrop : true, enableTabletPortraitMode : true, disableRubberBanding : true, disableBreakoutSelector : 'a.no-break-out' }); </script> </body></html>

Related: See More

Light Bootstrap Dashboard Angular

Questions / Comments: