From 53a9d7a9283c233c77eefb28a0fa548926432476 Mon Sep 17 00:00:00 2001 From: Jagpreet Singh Khurana <119691733+Jagpreet153@users.noreply.github.com> Date: Mon, 25 Mar 2024 17:12:39 +0530 Subject: [PATCH 1/2] feat:styled navbar and made responsive added current tab feature --- Unit Converter/CSS/Currency.css | 3 + Unit Converter/CSS/length.css | 7 ++- Unit Converter/CSS/temperature.css | 3 + Unit Converter/CSS/volume.css | 3 + Unit Converter/CSS/weight.css | 3 + Unit Converter/HTML/currency.html | 25 +++++++- Unit Converter/HTML/length.html | 25 +++++++- Unit Converter/HTML/temperature.html | 26 ++++++++- Unit Converter/HTML/volume.html | 26 ++++++++- Unit Converter/HTML/weight.html | 26 ++++++++- Unit Converter/index.html | 35 ++++++----- Unit Converter/script.js | 11 +++- Unit Converter/styles.css | 86 +++++++++++++++++++++------- 13 files changed, 231 insertions(+), 48 deletions(-) diff --git a/Unit Converter/CSS/Currency.css b/Unit Converter/CSS/Currency.css index e69de29..b2687f0 100644 --- a/Unit Converter/CSS/Currency.css +++ b/Unit Converter/CSS/Currency.css @@ -0,0 +1,3 @@ +.cur{ + background-color: grey; +} \ No newline at end of file diff --git a/Unit Converter/CSS/length.css b/Unit Converter/CSS/length.css index b6e9cb2..eb6a9fd 100644 --- a/Unit Converter/CSS/length.css +++ b/Unit Converter/CSS/length.css @@ -1,5 +1,4 @@ -body { - margin: 0; +body{ font-family: Arial, sans-serif; background-color: #f5f5f5; } @@ -14,7 +13,9 @@ body { background-size: cover; background-position: center; } - +.len{ + background-color: grey; +} .containment { display: flex; flex-direction: column; diff --git a/Unit Converter/CSS/temperature.css b/Unit Converter/CSS/temperature.css index e69de29..98df40f 100644 --- a/Unit Converter/CSS/temperature.css +++ b/Unit Converter/CSS/temperature.css @@ -0,0 +1,3 @@ +.temp{ + background-color: grey; +} \ No newline at end of file diff --git a/Unit Converter/CSS/volume.css b/Unit Converter/CSS/volume.css index e69de29..b1d390a 100644 --- a/Unit Converter/CSS/volume.css +++ b/Unit Converter/CSS/volume.css @@ -0,0 +1,3 @@ +.vol{ + background-color: grey; +} \ No newline at end of file diff --git a/Unit Converter/CSS/weight.css b/Unit Converter/CSS/weight.css index e69de29..7bff833 100644 --- a/Unit Converter/CSS/weight.css +++ b/Unit Converter/CSS/weight.css @@ -0,0 +1,3 @@ +.wei{ + background-color: grey; +} \ No newline at end of file diff --git a/Unit Converter/HTML/currency.html b/Unit Converter/HTML/currency.html index fb4da95..b82e043 100644 --- a/Unit Converter/HTML/currency.html +++ b/Unit Converter/HTML/currency.html @@ -4,9 +4,30 @@ Currency + + - + +

This is a simple unit converter.

@@ -42,6 +63,6 @@ - + \ No newline at end of file diff --git a/Unit Converter/HTML/length.html b/Unit Converter/HTML/length.html index fc9b77d..15ede3d 100644 --- a/Unit Converter/HTML/length.html +++ b/Unit Converter/HTML/length.html @@ -5,8 +5,30 @@ Length + + + +

This is a simple unit converter.

@@ -41,6 +63,7 @@
- + + \ No newline at end of file diff --git a/Unit Converter/HTML/temperature.html b/Unit Converter/HTML/temperature.html index f0d923e..7e28be7 100644 --- a/Unit Converter/HTML/temperature.html +++ b/Unit Converter/HTML/temperature.html @@ -4,11 +4,31 @@ Temperature + + - - + +

This is a simple unit converter.

You can also convert from one unit to another unit.

@@ -42,6 +62,6 @@ - + \ No newline at end of file diff --git a/Unit Converter/HTML/volume.html b/Unit Converter/HTML/volume.html index 2b2f273..bbfe92d 100644 --- a/Unit Converter/HTML/volume.html +++ b/Unit Converter/HTML/volume.html @@ -4,9 +4,30 @@ Volume + + - + +

This is a simple unit converter.

@@ -45,7 +66,6 @@ - - + \ No newline at end of file diff --git a/Unit Converter/HTML/weight.html b/Unit Converter/HTML/weight.html index 7fd0a32..0d51789 100644 --- a/Unit Converter/HTML/weight.html +++ b/Unit Converter/HTML/weight.html @@ -4,10 +4,32 @@ Weight + + - + + +

This is a simple unit converter.

You can also convert from one unit to another unit.

@@ -43,6 +65,6 @@ - + \ No newline at end of file diff --git a/Unit Converter/index.html b/Unit Converter/index.html index eeea81e..1bc32c8 100644 --- a/Unit Converter/index.html +++ b/Unit Converter/index.html @@ -8,20 +8,29 @@ - -
- Unit Convertor -
- Length - Weight - Volume - Currency - Temperature -
- -
+

- This is the Home Page + This is home page

+ + \ No newline at end of file diff --git a/Unit Converter/script.js b/Unit Converter/script.js index a2cac34..fb81421 100644 --- a/Unit Converter/script.js +++ b/Unit Converter/script.js @@ -1 +1,10 @@ -//Javascript for index.html will be written here \ No newline at end of file +//Javascript for index.html will be written here + +function showSidebar(){ + const sidebar = document.querySelector('.sidebar') + sidebar.style.display = 'flex' +} +function hideSidebar(){ + const sidebar = document.querySelector('.sidebar') + sidebar.style.display = 'none' +} \ No newline at end of file diff --git a/Unit Converter/styles.css b/Unit Converter/styles.css index 1ed88cb..6a112f6 100644 --- a/Unit Converter/styles.css +++ b/Unit Converter/styles.css @@ -1,27 +1,73 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} -.navbar { - color: white; - overflow: hidden; - background-color: #333; +nav{ + background-color: white; + box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1); +} +nav ul{ + width: 100%; + list-style: none; display: flex; - justify-content:space-around; + justify-content: flex-end; + align-items: center; } - -.unit{ - display: flex; - align-items: center; -} -.navbar a { - float: left; - display: block; - color: white; - text-align: center; - padding: 14px 20px; +nav li{ + height: 50px; +} +nav a{ + height: 100%; + padding: 0 30px; text-decoration: none; + display: flex; + align-items: center; + color: black; +} +nav a:hover{ + background-color: #f0f0f0; +} +nav li:first-child{ + margin-right: auto; +} +.sidebar{ + position: fixed; + top: 0; + right: 0; + height: 100vh; + width: 250px; + background-color: rgba(255, 255, 255, 0.15); + backdrop-filter: blur(12px); + box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1); + list-style: none; + display: none; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; +} +.sidebar li{ + width: 100%; +} +.sidebar a{ + width: 100%; +} +.menu-button{ + display: none; +} +@media(max-width: 800px){ + .hideOnMobile{ + display: none; + } + .menu-button{ + display: block; + } +} +@media(max-width: 400px){ + .sidebar{ + width: 100%; + } } -.navbar a:hover { - background-color: #ddd; - color: black; -} \ No newline at end of file From 855b8f8e0a226843f93b63df8806201fb3649adc Mon Sep 17 00:00:00 2001 From: Jagpreet Singh Khurana <119691733+Jagpreet153@users.noreply.github.com> Date: Mon, 25 Mar 2024 17:28:49 +0530 Subject: [PATCH 2/2] feat: styled navbar and made responsive added current tab feature --- Unit Converter/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/Unit Converter/index.html b/Unit Converter/index.html index 1bc32c8..286e737 100644 --- a/Unit Converter/index.html +++ b/Unit Converter/index.html @@ -31,6 +31,7 @@

This is home page

+ \ No newline at end of file