Form by mi-series
#212121
1/* Body */ 2.container { 3 display: grid; 4 grid-template-columns: auto; 5 gap: 0px; 6} 7 8hr { 9 height: 1px; 10 background-color: #E5C7C5; 11 border: none; 12} 13 14.card { 15 width: 400px; 16 background: #F4E2DE; 17 box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1); 18} 19 20.title { 21 width: 100%; 22 height: 40px; 23 position: relative; 24 display: flex; 25 align-items: center; 26 padding-left: 20px; 27 border-bottom: 1px solid #E5C7C5; 28 font-weight: 700; 29 font-size: 11px; 30 color: #000000; 31} 32 33/* Cart */ 34.cart { 35 border-radius: 19px 19px 0px 0px; 36} 37 38.cart .steps { 39 display: flex; 40 flex-direction: column; 41 padding: 20px; 42} 43 44.cart .steps .step { 45 display: grid; 46 gap: 10px; 47} 48 49.cart .steps .step span { 50 font-size: 13px; 51 font-weight: 600; 52 color: #000000; 53 margin-bottom: 8px; 54 display: block; 55} 56 57.cart .steps .step p { 58 font-size: 11px; 59 font-weight: 600; 60 color: #000000; 61} 62 63/* Promo */ 64.promo form { 65 display: grid; 66 grid-template-columns: 1fr 80px; 67 gap: 10px; 68 padding: 0px; 69} 70 71.input_field { 72 width: auto; 73 height: 36px; 74 padding: 0 0 0 12px; 75 border-radius: 5px; 76 outline: none; 77 border: 1px solid #E5C7C5; 78 background-color: #F4E2DE; 79 transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1); 80} 81 82.input_field:focus { 83 border: 1px solid transparent; 84 box-shadow: 0px 0px 0px 2px #F3D2C9; 85 background-color: #F4E2DE; 86} 87 88.promo form button { 89 display: flex; 90 flex-direction: row; 91 justify-content: center; 92 align-items: center; 93 padding: 10px 18px; 94 gap: 10px; 95 width: 100%; 96 height: 36px; 97 background: #F3D2C9; 98 box-shadow: 0px 0.5px 0.5px #F3D2C9, 0px 1px 0.5px rgba(239, 239, 239, 0.5); 99 border-radius: 5px; 100 border: 0; 101 font-style: normal; 102 font-weight: 600; 103 font-size: 12px; 104 line-height: 15px; 105 color: #000000; 106} 107 108/* Checkout */ 109.payments .details { 110 display: grid; 111 grid-template-columns: 10fr 1fr; 112 padding: 0px; 113 gap: 5px; 114} 115 116.payments .details span:nth-child(odd) { 117 font-size: 12px; 118 font-weight: 600; 119 color: #000000; 120 margin: auto auto auto 0; 121} 122 123.payments .details span:nth-child(even) { 124 font-size: 13px; 125 font-weight: 600; 126 color: #000000; 127 margin: auto 0 auto auto; 128} 129 130.checkout .footer { 131 display: flex; 132 align-items: center; 133 justify-content: space-between; 134 padding: 10px 10px 10px 20px; 135 background-color: #ECC2C0; 136} 137 138.price { 139 position: relative; 140 font-size: 22px; 141 color: #2B2B2F; 142 font-weight: 900; 143} 144 145.checkout .checkout-btn { 146 display: flex; 147 flex-direction: row; 148 justify-content: center; 149 align-items: center; 150 width: 150px; 151 height: 36px; 152 background: #F3D2C9; 153 box-shadow: 0px 0.5px 0.5px #E5C7C5, 0px 1px 0.5px rgba(239, 239, 239, 0.5); 154 border-radius: 7px; 155 border: 1px solid #ECC2C0; 156 color: #000000; 157 font-size: 13px; 158 font-weight: 600; 159 transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1); 160}
1.5K views
1.5K views
Variations
1 MIT License