From d1e7c65920b629d290a0f9289d0cad42696e4968 Mon Sep 17 00:00:00 2001 From: jaanvi Date: Thu, 26 Dec 2024 12:58:05 +0000 Subject: [PATCH] Update style.css --- style.css | 287 +++++++++++++++++++++++++++--------------------------- 1 file changed, 143 insertions(+), 144 deletions(-) diff --git a/style.css b/style.css index 0b75b87..85897ce 100644 --- a/style.css +++ b/style.css @@ -1,144 +1,143 @@ -*{ - margin:0; - padding:0; - font-family: sans-serif; -} - -body { - background-image: linear-gradient(rgba(0, 0, 0, 0.8),rgba(0,0,0,0.8)),url(bg.jpg); - background-position: center; - background-size: cover; - -} - -.container{ - width: 360px; - height: 500px; - margin: 8% auto; - background: #fff; - border-radius: 5px; - position:relative; - transition: 0.5s; - overflow: hidden; -} - -h3{ - text-align: center; - margin-bottom: 40px; - color: #777; -} - -.container form{ - width: 280px; - position:absolute; - top:100px; - left: 40px; - -} - -form input{ - width:100%; - padding: 10px 5px; - margin: 5px 0; - border:0; - border-bottom: 1px solid #999; - outline: none; - background: transparent; - transition: all 0.3s ease; -} -label{ - display:inline-flex; - margin-left: 10px; - font-size: 14px; - cursor: pointer; - position: relative; - align-items: center; - color: #777; - margin-top: 10px; -} -.radio-inline input{ - display:inline-flex; - margin-right: 2px; -} - -::placeholder{ - color: #777; -} -.btn-box{ - width:100%; - margin: 30px auto; - text-align: center; -} - -form button{ - width: 110px; - height:35px; - margin:0 10px; - background: linear-gradient(to right, #9b06d6,#f905dc); - border-radius: 30px; - border:0; - outline:none; - color:#fff; - cursor:pointer; -} -#form2{ - left:450px; -} - -#form3{ - left:450px; -} - -.step-row{ - width:360px; - height:40px; - margin:0 auto; - display:flex; - align-items: center; - box-shadow: 0 -1px 5px -1px #000; - position: relative; -} -.step-col{ - width: 120px; - text-align: center; - color:#333; - position: relative; - -} -#progress{ - position:absolute; - height:100%; - width: 120px; - background: linear-gradient(to right, #9b06d6,#f905dc); - transition: 1s; -} -#progress::after{ - content: ''; - position: absolute; - width: 0; - height: 0; - border-top: 20px solid transparent; - border-bottom: 20px solid transparent; - top: 0; - right: -20px; - border-left: 20px solid #f11de7; - -} - -.dropdown select{ - position:relative; - min-width: 18px; - padding: 5px 5px; - display: inline-block; - color:#333 -} - -.checkbox-group{ - display:inline-flex; - position:relative ; - -} -.checkbox-group input{ - - margin-right: 5px; -} +*{ + margin:0; + padding:0; + font-family: sans-serif; +} + +body { + background-image: linear-gradient(rgba(0, 0, 0, 0.8),rgba(0,0,0,0.8)),url(bg.jpg); + background-position: center; + background-size: cover; + +} + +.container{ + width: 360px; + height: 500px; + margin: 8% auto; + background: #fff; + border-radius: 5px; + position:relative; + transition: 0.5s; + overflow: hidden; +} + +h3{ + text-align: center; + margin-bottom: 40px; + color: #777; +} + +.container form{ + width: 280px; + position:absolute; + top:100px; + left: 40px; + +} + +form input{ + width:100%; + padding: 10px 5px; + margin: 5px 0; + border:0; + border-bottom: 1px solid #999; + outline: none; + background: transparent; + transition: all 0.3s ease; +} +label{ + display:inline-flex; + margin-left: 10px; + font-size: 14px; + cursor: pointer; + position: relative; + align-items: center; + color: #777; + margin-top: 10px; +} +.radio-inline input{ + display:inline-flex; + margin-right: 2px; +} + +::placeholder{ + color: #777; +} +.btn-box{ + width:100%; + margin: 30px auto; + text-align: center; +} + +form button{ + width: 110px; + height:35px; + margin:0 10px; + background: linear-gradient(to right, #9b06d6,#f905dc); + border-radius: 30px; + border:0; + outline:none; + color:#fff; + cursor:pointer; +} +#form2, #form3 { + position: absolute; + transform: translateX(450px); + transition: transform 0.3s ease; +} + + +.step-row{ + width:360px; + height:40px; + margin:0 auto; + display:flex; + align-items: center; + box-shadow: 0 -1px 5px -1px #000; + position: relative; +} +.step-col{ + width: 120px; + text-align: center; + color:#333; + position: relative; + +} +#progress{ + position:absolute; + height:100%; + width: 120px; + background: linear-gradient(to right, #9b06d6,#f905dc); + transition: 1s; +} +#progress::after{ + content: ''; + position: absolute; + width: 0; + height: 0; + border-top: 20px solid transparent; + border-bottom: 20px solid transparent; + top: 0; + right: -20px; + border-left: 20px solid #f11de7; + +} + +.dropdown select{ + position:relative; + min-width: 180px; + padding: 5px 5px; + display: inline-block; + color:#333 +} + +.checkbox-group{ + display:inline-flex; + position:relative ; + +} +.checkbox-group input{ + + margin-right: 5px; +}