diff --git a/Carousel.js b/Carousel.js new file mode 100644 index 00000000..e51a800c --- /dev/null +++ b/Carousel.js @@ -0,0 +1,51 @@ +document.addEventListener('DOMContentLoaded', function () { + const slides = document.querySelector('.slides'); + const radioButtons = document.querySelectorAll('input[name="radio-btn"]'); + const labels = document.querySelectorAll('.manual-btn'); + const prevButton = document.getElementById('prevSlide'); + const nextButton = document.getElementById('nextSlide'); + let currentSlide = 0; + + function showSlide(index) { + slides.style.transform = `translateX(-${index * 14.29}%)`; + radioButtons[index].checked = true; + updateActiveLabel(index); + } + + function updateActiveLabel(index) { + labels.forEach((label, i) => { + if (i === index) { + label.classList.add('active'); + } else { + label.classList.remove('active'); + } + }); + } + + function nextSlide() { + currentSlide = (currentSlide + 1) % radioButtons.length; + showSlide(currentSlide); + } + function prevSlide() { + currentSlide = (currentSlide - 1 + radioButtons.length) % radioButtons.length; + showSlide(currentSlide); + } + + // Add click event listeners to radio buttons + radioButtons.forEach((radio, index) => { + radio.addEventListener('click', () => { + currentSlide = index; + showSlide(currentSlide); + }); + }); + + // Add click event listeners to Prev and Next buttons + prevButton.addEventListener('click', prevSlide); + nextButton.addEventListener('click', nextSlide); + + // Show first slide initially + showSlide(0); + + // Automatic slide change + setInterval(nextSlide, 5000); +}); diff --git a/README.md b/README.md index e496015a..a00a67ea 100644 --- a/README.md +++ b/README.md @@ -3,6 +3,11 @@ --- +## 📈 GitHub Repository Stats +| 🌟 **Stars** | 🍴 **Forks** | 🐛 **Issues** | 🔔 **Open PRs** | 🔕 **Closed PRs** | 🛠️ **Languages** | ✅ **Contributors** | +|--------------|--------------|---------------|-----------------|------------------|------------------|------------------| +| ![GitHub stars](https://img.shields.io/github/stars/ANSHIKA-26/WordWise) | ![forks](https://img.shields.io/github/forks/ANSHIKA-26/WordWise) | ![issues](https://img.shields.io/github/issues/ANSHIKA-26/WordWise?color=32CD32) | ![pull requests](https://img.shields.io/github/issues-pr/ANSHIKA-26/WordWise?color=FFFF8F) | ![Closed PRs](https://img.shields.io/github/issues-pr-closed/ANSHIKA-26/WordWise?color=20B2AA) | ![Languages](https://img.shields.io/github/languages/count/ANSHIKA-26/WordWise?color=20B2AA) | ![Contributors](https://img.shields.io/github/contributors/ANSHIKA-26/WordWise?color=00FA9A) | + ## Featured In diff --git a/backend/.env.example b/backend/.env.example index f1d747d3..61078343 100644 --- a/backend/.env.example +++ b/backend/.env.example @@ -1,3 +1,4 @@ +# MONGO_URI=mongodb://localhost:27017/bloggingdb MONGO_URI=mongodb://localhost:27017/bloggingdb JWT_SECRET=scijyasfy7dsvegdffvbfbfgg435tgrsnbgfgn PORT=5000 diff --git a/backend/app.js b/backend/app.js index d4031516..38a34d4d 100644 --- a/backend/app.js +++ b/backend/app.js @@ -2,7 +2,9 @@ import express from "express"; import dotenv from "dotenv"; import connectDB from "./utils/db.js"; import blogRoutes from "./routes/blogRoutes.js"; -import userRoutes from "./routes/userRoutes.js"; +import userRoutes from "./routes/userRoutes.js"; +import feedbackRoutes from "./routes/feebackroute.js"; +import cors from "cors"; dotenv.config(); const app = express(); @@ -10,8 +12,12 @@ connectDB(); app.use(express.json()); +// to avoid cross origin errror +app.use(cors()); + app.use("/api/users", userRoutes); app.use("/api/blogs", blogRoutes); +app.use("/api/feedback", feedbackRoutes); const PORT = process.env.PORT || 5000; app.listen(PORT, () => { diff --git a/backend/controllers/blogController.js b/backend/controllers/blogController.js index 59d838ac..ea9e498b 100644 --- a/backend/controllers/blogController.js +++ b/backend/controllers/blogController.js @@ -1,4 +1,5 @@ import Blog from "../models/blog.js"; +import Comment from "../models/comment.js"; export const createBlog = async (req, res) => { try { @@ -52,3 +53,38 @@ export const getSingleBlog = async (req, res) => { res.status(500).json({ message: error.message }); } }; + +export const saveComment = async (req, resp) => { + try { + const { name, comment } = req.body; + + if (!name || !comment) { + return resp.status(400).send({ + message: "all fields are required", + success: false, + }); + } + + const newcomment = await new Comment({ + name: name, + comment: comment, + }); + + newcomment.save(); + + if (newcomment) { + return resp.status(200).send({ + success: true, + message: "new comment added", + newcomment, + }); + } + } catch (error) { + console.log(error); + return resp.status(500).send({ + success: false, + message: "internal server error", + error, + }); + } +}; diff --git a/backend/controllers/feedbackcontroller.js b/backend/controllers/feedbackcontroller.js new file mode 100644 index 00000000..335652f2 --- /dev/null +++ b/backend/controllers/feedbackcontroller.js @@ -0,0 +1,24 @@ +import feedback from "../models/feedback.js"; + +export async function saveFeedback(req, resp) { + try { + const { name, userfeedback, email, rating } = req.body; + + if (!name || !userfeedback || !email || typeof rating !== "number") { + return resp.status(400).json({ message: "All fields are required." }); + } + + const newfeedback = new feedback({ name, userfeedback, email, rating }); + + // Save feedback to the database + await newfeedback.save(); + + // Respond with success message + resp + .status(201) + .json({ message: "Feedback saved successfully!", newfeedback }); + } catch (error) { + console.error("Error saving feedback:", error); + resp.status(500).json({ message: "Failed to save feedback.", error }); + } +} diff --git a/backend/controllers/userController.js b/backend/controllers/userController.js index 27d2b586..5c0812cf 100644 --- a/backend/controllers/userController.js +++ b/backend/controllers/userController.js @@ -1,6 +1,8 @@ import User from "../models/user.js"; import jwt from "jsonwebtoken"; import dotenv from "dotenv"; +import nodemailer from "nodemailer"; +import bcrypt from "bcryptjs"; dotenv.config(); // Generate JWT token @@ -99,3 +101,124 @@ export const getAllUsers = async (req, res) => { res.status(500).json({ message: error.message }); } }; + +export function ForgotPassWordEmail(req, resp) { + const transporter = nodemailer.createTransport({ + service: "gmail", + auth: { + user: "your email id", + pass: "your password", + }, + }); + + const mailOptions = { + from: "your email id", + to: req.body.Email, + subject: "WordWise Reset Password", + html: ` + + + + + + Password Reset + + + +
+

Password Reset Request

+

Hello,

+

We received a request to reset your password. Click the button below to proceed with resetting your password.

+
+ Reset Password +
+ +

Thank you,
Team WordWise

+
+ + + `, + }; + + transporter.sendMail(mailOptions, (error, info) => { + if (error) { + console.log("Error sending email: " + error); + resp.status(500).send("Error sending email"); + } else { + console.log("Email sent: " + info.response); + resp.status(200).send("Form data sent successfully"); + } + }); +} + +export async function ResetPassword(req, resp) { + try { + const { password, email } = req.body; + + const user = await User.findOne({ email }); + if (!user) { + return resp + .status(404) + .json({ success: false, message: "User not found" }); + } + + const saltRounds = 10; + const hashedPassword = await bcrypt.hash(password, saltRounds); + + user.password = hashedPassword; + await user.save(); + + resp + .status(200) + .json({ success: true, message: "Password reset successfully" }); + } catch (error) { + console.error("Error resetting password:", error); + resp.status(500).json({ + success: false, + message: "An error occurred. Please try again later.", + }); + } +} diff --git a/backend/models/comment.js b/backend/models/comment.js new file mode 100644 index 00000000..88afd9d9 --- /dev/null +++ b/backend/models/comment.js @@ -0,0 +1,21 @@ +import { mongoose } from "mongoose"; + +const commentSchema = new mongoose.Schema( + { + name: { + type: String, + required: true, + trim: true, + }, + comment: { + type: String, + required: true, + trim: true, + }, + }, + { timestamps: true } +); + +const Comment = mongoose.model("Comment", commentSchema); + +export default Comment; diff --git a/backend/models/feedback.js b/backend/models/feedback.js new file mode 100644 index 00000000..08064d10 --- /dev/null +++ b/backend/models/feedback.js @@ -0,0 +1,29 @@ +import { mongoose } from "mongoose"; + +const feedbackSchema = new mongoose.Schema( + { + name: { + type: String, + required: true, + trim: true, + }, + userfeedback: { + type: String, + required: true, + trim: true, + }, + email: { + type: String, + required: true, + }, + rating: { + type: Number, + required: true, + }, + }, + { timestamps: true } +); + +const feedback = mongoose.model(" feedback", feedbackSchema); + +export default feedback; diff --git a/backend/package-lock.json b/backend/package-lock.json index b509023c..a8eded66 100644 --- a/backend/package-lock.json +++ b/backend/package-lock.json @@ -10,12 +10,14 @@ "license": "ISC", "dependencies": { "bcryptjs": "^2.4.3", + "cors": "^2.8.5", "dotenv": "^16.4.5", "express": "^4.21.1", "express-validator": "^7.2.0", "jsonwebtoken": "^9.0.2", "mongoose": "^8.7.1", - "multer": "^1.4.5-lts.1" + "multer": "^1.4.5-lts.1", + "nodemailer": "^6.9.16" }, "devDependencies": { "nodemon": "^3.1.7" @@ -281,6 +283,19 @@ "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz", "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==" }, + "node_modules/cors": { + "version": "2.8.5", + "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz", + "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==", + "license": "MIT", + "dependencies": { + "object-assign": "^4", + "vary": "^1" + }, + "engines": { + "node": ">= 0.10" + } + }, "node_modules/debug": { "version": "2.6.9", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", @@ -1025,6 +1040,15 @@ "node": ">= 0.6" } }, + "node_modules/nodemailer": { + "version": "6.9.16", + "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-6.9.16.tgz", + "integrity": "sha512-psAuZdTIRN08HKVd/E8ObdV6NO7NTBY3KsC30F7M4H1OnmLCUNaS56FpYxyb26zWLSyYF9Ozch9KYHhHegsiOQ==", + "license": "MIT-0", + "engines": { + "node": ">=6.0.0" + } + }, "node_modules/nodemon": { "version": "3.1.7", "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.7.tgz", diff --git a/backend/package.json b/backend/package.json index c8f0fbf8..35cf3218 100644 --- a/backend/package.json +++ b/backend/package.json @@ -13,12 +13,14 @@ "description": "", "dependencies": { "bcryptjs": "^2.4.3", + "cors": "^2.8.5", "dotenv": "^16.4.5", "express": "^4.21.1", "express-validator": "^7.2.0", "jsonwebtoken": "^9.0.2", "mongoose": "^8.7.1", - "multer": "^1.4.5-lts.1" + "multer": "^1.4.5-lts.1", + "nodemailer": "^6.9.16" }, "devDependencies": { "nodemon": "^3.1.7" diff --git a/backend/routes/blogRoutes.js b/backend/routes/blogRoutes.js index 8eb150ee..dbf89f32 100644 --- a/backend/routes/blogRoutes.js +++ b/backend/routes/blogRoutes.js @@ -5,6 +5,7 @@ import { deleteBlog, getAllBlogs, getSingleBlog, + saveComment, } from "../controllers/blogController.js"; import authMiddleware from "../middlewares/authMiddleware.js"; import adminMiddleware from "../middlewares/adminMiddleware.js"; @@ -23,4 +24,7 @@ router.put("/:id", authMiddleware, blogValidation, updateBlog); // Admin-only routes router.delete("/:id", authMiddleware, adminMiddleware, deleteBlog); +// save user comments +router.post("/savecomment", saveComment); + export default router; diff --git a/backend/routes/feebackroute.js b/backend/routes/feebackroute.js new file mode 100644 index 00000000..51a5ed41 --- /dev/null +++ b/backend/routes/feebackroute.js @@ -0,0 +1,7 @@ +import express from "express"; +const router = express.Router(); +import { saveFeedback } from "../controllers/feedbackcontroller.js"; + +router.post("/savefeedback", saveFeedback); + +export default router; diff --git a/backend/routes/userRoutes.js b/backend/routes/userRoutes.js index a93f5d41..06d711e6 100644 --- a/backend/routes/userRoutes.js +++ b/backend/routes/userRoutes.js @@ -4,6 +4,8 @@ import { loginUser, getUserProfile, getAllUsers, + ForgotPassWordEmail, + ResetPassword, } from "../controllers/userController.js"; import authMiddleware from "../middlewares/authMiddleware.js"; import adminMiddleware from "../middlewares/adminMiddleware.js"; @@ -20,4 +22,8 @@ router.get("/profile", authMiddleware, getUserProfile); // Admin route to get all users router.get("/", authMiddleware, adminMiddleware, getAllUsers); +router.post("/forgotpassword", ForgotPassWordEmail); + +router.post("/resetpassword", ResetPassword); + export default router; diff --git a/blog-comment.js b/blog-comment.js index 00e89a04..f2fbb8b9 100644 --- a/blog-comment.js +++ b/blog-comment.js @@ -139,7 +139,7 @@ function showToast(message, type) { toast.style.transition = "opacity 0.5s, transform 0.5s"; toast.style.boxShadow = "0 4px 20px rgba(0, 0, 0, 0.2)"; - // Apply different styles based on the type of toast + // Apply different styles based on the type of toast if (type === "success") { toast.style.backgroundColor = "rgba(40, 167, 69, 0.75)"; // Slightly transparent green } else if (type === "error") { @@ -165,3 +165,45 @@ function showToast(message, type) { }, 500); }, 3000); } +async function saveComment(event) { + event.preventDefault(); // Prevent the default form submission + + // Get values from the form inputs + const name = document.getElementById("commenterName").value.trim(); + const comment = document.getElementById("commentText").value.trim(); + + // Check if both name and comment fields are filled + if (!name || !comment) { + alert("All fields are required."); + return; + } + + // Prepare data to send to the server + const data = { name, comment }; + + try { + // Make the API request to save the comment + const response = await fetch( + "http://localhost:5000/api/blogs/savecomment", + { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(data), + } + ); + + // Handle the response + const result = await response.json(); + if (result.success) { + alert(result.message); // Show success message + document.getElementById("commentForm").reset(); // Clear the form + } else { + alert(result.message); // Show error message from server + } + } catch (error) { + console.error("Error:", error); + alert("An error occurred. Please try again later."); + } +} diff --git a/blog.html b/blog.html index 132cee45..6beaf165 100644 --- a/blog.html +++ b/blog.html @@ -4,169 +4,178 @@ - WordWise + WordWise - Blog + + - - + + + + + + + + - function loadBookmarks() { - let bookmarks = JSON.parse(localStorage.getItem("bookmarks")) || []; - if (bookmarks.includes(articleTitle)) { - bookmarkText.textContent = "Bookmarked"; - } - } - }); - - - -
- - -      -
- - - - - -
- -
- - -
- -
-
- Travel
- My Reading List -
-

-
-
- - anshika arora - - - feb 12, 2021 - - - 3 - - - - Bookmark - -
- - -
- -
- -
- -
-

+ +

+ +
+ + +
-
-
-
-
+

Feature Post

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

Popular Tags

- -
-
- Travel - Food - Lifestyle - Techonogy - Fashion -
-
- -

Connect with us

- - - - -
- -
-
-

© WordWise. All rights reserved.

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

© WordWise. All rights reserved.

+
+
+ +
- + diff --git a/contact_us.html b/contact_us.html index a185ffda..235d81ff 100644 --- a/contact_us.html +++ b/contact_us.html @@ -84,6 +84,7 @@ +
@@ -98,12 +99,12 @@

WordWise

-
+
-
+
- +
-

- Get in Touch -

-

- We are here for you. How can we help? -

+ display: flex; + flex-direction: row; + height: auto; + justify-content: space-between; + align-items: center; + max-width: 900px; + margin: 50px auto; + padding: 50px; + background-color: var(--background-color); + border-radius: 10px; + color: var(--text-color); + margin-top: 100px; + border: 1px solid var(--text-color); + flex-wrap: wrap; + box-shadow: 0px 3px 6px #fca5a5; + text-align: center; +"> + + +
+

Get in Touch

+

+ We are here for you. Let us know how we can assist you. +

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

Connect with us

+ + - -
- -
@@ -638,11 +633,11 @@

Popular Tags

- Travel - Food - Lifestyle - Techonogy - Fashion + Travel + Food + Lifestyle + Techonogy + Fashion
@@ -695,8 +690,6 @@

Connect with us

+ - - - - \ No newline at end of file + \ No newline at end of file diff --git a/contact_us.js b/contact_us.js index 0f89718b..6ed7232f 100644 --- a/contact_us.js +++ b/contact_us.js @@ -4,11 +4,49 @@ document.addEventListener("DOMContentLoaded", () => { sendEmailButton.addEventListener("click", SendEmail); }); +const trustedDomains = [ + 'gmail.com', + 'outlook.com', + 'yahoo.com', + 'protonmail.com', + 'icloud.com', + 'tutanota.com', + 'hotmail.com', + 'live.com', + 'mail.com', + 'zoho.com', + 'gmx.com', + 'aol.com', + 'fastmail.com', + 'yandex.com', + '*.edu', + '*.ac.uk', + '*.edu.in', + '*.edu.au', + 'examplecompany.com', + 'mailfence.com', + 'posteo.de', + 'runbox.com' +]; + +// Email validation function to check format and domain +function ValidateTrustEmail(email) { + const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // Basic email format validation + const domain = email.split('@')[1]; + + return ( + emailPattern.test(email) && + trustedDomains.some((trusted) => + trusted.includes('*') ? domain.endsWith(trusted.slice(1)) : domain === trusted + ) + ); +} + async function SendEmail(event) { event.preventDefault(); - const Name = document.getElementById("Name").value.trim(); // Corrected ID - const email = document.getElementById("email2").value.trim(); // Corrected ID + const Name = document.getElementById("Name").value.trim(); + const email = document.getElementById("email2").value.trim(); const phone = document.getElementById("phone").value.trim(); const message = document.getElementById("message").value.trim(); @@ -18,24 +56,17 @@ async function SendEmail(event) { return; } - if (!validateEmail(email)) { - alert("Please enter a valid email address."); + if (!ValidateTrustEmail(email)) { + alert("Please enter a valid email address from a trusted provider."); return; } - console.log(Name, email, phone, message); // Corrected variable name - if (message.length < 10) { alert("Message must be at least 10 characters long."); return; } - const data = { - Name: Name, - email: email, - phone: phone, - message: message, - }; + const data = { Name, email, phone, message }; try { const response = await fetch("http://127.0.0.1:3000/send-email", { @@ -52,7 +83,6 @@ async function SendEmail(event) { } else { handleErrorResponse(result); } - } catch (error) { console.error("Error sending email:", error); alert("Error sending email. Please try again later."); diff --git a/darkMode.js b/darkMode.js index 9c05684b..4db2f61c 100644 --- a/darkMode.js +++ b/darkMode.js @@ -9,7 +9,7 @@ const applyTheme = (theme) => { checkbox.checked = (theme === 'dark'); // Update the label text based on the current theme - modeLabel.textContent = theme === 'dark' ? 'Dark Mode' : 'Light Mode'; + modeLabel.textContent = theme === 'dark' ? '' : ''; }; // Check for saved theme in localStorage or use system preference diff --git a/fashion.html b/fashion.html index e31f301a..2a5ecba2 100644 --- a/fashion.html +++ b/fashion.html @@ -12,7 +12,7 @@ The Art of Fashion + + + + +
+ + +
+ + +
+ + + + +
+ +
+ + +
+ +
+
+ Technology
+ My Reading List +
+

+
+
+ + Krish Patel + + + feb 12, 2021 + + + 3 + + + + Bookmark + +
+ + +
+ +
+ +
+ +
+

Gaming Chronicles: A Journey Through Video Game History

+
+
+ +

The evolution of video games is a tale of creativity, technology, and cultural impact. From simple pixelated arcade games to today's immersive virtual worlds, gaming has grown into a multi-billion-dollar industry with global influence. Here's a look at the key milestones in gaming history and how it has evolved over the decades.

+
+ +

The Arcade Era and the Birth of Gaming

+

Video games emerged in the 1960s and 1970s, with early titles like Spacewar! (1962) and Pong (1972) sparking a revolution. The 1970s and 1980s, known as the "Arcade Era," saw the rise of iconic games like Pac-Man and Donkey Kong. Arcades became the hub of gaming culture, with players competing for high scores in public spaces.

+
+ +

The Rise of Home Consoles

+

The late 1970s introduced home gaming consoles like the Atari 2600, bringing gaming into living rooms. Although the video game crash of 1983 nearly halted the industry's growth, Nintendo's release of the NES and Super Mario Bros. in 1985 revived it, setting the stage for home console gaming to flourish.

+
+ +

The 16-Bit Wars: Nintendo vs. Sega

+

In the late 1980s and early 1990s, the fierce rivalry between Nintendo's SNES and Sega's Genesis fueled rapid innovation. This era produced classics like The Legend of Zelda, Sonic the Hedgehog, and Street Fighter II, shaping a golden age of video gaming.

+
+ +

The 3D Revolution

+

The mid-1990s ushered in 3D graphics, transforming the gaming experience. Titles like Super Mario 64, Tomb Raider, and Final Fantasy VII redefined game design, offering open-world environments and deeper storytelling. Sony's PlayStation, released in 1994, became a major player, while PC games like Doom and Quake also pushed technical boundaries.

+
+ +

The Online Gaming Era

+

The rise of the internet in the late 1990s and early 2000s brought online multiplayer gaming into the mainstream. MMORPGs like World of Warcraft and online-enabled consoles like the Xbox with Xbox Live created global gaming communities, changing how players interacted.

+
+ +

The Modern Era: Immersion and Inclusivity

+

In the 2010s, games became more complex, with titles like The Witcher 3 and The Last of Us delivering cinematic experiences. Virtual reality (VR) emerged, providing immersive gameplay, while indie developers explored deeper themes in games like Celeste and Undertale. Esports also grew into a global phenomenon, making competitive gaming a major spectator sport.

+
+ +

The Future of Gaming

+

Looking ahead, gaming's future is driven by advances in AI, cloud gaming, and virtual reality. Services like Google Stadia and Xbox Cloud Gaming are making games more accessible, while VR and augmented reality promise to reshape how we experience digital worlds.

+
+ +

Conclusion: The Ever-Evolving World of Games

+

The history of gaming showcases humanity's drive for creativity and innovation. From arcade cabinets to virtual worlds, gaming has become an integral part of global culture, and its future promises even more exciting possibilities. Whether you're a casual player or a competitive gamer, the story of video games continues to evolve, and the next chapter is just beginning.

+
+ + +
+ + +
+ +
+
+ Travel + Food + Lifestyle + Technology + Fashion + +
+
+
+ + +
+
+

Krish Patel

+

+ Author Info +

+
+ + + + + + + +
+
+
+ + +
+
+ + +
+
+ +
+
+
+

+ + Join the Conversation + +

+ + +
+

Share Your Thoughts

+
+
+ + +
+
+ + +
+ + + +
+ + +
+ +
+
+
+
+ + + + + + +
+ +
+ + +
+ +
+
+ +
+ + + +
+ + + + + + +
+ + + + + + + + + + + +
+ + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + diff --git a/health.html b/health.html index d806d585..e3b635d0 100644 --- a/health.html +++ b/health.html @@ -12,7 +12,7 @@ Health & Wellness + @media (max-width: 576px) { + .feature-post div { + align-items: center; + } + .tags.social { + justify-content: center; + } - -.form-container { - max-width: 350px; - padding: 20px; -} -.form-group input { - width: 100%; - padding: 1px; + - - + + + - +
- -
-
-
-
- -
- -
- - - - -
- Home - Leading Blog - Start Writing - Categories - - Contact Us - Give Feedback +
+ + - - - - - -
- - -
-
- - - + .logo a h2 { + font-size: 24px; + } +} */ + + + .dropdown-menu { + display: none; + position: absolute; + right: 0; + background-color: #fff; + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); + z-index: 1; + } + + .dropdown:hover .dropdown-menu { + display: block; + } + + + + + + + + -
+
-
-
+
+
-
+
- +
-
- +
+ Roaming Routes

@@ -465,8 +662,10 @@

Forgot Password

13 @@ -483,13 +682,15 @@

Forgot Password

- +
-
- +
+ Gaming Chronicles @@ -497,12 +698,16 @@

Forgot Password

Mon 13,2023   12 - - - + + +

@@ -516,12 +721,14 @@

Forgot Password

- +
-
+
Virtual Realms @@ -532,9 +739,11 @@

Forgot Password

Wed 09,2023   19 - @@ -586,12 +799,14 @@

Forgot Password

- +
-
+
Mouthwatering Memoirs @@ -602,9 +817,11 @@

Forgot Password

Tue 02,2021   10 - @@ -658,12 +879,14 @@

Forgot Password

- +
-
+
Culinary Delights @@ -675,8 +898,10 @@

Forgot Password

12 @@ -693,14 +918,16 @@

Forgot Password

- +
-
+
- Voyage Vista: Where Travel Dreams Take Flight + Voyage Vista: Where Travel Dreams Take Flight @@ -710,8 +937,10 @@

Forgot Password

12 @@ -728,14 +957,16 @@

Forgot Password

- +
-
+
- Beak & Claw: A Chronicle of Birds in the Wild + Beak & Claw: A Chronicle of Birds in the Wild @@ -744,9 +975,11 @@

Forgot Password

Wed 02,2023   12 - - -

-
- -
-
-
- - -
-
-
-
- - + +
+ + +
+ +
+ + +
+ -
- - -
- -
- - -
-
+
- -
- - -
- +
+
- -
+ +
- +
- + +
@@ -983,15 +1239,8 @@

Forgot Password

Slide 6
- - -
-
-
-
-
-
-
+
+ Slide 7
@@ -1003,111 +1252,178 @@

Forgot Password

+
+ + +
- -
- - -
-
-

Frequently Asked Questions

-
-
-
-

How do I switch between dark and light themes?

- - - -
-
- -

You can easily switch between dark and light themes by clicking the theme toggle button located in the website header. This allows you to customize your viewing experience according to your preference.

-
-
+
+
+ + +
+
+

Frequently Asked Questions

+
+
+
+

How do I switch between dark and light themes?

+ + + +
+
+ +

You can easily switch between dark and light themes by clicking + the theme toggle button located in the website header. This allows you to customize your + viewing experience according to your preference.

+
+
-
-
-

How do I use the 'Start Writing' page?

- - - -
-
- -

The 'Start Writing' page provides a simple interface for quickly creating and publishing blog posts. Just click "Start Writing" from the navigation bar, fill in your title, content, and tags, and publish your blog with a single click.

-
-
+
+
+

How do I use the 'Start Writing' page?

+ + + +
+
+ +

The 'Start Writing' page provides a simple interface for + quickly creating and publishing blog posts. Just click "Start Writing" from the + navigation bar, fill in your title, content, and tags, and publish your blog with a + single click.

+
+
-
-
-

How does the sliding bar with latest blogs work?

- - - -
-
- -

The sliding bar on the home page features the latest blogs published on the platform. It updates automatically and allows users to easily scroll through and click on any blog that catches their attention.

-
-
+
+
+

How does the sliding bar with latest blogs work?

+ + + +
+
+ +

The sliding bar on the home page features the latest blogs + published on the platform. It updates automatically and allows users to easily scroll + through and click on any blog that catches their attention.

+
+
-
-
-

How are top picks chosen for the leading blog page?

- - - -
-
- -

Top picks are curated by a combination of editor recommendations and user engagement metrics, such as views, likes, and comments, to highlight the best content available on Word Wise.

+
+
+

How are top picks chosen for the leading blog page?

+ + + +
+
+ +

Top picks are curated by a combination of editor + recommendations and user engagement metrics, such as views, likes, and comments, to + highlight the best content available on Word Wise.

+
+
+ +
+
+

How can I stay updated with new blog posts?

+ + + +
+ +
+ +

You can stay updated by following your favorite authors or + topics, and by checking the sliding bar for the latest blog posts. You can also + subscribe to newsletters or enable notifications for real-time updates.

+
+
+
-
-
-

How can I stay updated with new blog posts?

- - - -
- -
- -

You can stay updated by following your favorite authors or topics, and by checking the sliding bar for the latest blog posts. You can also subscribe to newsletters or enable notifications for real-time updates.

-
+ +
+

Word of the Day 📘

+
+
+

Word:

+

Placeholder Word

+
+
+

Definition:

+

Placeholder Definition

+
+
+

Sentence:

+

Placeholder sentence

-
- - -
-

Word of the Day

-

-

-
- - - - -
-
-

Subscribe to Our Newsletter

-

Stay updated with the latest articles and insights from WordWise.

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

Subscribe to Our Newsletter

+

Stay updated with the latest articles and insights from WordWise.

+
+ + +
+ +
+ + + +
+ + - - + + +
@@ -1115,10 +1431,10 @@

Subscribe to Our Newsletter

chatbot Welcome to Word Wise !
- How can I help You? ^_^ + How can I help You? ^_^ - +
@@ -1128,153 +1444,177 @@

Subscribe to Our Newsletter

- - - - - + +
+
+

© WordWise. All rights reserved.

+
+
+ + + + + + @@ -1288,56 +1628,62 @@

Connect with us

- - - + + + - -
- - - + + + +
+ + + + + + + \ No newline at end of file diff --git a/life.html b/life.html index c3cbaf07..20a1775c 100644 --- a/life.html +++ b/life.html @@ -12,7 +12,7 @@ Living Your Best Life + + +
+

Reset Your Password

+
+
+ +
+
+ + 👁️ +
+
+ + 👁️ +
+ +

+ +
+ + + + diff --git a/script.js b/script.js index 3c31e9c5..e4950c0c 100644 --- a/script.js +++ b/script.js @@ -1,89 +1,93 @@ -document.getElementById('newsletterForm').addEventListener('submit', function(e) { - e.preventDefault(); // Prevent form submission +document + .getElementById("newsletterForm") + .addEventListener("submit", function (e) { + e.preventDefault(); // Prevent form submission - const emailInput = document.getElementById('emailInput'); - const errorMessage = document.getElementById('error-message'); + const emailInput = document.getElementById("emailInput"); + const errorMessage = document.getElementById("error-message"); - // Clear previous error message - errorMessage.style.display = 'none'; + // Clear previous error message + errorMessage.style.display = "none"; - // Check if '@' is included in the email input - if (!emailInput.value.includes('@')) { - errorMessage.style.display = 'block'; // Show error message + // Check if '@' is included in the email input + if (!emailInput.value.includes("@")) { + errorMessage.style.display = "block"; // Show error message return; // Exit the function if there's an error - } - - // If the email is valid, proceed with hiding the form and showing success messages - const form = document.getElementById('newsletterForm'); - form.classList.add('hide-form'); - - // Show a success message after form hides - const successMessage = document.createElement('div'); - successMessage.classList.add('success-message'); - successMessage.textContent = "Thank you for subscribing!"; - form.parentElement.appendChild(successMessage); - - setTimeout(() => { - successMessage.style.display = 'block'; // Show message - successMessage.style.opacity = '1'; // Fade in effect - }, 500); // Delay for smooth effect - - // Show toast notification - const toast = document.getElementById('toast'); - toast.textContent = "Subscription Successful!"; - toast.classList.add('show'); - - // Hide toast after 3 seconds - setTimeout(() => { - toast.classList.remove('show'); - }, 3000); -}); + } + + // If the email is valid, proceed with hiding the form and showing success messages + const form = document.getElementById("newsletterForm"); + form.classList.add("hide-form"); + + // Show a success message after form hides + const successMessage = document.createElement("div"); + successMessage.classList.add("success-message"); + successMessage.textContent = "Thank you for subscribing!"; + form.parentElement.appendChild(successMessage); + + setTimeout(() => { + successMessage.style.display = "block"; // Show message + successMessage.style.opacity = "1"; // Fade in effect + }, 500); // Delay for smooth effect + + // Show toast notification + const toast = document.getElementById("toast"); + toast.textContent = "Subscription Successful!"; + toast.classList.add("show"); + + // Hide toast after 3 seconds + setTimeout(() => { + toast.classList.remove("show"); + }, 3000); + }); -// LOAD POSTS +// LOAD POSTS const initialVisibleItems = 6; // Number of items to show initially -const blogItems = document.querySelectorAll('.blog-item'); // Get all blog items -const loadMoreBtn = document.querySelector('.load-posts-btn'); // Load more button +const blogItems = document.querySelectorAll(".blog-item"); // Get all blog items +const loadMoreBtn = document.querySelector(".load-posts-btn"); // Load more button // Hide items initially except the first few blogItems.forEach((item, index) => { if (index >= initialVisibleItems) { - item.classList.add('hidden'); // Add hidden class for items beyond the limit + item.classList.add("hidden"); // Add hidden class for items beyond the limit } }); // Load more items when the button is clicked -loadMoreBtn.addEventListener('click', function () { - const hiddenItems = Array.from(blogItems).filter(item => item.classList.contains('hidden')); // Find hidden items +loadMoreBtn.addEventListener("click", function () { + const hiddenItems = Array.from(blogItems).filter((item) => + item.classList.contains("hidden") + ); // Find hidden items // Show a certain number of hidden items (e.g., the next 3) hiddenItems.slice(0, 3).forEach((item, index) => { - // Delay for each item's reveal to create a staggered effect - setTimeout(() => { - item.classList.remove('hidden'); // Remove hidden class - item.classList.add('reveal'); // Add reveal class to trigger animation - }, index * 300); // Adjust the delay (300ms) as needed + // Delay for each item's reveal to create a staggered effect + setTimeout(() => { + item.classList.remove("hidden"); // Remove hidden class + item.classList.add("reveal"); // Add reveal class to trigger animation + }, index * 300); // Adjust the delay (300ms) as needed }); // Check if there are no more hidden items if (hiddenItems.length <= initialVisibleItems) { - loadMoreBtn.style.display = 'none'; // Hide the button if there are no more items to load + loadMoreBtn.style.display = "none"; // Hide the button if there are no more items to load } }); // Optional: If you want to control existing animations when new items are added const manageExistingAnimations = () => { - blogItems.forEach(item => { - // Remove the animation class after a delay to prevent repeated animations - if (item.classList.contains('reveal')) { - setTimeout(() => { - item.classList.remove('reveal'); // Remove animation class after animation completes - }, 500); // Adjust this duration to match your CSS transition duration - } + blogItems.forEach((item) => { + // Remove the animation class after a delay to prevent repeated animations + if (item.classList.contains("reveal")) { + setTimeout(() => { + item.classList.remove("reveal"); // Remove animation class after animation completes + }, 500); // Adjust this duration to match your CSS transition duration + } }); }; // Call manageExistingAnimations whenever new items are revealed -loadMoreBtn.addEventListener('click', function () { +loadMoreBtn.addEventListener("click", function () { manageExistingAnimations(); // Control existing items' animations }); @@ -93,36 +97,72 @@ let currentIndex = 0; // Function to load and update the word of the day async function loadWordOfTheDay() { try { - const response = await fetch('words.json'); // Ensure this path is correct - if (!response.ok) throw new Error('Network response was not ok'); - - const data = await response.json(); - const words = data.words; - - // Check if words array is not empty - if (words.length === 0) { - console.error("No words available in the JSON file."); - return; - } - - // Update the word and definition immediately - updateWord(words[currentIndex]); - - // Set an interval to change the word every 10 seconds - setInterval(() => { - currentIndex = (currentIndex + 1) % words.length; // Increment index and loop back - updateWord(words[currentIndex]); // Update the display with the new word - }, 10000); // 10 seconds interval + const response = await fetch("words.json"); // Ensure this path is correct + if (!response.ok) throw new Error("Network response was not ok"); + + const data = await response.json(); + const words = data.words; + + // Check if words array is not empty + if (words.length === 0) { + console.error("No words available in the JSON file."); + return; + } + + // Update the word and definition immediately + updateWord(words[currentIndex]); + + // Set an interval to change the word every 10 seconds + setInterval(() => { + currentIndex = (currentIndex + 1) % words.length; // Increment index and loop back + updateWord(words[currentIndex]); // Update the display with the new word + }, 15000); // 15 seconds interval } catch (error) { - console.error('Error loading words:', error); + console.error("Error loading words:", error); } } // Function to update the word and definition in the HTML function updateWord(wordData) { - document.getElementById('word').textContent = wordData.word; - document.getElementById('definition').textContent = wordData.definition; + document.getElementById("word").textContent = wordData.word; + document.getElementById("definition").textContent = wordData.definition; + document.getElementById("sentence").textContent = wordData.sentence; } // Call the function to load the word of the day loadWordOfTheDay(); +//hamburger (Responsive) + +// function toggleHamburgerMenu() { +// const navLinks = document.getElementById('navLinks'); +// navLinks.classList.toggle('active'); +// } + +function toggleHamburgerMenu() { + const navLinks = document.getElementById("navLinks"); + const isActive = navLinks.classList.toggle("active"); // Toggle 'active' class + + if (isActive) { + console.log("active"); + + // Close the menu when clicking outside + document.addEventListener("click", closeOnOutsideClick); + } else { + console.log("inactive"); + + // Remove the event listener when menu is closed + document.removeEventListener("click", closeOnOutsideClick); + } +} + +function closeOnOutsideClick(event) { + const navLinks = document.getElementById("navLinks"); + const hamburger = document.getElementById("hamburger"); + + if (!navLinks.contains(event.target) && !hamburger.contains(event.target)) { + console.log("menu close"); + + navLinks.classList.remove("active"); // Close the menu + document.removeEventListener("click", closeOnOutsideClick); // Remove the listener + } +} diff --git a/signup.css b/signup.css index d34c8b70..24241a2e 100644 --- a/signup.css +++ b/signup.css @@ -11,8 +11,13 @@ main{ display: flex; justify-content: center; align-items: center; - min-height: 100%; + max-height: 900px; + overflow-y: auto; } +header div h2 a.home-link{ + text-align: center; +} + .box-login{ background-color: rgba(238, 216, 187, 0.849); color: white; diff --git a/start_writing.css b/start_writing.css index d8691f31..970fe7d0 100644 --- a/start_writing.css +++ b/start_writing.css @@ -1,60 +1,80 @@ - +/* General Form Styles */ .blog-form-container { - background: url('/path-to-your-uploaded-image') no-repeat center center; - background-size: cover; - padding: 30px; - border-radius: 10px; - max-width: 800px; - margin: 20px auto; - box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); - transition: background-color 0.3s ease; + background: url('/path-to-your-uploaded-image') no-repeat center center; + background-size: cover; + padding: 30px; + border-radius: 10px; + max-width: 800px; + margin: 20px auto; + /* 0px 4px 10px rgba(0, 0, 0, 0.1); */ + box-shadow: 0px 3px 6px #fca5a5; + transition: background-color 0.3s ease; } /* Input, Textarea, and Select Styling */ form input, form select, form textarea { - width: 100%; - padding: 12px; - margin: 10px 0 20px; - border: none; - border-radius: 8px; - box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); - font-size: 1rem; + width: 100%; + padding: 12px; + margin: 10px 0 20px; + border: none; + border-radius: 8px; + box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); + font-size: 1rem; +} + +/* Add pink border on hover for input fields */ +input[type="text"]:hover, +input[type="email"]:hover, +input[type="password"]:hover, +textarea:hover { + border: 2px solid #ff69b4 !important; /* pink border color with !important */ +} + +/* Focus style for a consistent look on focus */ +input[type="text"]:focus, +input[type="email"]:focus, +input[type="password"]:focus, +textarea:focus { + border: 2px solid #ff69b4 !important; /* pink border with !important */ + box-shadow: 0 0 5px rgba(255, 105, 180, 0.3); /* subtle pink shadow */ + outline: none; } /* Theme-specific Adjustments */ body.dark-mode .blog-form-container { - background-color: rgba(34, 33, 33, 0.6); - color: #fff; + background-color: rgba(34, 33, 33, 0.6); + color: #fff; } + body.light-mode .blog-form-container { - background-color: rgba(0, 0, 0, 0.6); - color: #333; + background-color: rgba(0, 0, 0, 0.6); + color: #333; } /* Button Styling */ form button[type="submit"] { - background-color: #ff6600; - color: #fff; - border: none; - padding: 12px 20px; - border-radius: 8px; - cursor: pointer; - transition: background-color 0.3s ease; -} - + background-color: #ff6600; + color: #fff; + border: none; + padding: 12px 20px; + border-radius: 8px; + cursor: pointer; + transition: background-color 0.3s ease; +} + form button[type="submit"]:hover { - background-color: #e65c00; - transform: scale(1.03); + background-color: #e65c00; + transform: scale(1.03); } /* Placeholder for blog content */ textarea#blogContent::placeholder { - content: "Write a sample blog to give an idea of size"; + content: "Write a sample blog to give an idea of size"; } /* Popup styling for success */ #popupMessage { - display: block; /* Ensure it's set to block */ + display: block; background-color: #4CAF50; color: white; padding: 15px; @@ -64,352 +84,207 @@ textarea#blogContent::placeholder { left: 50%; transform: translate(-50%, -50%); box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); - z-index: 1000; /* Ensure it stays on top */ + z-index: 1000; animation: fadeOut 3s forwards; } -#start-voice-input { - background-color: #ff6600; - color: white; - border: none; - padding: 10px; - border-radius: 50%; - cursor: pointer; - font-size: 1.2rem; - position: absolute; - right: 10px; - top: 10px; +@keyframes fadeOut { + 0% { opacity: 1; } + 80% { opacity: 1; } + 100% { opacity: 0; } } +/* Collaborator Section Styling */ +.collaborator-section { + padding: 20px; + border-radius: 10px; + background-color: #f0f0f0; + margin: 20px auto; + box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); + max-width: 800px; + margin-bottom: 60px; /* Increased bottom margin */ +} + +/* Collaborator List Styling */ +.collaborator-list { + display: flex; + flex-wrap: wrap; + gap: 15px; /* Adds spacing between collaborators */ + margin-bottom: 20px; +} -#suggestionsContainer { - background-color: #f9f9f9; +.collaborator-item { + background-color: #fff; padding: 15px; border-radius: 8px; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); - display: none; /* Initially hidden */ + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; /* Full width by default */ } -#suggestionsContainer h4 { - margin-bottom: 10px; +/* Responsive Collaborator Item for Larger Screens */ +@media (min-width: 768px) { + .collaborator-item { + width: calc(50% - 15px); /* Two items per row with gap */ + } } -#suggestionsText { - font-size: 1rem; - color: #333; +/* Add Collaborator Button */ +.add-collaborator-btn { + background-color: #ff6600; + color: white; + border: none; + padding: 12px 20px; + border-radius: 8px; + cursor: pointer; + transition: background-color 0.3s ease, transform 0.3s ease; + display: inline-block; + margin-top: 10px; + text-align: center; + width: 100%; /* Full width on mobile screens */ } -/* Show the suggestions when available */ -#suggestionsContainer.visible { - display: block; +/* Hover effect for the button */ +.add-collaborator-btn:hover { + background-color: #e65c00; + transform: scale(1.03); } -@keyframes fadeOut { - 0% { - opacity: 1; - } - 80% { - opacity: 1; - } - 100% { - opacity: 0; - } +.get-suggestions, .add-collaborator{ + padding: 7px; } - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +/* Adjust button for larger screens */ +@media (min-width: 768px) { + .add-collaborator-btn { + width: auto; /* Allows button to shrink on larger screens */ + margin-top: 0; /* Remove margin on larger screens */ + } +} /* Footer Styles */ #custom-footer { - background-color: #f8f9fa; /* Light background color */ - padding: 20px 0; - color: #333; /* Default text color */ + background-color: #f8f9fa; + padding: 20px 0; + color: #333; } .footer-container { - width: 90%; - margin: 0 auto; + width: 90%; + margin: 0 auto; } .footer-row { - display: flex; - flex-wrap: wrap; - justify-content: space-between; + display: flex; + flex-wrap: wrap; + justify-content: space-between; } .footer-col { - flex: 1; - padding: 10px; - min-width: 250px; /* Minimum width for responsive design */ + flex: 1; + padding: 10px; + min-width: 250px; } .footer-title { - font-size: 1.5rem; - margin-bottom: 10px; - color: #3B3B58; /* Title color */ + font-size: 1.5rem; + margin-bottom: 10px; + color: #3B3B58; +} + +[data-theme="dark"] .footer-title { + color: #D3D3D3; /* Light grey color for dark mode */ } .footer-content { - font-size: 0.9rem; + font-size: 0.9rem; } .footer-description { - margin: 10px 0; + margin: 10px 0; } .footer-address, .footer-phone, .footer-email { - margin: 5px 0; + margin: 5px 0; } .footer-icon { - color: #007bff; /* Primary color for icons */ - margin-right: 5px; + color: #007bff; + margin-right: 5px; } .footer-email-link { - color: #3B3B58; /* Email link color */ - text-decoration: none; + color: #3B3B58; + text-decoration: none; } .footer-email-link:hover { - text-decoration: underline; + text-decoration: underline; } .feature-post { - margin-top: 15px; + margin-top: 15px; } .post-item { - margin-bottom: 10px; + margin-bottom: 10px; } .post-flex { - display: flex; - align-items: center; + display: flex; + align-items: center; } .post-image { - width: 80px; /* Fixed width for images */ - height: 80px; /* Fixed height for images */ - object-fit: cover; - margin-right: 10px; + width: 80px; + height: 80px; + object-fit: cover; + margin-right: 10px; } .post-title { - font-size: 1rem; - color: #333; /* Title color */ + font-size: 1rem; + color: #333; } .post-date { - font-size: 0.8rem; - color: #6c757d; /* Secondary text color */ + font-size: 0.8rem; + color: #6c757d; } .footer-tags, .footer-social { - margin-top: 10px; + margin-top: 10px; } .tags-wrapper, .social-wrapper { - display: flex; - flex-wrap: wrap; -} - -.footer-tag, .footer-social-link { - background-color: #e9ecef; /* Light button color */ - border-radius: 5px; - padding: 5px 10px; - margin: 5px; - color: #333; /* Default text color */ - text-decoration: none; -} - -.footer-tag:hover, .footer-social-link:hover { - background-color: #d5d9db; /* Darker button color on hover */ -} - - -/* Footer */ - -/* Footer container */ -.custom-footer { - background: transparent ; - - padding: 40px 0; - color: #333; -} - -.custom-footer .container { - max-width: 1200px; - margin: 0 auto; -} - -.custom-footer .row { display: flex; flex-wrap: wrap; - justify-content: space-between; -} - -/* Footer columns */ -.custom-footer .col-3 { - flex: 0 0 30%; /* Takes up about 30% of width per column */ - padding: 15px; - min-width: 280px; /* Ensures better minimum size on small screens */ - box-sizing: border-box; -} - -/* Footer Titles */ -.custom-footer .footer-title { - font-size: 1.6rem; - margin-bottom: 20px; - color: #3B3B58; - font-weight: bold; -} - -/* About Us content */ -.custom-footer p { - font-size: 1rem; - line-height: 1.6; - margin-bottom: 20px; - color: #6c757d; -} - -.custom-footer address { - font-style: normal; - margin-bottom: 15px; - color: #6c757d; -} - -.custom-footer i { - margin-right: 10px; - color: #007bff; -} - -.custom-footer .phone, -.custom-footer .email { - margin-bottom: 15px; } -.custom-footer .email a { - color: #3B3B58; - text-decoration: none; -} - -.custom-footer .email a:hover { - text-decoration: underline; -} - -/* Feature Post section */ -.custom-footer .feature-post { - margin-top: 20px; -} - -.custom-footer .article { - margin-bottom: 20px; -} - -.custom-footer .article .d-flex { - display: flex; - align-items: center; -} - -.custom-footer .article img { - width: 90px; /* Larger image for better balance */ - height: 90px; - object-fit: cover; - margin-right: 15px; /* Increased spacing between image and text */ - border-radius: 8px; -} - -.custom-footer .text-title { - font-size: 1.1rem; /* Slightly larger text for better readability */ - color: #333; - text-decoration: none; -} - -.custom-footer .text-title:hover { - text-decoration: underline; -} - -.custom-footer .secondary-title { - font-size: 0.9rem; - color: #6c757d; -} - -.custom-footer .display-3 { - font-size: 0.85rem; -} - -/* Tags section */ -.custom-footer .tags { - margin-top: 20px; -} - -.custom-footer .tags .nav-link { +.footer-tag, .footer-social-link { background-color: #e9ecef; border-radius: 5px; - padding: 8px 12px; /* More padding for better button size */ + padding: 5px 10px; margin: 5px; color: #333; text-decoration: none; - font-size: 0.9rem; -} - -.custom-footer .tags .nav-link:hover { - background-color: #d5d9db; } -/* Social media section */ -.custom-footer .social .nav-link { - padding: 10px; - font-size: 1.2rem; - background-color: #e9ecef; - border-radius: 50%; - margin: 5px; - color: #333; -} - -.custom-footer .social .nav-link:hover { +.footer-tag:hover, .footer-social-link:hover { background-color: #d5d9db; } /* Responsive Media Queries */ @media (max-width: 768px) { .custom-footer .col-3 { - flex: 0 0 45%; /* Each column takes up 45% on tablet screens */ + flex: 0 0 45%; } } @media (max-width: 480px) { .custom-footer .col-3 { - flex: 0 0 100%; /* Each column takes up full width on mobile screens */ + flex: 0 0 100%; } } diff --git a/start_writing.html b/start_writing.html index e1325c85..13715e54 100644 --- a/start_writing.html +++ b/start_writing.html @@ -3,7 +3,7 @@ - WordWise + WordWise - Start Writing @@ -76,12 +76,12 @@

WordWise

-
+
-
+ @@ -418,13 +418,19 @@

Collaborative Writing

rows="10" placeholder="Add any additional content here..." > -
- +
@@ -451,176 +457,149 @@

Suggestions:

-
-
-

Popular Tags

- -
-
- Travel - Food - Lifestyle - Techonogy - Fashion -
-
-

Connect with us

- - -
-
+
- -
+ +
-

- © WordWise. All rights - reserved. -

- - +

© WordWise. All rights reserved.

-
- - - - +
+ - + diff --git a/style.css b/style.css index 16643021..83ed6dc1 100644 --- a/style.css +++ b/style.css @@ -331,7 +331,6 @@ body { font-family: Arial, sans-serif; background-color: var(--background-color); max-width: 100%; /* Ensure container does not overflow */ - overflow: hidden; } /* Hide scrollbar for main body */ @@ -512,6 +511,13 @@ body.dark-mode footer .phone{ [data-theme="dark"] .form-container h2{ color: var(--light);/*form heading made light-colored in dark theme*/ } +body.dark-mode .bookmark-section { + background-color: #141414; /* Dark background for the bookmark section */ + color: #ffffff; /* Optional: Change text color to white for better contrast */ +} +body.dark-mode .bookmark-section h1{ + color: #ffffff; /* Optional: Change text color to white for better contrast */ +} #headings{ color: var(--dark); @@ -776,144 +782,7 @@ background: var(--light); background-color: var(--card-hover-active-dark); } -header { - - display: flex; - justify-content: space-around; - align-items: center; - border-bottom: 1px solid #F4EFE6; - padding: 0rem 1rem; - padding-top: 1rem; - padding-bottom: 1rem; - width: 100%; - -} - -header { - - position: fixed; - margin-top: 1rem; - background-color: #f8b5b5; - display: flex; - justify-content: space-around; - align-items: center; - border-bottom: 1px solid #F4EFE6; - padding: 0rem 1rem; - padding-top: 1rem; - padding-bottom: 1rem; - width: 100%; -} -.logo { - padding-top: 2rem; - display: flex; - align-items: flex-start; - gap: 1.1rem; - color: #1C160C; - /* margin: 0 3rem; */ -} -.logo h2 { - font-size: 2.5rem; /* Adjusted font size for better visibility */ - font-weight: bold; - line-height: 1.5; - letter-spacing: 0.2rem; - color: rgb(59, 59, 88); - white-space: nowrap; /* Prevent logo from breaking into two lines*/ -} -.logo h2:hover { - color: rgb(29, 29, 68); /* Change color on hover */ - transform: scale(1.05); /* Slightly scale up the text */ -} -/* Navigation Bar */ - -/* Parent container for nav links */ -.nav-links1 { - /* position: fixed; - top: 0; */ - padding-top: 2rem; - display: flex; - width: 80%; - gap: 1.1rem; - margin-left:1.3rem ; - margin-top: 8px; - position: relative; - opacity: 0; /* Start hidden for animation */ - animation: fadeIn 0.5s ease forwards; - animation-delay: 0.3s; /* Start the parent container animation */ -} - -/* Individual link styles */ -.nav-links1 a { - color: #1C160C; - text-decoration: none; - font-size: 1rem; /* Original size */ - font-weight: 600; - padding-bottom: 5px; - position: relative; - opacity: 0; /* Start hidden for animation */ - transform: translateY(-20px); /* Start above the position */ - transition: color 0.3s ease, transform 0.3s ease, font-size 0.3s ease, font-weight 0.3s ease; -} - -/* Gradient underline effect */ -.nav-links1 a::after { - content: ''; - position: absolute; - left: 0; - bottom: 0; - width: 100%; - height: 3px; - background-image: linear-gradient(90deg, #4b749f, #243748); /* New gradient for underline */ - transform: scaleX(0); - transition: transform 0.4s ease, background-color 0.3s ease; -} - -/* Hover effect for links (updated as per admin's request) */ -.nav-links1 a:hover { - font-size: 1.1rem; /* Increase font size on hover */ - font-weight: bold; /* Make text bold on hover */ - color: black; /* Change color to black on hover */ - transform: scale(1.02); /* Very subtle increase on hover */ -} - -.nav-links1 a:hover::after { - transform: scaleX(0.5); /* Underline expands */ -} - -/* Animation for links on page load */ -.nav-links1 a:nth-child(1) { - animation: slideIn 0.5s ease forwards; - animation-delay: 0.5s; /* First link delay */ -} - -.nav-links1 a:nth-child(2) { - animation: slideIn 0.5s ease forwards; - animation-delay: 0.6s; /* Second link delay */ -} - -.nav-links1 a:nth-child(3) { - animation: slideIn 0.5s ease forwards; - animation-delay: 0.7s; /* Third link delay */ -} - -.nav-links1 a:nth-child(4) { - animation: slideIn 0.5s ease forwards; - animation-delay: 0.8s; /* Fourth link delay */ -} - -.nav-links1 a:nth-child(5) { - animation: slideIn 0.5s ease forwards; - animation-delay: 0.9s; /* Fifth link delay */ -} - -.nav-links1 a:nth-child(6) { - animation: slideIn 0.5s ease forwards; - animation-delay: 1s; /* Sixth link delay */ -} -.nav-links1 a:nth-child(7) { - animation: slideIn 0.5s ease forwards; - animation-delay: 1.1s; /* Seventh link delay */ -} /* Keyframes for fade-in effect */ @keyframes fadeIn { @@ -922,13 +791,7 @@ header { } } -/* Keyframes for sliding in from above */ -@keyframes slideIn { - to { - opacity: 1; - transform: translateY(0); /* Final position */ - } -} + /* Navbar and Menu Styles */ @@ -1089,18 +952,7 @@ button { z-index: 900; background: #f8b5b5; } -.layout-container { - - padding: 0 3rem; - display: flex; - justify-content: center; - align-items: center; - background-color: #f8b5b5; - top: 0 !important; - position: sticky !important; - z-index: 899 !important; -} /* hover effect */ .signup-button:hover{ @@ -1175,11 +1027,6 @@ button { -.dropdown{ - padding-top: 2rem; - float: left; - color: black; -} .dropbtn{ padding-right: 13px; @@ -1377,6 +1224,7 @@ button { margin: 30px 0; } + .form-container .divider::before { content: ""; position: absolute; @@ -1450,7 +1298,16 @@ button { padding-left: 40px; } - +/*.form-container .btn { + background-color: var(--text-color); + color: var(--background-color); + padding: 12px; + margin: 10px 0; + justify-content: center; + align-items: center; + transition: transform 0.2s ease-in-out; +} +*/ .password-toggle { position: absolute; left: 3px; @@ -1598,14 +1455,7 @@ input[type="checkbox"] { transform: scale(1.2); } -/* Dropdown button styles */ -.dropdown { - - position: relative; - display: inline-block; - margin-top: 9px; -} .dropdown-content { display: none; @@ -1681,11 +1531,11 @@ body.dark .support a { transition: background-color 0.3s ease, color 0.3s ease; } -.btn-primary:hover { +/*.btn-primary:hover { background-color: var(--background-color); color: var(--light); padding: 2px; -} + */ .object-fit { max-height: 120px; @@ -1695,11 +1545,12 @@ body.dark .support a { } .d-flex { + /* padding: 5px 5px; */ margin-top: 10px; display: flex; align-items: center; - justify-content: start; - gap: 10px; + justify-content: space-around; + /* gap: 10px; */ } .d-flex-gap { @@ -1707,9 +1558,12 @@ body.dark .support a { display: flex; flex-wrap: wrap; gap: 10px; + + /* justify-content: space-around; */ } .d-flex-gap a { + transition: all 0.2s ease; font-weight: 600; color: var(--text-color); } @@ -1871,7 +1725,7 @@ a { font-weight: bold; } -.text-title:hover { +.card:hover .text-title { color: var(--primary-color); } @@ -1948,9 +1802,12 @@ a { .sliderr * { - margin: 0; + margin: 0 auto; padding: 0; box-sizing: border-box; + display: flex; + justify-content: center; + align-items: center; } .sliderr { @@ -1959,13 +1816,21 @@ a { overflow: hidden; position: relative; margin: 0 auto; + border-radius: 20px; +} + +@media (max-width: 768px) { + .sliderr { + margin-left: -6% + } } .sliderr .slides { display: flex; - width: 600%; + width: 700%; height: 400px; position: relative; + transition: transform 0.5s ease-in-out; } .sliderr .slides input[type="radio"] { @@ -1974,7 +1839,7 @@ a { .sliderr .slide { width: 16.66%; - transition: 0.6s ease; + transition: 0.3s ease; } .sliderr .slide img { @@ -2004,45 +1869,9 @@ a { background: #fff; } -#radio1:checked ~ .first { - margin-left: 0; -} - -#radio2:checked ~ .first { - margin-left: -16.66%; -} - -#radio3:checked ~ .first { - margin-left: -33.32%; -} - -#radio4:checked ~ .first { - margin-left: -49.98%; -} - -#radio5:checked ~ .first { - margin-left: -66.64%; -} - -#radio6:checked ~ .first { - margin-left: -83.3%; -} - - -.sliderr .navigation-auto { - position: absolute; - display: flex; - width: 100%; - justify-content: center; - margin-top: 20px; -} - -.sliderr .navigation-auto div { - border: 2px solid #fff; - padding: 5px; - border-radius: 10px; - transition: 0.4s; - margin: 0 5px; +.sliderr .manual-btn.active { + background-color: #40D3DC; + color: white; } @@ -2055,38 +1884,29 @@ a { content: none; } -@keyframes slider { - 0% {margin-left: 0;} - 16.66% {margin-left: -16.66%;} - 33.32% {margin-left: -33.32%;} - 49.98% {margin-left: -49.98%;} - 66.64% {margin-left: -66.64%;} - 83.3% {margin-left: -83.3%;} -} - -#radio1:checked ~ .first { - margin-left: 0; - animation: slider 36s infinite; -} - -#radio2:checked ~ .first { - animation: slider 36s infinite; -} - -#radio3:checked ~ .first { - animation: slider 36s infinite; +.slider-btn { + position: absolute; + top: 50%; + transform: translateY(-50%); + background-color: rgba(0, 0, 0, 0.5); + color: white; + border: none; + padding: 16px; + cursor: pointer; + z-index: 1; + font-size: 18px; } -#radio4:checked ~ .first { - animation: slider 36s infinite; +#prevSlide { + left: 10px; } -#radio5:checked ~ .first { - animation: slider 36s infinite; +#nextSlide { + right: 10px; } -#radio6:checked ~ .first { - animation: slider 36s infinite; +#prevSlide:hover, #nextSlide:hover { + background-color: rgba(0, 0, 0, 0.8); } .social-sharing { @@ -2325,7 +2145,7 @@ a { object-fit: cover; } -.overflow-img:hover { +.card:hover .overflow-img { transform: scale(1.1); box-shadow: 7px 7px 10px rgb(184, 0, 0); transition: all 0.2s ease-in-out; @@ -2342,10 +2162,10 @@ a { .nav-link:hover{ /* Change background color on hover */ - color: #f8b5b5; - scale: 0.5; /* Change text color on hover */ - /* Optional: Change border color on hover */ - transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */ + /* color: #f8b5b5; + scale: 1.01; Change text color on hover + Optional: Change border color on hover + transition: background-color 0.3s ease, color 0.3s ease; Smooth transition */ } .search-box { border-right: none; @@ -2460,76 +2280,20 @@ body { } -/* header { - background-color: var(--header-bg); - padding: 1rem; - display: flex; - justify-content: space-between; - align-items: center; -} */ h1 { margin: 0; } -.theme-switch-wrapper { - padding-top: 2rem; - margin-left: 10px; - display: flex; - align-items: center; -} + #mode-label { margin-left: 10px; font-size: 1rem; } -/* Toggle Switch */ -.theme-switch { - position: relative; - display: inline-block; - width: 60px; - height: 30px; -} - -.theme-switch input { - opacity: 0; - width: 0; - height: 0; -} - -.slider { - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(to right, #ffecb3, #ffcc80); /* Gradient for light mode */ - transition: 0.4s; - border-radius: 30px; -} - -input:checked + .slider { - background: linear-gradient(to right, #283e51, #4b79a1); -} - -.slider:before { - position: absolute; - content: ""; - height: 24px; - width: 24px; - border-radius: 50%; - background-color: white; - transition: 0.4s; - top: 3px; - left: 3px; -} -input:checked + .slider:before { - transform: translateX(16px); -} .icon { position: absolute; @@ -2540,23 +2304,9 @@ input:checked + .slider:before { transition: opacity 0.3s ease; } -.sun-icon { - left: 5px; - opacity: 1; -} -.moon-icon { - right: 3px; - opacity: 0; -} -input:checked + .slider .sun-icon { - opacity: 0; -} -input:checked + .slider .moon-icon { - opacity: 1; -} #mode-label { font-size: 14px; @@ -2568,10 +2318,21 @@ input:checked + .slider .moon-icon { width: 100%; margin: auto; min-height: 100vh; - padding: 2rem; - display: grid; - place-items: center; + padding: 2rem 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; margin-top: 60px; + box-sizing: border-box; +} + +@media screen and (max-width: 768px) { + .container_1 { + padding: 1rem; + margin-top: 30px; + margin-left: -5%; + } } .accordion__wrapper { @@ -2688,12 +2449,91 @@ input:checked + .slider .moon-icon { border: none; } - -footer p { - margin: 10px 0 0 0; +/* Light mode styles */ +#word-of-the-day { + border: 2px solid rgb(248, 181, 181); + padding: 20px; + border-radius: 5px; + color: black; + width: 90%; text-align: center; + font-family: Arial, sans-serif; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + margin-left: 60px; + margin-bottom: 60px; } -/* WordWise Newsletter Section Styling */ + +/* Header style */ +#word-of-the-day h2 { + font-size: xx-large; + display: flex; + justify-content: center; + align-items: center; + color: #242e4c; +} + +/* Icon style */ +#word-of-the-day span { + font-size: 1.2em; + margin-right: 8px; +} + +/* Divider line */ +#word-of-the-day hr { + border: none; + height: 1px; + background-color: #333; + margin: 10px auto; + width: 80%; +} + +/* Word style */ +#word-of-the-day #word { + font-weight: bold; + font-size: 1.2em; + color: #333; + margin: 10px 0; +} + +/* Definition style */ +#word-of-the-day #definition { + font-size: 1em; + color: #555; + margin: 10px 0; +} + +/* Dark mode styles using [data-theme="dark"] */ +[data-theme="dark"] #word-of-the-day { + border: 2px solid #555; + color: #ddd; + box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1); +} + +[data-theme="dark"] #word-of-the-day h2 { + color: #ffffff; /* Brighter white for the header */ +} + +[data-theme="dark"] #word-of-the-day hr { + background-color: #888; +} + +[data-theme="dark"] #word-of-the-day #word { + color: #e0e0e0; /* Light white for the word */ +} + +[data-theme="dark"] #word-of-the-day #definition { + color: #e0e0e0; /* Slightly dimmer white for the definition */ +} + +/* + + + +footer .text-lg { + margin: 10px 0 0 0; + text-align: left; +} +/* WordWise Newsletter Section Styling */ .wordwise-newsletter-section { background-color: #f8b5b5; padding: 60px 20px; @@ -2923,16 +2763,17 @@ for facebook } */ -.flex-wrap a{ - margin-right: 10px; - transition: all .38s ease-in-out; -} .flex-wrap a:hover{ - transform: scale(2.1); - padding: 2px 4px; - border-radius: 4px; + transform: scale(1.05); + + /* padding: 2px 4px; */ + border-radius: 2px; + /* transition: all 0.2s ease-in-out; */ + } + + #facebook:hover{ color: white; background-color:rgb(62, 62, 255) ; @@ -3224,6 +3065,7 @@ for facebook /*hamburger menu styling */ .hamburger { + position: absolute; /*temporary */ display: flex; flex-direction:column; cursor: pointer; @@ -3405,4 +3247,482 @@ nav{ margin-bottom: 4rem; z-index: 999; -} \ No newline at end of file +} +.flex-item { + transition: transform 0.3s ease; + margin: 10px; +} + +.flex-item:hover { + transform: scale(1.05); + z-index: 1; +} + +.article { + border-radius: 5px; + overflow: hidden; + box-shadow: 0 2px 8px transparent; + transition: box-shadow 0.3s ease; +} + +.flex-item:hover .article { + box-shadow: 0 4px 12px transparent; +} + + +/* Navbar */ + +.layout-container { + padding: 0 3rem; + display: flex; + justify-content: center; + align-items: center; + background-color: #f8b5b5; + top: 0; + position: sticky; + z-index: 899; +} +header { + display: flex; + justify-content: space-around; + align-items: center; + border-bottom: 1px solid #F4EFE6; + padding: 0rem 1rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + width: 100%; +} +.nav-links1 { + display: flex; + gap: 2.1rem; + margin: 0 0.5rem; + margin-top: 8px; + position: relative; +} +.nav-links1 a { + color: #1C160C; + text-decoration: none; + font-size: 1.1rem; + font-weight: 600; + padding-bottom: 5px; + position: relative; +} +.logo h2 { + font-size: 2.5rem; + font-weight: bold; + line-height: 1.5; + letter-spacing: 0.2rem; + color: rgb(59, 59, 88); + white-space: nowrap; +} +.dropdown { + position: relative; + display: inline-block; + margin-top: 9px; +} +.dropdown { + float: left; + color: black; +} +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(to right, #ffecb3, #ffcc80); + transition: 0.4s; + border-radius: 30px; +} +input:checked + .slider { + background: linear-gradient(to right, #283e51, #4b79a1); +} +input:checked + .slider .sun-icon { + opacity: 0; +} + +input:checked + .slider .moon-icon { + opacity: 1; +} +.theme-switch-wrapper { + display: flex; + align-items: center; +} +input:checked + .slider:before { + transform: translateX(30px); +} +.slider:before { + position: absolute; + content: ""; + height: 24px; + width: 24px; + border-radius: 50%; + background-color: white; + transition: 0.4s; + top: 3px; + left: 3px; +} +.theme-switch { + position: relative; + display: inline-block; + width: 60px; + height: 30px; +} + +.theme-switch input { + opacity: 0; + width: 0; + height: 0; +} +#mode-label { + margin-left: 10px; + font-size: 1rem; +} +#mode-label { + font-size: 14px; + margin-left: 10px; + color: #333; +} +input:checked + .slider .moon-icon { + opacity: 1; +} +.sun-icon { + left: 5px; + opacity: 1; +} + +.moon-icon { + right: 5px; + opacity: 0; +} +nav{ + top: 0; + position: fixed; + z-index: 999; +} +.nav-links1 a::after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 3px; + background-color: #4A4A4A; + transform: scaleX(0); + transition: transform 0.2s ease; +} + +.nav-links1 a:hover::after { + transform: scaleX(1); +} + +.nav-links1 a { + opacity: 0; /* Set initial opacity */ + transform: translateY(-20px); /* Move links above their final position */ +} + +.nav-links1 a:nth-child(1) { + animation: slideIn 0.5s ease forwards; + animation-delay: 0.5s; +} + +.nav-links1 a:nth-child(2) { + animation: slideIn 0.5s ease forwards; + animation-delay: 0.6s; +} + +.nav-links1 a:nth-child(3) { + animation: slideIn 0.5s ease forwards; + animation-delay: 0.7s; +} + +.nav-links1 a:nth-child(4) { + animation: slideIn 0.5s ease forwards; + animation-delay: 0.8s; +} + +.nav-links1 a:nth-child(5) { + animation: slideIn 0.5s ease forwards; + animation-delay: 0.9s; +} + +.nav-links1 a:nth-child(6) { + animation: slideIn 0.5s ease forwards; + animation-delay: 1s; +} + +.nav-links1 a:nth-child(7) { + animation: slideIn 0.5s ease forwards; + animation-delay: 1.1s; +} + +@keyframes slideIn { + from { + opacity: 0; /* Start hidden */ + transform: translateY(-20px); /* Start above */ + } + to { + opacity: 1; /* Fully visible */ + transform: translateY(0); /* Final position */ + } +} + .flex-wrap a{ + margin-right: 10px; + transition: 0.1s ease-in !important; + size: 1rem; + font-weight: 600; + color: var(--text-color); + +}/* +.flex-wrap a i{ + size: 1rem; + transition:all 0.2s ease ; +} */ +nav1{ + width: 100%; + position: fixed; + top:0; + margin-bottom: 4rem; + z-index: 999; + + } + /* hamburger */ + + + .hamburger { + display: none; + cursor: pointer; + flex-direction: column; + justify-content: space-between; + width: 25px; + height: 22px; + } + + .hamburger span { + width: 100%; + height: 3px; + background-color: #333; + } + + @media (max-width: 1024px) { + .layout-container{ + padding: 0 0.5rem; + } + .logo a h2{ + font-size: 30px; + } + .nav-links1 { + gap: 10px; + } +.nav-links1 a{ + font-size: 16px; +} + } + + @media (max-width: 825px){ + .layout-container{ + padding: 0 0.5rem; + } + .logo a h2{ + font-size: 20px; + } + .nav-links1 { + display: flex; + align-items: center; + justify-content: space-evenly; + } +.nav-links1 a{ + font-size: 10px; +} + } + @media (max-width: 768px) { + .hamburger { + display: flex; + align-items: center; + justify-content: center; + /* Add styling for visibility, like color, size, etc. */ + } + + .nav-links1 { + display: none; + flex-direction: column; + gap: 10px; + position: absolute; + top: 70px; + left: 0; + width: 100%; + background-color: #fff; + padding: 20px; + box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); + } + + .nav-links1.active { + display: flex; + } + + .dropdown { + position: relative; + margin-left: 200px; + } + .hamburger{ + left: 540px; + } + .profile-icon{ + left: 80px; + } +} + + + +/* Additional styling for smaller screens */ +@media (max-width: 576px) { + .logo { + margin-left: -75px; + } + .logo a h2 { + font-size: 30px; + } + .dropdown { + position: relative; + margin-left: 60px; + } + .theme-switch-wrapper { + margin-right: -80px; + } + /* header{ + display: flex; + align-items: center; + justify-content: space-between; + } */ + .hamburger{ + left: 220px; + } + .layout-container{ + padding: 0 3.5rem; + } +} +@media (max-width: 560px){ + .hamburger{ + left: 360px; + } + .profile-icon{ + left: 55px; + } +} + +@media (max-width: 345px) { + .logo { + margin-left: -65px; + } + .logo a h2 { + font-size: 24px; + } + /* .hamburger{ + left: 230px; + } */ + .hamburger{ + left: 220px; + } +} + +@media (max-width: 435px) { + .hamburger{ + left: 270px; + } + .profile-icon{ + left: 20px; + } +} +@media (max-width: 415px){ + .profile-icon{ + left: 8px; + } + .hamburger { + left: 250px; + } +} + +@media (max-width: 400px) { + .hamburger { + left: 240px; + } +} +@media (max-width: 376px){ + .profile-icon{ + left: 3px; + } + .hamburger { + left: 230px; + } +} +@media (max-width: 361px){ + .profile-icon{ + left: -1px; + } + .hamburger { + left: 220px; + } +} +@media (max-width: 345px){ + .profile-icon{ + left: 3px; + } + .hamburger { + left: 200px; + } +} +@media (max-width: 320px){ + .profile-icon{ + left: -2px; + } + .hamburger { + left: 190px; + } +} +@media (max-width: 1200px) { + .footer-container { + padding: 20px; + } + .col-3-main { + flex-direction: row; + flex-wrap: wrap; + } + .col-3 { + width: 33.33%; + } +} +@media (max-width: 992px) { + .col-3 { + width: 50%; /* Stack 2 columns side by side on medium screens */ + } +} +@media (max-width: 768px) { + .col-3 { + width: 100%; /* Stack all columns vertically on small screens */ + margin-bottom: 20px; + } + + .feature-post div { + flex-direction: column; + } + + .tags { + text-align: center; + } +} + +@media (max-width: 576px) { + .feature-post div { + align-items: center; + } + + .tags.social { + justify-content: center; + } + + .wordwise-footer-content { + text-align: center; + } +} + diff --git a/tech.html b/tech.html index 2f5a1e2b..af9ce6be 100644 --- a/tech.html +++ b/tech.html @@ -11,8 +11,8 @@ The Future of Technology