Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /* ---------------------------------- */
- /* Coupon Widget
- ------------------------------------- */
- .coupon-widget {
- margin-top: 35px;
- border-radius: 4px;
- background-position: 50%;
- background-repeat: no-repeat;
- background-size: cover;
- position: relative;
- color: #fff;
- transition: 0.3s;
- display: block;
- }
- .coupon-widget:hover {
- transform: translateY(-5px)
- }
- .coupon-widget:before {
- content: "";
- background-color: #222;
- opacity: 0.8;
- top: 0;
- left: 0;
- display: block;
- height: 100%;
- width: 100%;
- position: absolute;
- border-radius: 4px;
- z-index: 1;
- }
- .coupon-widget a.coupon-top {
- padding: 32px 30px;
- position: relative;
- z-index: 10;
- text-align: center;
- cursor: default;
- display: block;
- cursor: pointer;
- background: rgba(255,255,255,0.07);
- }
- .coupon-widget a.coupon-top h3 {
- font-weight: 600;
- font-size: 21px;
- line-height: 30px;
- text-align: center;
- padding: 0 30px;
- margin: 0;
- font-weight: 600;
- color: #fff;
- }
- .coupon-scissors-icon {
- position: absolute;
- top: -15px;
- left: 35px;
- z-index: 100;
- font-size: 20px;
- }
- .coupon-scissors-icon:after {
- content: "\f0c4";
- font-family: "FontAwesome";
- }
- .coupon-valid-untill {
- background-color: #fff;
- display: inline-block;
- border-radius: 4px;
- padding: 5px 12px;
- line-height: 20px;
- font-weight: 600;
- font-size: 14px;
- margin-top: 15px;
- color: #333;
- }
- .coupon-how-to-use {
- padding: 0 20px;
- font-size: 14px;
- line-height: 22px;
- margin-top: 15px;
- color: rgba(255,255,255,0.85);
- }
- .coupon-how-to-use strong { color: #fff; }
- .coupon-widget .coupon-bottom {
- border-top: 2px dashed rgba(255,255,255,0.3);
- padding: 20px;
- margin: 0 0px;
- position: relative;
- z-index: 10;
- text-align: center;
- border-radius: 0 0 4px 4px;
- }
- .coupon-code {
- font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-weight: 500;
- color: #fff;
- font-size: 18px;
- letter-spacing: 2px;
- display: inline-block;
- padding: 7px 20px;
- border-radius: 2px;
- position: relative;
- z-index: 11;
- text-transform: uppercase;
- transition: 0.4s;
- background-color: rgba(255,255,255,0.09);
- border: 2px dashed rgba(255,255,255,0.29);
- }
- .code-button:hover,
- .code-button {
- text-align: center;
- border-radius: 50px;
- width: 100%;
- display: block;
- font-size: 15px;
- font-weight: 600;
- padding: 10px;
- line-height: 24px;
- transition: 0.3s;
- background-color: #eee;
- color: #777;
- display: none;
- }
- .code-button:hover {
- background-color: #f91942;
- color: #fff;
- }
- .coupon-link-icon {
- position: absolute;
- top: 15px;
- right: 18px;
- font-size: 16px;
- }
- .coupon-link-icon:before {
- font-family: "FontAwesome";
- content: "\f08e";
- color: #fff;
- }
- .coupon-widget .coupon-bottom:before,
- .coupon-widget .coupon-bottom:after {
- content: "";
- width: 22px;
- height: 22px;
- display: inline-block;
- position: absolute;
- top: 0;
- z-index: 10;
- left: 0;
- background-color: #fff;
- border-radius: 100%;
- transform: translate(-50%, -50%);
- }
- .coupon-widget .coupon-bottom:after {
- left: initial;
- right: 0;
- transform: translate(50%, -50%);
- }
- .coupon-widget:before,
- .coupon-bottom {
- background-color: #282828;
- }
- @media (max-width: 480px) {
- .coupon-widget a.coupon-top { padding-left: 20px; padding-right: 20px; }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement