Candles — CozyReads

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

<div class="container">
    
    <div class="page-header">
        <h1>Candles</h1>
        <p>Hand-poured soy wax. Inspired by classic books.<br>Click on any candle to read its full story.</p>
    </div>

<div class="row">
        
        <div class="col-md-4">
            <div class="candle-card">
                <img class="candle-img" src="https://web-school.susu.ru/adelina/wp-content/uploads/sites/818/2026/04/img_69e75bcf45ecf4.97640964-e1776866568659-300x297.png" alt="Sherlock's Library" data-toggle="modal" data-target="#sherlockModal">
                <div class="candle-title">Sherlock's Library</div>
                <div class="candle-scent">Tobacco + old paper + bergamot</div>
                <div class="candle-price">1 250 RUB</div>
                <button class="btn-details" data-toggle="modal" data-target="#sherlockModal">View details →</button>
            </div>
        </div>

<div class="col-md-4">
            <div class="candle-card">
                <img class="candle-img" src="https://web-school.susu.ru/adelina/wp-content/uploads/sites/818/2026/04/img_69e8617b746022.73636377-e1776866398615-300x300.png" alt="Jane's Garden" data-toggle="modal" data-target="#janeModal">
                <div class="candle-title">Jane's Garden</div>
                <div class="candle-scent">Fresh roses + earl grey + rain</div>
                <div class="candle-price">1 070 RUB</div>
                <button class="btn-details" data-toggle="modal" data-target="#janeModal">View details →</button>
            </div>
        </div>

<div class="col-md-4">
            <div class="candle-card">
                <img class="candle-img" src="https://web-school.susu.ru/adelina/wp-content/uploads/sites/818/2026/04/53987eb9-6b70-4806-a0fd-f8ea24316a81-300x300.jpg" alt="Midnight Poet" data-toggle="modal" data-target="#midnightModal">
                <div class="candle-title">Midnight Poet</div>
                <div class="candle-scent">Dark vanilla + cedar + ink</div>
                <div class="candle-price">1 430 RUB</div>
                <button class="btn-details" data-toggle="modal" data-target="#midnightModal">View details →</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="sherlockModal" tabindex="-1" aria-labelledby="sherlockModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="sherlockModalLabel">Sherlock's Library</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> 1 250 RUB</p>
                <p><strong>Scent:</strong> Tobacco + old paper + bergamot</p>
                <p>This candle smells like a vintage library in London on a rainy evening. You will notice notes of pipe tobacco, old paper, bergamot, and a hint of leather.</p>
                <p><strong>Best for:</strong> Reading mystery novels or working late when you need focus and calm.</p>
                <div class="modal-details">
                    <strong>Details:</strong> Size: 9 oz (255 g) | Burn time: 50 hours | 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="janeModal" tabindex="-1" aria-labelledby="janeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="janeModalLabel">Jane's Garden</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> 1 070 RUB</p>
                <p><strong>Scent:</strong> Fresh roses + earl grey + rain</p>
                <p>This candle captures the feeling of an English countryside after summer rain. The scent blends fresh roses, Earl Grey tea, jasmine, and wet earth.</p>
                <p><strong>Best for:</strong> Romance novels or slow Sunday mornings. Soft, romantic, and a little nostalgic.</p>
                <div class="modal-details">
                    <strong>Details:</strong> Size: 9 oz (255 g) | Burn time: 50 hours | 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="midnightModal" tabindex="-1" aria-labelledby="midnightModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="midnightModalLabel">Midnight Poet</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> 1 430 RUB</p>
                <p><strong>Scent:</strong> Dark vanilla + cedar + ink</p>
                <p>This candle is made for late nights when everyone else is asleep. You will smell dark vanilla, cedarwood, black coffee, and a touch of ink on paper.</p>
                <p><strong>Best for:</strong> Poetry, philosophy books, or creative work. Deep, introspective, and a little mysterious.</p>
                <div class="modal-details">
                    <strong>Details:</strong> Size: 9 oz (255 g) | Burn time: 50 hours | 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="candles.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;
}

.candle-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;
}

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

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

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

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

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

.candle-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-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 – Candles

Sherlock's Library

Tobacco + old paper + bergamot

1 250 RUB

Jane's Garden

Fresh roses + earl grey + rain

1 070 RUB

Midnight Poet

Dark vanilla + cedar + ink

1 430 RUB