HTMLify

needhelp.html
Views: 536 | Author: amar
<!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; /* Linen */
    background-image: url('https://htmlify.artizote.com/abh/AI_Megpoid_GUMI_transparent.png'); /* Background image ka path */
    background-size: cover; /* Image ko poore background mein fit karne ke liye */
    background-repeat: no-repeat;
    background-size: 120%;
    background-position: flex-start; /* Image ko center mein rakhne ke liye */
    /*background-position-x: 150px;
    background-position-y: 250px;*/
    background-blend-mode: overlay; /* Color aur image ko milane ke liye blend mode */
    color: #4B0082; /* Indigo */
    margin: 10%; /* Header height के बराबर padding */
}
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;


}

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: 0;
            text-align: center;
            font: 'Montserrat', sans-serif;
            size: 150%;
            width: 100%;
            top: 0;

            
    }

    

 </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/abh/AI_Megpoid_GUMI_transparent.png" alt="Background Image" class="background-image">
 </td>
 <td>
    <main>

 <body>
  
    <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> 
</main>
</td>
</tr>
</table>




    <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>

</body>





























      





    
 
           <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>
HTMLify

Share this file:
