Skip to content

Commit

Permalink
Update the Blog Page
Browse files Browse the repository at this point in the history
  • Loading branch information
@ishivansmishra
ishivansmishra committed Oct 21, 2024
1 parent 0821d3f commit c21b26c
Showing 1 changed file with 66 additions and 98 deletions.
164 changes: 66 additions & 98 deletions blog.html
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,25 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VBlog</title>
<title>Blog</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="src/Styles/scroll.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/js/all.min.js" integrity="sha512-6sSYJqDreZRZGkJ3b+YfdhB3MzmuP9R7X1QZ6g5aIXhRvR1Y/N/P47jmnkENm7YL3oqsmI6AK+V6AD99uWDnIw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
body {
background-color: #f0f4f8;
font-family: 'Arial', sans-serif;
color: #333;
background-color: #f0f4f8; /* Light background color for better contrast */
font-family: 'Arial', sans-serif; /* Modern font style */
color: #333; /* Darker text color for readability */
}

.container {
max-width: 1200px;
margin: auto;
padding: 20px;
}

.circle {
height: 24px;
width: 24px;
Expand All @@ -32,59 +29,41 @@
z-index: 99999999;
transition: transform 0.1s ease-out;
}

h1, h4 {
color: #1a1a1a;
color: #1a1a1a; /* Darker color for headings */
}

.card {
border: none;
transition: transform 0.2s;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
border: none; /* Remove border for a cleaner look */
transition: transform 0.2s; /* Animation effect on hover */
}

.card:hover {
transform: scale(1.05);
transform: scale(1.05); /* Slightly scale the card on hover */
}

footer {
background-color: #282c34;
color: white;
background-color: #282c34; /* Dark footer color */
color: white; /* White text color for contrast */
padding: 20px 0;
}

footer .btn-link {
color: white;
color: white; /* White icons in footer */
}

textarea {
width: 100%;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
border: 1px solid #ccc; /* Light border */
border-radius: 5px; /* Rounded corners */
padding: 10px; /* Padding for better UX */
}

textarea:focus {
border-color: #007bff;
outline: none;
}

.comment-section {
margin-top: 20px;
}

.comment {
border-bottom: 1px solid #ddd;
padding: 10px 0;
border-color: #007bff; /* Blue border on focus */
outline: none; /* Remove default outline */
}
</style>
</head>

<body>
<div class="circle"></div>
<div class="container pt-2">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="index.html">VBlog</a>
<a class="navbar-brand" href="index.html">Canvas Editor</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
Expand All @@ -108,14 +87,41 @@
<div class="text-center pt-5">
<h1>Latest Blog Posts</h1>
</div>
<div class="row mx-auto pt-4" id="blog-posts">
<!-- Blog posts will be dynamically added here -->
<div class="row mx-auto pt-4">
<div class="col-sm-3 m-4">
<div class="card">
<img src="https://media.licdn.com/dms/image/D4D12AQG03_cMJE7uIw/article-cover_image-shrink_720_1280/0/1685891111023?e=2147483647&v=beta&t=ApugyNhPbwf13VZN-Zv68y0iLnd_COOph8VMtvlH1Cw" class="card-img-top" alt="The Magic of Creativity">
<div class="card-body">
<h5 class="card-title">The Magic of Creativity</h5>
<p class="card-text">Creativity is the spark that ignites new ideas, opens doors to innovation, and breaks through the ordinary.</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
</div>
<div class="col-sm-3 m-4">
<div class="card">
<img src="https://d3mvlb3hz2g78.cloudfront.net/wp-content/uploads/2020/11/thumb_720_450_dreamstime_m_186895001.jpg" class="card-img-top" alt="The Power of Thinking">
<div class="card-body">
<h5 class="card-title">The Power of Thinking</h5>
<p class="card-text">While creativity helps you generate ideas, critical thinking helps you refine them and ensures their practicality.</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
</div>
<div class="col-sm-3 m-4">
<div class="card">
<img src="https://s29814.pcdn.co/wp-content/uploads/2022/12/shutterstock_1847661151.jpg.optimal.jpg" class="card-img-top" alt="Expanding Your Knowledge">
<div class="card-body">
<h5 class="card-title">Expanding Your Knowledge</h5>
<p class="card-text">Knowledge is the foundation of creativity and critical thinking. Continuous learning keeps us relevant.</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
</div>
</div>
<div class="row mx-auto pb-4 comment-section">
<div class="row mx-auto pb-4">
<h4 class="text-center">Add Comments</h4>
<textarea id="commentInput" placeholder="Leave a comment" rows="4"></textarea>
<button class="btn btn-primary mt-2" onclick="addComment()">Submit Comment</button>
<div id="commentsList"></div>
<textarea name="comment" placeholder="Leave a comment" rows="4"></textarea>
</div>
</div>
<footer class="text-center">
Expand All @@ -131,66 +137,28 @@ <h4 class="text-center">Add Comments</h4>
</div>
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.05);">
© 2024 Copyright:
<a class="text-body" href="#">VBlog</a>
<a class="text-body" href="#">CanvasEditor</a>
</div>
</footer>
<script>
const posts = [
{
title: "The Magic of Creativity",
image: "https://media.licdn.com/dms/image/D4D12AQG03_cMJE7uIw/article-cover_image-shrink_720_1280/0/1685891111023?e=2147483647&v=beta&t=ApugyNhPbwf13VZN-Zv68y0iLnd_COOph8VMtvlH1Cw",
description: "Creativity is the spark that ignites new ideas, opens doors to innovation, and breaks through the ordinary."
},
{
title: "The Power of Thinking",
image: "https://d3mvlb3hz2g78.cloudfront.net/wp-content/uploads/2020/11/thumb_720_450_dreamstime_m_186895001.jpg",
description: "While creativity helps you generate ideas, critical thinking helps you refine them and ensures their practicality."
},
{
title: "Expanding Your Knowledge",
image: "https://s29814.pcdn.co/wp-content/uploads/2022/12/shutterstock_1847661151.jpg.optimal.jpg",
description: "Knowledge is the foundation of creativity and critical thinking. Continuous learning keeps us relevant."
}
// Coordinates for the cursor
const coords = { x: 0, y: 0 };
const circles = document.querySelectorAll(".circle");

// Colors for the circles
const colors = [
"#ffb56b", "#fdaf69", "#f89d63", "#f59761", "#ef865e", "#ec805d",
"#e36e5c", "#df685c", "#d5585c", "#d1525c", "#c5415c"
];

const blogContainer = document.getElementById("blog-posts");

// Function to load blog posts dynamically
function loadPosts() {
posts.forEach(post => {
const postCard = `
<div class="col-sm-3 m-4">
<div class="card">
<img src="${post.image}" class="card-img-top" alt="${post.title}">
<div class="card-body">
<h5 class="card-title">${post.title}</h5>
<p class="card-text">${post.description}</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
</div>
`;
blogContainer.innerHTML += postCard;
document.addEventListener("mousemove", (e) => {
coords.x = e.clientX;
coords.y = e.clientY;
circles.forEach((circle, i) => {
circle.style.backgroundColor = colors[i % colors.length];
circle.style.transform = `translate(${coords.x}px, ${coords.y}px)`;
});
}

// Function to add comment
function addComment() {
const commentInput = document.getElementById("commentInput");
const commentText = commentInput.value.trim();
if (commentText) {
const commentsList = document.getElementById("commentsList");
commentsList.innerHTML += `<div class="comment">${commentText}</div>`;
commentInput.value = ""; // Clear input after submission
} else {
alert("Please enter a comment.");
}
}

// Load posts on page load
loadPosts();
});
</script>
</body>

</html>

0 comments on commit c21b26c

Please sign in to comment.