"card"
Bootstrap 3.0.0 Snippet by evarevirus

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 ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/garymama/pen/GZBrLV?depth=everything&order=popularity&page=51&q=editable&show_forks=false" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"> <link href="https://file.myfontastic.com/8a7gfaEYsKjYuAsgQzFpSD/icons.css" rel="stylesheet"> <style class="cp-pen-styles">* { font-family: 'open sans'; font-size: 14px; } body { background: #f1f3f6; } .fa { display: block; } .container { margin: 100px auto; width: 1160px; } .edit-input, .edit-textarea { border: none; box-sizing: content-box; font-size: 14px; margin: 0 30px; position: relative; resize: none; width: calc(100% - 200px); } .edit-input:focus, .edit-textarea:focus { outline: none; border-bottom: solid 2px #DFE0E2; } .placeholder .edit-input, .placeholder .edit-textarea { color: #A4A5A8; } .placeholder { color: #A4A5A8; } .edit-textarea { margin: 10px 30px; max-height: 100px; min-height: 50px; width: calc(100% - 60px); } .list-container, .board { float: left; margin: 0 50px; width: 480px; } .list-item { background: #ffffff; border-radius: 4px; box-shadow: 0px 0px 5px 1px #ccc; cursor: pointer; display: inline-block; margin-bottom: 30px; max-height: 70px; overflow: hidden; text-overflow: hidden; transition: max-height 0.2s linear; width: 100%; } .list-item-title { color: #ffffff; background-color: #48c1ff; border-radius: 4px 0 0 4px; box-shadow: 0px 0px 5px 1px #ccc; float: left; height: 70px; line-height: 70px; overflow: hidden; position: absolute; text-align: center; text-transform: uppercase; transition: all 0.2s linear, width 0.1s linear 0.1s, margin 0.1s linear 0.1s; width: 100px; } .list-item-title-text { opacity: 1; transition: opacity 0.3s linear; } .list-item-title-icon { opacity: 0; font-size: 40px; width: 100px; position: absolute; transition: all 0.3s linear, width 0.1s linear 0.1s; } .list-item-content-name { font-weight: bold; line-height: 70px; margin-left: 130px; padding-top: 0; transition: padding-top 0.2s linear, margin-left 0.2s linear; } .list-item-content-text { position: relative; margin-bottom: 2px; } .list-item-content-text:hover:after { color: #A4A5A8; content: "\e022"; font-family: "gravity-glyphicons"; height: 10px; margin-left: calc(100% - 35px); margin-top: -20px; position: absolute; width: 10px; z-index: 1; } .list-item-content-text.textarea:hover:after { content: ''; } .list-item.active { max-height: 400px; transition: max-height 0.2s linear 0.1s; } .list-item.active .edit-input { width: calc(100% - 60px); } .list-item.active .list-item-title { border-radius: 50%; height: 50px; margin-top: -25px; margin-left: 20px; position: absolute; transition: all 0.2s linear 0.1s, width 0.1s linear, margin 0.1s linear; width: 50px; } .list-item.active .list-item-title-text { font-size: 10px; line-height: 50px; opacity: 0; } .list-item.active .list-item-title-icon { font-size: 25px; opacity: 1; line-height: 50px; width: 51px; } .list-item.active .list-item-content-name { margin-left: 30px; padding-top: 10px; transition: margin-left 0.2s linear, width 0.1s linear; } .board { background-color: #ffffff; border-radius: 4px; box-shadow: 0px 0px 5px 1px #ccc; height: calc(100vh - 200px); min-height: 400px; max-height: 780px; padding: 10px 0; overflow: auto; } .board .edit-input, .board .edit-textarea { margin: 0; width: 100%; } .board-title { background-color: #48c1ff; border-radius: 50%; box-shadow: 0px 0px 5px 1px #ccc; color: #ffffff; font-size: 25px; height: 50px; line-height: 53px; margin: -35px 0 0 25px; position: absolute; text-align: center; text-transform: uppercase; width: 50px; } .board-item { box-sizing: border-box; display: inline-block; margin-top: 20px; padding: 0 15px; width: 100%; } .board-item-key, .board-item-value { float: left; margin: 0 15px; position: relative; width: calc(50% - 30px); } .board-item-key { text-align: right; } .board-item-key.required:after { background-color: #ff642d; border-radius: 50%; content: ''; height: 4px; margin-left: 5px; margin-top: 5px; position: absolute; width: 4px; } .board-item-value .edit-input, .board-item-value .edit-textarea { font-weight: bold; } .board-item-value:hover:after { color: #A4A5A8; content: "\e022"; font-family: "gravity-glyphicons"; height: 10px; margin-left: calc(100% - 20px); margin-top: -20px; position: absolute; width: 10px; } .board-item-value.checkbox:hover:after { content: ''; } .cb-label { color: #282828; float: left; margin-left: 10px; } .cb-gravity { left: -9999px; position: absolute; } .cb-gravity + label { background-color: #ffffff; border: solid 2px #cccccc; cursor: pointer; display: inline-block; height: 10px; margin: 0; position: relative; transition: background-color 0.2s, box-shadow 0.2s; user-select: none; width: 10px; } .cb-gravity + label::before { content: ''; background-color: #fff; display: none; height: 9px; left: 5px; position: absolute; top: 0.5px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); width: 2px; } .cb-gravity + label::after { background-color: #fff; content: ''; height: 2px; left: 0px; position: absolute; top: 5px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); width: 4px; } .cb-gravity:checked + label { background: #48c1ff; border-color: #48c1ff; } .cb-gravity:checked + label::before { display: block; } .cb-gravity:checked + label::after { display: block; } </style></head><body> <div class="container"> <div class="list-container"> <div class="list-item"> <div class="list-item-title"> <div class="list-item-title-icon fa fa-ship"></div> <div class="list-item-title-text">Shipper</div> </div> <div class="list-item-content-name">Bernard Romin Ltd</div> <div class="list-item-content-text"><input class="edit-input" value="Tony Josianne"></div> <div class="list-item-content-text placeholder"><input class="edit-input" value="tony.josianne@terry.com"></div> <div class="list-item-content-text placeholder"><input class="edit-input" value="+852 6273 2827"></div> <div class="list-item-content-text textarea"><textarea class="edit-textarea">920 Miller Common Suit 040, 102 Quarry Bay, Hong Kong </textarea></div> </div> <div class="list-item"> <div class="list-item-title"> <div class="list-item-title-icon fa fa-building"></div> <div class="list-item-title-text">Consignee</div> </div> <div class="list-item-content-name">Terry New Style Ltd</div> <div class="list-item-content-text"><input class="edit-input" value="Callie Summers"></div> <div class="list-item-content-text placeholder"><input class="edit-input" value="tony.josianne@terry.com"></div> <div class="list-item-content-text placeholder"><input class="edit-input" value="+852 6228 3922"></div> <div class="list-item-content-text textarea"><textarea class="edit-textarea">10 Myrtice Light Suite 579, 120 Queen's Road, Western District, Hong Kong</textarea></div> </div> <div class="list-item"> <div class="list-item-title"> <div class="list-item-title-icon icon-output"></div> <div class="list-item-title-text">Notify</div> </div> <div class="list-item-content-name placeholder">Click to add description</div> <div class="list-item-content-text"><input class="edit-input" value="Contact Person"></div> <div class="list-item-content-text placeholder"><input class="edit-input" value="example@example.com"></div> <div class="list-item-content-text placeholder"><input class="edit-input" value="+888 88888888"></div> <div class="list-item-content-text textarea"><textarea class="edit-textarea">Contact Address</textarea></div> <div class="list-item-content-text"><input class="edit-input" value="Pick Up date"></div> <div class="list-item-content-text textarea"><textarea class="edit-textarea">Pick Up Address</textarea></div> </div> </div> <div class="board"> <div class="board-title fa fa-list-alt"></div> <div class="board-item"> <div class="board-item-key required">Shipping Port</div> <div class="board-item-value"><input class="edit-input" value="Shunde"></div> </div> <div class="board-item"> <div class="board-item-key required">Destination Port</div> <div class="board-item-value"><input class="edit-input" value="Cabinda"></div> </div> <div class="board-item"> <div class="board-item-key required">Mode</div> <div class="board-item-value"><input class="edit-input" value="Sea"></div> </div> <div class="board-item"> <div class="board-item-key required">Cargo Location</div> <div class="board-item-value"><input class="edit-input" value="Yantian Port"></div> </div> <div class="board-item"> <div class="board-item-key required">Cargo Ready Date</div> <div class="board-item-value"><input class="edit-input" value="15/04/2016"></div> </div> <div class="board-item"> <div class="board-item-key required">Load Type</div> <div class="board-item-value"><input class="edit-input" value="CFS - CFS"></div> </div> <div class="board-item"> <div class="board-item-key required">Container Type</div> <div class="board-item-value"><inpu class="edit-input"t value="20 GP"></div> </div> <div class="board-item"> <div class="board-item-key required">No of Container</div> <div class="board-item-value"><input class="edit-input" value="1"></div> </div> <div class="board-item"> <div class="board-item-key required">Inco Term</div> <div class="board-item-value"><input class="edit-input" value="Free on Board"></div> </div> <div class="board-item"> <div class="board-item-key required">Payment Term</div> <div class="board-item-value"><input class="edit-input" value="90 Days after Invoice"></div> </div> <div class="board-item"> <div class="board-item-key required">Marks & Numbers</div> <div class="board-item-value"><textarea class="edit-textarea">1102038822002244 1102038822002245</textarea></div> </div> <div class="board-item"> <div class="board-item-key">Remark</div> <div class="board-item-value"><textarea class="edit-textarea placeholder">Click to add description</textarea></div> </div> <div class="board-item"> <div class="board-item-key">Dangerous Goods</div> <div class="board-item-value checkbox"><input class="cb-gravity" id="cb-gravity" type="checkbox"><label class="cb-label" for="cb-gravity"></label></div> </div> <div class="board-item"> <div class="board-item-key">Insurance Arranged</div> <div class="board-item-value checkbox"><input class="cb-gravity" id="cb-gravity1" type="checkbox"><label class="cb-label" for="cb-gravity1"></label></div> </div> <div class="board-item"> <div class="board-item-key">Letter Of Credit</div> <div class="board-item-value checkbox"><input class="cb-gravity" id="cb-gravity2" type="checkbox"><label class="cb-label" for="cb-gravity2"></label></div> </div> <div class="board-item"></div> </div> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script >$(".list-item").click(function(e){ $('.list-item').removeClass('active'); $(this).addClass("active"); e.stopPropagation(); }); $(document).click(function(){ $('.list-item').removeClass("active"); //hide the button }); //# sourceURL=pen.js </script> </body></html>

Related: See More

Awesome Landing Page
bootstrap 4 card
Card Styles
Bootstrap Social Card

Questions / Comments: