Blog_page.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog Section</title>
    <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" />
    <link rel="stylesheet" href="./src/Styles/Style_Blog_page.css">
    <link rel="stylesheet" href="src/Styles/scroll.css">
    <style>
      /* Circle styles */
      .circle {
        height: 24px;
        width: 24px;
        border-radius: 50%;
        background-color: black;
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none;
        z-index: 99999999;
        transition: transform 0.1s ease-out;
      }
      /*  Navbar Styling  starts*/
      .title {
  display: flex;
  align-items: left;
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
  justify-content: center;
}
.navbar {
  padding: 0;
  background-color: #333; /* Dark background */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  border-bottom: none;
}

/* Styling individual links in the navbar */
.navbar a {
  color: #a0a0a0; /* Link color */
  font-size: 18px; /* Font size */
  text-decoration: none; /* Remove underline */
  padding: 0.5rem 1rem; 
  border-radius: 0.5rem; /* Rounded corners for hover effect */
  transition: background-color 0.3s ease; /* Smooth hover transition */
  
}
.nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  
}

.nav-links a:hover {
  color: #ffffff;
}
/* navbar styling ends */
      html{
        scroll-behavior: smooth;
      }
    </style>
  </head>
  <body>
<!-- Circles -->
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>

  <nav class="navbar">
    <div class="title">
      <h1 class="site-name">Canvas Editor</h1>
      <i class="fa-solid fa-paintbrush"></i>
    </div>
    <div class="nav-links">
      <a href="index.html">Home</a>
      <a href="about-us.html">About</a>
      <a href="privacy.html">Privacy</a>
      <a href="Blog_page.html">Blogs</a>
      <a href="Faq.html">FAQ</a>
      <a href="contributors.html">Contributors</a>
      <a href="testimonial.html">Testimonial</a>
      <a href="signup.html">Sign Up</a>
      <a href="login.html">Login</a>
    </div>
  </nav>
<header>
      <div class = "banner">
        <div class = "container">
          <h1 class = "banner-title">
            <span>Creative</span> Canvas Blog
          </h1>
          <p>everything that you want to know about creativity</p>
          <form>
            <input type = "text" class = "search-input" placeholder="search blogs and designs. . .">
            <button type = "submit" class = "search-btn">
              <i class = "fas fa-search"></i>
            </button>
          </form>
        </div>
      </div>
    </header>

    <section class = "design" id = "design">
      <div class = "container">
        <div class = "title">
          <h2>Recent Designs</h2>
          <p>recent arts & designs blogs</p>
        </div>

        <div class = "design-content">

          <div class = "design-item">
            <div class = "design-img">
              <img src = "/src/images/art-design-1.jpg" alt = "">
              <span><i class = "far fa-heart"></i> 22</span>
              <span>Creative Canvas</span>
            </div>
            <div class = "design-title">
              <a href = "#">make an awesome design portfolio for college or university</a>
            </div>
          </div>

          <div class = "design-item">
            <div class = "design-img">
              <img src = "/src/images/art-design-2.jpg" alt = "">
              <span><i class = "far fa-heart"></i> 22</span>
              <span>Creative Canvas</span>
            </div>
            <div class = "design-title">
              <a href = "#">Enhance your creativity</a>
            </div>
          </div>
          
          <div class = "design-item">
            <div class = "design-img">
              <img src = "/src/images/art-design-3.jpg" alt = "">
              <span><i class = "far fa-heart"></i> 22</span>
              <span>Creative Canvas</span>
            </div>
            <div class = "design-title">
              <a href = "#">Develop creative design and show the world</a>
            </div>
          </div>
          
          <div class = "design-item">
            <div class = "design-img">
              <img src = "/src/images/art-design-4.jpg" alt = "">
              <span><i class = "far fa-heart"></i> 22</span>
              <span>Creative Canvas</span>
            </div>
            <div class = "design-title">
              <a href = "#">Think out of the box, enhance creativity</a>
            </div>
          </div>
         
          <div class = "design-item">
            <div class = "design-img">
              <img src = "/src/images/art-design-5.jpg" alt = "">
              <span><i class = "far fa-heart"></i> 22</span>
              <span>Creative Canvas</span>
            </div>
            <div class = "design-title">
              <a href = "#">Document your work and stay motivated in process</a>
            </div>
          </div>
          
          <div class = "design-item">
            <div class = "design-img">
              <img src = "/src/images/art-design-6.jpg" alt = "">
              <span><i class = "far fa-heart"></i> 22</span>
              <span>Creative Canvas</span>
            </div>
            <div class = "design-title">
              <a href = "#">Show your work to others and teach them</a>
            </div>
          </div>

        </div>
      </div>
    </section>

    <section class = "blog" id = "blog">
      <div class = "container">
        <div class = "title">
          <h2>Latest Blog</h2>
          <p>recent blogs about art & design</p>
        </div>

        <div class = "blog-content">

          <div class = "blog-item">
            <div class = "blog-img">
              <img src = "/src/images/blog-p-1.jpg" alt = "">
              <span><i class = "far fa-heart"></i></span>
            </div>
            <div class = "blog-text">
              <span>20 January, 2020</span>
              <h2>Organizing the environment for productive work</h2>
              <p>Organizing the work place is very much important as it gives you the motivation to work for longer duration.</p>
              <a href = "#">Read More</a>
            </div>
          </div>

          <div class = "blog-item">
            <div class = "blog-img">
              <img src = "/src/images/blog-p-2.jpg" alt = "">
              <span><i class = "far fa-heart"></i></span>
            </div>
            <div class = "blog-text">
              <span>05 October, 2024</span>
              <h2>Enhancing Creativity by Drawing</h2>
              <p>We can able to enhance our creativity only when we can able to visualize things properly and draw it.</p>
              <a href = "#">Read More</a>
            </div>
          </div>

          <div class = "blog-item">
            <div class = "blog-img">
              <img src = "/src/images/blog-p-3.jpg" alt = "">
              <span><i class = "far fa-heart"></i></span>
            </div>
            <div class = "blog-text">
              <span>05 October, 2024</span>
              <h2>Organizing other household stuffs</h2>
              <p>Beside work we also have to organize our other household item to make house neat and clean.</p>
              <a href = "#">Read More</a>
            </div>
          </div>

          <div class = "blog-item">
            <div class = "blog-img">
              <img src = "/src/images/blog-p-4.jpg" alt = "">
              <span><i class = "far fa-heart"></i></span>
            </div>
            <div class = "blog-text">
              <span>05 October, 2024</span>
              <h2>Spreading greenery in house</h2>
              <p>Green plants spread greenery and make us feel fresh during through the day.</p>
              <a href = "#">Read More</a>
            </div>
          </div>

          <div class = "blog-item">
            <div class = "blog-img">
              <img src = "/src/images/blog-p-5.jpg" alt = "">
              <span><i class = "far fa-heart"></i></span>
            </div>
            <div class = "blog-text">
              <span>05 October, 2024</span>
              <h2>Organizing the bed</h2>
              <p>This is a very good habit of organizing the bed after waking up.</p>
              <a href = "#">Read More</a>
            </div>
          </div>

          <div class = "blog-item">
            <div class = "blog-img">
              <img src = "/src/images/blog-p-6.jpg" alt = "">
              <span><i class = "far fa-heart"></i></span>
            </div>
            <div class = "blog-text">
              <span>05 October, 2024</span>
              <h2>Exploring creative fields</h2>
              <p>Art is something which helps us to be creative, so it's necessary to explore more and learn.</p>
              <a href = "#">Read More</a>
            </div>
          </div>
     
        </div>
      </div>
    </section>

    <footer>
      <div class = "social-links">
        <!-- Added responsiveness to icons -->
        <a href = "#"><i class = "fab fa-facebook-f"></i></a>
        <!-- Added the new Twitter(X) logo -->
        <a href = "#"><i class = "fab fa-x-twitter"></i></a>
        <a href = "#"><i class = "fab fa-instagram"></i></a>
        <!-- Added LinkedIn logo -->
        <a href = "https://www.linkedin.com/in/anuragvishwakarma/"><i class = "fab fa-linkedin-in"></i></a>
        <a href = "#"><i class = "fab fa-pinterest"></i></a>
      </div>
      <span>Creative Canvas Blog Page</span>
    </footer>
     <!-- Back to Top Button -->
     <button id="BacktoTop">
      <span>↑</span>
    </button>
    <script src="src/Scripts/BacktoTop.js"></script>
    <script>
      // 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", "#c5415d", "#c03b5d",
        "#b22c5e", "#ac265e", "#9c155f", "#950f5f", "#830060", "#7c0060",
        "#680060", "#60005f", "#48005f", "#3d005e"
      ];

      // Assign colors and initial position to each circle
      circles.forEach(function (circle, index) {
        circle.x = 0;
        circle.y = 0;
        circle.style.backgroundColor = colors[index % colors.length];
      });

      // Update the coordinates when the mouse moves
      window.addEventListener("mousemove", function (e) {
        coords.x = e.clientX;
        coords.y = e.clientY;
      });

      // Animation function to move the circles
      function animateCircles() {
        let x = coords.x;
        let y = coords.y;

        circles.forEach(function (circle, index) {
          // Update the position and scale of each circle
          circle.style.left = x - 12 + "px";
          circle.style.top = y - 12 + "px";
          circle.style.scale = (circles.length - index) / circles.length;

          circle.x = x;
          circle.y = y;

          // Get the next circle in the sequence
          const nextCircle = circles[index + 1] || circles[0];
          x += (nextCircle.x - x) * 0.3;
          y += (nextCircle.y - y) * 0.3;
        });

        // Repeat the animation
        requestAnimationFrame(animateCircles);
      }

      // Start the animation
      animateCircles();
    </script>
  </body>
</html>