OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	04/30/2025 06:15:46 AM	rwxr-xr-x
📄 bnewsletter_2.html	6.92 KB	04/30/2025 06:15:44 AM	rw-r--r--
📁 images21	-	04/30/2025 06:17:41 AM	rwxr-xr-x
📁 images_21	-	04/30/2025 06:17:41 AM	rwxr-xr-x
📄 index.php	6.72 KB	05/19/2025 10:07:22 AM	rw-r--r--
📄 new.html	6.52 KB	04/30/2025 06:15:44 AM	rw-r--r--
📄 newsletter_2.html	8.4 KB	04/30/2025 06:15:44 AM	rw-r--r--

Editing: new.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BNI Newsletter</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }

body {
            background: #f5f5f5;
            padding: 20px;
        }

.container {
            max-width: 900px;
            margin: auto;
            background: white;
            padding: 20px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        }

.header {
            text-align: center;
            padding: 10px 0;
        }

.header img {
            max-width: 100%;
            height: auto;
        }

/* Using Grid for Layout */
        .content {
            display: grid;
            grid-template-columns: 40% 60%;
            /* Sidebar 40%, Main 60% */
            gap: 20px;
        }

.sidebar,
        .main {
            background: #fff;
            padding: 15px;
            border-radius: 5px;
            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
        }

.box {
            background: #fff;
            padding: 15px;
            border-radius: 5px;
            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }

.sponsor {
            text-align: center;
            background: #d9534f;
            color: white;
            padding: 10px;
            border-radius: 5px;
            font-weight: bold;
        }

.profile img {
            width: 100%;
            border-radius: 5px;
        }

.contest img,
        .announcement img {
            width: 100%;
            border-radius: 5px;
        }

/* Ensuring Two Columns on Mobile */
        @media (max-width: 768px) {
            .content {
                display: grid;
                grid-template-columns: 1fr 1fr;
                /* Two equal columns */
                gap: 10px;
            }

.box {
                padding: 10px;
            }
        }

/* Button Styles */
        .button {
            display: inline-block;
            padding: 12px 20px;
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            text-decoration: none;
            border-radius: 5px;
            transition: all 0.3s ease-in-out;
            cursor: pointer;
        }

.button-primary {
            background-color: #d9534f;
            color: white;
            border: 2px solid #d9534f;
        }

.button-primary:hover {
            background-color: #b52b27;
        }
    </style>
</head>

<body>

<div class="container">
        <div class="header">
            <table width="100%">
                <tr>
                    <td align="left">&nbsp;&nbsp;&nbsp;From Name</td>
                    <td align="right">Date: DDMMYYYY</td>
                </tr>
            </table>
            <img src="https://knoblycream.com/Xpress/NLEditor/newsletter/21/images21/header.jpg" alt="BNI Newsletter Header">
        </div>

<div class="content">
            
            <div class="sidebar">
                <div class="box">
                    <div class="sponsor">Sponsor</div>
                    <div class="profile">
                        <img src="https://knoblycream.com/Xpress/NLEditor/newsletter/21/images21/pic.jpg" alt="Girish Mariswamy">
                        <h3>Name</h3>
                        <p>App Builder text<br>Content...</p>
                        <div align="center"><a href="#" class="button button-primary">Read more</a></div>
                    </div>
                </div>

<div class="box">
                    <div class="sponsor">Application content</div>
                    <div class="profile">
                        <img src="https://knoblycream.com/Xpress/NLEditor/newsletter/21/images21/pic2.jpg" alt="RS Ganesh">
                        <h3>Name...</h3>
                        <p>APP Production<br>Content...</p>
                        <div align="center"><a href="#" class="button button-primary">Read more</a></div>
                    </div>
                </div>

<div class="box" style="background:#d9534f; color: white; text-align: center;">
                    <h3>GRATITUDE</h3>
                    <p>Thank you for your support!<br>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam iaculis erat mi, sit amet blandit
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.!</p>
                </div>
            </div>

<div class="main">
                <div class="box contest">
                    <img src="https://knoblycream.com/Xpress/NLEditor/newsletter/21/images21/1.jpg" alt="Reels Contest">
                    <p style="text-align: center; font-weight: bold;">Managing a business or a team lead in a large
                        corporation</p>
                    <p>Whether you're a solopreneur, managing a small business, or a team lead in a large corporation...
                    </p>
                </div>

<div class="box announcement">
                    <h2>We believe in the power of content</h2>
                    <p>We created Knobly Cream to help people curate, create, reach, and measure their content marketing
                        efforts...</p>
                    <img src="https://knoblycream.com/Xpress/NLEditor/newsletter/21/images21/2.jpg" alt="BNI Apollo Team">
                    <div align="center"><a href="#" class="button button-primary">Read more</a></div>
                </div>
                <div class="box announcement">
                    <h2>We believe in the power of content</h2>

<p
            style="text-align:center; margin-top:20px; font-size:14px; background-color:#d9534f; color:#FFFFFF; padding:10px;">
            © 2025 BNI Newsletter</p>
    </div>

</body>

</html>