<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 & 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>
0 Comments