"card tiket"
Bootstrap 3.3.0 Snippet by evarevirus

<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <widget type="ticket" class="--flex-column"> <div class="top --flex-column"> <div class="bandname -bold">Ghost Mice</div> <div class="tourname">Home Tour</div> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/concert.png" alt="" /> <div class="deetz --flex-row-j!sb"> <div class="event --flex-column"> <div class="date">3rd March 2017</div> <div class="location -bold">Bloomington, Indiana</div> </div> <div class="price --flex-column"> <div class="label">Price</div> <div class="cost -bold">$30</div> </div> </div> </div> <div class="rip"></div> <div class="bottom --flex-row-j!sb"> <div class="barcode"></div> <a class="buy" href="#">BUY TICKET</a> </div> </widget>
body { background-image: -webkit-linear-gradient(135deg, #8067B7, #EC87C0); background-image: linear-gradient(-45deg, #8067B7, #EC87C0); min-height: calc(100vh - 40px); margin: 20px; font-family: 'Lato', sans-serif; } body widget { -webkit-filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.3)); filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.3)); } body widget[type="ticket"] { width: 255px; } body widget[type="ticket"] .top > div, body widget[type="ticket"] .bottom > div { padding: 0 18px; } body widget[type="ticket"] .top > div:first-child, body widget[type="ticket"] .bottom > div:first-child { padding-top: 18px; } body widget[type="ticket"] .top > div:last-child, body widget[type="ticket"] .bottom > div:last-child { padding-bottom: 18px; } body widget[type="ticket"] .top img, body widget[type="ticket"] .bottom img { padding: 18px 0; } body widget[type="ticket"] .top, body widget[type="ticket"] .bottom, body widget[type="ticket"] .rip { background-color: #fff; } body widget[type="ticket"] .top { border-top-right-radius: 5px; border-top-left-radius: 5px; } body widget[type="ticket"] .top .deetz { padding-bottom: 10px !important; } body widget[type="ticket"] .bottom { border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; padding: 18px; height: 30px; padding-top: 10px; } body widget[type="ticket"] .bottom .barcode { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAF4AAAABCAYAAABXChlMAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuOWwzfk4AAACPSURBVChTXVAJDsMgDOsrVpELiqb+/4c0DgStQ7JMYogNh2gdvg5VfXFCRIZaC6BOtnoNFpvaumNmwb/71Frrm8XvgYkker1/g9WzMOsohaOGNziRs5inDsAn8yEPengTapJ5bmdZ2Yv7VvfPN6AH2NJx7nOWPTf1/78hoqgxhzw3ZqYG1Dr/9ur3y8vMxgNZhcAUnR4xKgAAAABJRU5ErkJggg==); background-repeat: repeat-y; min-width: 58px; } body widget[type="ticket"] .bottom .buy { display: block; font-size: 12px; font-weight: bold; background-color: #5D9CEC; padding: 0 18px; line-height: 30px; border-radius: 15px; color: #fff; text-decoration: none; } body widget[type="ticket"] .rip { height: 20px; margin: 0 10px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAACCAYAAAB7Xa1eAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuOWwzfk4AAAAaSURBVBhXY5g7f97/2XPn/AcCBmSMQ+I/AwB2eyNBlrqzUQAAAABJRU5ErkJggg==); background-size: 4px 2px; background-repeat: repeat-x; background-position: center; position: relative; box-shadow: 0 1px 0 0 #fff, 0 -1px 0 0 #fff; } body widget[type="ticket"] .rip:before, body widget[type="ticket"] .rip:after { content: ''; position: absolute; width: 20px; height: 20px; top: 50%; -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); border: 5px solid transparent; border-top-color: #fff; border-right-color: #fff; border-radius: 100%; pointer-events: none; } body widget[type="ticket"] .rip:before { left: -10px; } body widget[type="ticket"] .rip:after { -webkit-transform: translate(-50%, -50%) rotate(225deg); transform: translate(-50%, -50%) rotate(225deg); right: -40px; } body widget .-bold { font-weight: bold; }

Related: See More


Questions / Comments: