"v2 css"
Bootstrap 3.3.0 Snippet by exigentinc

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="tutorial-piece"> <div class="row"> <div class="col-md-4"> <h3> <span class="eraser b"> Erase </span>Boundary Crossing Marks </h3> <p> Leave space to let the algorithm find the exact edge. <span class="bg b">Red</span> and <span class="fg b">green</span> should never touch. </p> <p> Use the <span class="yo-data-uri sword-tool-icon-svg"></span> <a href="/tutorials/scalpel">scalpel</a> for precision control of the boundary. </p> </div> <div class="col-md-8"> <table class="tutorial-table"> <tbody><tr> <td> <div style="position: relative;"> <video webkit-playsinline="webkit-playsinline" autoplay="autoplay" loop="loop" playsinline="playsinline" muted="muted" class="video_player video_player_responsive" controls="controls"> <source src="//dyl80ryjxr1ke.cloudfront.net/external_assets/videos_v2/erase.webm" type="video/webm"> <source src="//dyl80ryjxr1ke.cloudfront.net/external_assets/videos_v2/erase.mp4" type="video/mp4"> </video> </div> </td> </tr> </tbody></table> </div> </div> </div>
/*! CSS Used from: https://dyl80ryjxr1ke.cloudfront.net/p/assets/all_ca8121ff72362913092ca8d47aec8df1.css */ .yo-data-uri{display:inline-block;vertical-align:middle;background-size:cover;background-repeat:no-repeat;} .yo-data-uri:after{content:'';display:block;} .sword-tool-icon-svg{background-image:url('data:image/svg+xml;base64,PHN2ZyBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGhlaWdodD0iMTRweCIgd2lkdGg9IjE0cHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIj48cGF0aCBkPSJNMC43LDEuMUwxMy4xLDExLjZMMTEuNSwxM0w0LjUsN0wyLDlMMC43LDEuMVpNMC43LDEuMSIgZmlsbD0iI2ZmZiIgLz48cGF0aCBzdHJva2U9IiMwMDAiIGQ9Ik0wLjcsMS4xTDEzLjEsMTEuNkwxMS41LDEzTDQuNSw3TDIsOUwwLjcsMS4xWk0wLjcsMS4xIiBmaWxsPSJub25lIiAvPjwvc3ZnPg==');} .yo-data-uri.sword-tool-icon-svg{width:14px;} .yo-data-uri.sword-tool-icon-svg:after{padding-top:100%;} video{display:inline-block;vertical-align:baseline;} a{background-color:transparent;} a:active,a:hover{outline:0;} table{border-spacing:0;border-collapse:collapse;} td{padding:0;} @media print{ *,:after,:before{color:#000!important;text-shadow:none!important;background:0 0!important;-webkit-box-shadow:none!important;box-shadow:none!important;} a,a:visited{text-decoration:underline;} a[href]:after{content:" (" attr(href) ")";} tr{page-break-inside:avoid;} h3,p{orphans:3;widows:3;} h3{page-break-after:avoid;} } *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} :after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} a{color:#337ab7;text-decoration:none;} a:focus,a:hover{color:#23527c;text-decoration:underline;} a:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;} h3{font-family:inherit;font-weight:500;line-height:1.1;color:inherit;} h3{margin-top:20px;margin-bottom:10px;} h3{font-size:24px;} p{margin:0 0 10px;} .row{margin-right:-15px;margin-left:-15px;} .col-md-4,.col-md-8{position:relative;min-height:1px;padding-right:15px;padding-left:15px;} @media (min-width:992px){ .col-md-4,.col-md-8{float:left;} .col-md-8{width:66.66666667%;} .col-md-4{width:33.33333333%;} } table{background-color:transparent;} .row:after,.row:before{display:table;content:" ";} .row:after{clear:both;} .yo-data-uri{display:inline-block;vertical-align:middle;background-size:cover;background-repeat:no-repeat;} .yo-data-uri:after{content:'';display:block;} .b{font-weight:bold;} h3{font-family:sans-serif;} .fg{color:#080;} .bg{color:#800;} .eraser{color:#008;} .tutorial-piece{border-top:1px solid #ddd;padding:5px 0;} .tutorial-table{text-align:center;border-collapse:separate;border-spacing:0 5px;width:100%;} .tutorial-table td{padding:0;} h3{text-shadow:-1px -1px 2px #FFF, .5px .5px 1px rgba(0,0,0,.25);} .video_player_responsive{width:100%;}

Related: See More


Questions / Comments: