From a5cbab09a6e6bf39b2bc164d773b94cfa439f76f Mon Sep 17 00:00:00 2001 From: codercake Date: Wed, 19 Jun 2024 12:15:35 +0530 Subject: [PATCH 1/2] enhanced contact section responsiveness --- package-lock.json | 11 ++-- package.json | 2 +- public/css/admin_css.css | 137 ++++++++++++++++++++++++++++++++------- views/index.ejs | 73 ++++++++++----------- 4 files changed, 157 insertions(+), 66 deletions(-) diff --git a/package-lock.json b/package-lock.json index 54e035e..ec14d51 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,7 @@ "bcrypt": "^5.1.1", "body-parser": "^1.20.2", "connect-mongo": "^5.1.0", - "dotenv": "^16.3.1", + "dotenv": "^16.4.5", "ejs": "^3.1.9", "expree": "^2.1.0", "express": "^4.18.2", @@ -3701,14 +3701,15 @@ } }, "node_modules/dotenv": { - "version": "16.3.1", - "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz", - "integrity": "sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==", + "version": "16.4.5", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz", + "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==", + "license": "BSD-2-Clause", "engines": { "node": ">=12" }, "funding": { - "url": "https://github.com/motdotla/dotenv?sponsor=1" + "url": "https://dotenvx.com" } }, "node_modules/duplexify": { diff --git a/package.json b/package.json index 07fbb34..91ad0c8 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "bcrypt": "^5.1.1", "body-parser": "^1.20.2", "connect-mongo": "^5.1.0", - "dotenv": "^16.3.1", + "dotenv": "^16.4.5", "ejs": "^3.1.9", "expree": "^2.1.0", "express": "^4.18.2", diff --git a/public/css/admin_css.css b/public/css/admin_css.css index 4ad6d37..fe85553 100644 --- a/public/css/admin_css.css +++ b/public/css/admin_css.css @@ -1,12 +1,11 @@ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap'); -body{ +body { font-family: 'Poppins', sans-serif; background: #ececec; } /* Dark Mode */ - .dark-mode { background-color: #121212; color: #e0e0e0; @@ -46,45 +45,137 @@ body{ } /*------------ Login container ------------*/ - -.box-area{ +.box-area { width: 930px; } /*------------ Right box ------------*/ - -.right-box{ +.right-box { padding: 40px 30px 40px 40px; } /*------------ Custom Placeholder ------------*/ - -::placeholder{ +::placeholder { font-size: 16px; } -.rounded-4{ +.rounded-4 { border-radius: 20px; } -.rounded-5{ +.rounded-5 { border-radius: 30px; } - -/*------------ mobile------------*/ - -@media only screen and (max-width: 768px){ - - .box-area{ +/*------------ Mobile------------*/ +@media only screen and (max-width: 768px) { + .box-area { margin: 0 10px; - - } - .left-box{ + } + .left-box { height: 100px; overflow: hidden; - } - .right-box{ + } + .right-box { padding: 20px; - } + } +} -} \ No newline at end of file +/*------------ Contact Section ------------*/ +.contact-section { + padding: 20px; + background-color: #333; /* Dark background color */ + color: #fff; /* White text color */ +} + +.contact-section-header { + text-align: center; + margin-bottom: 20px; +} + +.contact-section-header h2 { + font-size: 2rem; + margin-bottom: 10px; +} + +.contact-section-header .text { + font-size: 1.5rem; + margin-bottom: 10px; +} + +.contact-section-header p { + font-size: 1rem; +} + +.contact-container { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 20px; +} + +.contact-container .left, +.contact-container .right { + flex: 1; +} + +.contact-container .left img { + width: 100%; + border-radius: 10px; +} + +.contact-container .right { + display: flex; + flex-direction: column; + justify-content: center; +} + +.contact-container .right form { + width: 100%; +} + +.contact-container .right .form-control, +.contact-container .right .btn { + margin-bottom: 15px; + border-radius: 5px; +} + +.contact-container .right .form-control { + padding: 10px; + font-size: 1rem; + border: 1px solid #ccc; + background-color: #444; /* Slightly lighter background */ + color: #fff; +} + +.contact-container .right .form-control::placeholder { + color: #ccc; +} + +.contact-container .right .btn { + background-color: #28a745; + color: #fff; + font-size: 1rem; + padding: 10px; + border: none; +} + +.contact-container .right .btn:hover { + background-color: #218838; +} + +@media (max-width: 767.98px) { + .contact-container { + flex-direction: column; + align-items: center; + } + + .contact-container .left, + .contact-container .right { + flex: none; + width: 100%; + } + + .contact-container .right form { + width: 100%; + } +} diff --git a/views/index.ejs b/views/index.ejs index 2b85ed2..03401c2 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -234,47 +234,46 @@ - -
-
-

Any Query

-
Get in Touch
-

Thank you for visiting to petari. Connect with me over socials. -
- Please wait for a while all major projects will be listed soon. Till then keep visiting. - Connect with me over live chat! -

-
-
-
- + +
+
+

Any Query

+
Get in Touch
+

Thank you for visiting Petari. Connect with me over socials. +
+ Please wait for a while all major projects will be listed soon. Till then keep visiting. + Connect with me over live chat! +

+
+
+
+ Food Image +
+
+
+
+
+
-
- -
-
- -
- -
-
- -
-
- -
-
- -
- +
+
-
- +
+ +
+
+ +
+
+ +
+ +
+
+
- +