restyled nav-toggler to respond on hover like old website, styled contactus…

restyled nav-toggler to respond on hover like old website, styled contactus page, and fixed some resizing issues on home page

TMSWeb/Debug/View.Compliance.html

@@ -3,10 +3,9 @@
     <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top shadow">
         <div class="container-fluid container-max">
             <a class="navbar-brand em-brand" href="#FHome">
-                <img src="images/efxLogo.png" alt="EFX" style="height: 60px; margin-left: 20px;">
+                <img src="images/efxLogo.png" alt="EFX">
             </a>
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
-                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
             </button>
             <div class="collapse navbar-collapse" id="navbarNav">

TMSWeb/Debug/View.ContactUs.html

@@ -3,10 +3,9 @@
     <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top shadow">
         <div class="container-fluid container-max">
             <a class="navbar-brand em-brand" href="#FHome">
-                <img src="images/efxLogo.png" alt="EFX" style="height: 60px; margin-left: 20px;">
+                <img src="images/efxLogo.png" alt="EFX">
             </a>
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
-                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
             </button>
             <div class="collapse navbar-collapse" id="navbarNav">
@@ -37,7 +36,7 @@
     </div>
 
     <!-- Contact form and hours information -->
-    <div class="row">
+    <div class="row mb-5">
         <!-- Contact form column -->
         <div class="col-md-6">
             <h2>Send us a Message</h2>
@@ -67,18 +66,40 @@
         <div class="col-md-6">
             <div class="hours-box">
                 <h3>EFX Currency Hours</h3>
-                <!-- Hours information goes here -->
                 <div class="location">
+                    <i class="fas fa-map-pin fa-lg me-2"></i>
+                    <div>
                         <h4>Niagara Falls</h4>
-                    <p>Thursday – Monday: 11am – 4pm</p>
-                    <p>Phone: (716) 297-4654</p>
+                        <p class="mb-0">Thursday – Monday: 11am – 4pm</p>
+                        <p class="mt-2">Phone: (716) 297-4654</p>
+                    </div>
                 </div>
                 <div class="location">
+                    <i class="fas fa-map-pin fa-lg me-2"></i>
+                    <div>
                         <h4>Buffalo</h4>
-                    <p>Monday – Saturday: 11am – 4pm</p>
-                    <p>Phone: (716) 681-8820</p>
+                        <p class="mb-0">Monday – Saturday: 11am – 4pm</p>
+                        <p class="mt-2">Phone: (716) 681-8820</p>
+                    </div>
+                </div>
+                <div class="location">
+                    <i class="fas fa-map-pin fa-lg me-2"></i>
+                    <div>
+                        <h4>Rochester</h4>
+                        <p class="mb-0">Monday: 9am – 1pm</p>
+                        <p class="mb-0">Thursday: 11am – 4pm</p>
+                        <p class="mb-0">Saturday: 9am – 1pm</p>
+                        <p class="mt-2">Phone: (585) 445-8911</p>
+                    </div>
+                </div>
+                <div class="location">
+                    <i class="fas fa-map-pin fa-lg me-2"></i>
+                    <div>
+                        <h4>Syracuse</h4>
+                        <p class="mb-0">Monday, Wednesday, Friday: 12pm – 4pm</p>
+                        <p class="mt-2">Phone: (315) 565-4138</p>
+                    </div>
                 </div>
-                <!-- Repeat for other locations -->
             </div>
         </div>
     </div>

TMSWeb/Debug/View.Home.html

@@ -3,10 +3,9 @@
     <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top shadow">
         <div class="container-fluid container-max">
             <a class="navbar-brand em-brand" href="#FHome">
-                <img src="images/efxLogo.png" alt="EFX" style="height: 60px; margin-left: 20px;">
+                <img src="images/efxLogo.png" alt="EFX">
             </a>
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
-                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
             </button>
             <div class="collapse navbar-collapse" id="navbarNav">

TMSWeb/Debug/css/App.css

@@ -5,12 +5,12 @@ body {
     font-style: normal;
     color: #272727;
     background-color: #f4f4f4;
-    padding-top: 90px;
+    padding-top: 70px;
     box-sizing: border-box;
 }
 
 .container-max {
-    max-width: 1400px; /* or whatever the max width you want */
+    max-width: 1400px;
     margin-right: auto;
     margin-left: auto;
 }
@@ -72,6 +72,28 @@ body {
     padding-bottom: 25px;
 }
 
+.navbar-toggler {
+    outline: none !important;
+    border: none !important;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+    transition: background-color 0.3s ease, box-shadow 0.3s ease;
+    background-color: #f8f9fa;
+}
+
+/* Ensures the hover effect is applied even when the element is focused */
+.navbar-toggler:focus, .navbar-toggler:active, .navbar-toggler.active {
+    outline: none;
+    border: none !important;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+    background-color: #f8f9fa;
+}
+
+/* Hover effect: inverse shadow and darker background */
+.navbar-toggler:hover {
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) inset; /* "Pressed in" look */
+    background-color: #e2e6ea;
+}
+
 /* Hero Image Styling */
 .hero-image-home {
     position: relative;
@@ -88,7 +110,6 @@ body {
     top: 0;
     left: 0;
     z-index: -1;
-    /* Places the image behind the content */
 }
 
 .hero-image-compliance {
@@ -105,7 +126,6 @@ body {
     top: 0;
     left: 0;
     z-index: -1;
-    /* Places the image behind the content */
 }
 
 /* Currency Expert Box Styling */
@@ -115,11 +135,9 @@ body {
     left: 20%;
     transform: translateX(-50%);
     background-color: rgba(246, 246, 246, 0.9);
-    /* Light grey with transparency */
     padding: 20px;
     width: 30%;
     z-index: 2;
-    /* Places the box above the image but below the navbar and content-section when scrolling */
     border-radius: 10px;
 }
 
@@ -127,44 +145,53 @@ body {
 .content-section {
     position: relative;
     z-index: 10;
-    /* Places the content in front of the image */
     background: #FFF;
     margin-top: -2rem;
 }
 
-/* Additional CSS */
 blockquote {
     margin-top: 1em;
     font-style: italic;
 }
 
 .middle-subtitle {
-    font-size: medium; /* Adjust size as needed */
-    font-weight: bold; /* Optional: if you want it to stand out more */
+    font-size: medium;
+    font-weight: bold;
 }
 
-/* Adjusted padding-top for navbar */
 .container.mt-5 {
     margin-top: calc(5rem + 90px) !important;
-    /* Navbar height + original mt-5 margin */
 }
 
 .location-info {
     padding: 1rem;
     background: #fff;
-    /* For white background, match to your theme */
     border: 1px solid #ddd;
-    /* For border, adjust as needed */
     margin-bottom: 2rem;
-    /* Space below each map */
 }
 
 .location-info h3 {
     margin-bottom: .5rem;
-    /* Space below the heading */
 }
 
-/* For the Get Directions button */
+.location {
+    display: flex;
+    align-items: start; /* Aligns the icon with the top of the text */
+    margin-bottom: 1rem; /* Spacing between locations */
+}
+
+.location i.fas {
+    margin-top: 0.25rem; /* Adjust this value to fine-tune vertical alignment with h4 */
+}
+
+.location > div {
+    margin-left: 0.5rem; /* Space between icon and text */
+}
+
+.hours-box h3 {
+    margin-bottom: 1rem; /* Space below the section title */
+}
+
 .btn-primary {
     background-color: #28a745;
     /* Use a green color to match your theme */

TMSWeb/Debug/index.html

@@ -4,14 +4,16 @@
   <noscript>Your browser does not support JavaScript!</noscript>
   <link rel="icon" href="data:;base64,=">
   <title>TMS Web Project</title>
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" type="text/javascript"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
   <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
   <link href="css/App.css" rel="stylesheet" type="text/css">
   <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap" rel="stylesheet">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+  <link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&amp;family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&amp;display=swap" rel="stylesheet">
   <script type="text/javascript" src="TMSWebTemplate.js"></script>
   <script src="https://smtpjs.com/v3/smtp.js"></script>
   <style>
@@ -29,5 +31,7 @@
   <script type="text/javascript">
     rtl.run();
   </script>
-</body>
-</html>
+
+
+
+</body></html>

TMSWebTemplate.dproj

@@ -131,6 +131,7 @@
     <None Include="images\currency.png"/>
     <None Include="images\efx-location.jpg"/>
     <None Include="images\bridgewoman2.jpg"/>
+    <None Include="images\nataliepicture.jpg"/>
     <BuildConfiguration Include="Release">
       <Key>Cfg_2</Key>
       <CfgParent>Base</CfgParent>

View.Compliance.html

@@ -3,10 +3,9 @@
     <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top shadow">
         <div class="container-fluid container-max">
             <a class="navbar-brand em-brand" href="#FHome">
-                <img src="images/efxLogo.png" alt="EFX" style="height: 60px; margin-left: 20px;">
+                <img src="images/efxLogo.png" alt="EFX">
             </a>
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
-                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
             </button>
             <div class="collapse navbar-collapse" id="navbarNav">

View.ContactUs.html

@@ -3,10 +3,9 @@
     <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top shadow">
         <div class="container-fluid container-max">
             <a class="navbar-brand em-brand" href="#FHome">
-                <img src="images/efxLogo.png" alt="EFX" style="height: 60px; margin-left: 20px;">
+                <img src="images/efxLogo.png" alt="EFX">
             </a>
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
-                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
             </button>
             <div class="collapse navbar-collapse" id="navbarNav">
@@ -37,7 +36,7 @@
     </div>
 
     <!-- Contact form and hours information -->
-    <div class="row">
+    <div class="row mb-5">
         <!-- Contact form column -->
         <div class="col-md-6">
             <h2>Send us a Message</h2>
@@ -67,18 +66,40 @@
         <div class="col-md-6">
             <div class="hours-box">
                 <h3>EFX Currency Hours</h3>
-                <!-- Hours information goes here -->
                 <div class="location">
+                    <i class="fas fa-map-pin fa-lg me-2"></i>
+                    <div>
                         <h4>Niagara Falls</h4>
-                    <p>Thursday – Monday: 11am – 4pm</p>
-                    <p>Phone: (716) 297-4654</p>
+                        <p class="mb-0">Thursday – Monday: 11am – 4pm</p>
+                        <p class="mt-2">Phone: (716) 297-4654</p>
+                    </div>
                 </div>
                 <div class="location">
+                    <i class="fas fa-map-pin fa-lg me-2"></i>
+                    <div>
                         <h4>Buffalo</h4>
-                    <p>Monday – Saturday: 11am – 4pm</p>
-                    <p>Phone: (716) 681-8820</p>
+                        <p class="mb-0">Monday – Saturday: 11am – 4pm</p>
+                        <p class="mt-2">Phone: (716) 681-8820</p>
+                    </div>
+                </div>
+                <div class="location">
+                    <i class="fas fa-map-pin fa-lg me-2"></i>
+                    <div>
+                        <h4>Rochester</h4>
+                        <p class="mb-0">Monday: 9am – 1pm</p>
+                        <p class="mb-0">Thursday: 11am – 4pm</p>
+                        <p class="mb-0">Saturday: 9am – 1pm</p>
+                        <p class="mt-2">Phone: (585) 445-8911</p>
+                    </div>
+                </div>
+                <div class="location">
+                    <i class="fas fa-map-pin fa-lg me-2"></i>
+                    <div>
+                        <h4>Syracuse</h4>
+                        <p class="mb-0">Monday, Wednesday, Friday: 12pm – 4pm</p>
+                        <p class="mt-2">Phone: (315) 565-4138</p>
+                    </div>
                 </div>
-                <!-- Repeat for other locations -->
             </div>
         </div>
     </div>

View.Home.html

@@ -3,10 +3,9 @@
     <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top shadow">
         <div class="container-fluid container-max">
             <a class="navbar-brand em-brand" href="#FHome">
-                <img src="images/efxLogo.png" alt="EFX" style="height: 60px; margin-left: 20px;">
+                <img src="images/efxLogo.png" alt="EFX">
             </a>
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
-                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
             </button>
             <div class="collapse navbar-collapse" id="navbarNav">

css/App.css

@@ -5,12 +5,12 @@ body {
     font-style: normal;
     color: #272727;
     background-color: #f4f4f4;
-    padding-top: 90px;
+    padding-top: 70px;
     box-sizing: border-box;
 }
 
 .container-max {
-    max-width: 1400px; /* or whatever the max width you want */
+    max-width: 1400px;
     margin-right: auto;
     margin-left: auto;
 }
@@ -72,6 +72,28 @@ body {
     padding-bottom: 25px;
 }
 
+.navbar-toggler {
+    outline: none !important;
+    border: none !important;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+    transition: background-color 0.3s ease, box-shadow 0.3s ease;
+    background-color: #f8f9fa;
+}
+
+/* Ensures the hover effect is applied even when the element is focused */
+.navbar-toggler:focus, .navbar-toggler:active, .navbar-toggler.active {
+    outline: none;
+    border: none !important;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+    background-color: #f8f9fa;
+}
+
+/* Hover effect: inverse shadow and darker background */
+.navbar-toggler:hover {
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) inset; /* "Pressed in" look */
+    background-color: #e2e6ea;
+}
+
 /* Hero Image Styling */
 .hero-image-home {
     position: relative;
@@ -88,7 +110,6 @@ body {
     top: 0;
     left: 0;
     z-index: -1;
-    /* Places the image behind the content */
 }
 
 .hero-image-compliance {
@@ -105,7 +126,6 @@ body {
     top: 0;
     left: 0;
     z-index: -1;
-    /* Places the image behind the content */
 }
 
 /* Currency Expert Box Styling */
@@ -115,11 +135,9 @@ body {
     left: 20%;
     transform: translateX(-50%);
     background-color: rgba(246, 246, 246, 0.9);
-    /* Light grey with transparency */
     padding: 20px;
     width: 30%;
     z-index: 2;
-    /* Places the box above the image but below the navbar and content-section when scrolling */
     border-radius: 10px;
 }
 
@@ -127,44 +145,53 @@ body {
 .content-section {
     position: relative;
     z-index: 10;
-    /* Places the content in front of the image */
     background: #FFF;
     margin-top: -2rem;
 }
 
-/* Additional CSS */
 blockquote {
     margin-top: 1em;
     font-style: italic;
 }
 
 .middle-subtitle {
-    font-size: medium; /* Adjust size as needed */
-    font-weight: bold; /* Optional: if you want it to stand out more */
+    font-size: medium;
+    font-weight: bold;
 }
 
-/* Adjusted padding-top for navbar */
 .container.mt-5 {
     margin-top: calc(5rem + 90px) !important;
-    /* Navbar height + original mt-5 margin */
 }
 
 .location-info {
     padding: 1rem;
     background: #fff;
-    /* For white background, match to your theme */
     border: 1px solid #ddd;
-    /* For border, adjust as needed */
     margin-bottom: 2rem;
-    /* Space below each map */
 }
 
 .location-info h3 {
     margin-bottom: .5rem;
-    /* Space below the heading */
 }
 
-/* For the Get Directions button */
+.location {
+    display: flex;
+    align-items: start; /* Aligns the icon with the top of the text */
+    margin-bottom: 1rem; /* Spacing between locations */
+}
+
+.location i.fas {
+    margin-top: 0.25rem; /* Adjust this value to fine-tune vertical alignment with h4 */
+}
+
+.location > div {
+    margin-left: 0.5rem; /* Space between icon and text */
+}
+
+.hours-box h3 {
+    margin-bottom: 1rem; /* Space below the section title */
+}
+
 .btn-primary {
     background-color: #28a745;
     /* Use a green color to match your theme */

index.html

@@ -4,14 +4,16 @@
   <noscript>Your browser does not support JavaScript!</noscript>
   <link rel="icon" href="data:;base64,=">
   <title>TMS Web Project</title>
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" type="text/javascript"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
   <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
   <link href="css/App.css" rel="stylesheet" type="text/css">
   <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap" rel="stylesheet">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
+  <link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&amp;family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&amp;display=swap" rel="stylesheet">
   <script type="text/javascript" src="$(ProjectName).js"></script>
   <script src="https://smtpjs.com/v3/smtp.js"></script>
   <style>
@@ -29,5 +31,7 @@
   <script type="text/javascript">
     rtl.run();
   </script>
-</body>
-</html>
+
+
+
+</body></html>