diff --git a/CurrencyConverter/style.css b/CurrencyConverter/style.css index 2a2165a..c631a81 100644 --- a/CurrencyConverter/style.css +++ b/CurrencyConverter/style.css @@ -1,82 +1,110 @@ -* { - margin: 0; - padding: 0; +h2, input[type=text], .msg{ + text-align: center; } -body { - display: flex; - justify-content: center; - align-items: center; - min-height: 100vh; - background-color: #f4e4ba; +p{ + margin-bottom: 0.75rem; } -.container { - background-color: #fff; - padding: 2rem; - border-radius: 1rem; - min-height: 45vh; - width: 40vh; +*{ + margin: 0; + padding: 0; } -form { - margin: 2rem 0 1rem 0; +body{ + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background-color: rgb(0, 0, 0); } -form select, -button, -input { - width: 100%; - border: none; - outline: none; - border-radius: 0.75rem; +.container{ + background: linear-gradient(-43deg,#e92424, #e924c1,#201ce8); + display: inline; + justify-self: center; + align-items: center; + padding: 5rem; + border-radius: 2rem; + color: rgb(255, 255, 255); + min-height: 45vh; + width: 40vh; + box-shadow: 0 5px 25px; + transition: all 0.3s ease-in-out; } -form input { - border: 1px solid lightgray; - font-size: 1rem; - height: 3rem; - padding-left: 0.5rem; +.container:hover{ + transform: scale(1.05); } -.dropdown { - display: flex; - justify-content: space-between; - align-items: center; - margin-top: 2rem; +form{ + margin: 2rem 0 1rem 0; } -.dropdown i { - font-size: 1.5rem; - margin-top: 1rem; +form select, button, input{ + align-items: center; + width: 100%; + border: black; + outline: none; + border-radius: 10rem; } -.select-container img { - max-width: 2rem; +form input{ + font-size: 1rem; + height: 3rem; + padding-left: 0.5rem; + box-shadow: 0 6px 6px; + transition: all 0.3s ease-in-out; +} + +form input:hover{ + transform: scale(1.1); +} + +.dropdown{ + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 2rem; +} + +.dropdown i{ + font-size: 1.5rem; + margin-top: 1rem; +} + +.select-container img{ + max-width: 2rem; } .select-container { - display: flex; - justify-content: center; - align-items: center; - width: 6rem; - border-radius: 0.5rem; - border: 1px solid lightgray; + display: flex; + color: #000000; + justify-self: center; + align-items: center; + width: 6rem; + border-radius: 0.5rem; +} + +.select-container select{ + font-size: 1rem; + width: auto; } -.select-container select { - font-size: 1rem; - width: auto; +.msg{ + margin: 2rem 0 2rem 0; } -.msg { - margin: 2rem 0 2rem 0; +form button{ + height: 3rem; + background: white; + color: #0a0909; + font-size: 1rem; + cursor: pointer; + box-shadow: 0 6px 6px; + transition: all 0.3s ease-in-out; } -form button { - height: 3rem; - background-color: #af4d98; - color: #fff; - font-size: 1.15rem; - cursor: pointer; +form button:hover{ + transform: scale(1.1); }