<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="container-fluid"> <div class="row"> <div class="dl"> <div class="brand"> <h2> FULL AHEAD </h2> <h3> УЧЕБНИК МОРЯКАМ </h3> </div> <div class="discount alizarin"> 20% <div class="type"> off </div> </div> <div class="descr"> <strong> Предновогодняя распродажа учебников FULL AHEAD*. </strong> Выбирайте любую книгу и получите дисконт. </div> <div class="ends"> <small> * Распродажа действует до 31.12.2018 </small> </div> <div class="coupon midnight-blue"> <a data-toggle="collapse" href="#code-1" class="open-code">Get a code</a> <div id="code-1" class="collapse in code"> LV5MAY14 </div> </div> </div> </div> </div>

section { padding: 5% 0; } .alizarin { background: #e74c3c; } .amethyst { background: #9b59b6; } .emerald { background: #2ecc71; } .midnight-blue { background: #2c3e50; } .peter-river { background: #34container-fluid98db; } .dl { background: #f0f0f0; padding: 30px 0; border-radius: 20px; position: relative; } .dl:before { content: " "; height: 20px; width: 20px; background: #ddd; border-radius: 20px; position: absolute; left: 50%; top: 20px; margin-left: -10px; } .dl .brand { text-transform: uppercase; letter-spacing: 3px; padding: 10px 15px; margin-top: 10px; text-align: center; min-height: 100px; } .dl .discount { min-height: 50px; position: relative; font-size: 80px; line-height: 80px; text-align: center; font-weight: bold; padding: 20px 15px 0; color: #f1c40f; } .dl .discount:after { content: " "; border-right: 20px solid transparent; border-left: 20px solid transparent; position: absolute; bottom: -20px; left: 20%; } .dl .discount.alizarin:after { border-top: 20px solid #e74c3c; } .dl .discount.peter-river:after { border-top: 20px solid #3498db; } .dl .discount.emerald:after { border-top: 20px solid #2ecc71; } .dl .discount.amethyst:after { border-top: 20px solid #9b59b6; } .dl .discount .type { font-size: 20px; letter-spacing: 1px; text-transform: uppercase; margin-top: -30px; } .dl .descr { color: #999; margin-top: 10px; padding: 20px 15px; } .dl .ends { padding: 0 15px; color: #f1c40f; margin-bottom: 10px; } .dl .coupon { min-height: 50px; text-align: center; text-transform: uppercase; font-weight: bold; font-size: 18px; padding: 20px 15px; } .dl .coupon a.open-code { color: #16a085; } .dl .coupon .code { letter-spacing: 1px; border-radius: 4px; margin-top: 10px; padding: 10px 15px; color: #f1c40f; background: #f0f0f0; }