Bundles — CozyReads

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CozyReads – Bundles</title>
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
    
    <link rel="stylesheet" href="bundles.css">
</head>
<body>

<div class="container">
    
    <div class="page-header">
        <h1>Bundles</h1>
        <p>Save when you buy together. Perfect for gifts — or for yourself.<br>Click on any bundle to read its full story.</p>
    </div>

<div class="row">
        
        <div class="col-md-6">
            <div class="bundle-card">
                <img class="bundle-img" src="https://web-school.susu.ru/adelina/wp-content/uploads/sites/818/2026/04/geekbot_ru_1776945569663-300x300.jpg" alt="Reader's Starter Pack" data-toggle="modal" data-target="#starterModal">
                <div class="bundle-title">Reader's Starter Pack</div>
                <div class="bundle-scent">Sherlock's Library + Jane's Garden</div>
                <div class="bundle-price">2 070 RUB</div>
                <button class="btn-details" data-toggle="modal" data-target="#starterModal">View details →</button>
            </div>
        </div>

<div class="col-md-6">
            <div class="bundle-card">
                <img class="bundle-img" src="https://web-school.susu.ru/adelina/wp-content/uploads/sites/818/2026/04/snimok-300x300.jpg" alt="Night Reader's Set" data-toggle="modal" data-target="#nightModal">
                <div class="bundle-title">Night Reader's Set</div>
                <div class="bundle-scent">Sherlock's Library + Midnight Poet</div>
                <div class="bundle-price">2 430 RUB</div>
                <button class="btn-details" data-toggle="modal" data-target="#nightModal">View details →</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="starterModal" tabindex="-1" aria-labelledby="starterModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="starterModalLabel">Reader's Starter Pack</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <p><strong>Price:</strong> 2 070 RUB (save 250 RUB)</p>
                <p><strong>Includes:</strong> Sherlock's Library + Jane's Garden</p>
                <p>This bundle includes two bestsellers. Sherlock's Library smells like a vintage library with tobacco and old paper. Jane's Garden smells like fresh roses and tea after rain. Together they are perfect for readers who love both mysteries and romance novels.</p>
                <p><strong>Each candle burns for 50 hours.</strong> The set comes in a gift box with a handmade bookmark.</p>
                <div class="modal-details">
                    <strong>Details:</strong> Size: 2 × 255 g | Burn time: 50 hours each | Wax: 100% soy wax | Wick: cotton | Jar: reusable glass
                </div>
                
            </div>
            <div class="modal-footer">
                <a href="https://vk.ru/kkdlna" target="_blank" class="btn-contact">Contact me to order (VK)</a>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="nightModal" tabindex="-1" aria-labelledby="nightModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="nightModalLabel">Night Reader's Set</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <p><strong>Price:</strong> 2 430 RUB (save 250 RUB)</p>
                <p><strong>Includes:</strong> Sherlock's Library + Midnight Poet</p>
                <p>Sherlock's Library smells like tobacco, old paper, and bergamot. Midnight Poet smells like dark vanilla, cedar, and ink. Both candles are deep, warm, and perfect for late night reading or creative work.</p>
                <p><strong>Each candle burns for 50 hours.</strong> Comes in a gift box.</p>
                <div class="modal-details">
                    <strong>Details:</strong> Size: 2 × 255 g | Burn time: 50 hours each | Wax: 100% soy wax | Wick: cotton | Jar: reusable glass
                </div>
               
            </div>
            <div class="modal-footer">
                <a href="https://vk.ru/kkdlna" target="_blank" class="btn-contact">Contact me to order (VK)</a>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<footer>
    <p>© 2026 CozyReads – candles for your quiet moments</p>
</footer>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="bundles.js"></script>

</body>
</html>

body {
    background: #2c2418;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #f5ede4;
}

.page-header {
    text-align: center;
    margin: 50px 0 30px;
}

.page-header h1 {
    font-size: 2.5rem;
    font-weight: 500;
    color: #fff3e8;
}

.page-header p {
    font-size: 1.2rem;
    color: #e8d9ce;
    max-width: 600px;
    margin: 10px auto;
}

.bundle-card {
    background: #3a2e24;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
    height: 100%;
    text-align: center;
}

.bundle-card:hover {
    transform: translateY(-5px);
}

.bundle-img {
    cursor: pointer;
    transition: transform 0.3s ease;
    border-radius: 12px;
    max-width: 100%;
    height: auto;
}

.bundle-img:hover {
    transform: scale(1.03);
}

.bundle-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 15px;
    margin-bottom: 5px;
    color: #fff3e8;
}

.bundle-scent {
    font-size: 0.9rem;
    color: #d4b48c;
    font-style: italic;
    margin-bottom: 10px;
}

.bundle-price {
    font-size: 1.4rem;
    font-weight: 700;
    color: #c47a44;
    margin: 10px 0;
}

.btn-details {
    background: #c47a44;
    color: #fff3e8;
    border: none;
    padding: 10px 20px;
    border-radius: 40px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
    margin-top: 10px;
}

.btn-details:hover {
    background: #a86334;
}

.modal-content {
    border-radius: 10px;
    background: #3a2e24;
    color: #e8d9ce;
}

.modal-header {
    background-color: #4a3a2c;
    border-bottom: 1px solid #5c4836;
    color: #fff3e8;
}

.modal-body p {
    margin-bottom: 12px;
    line-height: 1.6;
    color: #e8d9ce;
}

.modal-details {
    background: #4a3a2c;
    padding: 12px;
    border-radius: 12px;
    margin: 15px 0;
    font-size: 0.9rem;
    color: #e8d9ce;
}

/* СПЕЦИАЛЬНЫЙ СТИЛЬ ДЛЯ БЛОКА ЭКОНОМИИ (был бирюзовый, стал тёмный с читаемым текстом) */
.modal-details.save-info,
.modal-details[style*="background:#e6f4ea"] {
    background: #2c2418 !important;
    color: #f5e2c9 !important;
    border-left: 3px solid #c47a44;
}

.modal-footer {
    border-top: 1px solid #5c4836;
}

.btn-contact {
    background: #2c2418;
    color: #fff3e8;
    border: none;
    padding: 10px 20px;
    border-radius: 40px;
    cursor: pointer;
    width: 100%;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.btn-contact:hover {
    background: #c47a44;
    color: white;
    text-decoration: none;
}

footer {
    text-align: center;
    padding: 30px;
    color: #b8a690;
    border-top: 1px solid #4a3a2c;
    margin-top: 40px;
}

Results:

CozyReads – Bundles

Reader's Starter Pack

Sherlock's Library + Jane's Garden

2 070 RUB

Night Reader's Set

Sherlock's Library + Midnight Poet

2 430 RUB