bloggertheme.xml

<style>
  
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;800&display=swap');
  
  #PopularPosts1,
  #footer, 
  .page header,
  #comments,
  .post-share-buttons,
  h3.post-title, 
  .bg-photo-container,
  .bg-photo-overlay,
  .centered-top-container,
  .collapsed-header .centered-top-placeholder {
  	display: none;
  }
  
  
  .post-body {
  	color: #000;
    margin: 0;
    font-family: "Poppins", sans-serif;
  }
  
  .post-body img { height: unset; }
  
  .post-body h3 { color: #000; }
  
  footer h3 { color: #fff; }
  
  .Blog .blog-posts .post-outer-container .post-outer {
   	padding-bottom: 0; 
  }
  
  .Blog .blog-posts .post-outer-container,
  .centered-bottom { 
  	padding: 0;
  }
  
  .page_body .widget {
  	margin-bottom: 0;
  }
  
  .page_body .centered {
  	padding: 0;
    max-width: unset;
  }
  
  @media screen and (max-width: 800px) {
    div.widget.Blog .blog-posts .post-outer-container {
    	padding: 0;
    }
  }
  
  nav a:hover {
  	color: #000;
  }
  
  a:visited {
  	color: #000;
  }
  
  .buttons a:visited,
  footer a:visited {
  	color: #fff;
  }
  
  .post-body footer h3 {color: #fff;}
  
  
  
  /* Custom Styles */
  
  * {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Poppins", sans-serif;
  background: #f5f4f4;
}

p {
  line-height: 180%;
  font-size: 16px;
}

a {
  text-decoration: none;
  color: #000;
}

nav {
  position: fixed;
  top: 30px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 254, 254, 0.4) 100%
  );
  backdrop-filter: blur(10px);
  width: 900px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 32px;
  border-radius: 24px;
  box-shadow: 0 4px 50px -8px rgba(0, 0, 0, 0.2);
  z-index: 300;
}

nav .logo {
  font-weight: bold;
  font-size: 18px;
  color: #8300b6;
}

nav .nav-items {
  display: flex;
  gap: 50px;
}

.custom-container {
  max-width: 900px;
  margin-inline: auto;
}

/* Header */

header.custom-header {
  height: 100vh;
  min-height: 600px;
  max-height: 800px;
  background: linear-gradient(90deg, #c2cefe 0%, #f7a3fe 100%);
  display: block;
}

header.custom-header .custom-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

header.custom-header .left {
  max-width: 500px;
}

h1 {
  font-size: 50px;
  line-height: 130%;
  margin: 0;
  background: linear-gradient(90deg, #230127 0%, #9e08fb 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

header.custom-header .left p {
  background: linear-gradient(90deg, #080022 0%, #8300b6 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  line-height: 200%;
}

.buttons {
  display: flex;
  gap: 24px;
}

.download-btn {
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 14px;
  width: 210px;
}

.download-btn .btn-icon img {
  height: 36px;
  display: flex;
}

.download-btn .btn-text div:first-child {
  text-transform: uppercase;
}

.download-btn .btn-text div:last-child {
  font-weight: bold;
}

header.custom-header .right img {
  height: 460px;
  display: flex;
}

/* Featured Section */

section {
  padding: 50px 32px;
}

section h2 {
  color: #8300b6;
  text-align: center;
  margin: 0;
  margin-bottom: 16px;
}

#featured {
  background: #fff;
  box-shadow: 0 5px 55px -15px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  padding-top: 30px;
  margin-top: -90px;
}

#featured .logos {
  display: flex;
  gap: 60px;
  justify-content: center;
}

/* Features */

#features .feature-card {
  background: linear-gradient(90deg, #ebfefe 0%, #eafef3 100%);
  border-radius: 20px;
  padding: 24px;
}

#features h3 {
  font-size: 18px;
}

#features .icon {
  height: 60px;
  width: 60px;
  border-radius: 10px;
  background: linear-gradient(90deg, #fee3e0 0%, #fee9e6 100%);
  display: grid;
  place-items: center;
}

#features .content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}

/* Testimonials Section */

#testimonials .content {
  display: flex;
  justify-content: space-between;
  gap: 80px;
}

#testimonials .left {
  width: 360px;
}

#testimonials .right {
  flex: 1;
  position: relative;
}

#testimonials .left h2 {
  text-align: left;
  color: #000;
}

#testimonials .quote-icon {
  position: absolute;
  top: -20px;
  left: -50px;
  opacity: 0.3;
}

#testimonials .quote-icon img {
  height: 60px;
}

#testimonials .reviewer-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

#testimonials .reviewer-info img {
  height: 60px;
}

#testimonials .reviewer-info .name {
  font-weight: bold;
}

#testimonials .reviewer-info .designation {
  font-size: 14px;
}

#testimonials {
  position: relative;
}

.bg-element {
  position: absolute;
  height: 760px;
  left: -50px;
  right: -50px;
  bottom: 0;
  background: linear-gradient(90deg, #fdd7e8 0%, #fee5fa 100%);
  z-index: -1;
}

#testimonials .navigation-btns {
  position: absolute;
  right: 20px;
  bottom: 40px;
  display: flex;
  gap: 2px;
}

#testimonials .navigation-btns img {
  height: 26px;
}

#testimonials .prev-btn,
#testimonials .next-btn {
  background: #fff;
  display: flex;
  cursor: pointer;
  opacity: 0.7;
}

#testimonials .prev-btn:hover,
#testimonials .next-btn:hover {
  opacity: 1;
}

#testimonials .testimonial-card {
  opacity: 0;
  transition: all 300ms ease;
}

#testimonials .testimonial-card.active {
  opacity: 1;
}

/* Pricing Section */

#pricing .content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

#pricing .plan {
  background: #fff;
  border-radius: 10px;
  padding: 24px;
}

#pricing ul {
  list-style: none;
  padding: 0;
}

#pricing ul li {
  margin: 16px 0;
  line-height: 1.8;
}

#pricing .plan-name {
  font-size: 30px;
  margin: 0;
}

#pricing .plan-price {
  font-size: 20px;
  font-weight: bold;
}

#pricing .btn {
  background: #000;
  color: #fff;
  padding: 8px 32px;
  width: 100%;
  margin-top: 24px;
  display: inline-block;
  border-radius: 10px;
  transition: all 200ms ease;
}

#pricing .btn:hover {
  transform: scale(1.03);
}

#pricing ul li .icon {
  margin-right: 10px;
}

/* CTA */

#cta .content {
  max-width: 600px;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: 0 auto;
  padding-bottom: 32px;
}

#cta .content p {
  text-align: center;
  margin-top: -8px;
  margin-bottom: 32px;
}

/* Footer */

footer {
  background: linear-gradient(90deg, #0a1300 0%, #001e0f 100%);
  color: #fff;
  padding-top: 50px;
}

footer a {
  color: #fff;
}

footer .content {
  display: flex;
  justify-content: space-between;
}

footer .logo {
  font-size: 24px;
  font-weight: bold;
}

footer .left p {
  margin-top: 0;
}

footer .right {
  display: flex;
  gap: 40px;
}

footer h3 {
  margin-top: 0;
}

footer ul {
  list-style: none;
  padding: 0;
  margin-bottom: 40px;
}

footer ul li {
  margin: 8px 0;
}

footer .copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
}

footer .socials {
  display: flex;
  gap: 40px;
}

footer .socials img {
  height: 40px;
}

/* Hidden Items  */

nav .menu-icon,
.mobile-nav-menu {
  display: none;
}

@media (max-width: 600px) {
  section {
    padding-inline: 0;
  }

  nav .nav-items {
    display: none;
  }

  body {
    background: #fff;
  }

  nav {
    width: calc(100% - 30px);
  }

  nav .menu-icon {
    display: block;
    cursor: pointer;
  }

  nav .menu-icon img {
    height: 30px;
    display: flex;
  }

  header.custom-header .custom-container {
    flex-direction: column;
  }

  header.custom-header {
    max-height: fit-content;
    height: fit-content;
    padding-top: 160px;
  }

  header.custom-header .right img {
    height: 350px;
  }

  .custom-container {
    padding: 0 32px;
  }

  h1 {
    font-size: 40px;
  }

  .buttons {
    flex-direction: column;
  }

  section h2 {
    position: relative;
    margin-bottom: 40px;
  }

  section h2::after {
    content: "";
    position: absolute;
    background: #000;
    width: 30px;
    height: 2px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Featured section */

  #featured {
    margin-top: 40px;
  }

  #featured .logos {
    flex-direction: column;
    gap: 40px;
  }

  #featured img {
    height: 30px;
  }

  /* Features section */

  #features .content {
    grid-template-columns: 1fr;
  }

  /* Testimonials */

  #testimonials .content {
    flex-direction: column;
  }

  #testimonials .content .left {
    width: 100%;
  }

  #testimonials .left h2::after {
    left: 0;
    transform: translateX(0);
  }

  #testimonials .left h2 {
    margin-bottom: 0;
  }

  #testimonials .right .quote-icon {
    left: -10px;
  }

  .bg-element {
    position: absolute;
    height: 1900px;
    left: -30px;
    right: -30px;
  }

  /* Pricing Section */

  #pricing .content {
    grid-template-columns: 1fr;
  }

  #pricing .plan {
    padding-inline: 0;
  }

  /* Footer */

  footer .content {
    flex-direction: column;
  }

  footer .right {
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
  }

  footer .copyright {
    flex-direction: column;
  }

  /* Mobile nav menu */

  .mobile-nav-menu {
    position: fixed;
    right: 32px;
    top: 100px;
    background: #fff;
    display: flex;
    flex-direction: column;
    padding: 8px 16px;
    gap: 16px;
    font-size: 16px;
    border-radius: 10px;
    box-shadow: 0 4px 40px -8px rgba(0, 0, 0, 0.2);
    opacity: 0;
    z-index: 600;
    pointer-events: none;
    transform: translateY(-10px);
    transition: all 300ms ease;
  }

  .mobile-nav-menu.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  
   /* Blog section */

  #blog .latest-posts-list {
    flex-direction: column;
  }
}
  
/* Blog section */

#blog .latest-posts-list {
  display: flex;
  gap: 24px;
}

#blog .post img {
  max-height: 200px;
  width: 100%;
  object-fit: cover;
  border-radius: 8px;
}

#blog .post {
  flex: 1;
  background: #fff;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 4px 0 40px -8px rgba(0, 0, 0, 0.2);
  line-height: 200%;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
}

#blog .thumbnail {
  margin: -16px;
  margin-bottom: 0;
}

#blog .post .title {
  font-size: 24px;
  line-height: 150%;
  margin: 8px 0;
}

#blog .post .summary {
  max-height: 95px;
  overflow: hidden;
  position: relative;
}

#blog .post .summary::after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: linear-gradient(transparent 0%, #fff 85%);
}

#blog .post .read-more-btn {
  font-weight: bold;
  color: blue;
  align-self: flex-end;
}

#blog .post:hover {
  transform: scale(1.03);
}


  
  
  
</style>


<nav>
      <a class="logo" href="#">LOGO</a>
      <div class="nav-items">
        <a class="nav-link" href="#features">Features</a>
        <a class="nav-link" href="#pricing">Pricing</a>
        <a class="nav-link" href="#cta">Download</a>
        <a href="#">Blog</a>
      </div>

      <div class="menu-icon">
        <img alt="" src="#" />
      </div>
    </nav>

    <div class="mobile-nav-menu">
      <a class="nav-link" href="#features">Features</a>
      <a class="nav-link" href="#pricing">Pricing</a>
      <a class="nav-link" href="#cta">Download</a>
        <a href="">Blog</a>
      
    </div>

    <header class="custom-header">
      <div class="custom-container">
        <div class="left">
          <h1>Simplified Task Management</h1>
          <p>
            Streamline your productivity and stay organized with our powerful
            task management app
          </p>

          <div class="buttons">
            <a class="download-btn" href="#">
              <div class="btn-icon">
                <img alt="" src="#" />
              </div>
              <div class="btn-text">
                <div>Get It On</div>
                <div>App Store</div>
              </div>
            </a>

            <a class="download-btn" href="#">
              <div class="btn-icon">
                <img alt="" src="#" />
              </div>
              <div class="btn-text">
                <div>Download It On</div>
                <div>Google Play</div>
              </div>
            </a>
          </div>
        </div>

        <div class="right">
          <img alt="" src="#" />
        </div>
      </div>
    </header>

    <div class="custom-container">
      <section id="featured">
        <h2>Featured on</h2>
        <div class="content">
          <div class="logos">
            <img alt="" src="#" />
            <img alt="" src="#" />
            <img alt="" src="#" />
            <img alt="" src="#" />
          </div>
        </div>
      </section>

      <section id="features">
        <h2>Features</h2>
        <div class="content">
          <!--<div class="feature-card">
            <div class="icon">
              <img src="images/create-task-icon.svg" alt="" />
            </div>
            <h3>Intuitive Task Creation</h3>
            <p>
              Easily create and manage tasks with a simple and user-friendly
              interface.
            </p>
          </div>-->
        </div>
      </section>

      <section id="testimonials">
        <div class="content">
          <div class="left">
            <h2>What our customers say about the app</h2>
            <p>There are already more than 100k+ customers using our app.</p>
          </div>

          <div class="right">
            <div class="testimonial-card">
              <span class="quote-icon">
                <img alt="" src="#" />
              </span>

              <p class="review">
                Since I started using the app, my productivity has skyrocketed.
                The reminder feature keeps me on track. Highly recommended!
              </p>

              <div class="reviewer-info">
                <div class="image">
                  <img alt="" src="#" />
                </div>

                <div class="details">
                  <div class="name">John Smith</div>
                  <div class="designation">Tech Lead, Amazon</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="navigation-btns">
          <div class="prev-btn">
            <img alt="" src="#" />
          </div>
          <div class="next-btn">
            <img alt="" src="#" />
          </div>
        </div>

        <span class="bg-element"></span>
      </section>

      <section id="pricing">
        <h2>Flexible Pricing Options</h2>
        <div class="content">
          <!--<div class="plan">
            <h4 class="plan-name">Basic</h4>
            <ul class="plan-features">
              <li>50 Tasks</li>
              <li>Deadline Tracking</li>
              <li>Priority Settings</li>
              <li>Basic Reporting</li>
              <li>Email Notifications</li>
              <li>24/7 Customer Support</li>
            </ul>
            <div class="plan-price">Free</div>
            <a href="#" class="btn">Choose</a>
          </div>-->
        </div>
      </section>

      <section id="cta">
        <h2>Get Started Today</h2>
        <div class="content">
          <p>
            Take control of your tasks and boost your productivity. Get started
            today and experience the power of efficient task management
          </p>

          <div class="buttons">
            <a class="download-btn" href="#">
              <div class="btn-icon">
                <img alt="" src="#" />
              </div>
              <div class="btn-text">
                <div>Get It On</div>
                <div>App Store</div>
              </div>
            </a>

            <a class="download-btn" href="#">
              <div class="btn-icon">
                <img alt="" src="#" />
              </div>
              <div class="btn-text">
                <div>Download It On</div>
                <div>Google Play</div>
              </div>
            </a>
          </div>
        </div>
      </section>
      
      
      <section id="blog">
        <h2>Latest Blog Posts</h2>

        <div class="latest-posts-list">
          
        </div>
      </section>
      
    </div>

    <footer>
      <div class="custom-container">
        <div class="content">
          <div class="left">
            <div class="logo">LOGO</div>
            <p>Best Task Management App</p>
          </div>

          <div class="right">
            <div class="links">
              <h3>Quick Links</h3>
              <ul>
                <li>
                  <a href="#">About Us</a>
                </li>

                <li>
                  <a href="#">Privacy Policy</a>
                </li>

                <li>
                  <a href="#">Terms &amp; Conditions</a>
                </li>
              </ul>
            </div>

            <div class="links">
              <h3>Contact Us</h3>
              <ul>
                <li>+1 (555) 123-4567</li>
                <li>contact@example.com</li>
                <li>123 Main Street, City, State, ZIP</li>
              </ul>
            </div>
          </div>
        </div>

        <div class="copyright">
          <p>Designed by Live Blogger © 2023</p>
          <div class="socials">
            <a href="#"><img alt="" src="#" /></a>
            <a href="#"><img alt="" src="#" /></a>
            <a href="#"><img alt="" src="#" /></a>
          </div>
        </div>
      </div>
    </footer>




<script>
  
  
  const featuresList = [
  {
    icon: "#",
    title: "Intuitive Task Creation",
    description:
      "Easily create and manage tasks with a simple and user-friendly interface.",
  },

  {
    icon: "#",
    title: "Smart Reminders",
    description:
      "Set reminders to ensure you never miss an important deadline.",
  },

  {
    icon: "#",
    title: "Collaboration Tools",
    description:
      "Collaborate with team members, assign tasks, and track progress together.",
  },

  {
    icon: "#",
    title: "Progress Tracking",
    description:
      "Monitor your progress, track completed tasks, and stay motivated.",
  },

  {
    icon: "#",
    title: "Deadline Management",
    description:
      "Set due dates and track deadlines to stay on top of your commitments.",
  },

  {
    icon: "#",
    title: "File Attachments",
    description:
      "Attach files to tasks for seamless collaboration and easy access.",
  },
];

const testimonialsList = [
  {
    review:
      "Since I started using the app, my productivity has skyrocketed. The reminder feature keeps me on track and ensures that I never miss an important task or deadline. Highly recommended!",
    image: "#",
    name: "John Smith",
    designation: "Tech Lead, Amazon",
  },
  {
    review:
      "This app has completely changed the way I manage my tasks. The advanced features and intuitive interface make it a joy to use. I can't imagine my work life without it!",
    image: "#",
    name: "Sarah Johnson",
    designation: "Product Manager, Google",
  },
  {
    review:
      "I've tried several task management apps, but this one takes the cake. The customizable workflows and seamless collaboration features have greatly improved my team's efficiency.",
    image: "#",
    name: "Emily Davis",
    designation: "Project Manager, Microsoft",
  },
];

const plans = [
  {
    name: "Basic",
    features: [
      "50 Tasks",
      "Deadline Tracking",
      "Priority Settings",
      "Basic Reporting",
      "Email Notifications",
      "24/7 Customer Support",
    ],
    price: "Free",
    link: "#",
  },

  {
    name: "Pro",
    features: [
      "All from <strong>Basic</strong> plan",
      "Advanced Tasks",
      "Subtasks",
      "File Attachments",
      "Gantt Chart View",
      "Collaborations",
    ],
    price: "$29.99",
    link: "#",
  },

  {
    name: "Enterprise",
    features: [
      "All from <strong>Pro</strong> plan",
      "Custom Branding",
      "API Access",
      "Data Export",
      "Advanced Security",
      "Custom Integrations",
    ],
    price: "Contact for pricing",
    link: "#",
  },
];

const featuresContent = document.querySelector("#features .content");
const testimonialCard = document.querySelector(
  "#testimonials .testimonial-card"
);
const prevBtn = document.querySelector("#testimonials .prev-btn");
const nextBtn = document.querySelector("#testimonials .next-btn");
const pricingContent = document.querySelector("#pricing .content");
const menuIcon = document.querySelector(".menu-icon");
const mobileNavMenu = document.querySelector(".mobile-nav-menu");
const navLinks = document.querySelectorAll(".nav-link");
let currentTestimonialIndex = 0;

const displayFeatures = () => {
  featuresList.forEach((f) => {
    const html = `<div class="icon">
        <img src="${f.icon}" alt="" />
      </div>
      <h3>${f.title}</h3>
      <p>
        ${f.description}
      </p>`;

    const featureCard = document.createElement("div");
    featureCard.classList.add("feature-card");
    featureCard.innerHTML = html;

    featuresContent.appendChild(featureCard);
  });
};

displayFeatures();

const displayTestimonial = () => {
  const html = `<span class="quote-icon">
  <img src="#" alt="" />
</span>

<p class="review">
 ${testimonialsList[currentTestimonialIndex].review}
</p>

<div class="reviewer-info">
  <div class="image">
    <img src="${testimonialsList[currentTestimonialIndex].image}" alt="" />
  </div>

  <div class="details">
    <div class="name">${testimonialsList[currentTestimonialIndex].name}</div>
    <div class="designation">${testimonialsList[currentTestimonialIndex].designation}</div>
  </div>
</div>`;

  testimonialCard.innerHTML = html;
  testimonialCard.classList.add("active");
};

displayTestimonial();

nextBtn.addEventListener("click", () => {
  testimonialCard.classList.remove("active");

  setTimeout(() => {
    currentTestimonialIndex++;
    if (currentTestimonialIndex >= testimonialsList.length) {
      currentTestimonialIndex = 0;
    }
    displayTestimonial();
  }, 200);
});

prevBtn.addEventListener("click", () => {
  testimonialCard.classList.remove("active");

  setTimeout(() => {
    currentTestimonialIndex--;
    if (currentTestimonialIndex < 0) {
      currentTestimonialIndex = testimonialsList.length - 1;
    }
    displayTestimonial();
  }, 200);
});

const displayPricing = () => {
  plans.forEach((p) => {
    const featuresHTML = p.features
      .map(
        (f) =>
          `<li><span class='icon'><img src='#'/></span>${f}</li>`
      )
      .join("");

    const html = `<h4 class="plan-name">${p.name}</h4>
    <ul class="plan-features">
      ${featuresHTML}
    </ul>
    <div class="plan-price">${p.price}</div>
    <a href="${p.link}" class="btn">Choose</a>`;

    const plan = document.createElement("div");
    plan.classList.add("plan");
    plan.innerHTML = html;

    pricingContent.appendChild(plan);
  });
};

displayPricing();

menuIcon.addEventListener("click", () => {
  mobileNavMenu.classList.toggle("active");
});

navLinks.forEach((link) => {
  link.addEventListener("click", (e) => {
    e.preventDefault();
    const targetId = link.getAttribute("href");
    const targetElement = document.querySelector(targetId);

    if (targetElement) {
      const offset = targetElement.offsetTop - 60;
      window.scrollTo({ top: offset });
    }

    mobileNavMenu.classList.remove("active");
  });
});
  
const latestPostsList = document.querySelector('#blog .latest-posts-list');

const generateLatestPosts = (posts) => {
	posts.forEach(post => {
    	const title = post.title.$t;
      	const defaultThumbnail = '#';
      	const thumbnailSrc = post.media$thumbnail ? post.media$thumbnail.url.replace('/s72', '/s300') : defaultThumbnail;
      	const summary = post.summary.$t;
      	const link = post.link[post.link.length - 1].href;
      
      const html = `<div class="thumbnail">
              <a href="${link}">
                <img
                  src="${thumbnailSrc}"
                  alt=""
                />
              </a>
            </div>

            <a href="${link}">
              <h3 class="title">${title}</h3>
            </a>
            <div class="summary">
              ${summary}
            </div>

            <a href="${link}" class="read-more-btn">Read more</a>`;
      
      	const postDiv = document.createElement('div');
      	postDiv.classList.add('post');
      	
      	postDiv.innerHTML = html;
      	latestPostsList.appendChild(postDiv);
   }); 
}  

  
const handleLatestPosts = (posts) => {
  	generateLatestPosts(posts.feed.entry);
}

  
</script>

<script src='/feeds/posts/summary?alt=json-in-script&callback=handleLatestPosts&max-results=2'></script>