From a025041d0f56d3705be4a9d6c69dcd669ca3623e Mon Sep 17 00:00:00 2001 From: divyalakshmi0 <166861248+divyalakshmi0@users.noreply.github.com> Date: Sun, 6 Oct 2024 17:53:40 +0530 Subject: [PATCH 1/4] Update index.html with get in touch, address and map Made Get in touch, address and map conatiner responsive and aligned neatly --- index.html | 280 +++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 208 insertions(+), 72 deletions(-) diff --git a/index.html b/index.html index 1cc48f8c..726888a0 100644 --- a/index.html +++ b/index.html @@ -893,6 +893,146 @@ .subscribe:hover { background-color: #2980b9; } + .section-contact { + padding: 60px 0; + background-color: #f9f9f9; + margin-bottom: 10px; +} + +.ctc { + text-align: center; + color: #333; + font-size: 36px; + margin-bottom: 5px; +} + +.p { + text-align: center; + color: #666; + margin-bottom: 10px; +} + +.flexi { + display: flex; + flex-direction: row; + justify-content: space-around; + flex-wrap: wrap; +} + +/* Contact and Address Box */ +.contact, .cardi { + flex-basis: 48%; + margin-bottom: 0; +} + +/* Contact Form */ +.contact { + background-color: #fff; + padding: 30px; /* Increased padding for better appearance */ + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + max-width: 600px; /* Set max width for larger screens */ + width: 100%; /* Full width within the flex container */ + height: fit-content; + transition: transform 0.3s; /* Smooth transition for hover effect */ +} + +.contact:hover { + transform: scale(1.02); /* Slightly enlarge on hover */ +} + +/* Contact Form Contents */ +.contact-container { + display: flex; + flex-direction: column; +} + +/* Form Fields */ +.contact-form label { + font-weight: bold; + margin-bottom: 5px; + color: #333; +} + +.contact-form input, +.contact-form textarea { + width: 100%; + padding: 12px; /* Increased padding for form fields */ + margin-bottom: 15px; /* Reduced margin */ + border: 1px solid #ccc; + border-radius: 5px; + font-size: 14px; +} + +.contact-form button { + background-color: #A30F17; + justify-content: center; + color: white; + padding: 12px 15px; /* Increased padding */ + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s; /* Smooth transition for hover */ +} + +.contact-form button:hover { + background-color: #811214; +} + +/* Contact Card */ +.contact-card { + display: flex; + justify-content: center; + background-color: white; + padding: 10px; /* Adjusted to reduce height */ + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + text-align: center; /* Center text inside the address box */ + margin-left: 30%; + margin-top: 20px; /* Space above the card */ + height: 310px; +} + +/* Image Fader Section */ +.image-fader img { + max-width: 150px; /* Increased width */ + margin: 0 10px; /* Increased spacing */ + justify-content: center; + transition: opacity 0.5s ease-in-out; +} + +/* Google Map Section */ +.map-container { + display: flex; /* Added to center */ + justify-content: center; /* Center the map */ + margin-top: 30px; + width: 100%; +} + +.map-container iframe { + width: 100%; + height: 300px; + border-radius: 10px; + border: none; +} + +/* Responsive Design */ +@media screen and (max-width: 768px) { + .flexi { + flex-direction: column; + align-items: center; /* Center items */ + margin-bottom: 20px; + } + + .contact, .cardi { + flex-basis: 130%; + max-width: 90%; /* Set max-width for smaller screens */ + margin-bottom: 30px; + } + + .map-container iframe { + height: 100px; + } @@ -2999,85 +3139,81 @@

Rate Us

- - - -
-

CONTACT US!

-

Have a Question?

- -
-
-

Get in touch

-
-
- - - - - - - - - - - - - -
- - +

CONTACT US!

+

Have a Question?

+
+
+

Get in touch

+
+
+ + + + + + + + + + + + + +
+ +
- ctc1 - ctc5 - ctc3 - ctc4 -
+ ctc1 + ctc5 + ctc3 + ctc4
+
+
- -
-
- -
-
- - -
- + +
+
+
+ + +
+ +
+
@@ -4232,4 +4368,4 @@

Privacy Notice

- \ No newline at end of file + From 78a3edff7973dcd321fe9fd8c5d361999351f7bc Mon Sep 17 00:00:00 2001 From: divyalakshmi0 <166861248+divyalakshmi0@users.noreply.github.com> Date: Sun, 6 Oct 2024 18:14:46 +0530 Subject: [PATCH 2/4] Update index.html with background color Just updated the colour of background from white to another color which matches the website --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 726888a0..e39a08d6 100644 --- a/index.html +++ b/index.html @@ -895,7 +895,7 @@ .section-contact { padding: 60px 0; - background-color: #f9f9f9; + background-color: #ffdcd4; margin-bottom: 10px; } From fd9164ab0bc69f8e6a4b81a7f1c9331ca095d601 Mon Sep 17 00:00:00 2001 From: divyalakshmi0 <166861248+divyalakshmi0@users.noreply.github.com> Date: Sun, 6 Oct 2024 20:14:43 +0530 Subject: [PATCH 3/4] Update index.html with Contact Us section I combined the map and address in a single container. Then added styles with hover effect and aligned perfectly to make the website more responsive --- index.html | 259 +++++++++++++++++++++-------------------------------- 1 file changed, 103 insertions(+), 156 deletions(-) diff --git a/index.html b/index.html index e39a08d6..7e813a93 100644 --- a/index.html +++ b/index.html @@ -893,146 +893,8 @@ .subscribe:hover { background-color: #2980b9; } - .section-contact { - padding: 60px 0; - background-color: #ffdcd4; - margin-bottom: 10px; -} - -.ctc { - text-align: center; - color: #333; - font-size: 36px; - margin-bottom: 5px; -} - -.p { - text-align: center; - color: #666; - margin-bottom: 10px; -} - -.flexi { - display: flex; - flex-direction: row; - justify-content: space-around; - flex-wrap: wrap; -} - -/* Contact and Address Box */ -.contact, .cardi { - flex-basis: 48%; - margin-bottom: 0; -} - -/* Contact Form */ -.contact { - background-color: #fff; - padding: 30px; /* Increased padding for better appearance */ - border-radius: 10px; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - max-width: 600px; /* Set max width for larger screens */ - width: 100%; /* Full width within the flex container */ - height: fit-content; - transition: transform 0.3s; /* Smooth transition for hover effect */ -} - -.contact:hover { - transform: scale(1.02); /* Slightly enlarge on hover */ -} - -/* Contact Form Contents */ -.contact-container { - display: flex; - flex-direction: column; -} - -/* Form Fields */ -.contact-form label { - font-weight: bold; - margin-bottom: 5px; - color: #333; -} - -.contact-form input, -.contact-form textarea { - width: 100%; - padding: 12px; /* Increased padding for form fields */ - margin-bottom: 15px; /* Reduced margin */ - border: 1px solid #ccc; - border-radius: 5px; - font-size: 14px; -} - -.contact-form button { - background-color: #A30F17; - justify-content: center; - color: white; - padding: 12px 15px; /* Increased padding */ - border: none; - border-radius: 5px; - cursor: pointer; - transition: background-color 0.3s; /* Smooth transition for hover */ -} - -.contact-form button:hover { - background-color: #811214; -} - -/* Contact Card */ -.contact-card { - display: flex; - justify-content: center; - background-color: white; - padding: 10px; /* Adjusted to reduce height */ - border-radius: 10px; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - text-align: center; /* Center text inside the address box */ - margin-left: 30%; - margin-top: 20px; /* Space above the card */ - height: 310px; -} - -/* Image Fader Section */ -.image-fader img { - max-width: 150px; /* Increased width */ - margin: 0 10px; /* Increased spacing */ - justify-content: center; - transition: opacity 0.5s ease-in-out; -} - -/* Google Map Section */ -.map-container { - display: flex; /* Added to center */ - justify-content: center; /* Center the map */ - margin-top: 30px; - width: 100%; -} - -.map-container iframe { - width: 100%; - height: 300px; - border-radius: 10px; - border: none; -} - -/* Responsive Design */ -@media screen and (max-width: 768px) { - .flexi { - flex-direction: column; - align-items: center; /* Center items */ - margin-bottom: 20px; - } - .contact, .cardi { - flex-basis: 130%; - max-width: 90%; /* Set max-width for smaller screens */ - margin-bottom: 30px; - } - .map-container iframe { - height: 100px; - } @@ -1234,6 +1096,89 @@ .nav{ justify-content: space-around; } + + +.section-contact { + color: black; + padding: 40px 20px; +} + +.flexi { + display: flex; + justify-content: space-between; /* Ensure both containers are side by side */ + flex-wrap: wrap; +} + +.contact { + width: 52%; /* Adjust width for the contact form */ +} + +.cardi { + width: 35%; /* Adjust width for the contact card */ + max-width: 350px; /* Limit max width */ + margin-left: 20px; /* Add some space between the two sections */ +} + +.contact-container { + background-color: var(--secondary-color); + padding: 20px; + border-radius: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +.contact-card { + background-color: var(--secondary-color); + padding: 20px; + border-radius: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + margin-top: 20px; /* Ensure there's space above the card */ +} + +.map-container { + display: flex; + justify-content: center; + align-items: center; /* Center map inside container */ + width: 100%; + height: 300px; /* Fixed height for map */ + margin-top: 20px; /* Space above map */ +} +.contact-form input, + .contact-form textarea { + width: 100%; + padding: 12px; + margin-bottom: 15px; + border: 1px solid #8f8d8d; + border-radius: 5px; + font-size: 14px; + } + .contact:hover { + transform: scale(1.02); /* Slightly enlarge on hover */ + } + + .cardi:hover { + transform: scale(1.02); + } + + +iframe { + width: 100%; + height: 100%; + border: none; /* Remove border for a cleaner look */ + border-radius: 10px; +} + +/* Responsive adjustments */ +@media (max-width: 768px) { + .flexi { + flex-direction: column; /* Stack elements on smaller screens */ + align-items: center; + } + .contact, .cardi { + width: 90%; /* Ensure full width on smaller screens */ + max-width: none; /* Remove max-width restriction */ + } +} + -
-

CONTACT US!

-

Have a Question?

+ +
+

+ Contact Us! + +

+

Have a Question?

+

GET IN TOUCH

-

Get in touch

@@ -3165,11 +3114,11 @@

Get in touch

- ctc1 - ctc5 - ctc3 - ctc4 -
+ ctc1 + ctc5 + ctc3 + ctc4 +
@@ -3203,20 +3152,18 @@

Get in touch

support@swapreads.com + +
+ +
- - -
- -
-