diff --git a/index.html b/index.html index 3dbc285..0d333e5 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ name="description" content="This web application provides a simple and intuitive interface for converting temperatures between Celsius and Fahrenheit. Whether you need quick temperature conversions for cooking, weather analysis, or any other purpose, this tool has got you covered." /> - + Temperature Convertor diff --git a/styles.css b/styles.css index 636d5ea..d009da8 100644 --- a/styles.css +++ b/styles.css @@ -5,7 +5,6 @@ box-sizing: border-box; } -/* Navbar */ /* Navbar */ .navbar { background-color: #333; @@ -27,19 +26,6 @@ margin-left: 15px; } -/* .start-tour-button button { - padding: 12px 24px; - font-size: 18px; - cursor: pointer; - transition: background-color 0.3s; - background-color: #06e6a6; - color: #800080; -} */ - -/* .start-tour-button button:hover { - background-color: #0fbb8a; -} */ - /* Body Styles */ body { display: flex; @@ -47,7 +33,7 @@ body { justify-content: center; align-items: center; min-height: 100vh; - background: linear-gradient(to top, #0093e9, #80d0c7); + background: linear-gradient(to top, #173bca, #80d0c7); } /* Container Styles */ @@ -104,18 +90,7 @@ body { justify-content: center; margin-top: 20px; } -/* -.button button { - border-radius: 8px; - padding: 10px 20px; - font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", - "Lucida Sans", Arial, sans-serif; - background-color: transparent; -} -.button button:hover { - background-color: #e8e5e5; -} */ /* Footer Styles */ .footer { @@ -268,7 +243,7 @@ a { height: 2.2em; width: 2.2em; border-radius: 0.7em; - box-shadow: 0.1em 0.1em 0.6em 0.2em #5295b9; + box-shadow: 0.1em 0.1em 0.6em 0.2em #0f2ec8; right: 0.3em; transition: all 0.3s; } @@ -335,6 +310,7 @@ a { transition-duration: 0.3s; box-shadow: 2px 2px 0px rgb(140, 32, 212); } + /* For devices with a maximum width of 768px */ @media only screen and (max-width: 768px) { .containers { @@ -353,23 +329,28 @@ a { padding: 14px; margin: 10px; } - .start-tour-button{ + + .start-tour-button { scale: 0.6; margin-top: -13px; margin-bottom: -13px; } - .footer{ + + .footer { height: 30%; } + .footer-para { font-size: 0.9rem; padding: 7px; } + .footer .footer-content { padding: 9px; margin: -4px; } + .temperature-input input { width: 90%; } -} +} \ No newline at end of file