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..d6a04a6 100644 --- a/public/css/admin_css.css +++ b/public/css/admin_css.css @@ -1,12 +1,13 @@ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap'); -body{ +body { font-family: 'Poppins', sans-serif; background: #ececec; + margin: 0; + padding: 0; } /* Dark Mode */ - .dark-mode { background-color: #121212; color: #e0e0e0; @@ -46,45 +47,147 @@ body{ } /*------------ Login container ------------*/ - -.box-area{ +.box-area { width: 930px; + margin: 0 auto; + background-color: #FFF; /* Light background color */ + padding: 20px; + border-radius: 10px; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); } /*------------ 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 { + width: 100%; + padding: 10px; + } + .left-box { + height: 100px; + overflow: hidden; + } + .right-box { + padding: 20px; + } +} -/*------------ mobile------------*/ +/*------------ Contact Section ------------*/ +.contact-section { + padding: 40px 20px; + background-color: #333; /* Dark background color */ + color: #fff; /* White text color */ +} -@media only screen and (max-width: 768px){ +.contact-section-header { + text-align: center; + margin-bottom: 20px; +} - .box-area{ - margin: 0 10px; +.contact-section-header h2 { + font-size: 2rem; + margin-bottom: 10px; +} - } - .left-box{ - height: 100px; - overflow: hidden; - } - .right-box{ - padding: 20px; - } +.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: space-between; + 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%; + max-width: 400px; + margin: 0 auto; +} + +.contact-container .right .form-control, +.contact-container .right .btn { + margin-bottom: 15px; + border-radius: 5px; + width: calc(100% - 20px); /* Adjusted for padding */ + 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: 12px 20px; /* Adjusted padding */ + border: none; + cursor: pointer; + text-align: center; + transition: background-color 0.3s ease; +} + +.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%; + } } \ No newline at end of file diff --git a/public/css/style.css b/public/css/style.css index 3a3cb54..4388b34 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -39,6 +39,7 @@ body { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); } + /* */ .navbar-nav .nav-opt { color: black; diff --git a/views/index.ejs b/views/index.ejs index 2b85ed2..edea778 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -7,56 +7,63 @@ Petari - - + - - - + - + + + + + - + - +
-
-
- -