Skip to content

E
efxCurrencyExchange
Commit 92a704f2 by Mac Stephens
Options

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
parent 0bc24462
Showing with 175 additions and 74 deletions
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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment