// Stay Connected .stay-connected-section{ @include section-padding; } .stay-connected{ background: $support-color; border-radius: 0 0 _res-m(14) _res-m(14); padding: _res-m(100) _res-m(70); @include screen-sm-min{ padding: _res(40) _res(56); border-radius: 0 0 _res(14) _res(14); .ari-column{ @include _flex($halign: space-between); } } &-title{ color: #fff; font-size: _res-m(65); font-weight: bold; text-align: center; text-transform: uppercase; margin-bottom: _res-m(69); @include screen-sm-min{ font-size: _res(36); letter-spacing: .111em; margin-bottom: 0; } } &-form{ .ari-form-container{ margin-bottom: 0; form{ @include _flex($valign: flex-start); .alpaca-field{ padding: 0; .alpaca-container{ @include _flex($valign: flex-start); gap: 1px; &-item{ margin-top: 0; &-first{ .form-group input{ border-radius: _res-m(14) 0 0 _res-m(14); @include screen-sm-min{ border-radius: _res(14) 0 0 _res(14); } } } .form-group{ margin-bottom: 0; input{ height: _res-m(144); background: #323232; border: none; font-size: _res-m(25); @include screen-sm-min{ font-size: _res(10,20); height: _res(30,72); width: _res(400); } } } } } } .alpaca-form-buttons-container{ margin-top: 0; button{ @include btn-style; border-radius: 0 _res-m(14) _res-m(14) 0; height: _res-m(144); width: _res-m(257); font-weight: 500; font-size: _res-m(47); opacity: 1; @include screen-sm-min{ border-radius: 0 _res(14) _res(14) 0; width: _res(100,178); height: _res(30,72); } } } } } } }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter