<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>quoteby Amar</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
flex-direction: column;
min-height: 100vh;
background-color: #FAF0E6;
background-image: url('https://htmlify.artizote.com/abh/AI_Megpoid_GUMI_transparent.png');
background-size: cover;
background-repeat: no-repeat;
background-size: 120%;
background-position: flex-start;
/*background-position-x: 150px;
background-position-y: 250px;*/
background-blend-mode: overlay;
color: #4B0082;
/* margin: 10%; */
}
main {
display: block;/* Use flexbox layout */
flex-direction: column; /* Stack items vertically */
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
/*min-height: 100vh; /* Full height for centering */
position: relative; /* Allows layering */
/* max-width: 40%; */
height: auto;
width:100%;
}
table > tr > td {
padding: 30%;
}
.quote-container, .quote-week, .quote-month, .about, .contact {
width: 600px; /* Fixed width for each quote container */
max-width: 100%; /* Make it responsive */
align-content: flex-start;
background-color: rgba(255, 239, 213, 0.9); /* Semi-transparent background */
border-radius: 10px; /* Rounded corners */
box-shadow: 0 4px 20px rgba(66, 66, 66, 0.9);
padding: 20px; /* Increased padding for better spacing */
text-align: center; /* Center text */
margin: 20px 0; /* Margin for vertical spacing */
z-index: 1; /* Ensure quote containers are above the background */
align-items: center;
}
.background-image {
max-width: 100%;
}
.heart {
font-size: 25px;
color: #bbb; /* Default color */
cursor: pointer;
transition: color 0.3s;
}
.liked {
color: #e74c3c; /* Instagram-like red color */
}
nav ul {
list-style-type: none;
padding: 0;
margin: 10px 0;
}
nav ul li {
display: inline;
margin: 0 15px;
}
nav ul li a {
color: white;
text-decoration: none;
font-weight: bold;
transition: color 0.2s ease;
}
nav ul li a:hover {
color: #FFD700; /* Gold */
}
.quote-container, .quote-week, .quote-month, .about, .contact {
width: 600px;
max-width: 600px;
background-color: #FFEFD5; /* PapayaWhip */
border-radius: 10px;
box-shadow: 0 4px 20px rgba(66, 66, 66, 0.9);
padding: 10px;
text-align: center;
margin: 20px auto;
transition: box-shadow 1.5s ease, border 1.5s ease;
border: 3px solid transparent;
animation: fadeIn 1s ease-in-out;
}
.author {
font-family: 'Playfair Display', serif;
font-size: 18px;
font-weight: 400;
color: #333;
margin-top: 10px;
text-align: center;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
footer {
background-image: linear-gradient(to right, #355c7d, #6C5B7F); /* Slate Blue to Purple */
color: white;
text-align: center;
margin: 0%;
padding: 10px 0;
width: 100%;
bottom: 0;
}
header {
background-image: linear-gradient(to right, #6C5B7F, #C06C84); /* Purple to Rose */
color: white;
padding: 0;
margin-top: -22px;
text-align: center;
font: 'Montserrat', sans-serif;
size: 150%;
width: 100%;
top: 0;
}
.container{
width:90%;
}
/* Mobile styling */
@media (max-width: 576px) {
table {
display: block;
width: 100%;
}
td {
display: block;
width: 100%;
}
.container {
width: 90%;
}
.quote-container, .quote-week, .quote-month {
font-size: 14px;
width:90%;
}
.quote-text {
font-size: 16px;
}
.author {
font-size: 12px;
}
.niche-ka{
padding:15px;
width:90%;
}
.about{
width:98%;
}
.contact{
width:98%;
}
}
/* Tablet styling */
@media (min-width: 577px) and (max-width: 768px) {
.container {
width: 85%;
}
.quote-container, .quote-week, .quote-month {
font-size: 16px;
width:90%;
}
.quote-text {
font-size: 18px;
}
.author {
font-size: 14px;
}
.niche-ka{
padding-left:35px;
width:90%;
}
.about{
width:98%;
}
.contact{
width:98%;
}
}
/* Desktop styling */
@media (min-width: 769px) {
table {
display: table;
}
td {
width: 50%;
}
.container {
width: 70%;
}
.quote-container, .quote-week, .quote-month {
display: inline-block;
width: 90%;
vertical-align: top;
margin-right: 1%;
}
.quote-text {
font-size: 20px;
}
.author {
font-size: 14px;
}
.niche-ka{
padding-left:55px;
width:90%;
}
.about{
width:100%;
}
.contact{
width:100%;
}
}
</style>
</head>
<body>
<header>
<h1>quote by Amar <i class="fas fa-lightbulb"></i></h1>
<nav>
<ul>
<li><a href="#quote">Today's quote </a></li>
<li><a href="#quote-week">quote of the Week</a></li>
<li><a href="#quote-month">quote of the Month</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<table>
<tr>
<td>
<img src="https://htmlify.artizote.com/djdj/R-removebg-preview.png" alt="Background Image" class="background-image">
</td>
<td>
<main>
<div class="contanier">
<div class="quote-container" id="quote">
<h2>Today's quote</h2>
<p class="quote-text">Death is the premium version of sleep.</p>
<div>
<i id="likeBtn1" class="heart fas fa-heart"></i>
<span id="likeCount1">0</span>
<p class="author">By Immortal & Amar</p>
</div>
</div>
<div class="quote-week" id="quote-week">
<h2>Quote of the Week</h2>
<p class="quote-text">"Nothing is nice."</p>
<div>
<i id="likeBtn2" class="heart fas fa-heart"></i>
<span id="likeCount2">0</span>
<p class="author">By Immortal & Amar</p>
</div>
</div>
<div class="quote-month" id="quote-month">
<h2>Quote of the Month</h2>
<p class="quote-text">"Making a billion with a million is easier than making a thousand with nothing."</p>
<div>
<i id="likeBtn3" class="heart fas fa-heart"></i>
<span id="likeCount3">0</span>
<p class="author">By Immortal & Amar</p>
</div>
</div>
</div>
</main>
</td>
</tr>
</table>
<div class="niche-ka">
<div class="about" id="about">
<h2>About This Series</h2>
<p>This series aims to provide insightful quoteand knowledge bites that can inspire and empower individuals. Our mission is to spread wisdom in a fun and engaging manner.</p>
</div>
<div class="contact" id="contact">
<h2>Contact Us</h2>
<p>If you have any suggestions or contributions, feel free to reach out! Email us at: <a href="mailto:info@quotebyamar.com">info@quotebyamar.com</a></p>
</div>
</div>
<footer>
<div style="display: inline-block; justify-content: space-between; align-items: center; padding: 10px 20px;">
<a href="https://twitter.com/pokemon__meme" target="_blank">
<img src="https://htmlify.artizote.com/amar/X_logo_2023_(white).png" alt="Twitter" style="width: 50px; height: 50px;">
</a>
<a href="https://buymeacoffee.com/pokemonmeme" target="_blank">
<img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="buymeacoffee" style="width: 200px;">
</a>
<a href="https://instagram.com/pokemon._meme" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a5/Instagram_icon.png" alt="Instagram" style="width: 50px; height: 50px;">
</a>
</div>
<p>© 2024 quoteby Amar. All rights reserved.</p>
</footer>
<script>
function setupLikeButton(btnId, countId) {
let likeBtn = document.getElementById(btnId);
let likeCount = document.getElementById(countId);
let liked = false;
likeBtn.addEventListener('click', () => {
liked = !liked;
if (liked) {
likeBtn.classList.add('liked');
likeCount.textContent = parseInt(likeCount.textContent) + 1;
} else {
likeBtn.classList.remove('liked');
likeCount.textContent = parseInt(likeCount.textContent) - 1;
}
// Send like/unlike status to server using API
fetch('/like', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
liked: liked
})
});
});
}
setupLikeButton('likeBtn1', 'likeCount1');
setupLikeButton('likeBtn2', 'likeCount2');
setupLikeButton('likeBtn3', 'likeCount3');
</script>
</body>
</html>