1. Heading Cover (HTML CODE) Canva Size (200px1980px) 6 Photos Black and White code: <div style="position:relative;width:100vw;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;ove rflow:hidden;line-height:0"> <img src="https://asul77.wordpress.com/wp-content/uploads/2025/12/untitled-design-2.jpg" style="width:100%;height:auto;display:block;margin:0;padding:0"> </div> 2. Navigation (Template) - Logo (PNG/Transparent background - 200x200px) - Website Name - News, Editorial, Feature, Sports, About 3. Highlight Article (HTML Code) - 1 photo (1920x1080px - Landscape) - Article Pre-view - “Read more button” code: <div style="max-width:1150px;margin:20px auto;padding:0"> <div style="display:flex;gap:20px;align-items:center;flex-wrap:wrap;justify-content:center"> <!-- IMAGE + CAPTION --> <div style="flex:1;min-width:300px;max-width:850px"> <img src="https://asul77.wordpress.com/wp-content/uploads/2025/12/journalism.jpg" style="width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px"> <!-- CAPTION BELOW PHOTO --> <p style="font-size:12px;color:#555;margin-top:4px;margin-bottom:0;text-align:left;font-style:italic"> Photo Caption: Journalism students during field coverage. </p> </div> <!-- ARTICLE + BUTTON (VERTICALLY CENTERED, LEFT-ALIGNED TEXT) --> <div style="flex:1;min-width:280px;max-width:500px;margin-left:5px;display:flex;flex-direction:column;justify- content:center;height:100%"> <!-- HEADLINE --> <h2 style="margin:0 0 4px;font-size:36px;line-height:1.2;font-weight:500;text-align:left"> Headline Goes Here </h2> <!-- AUTHOR + DATE --> <p style="font-size:12px;color:#777;margin:0 0 10px;text-align:left"> By <strong>Fritz Evar T. Quije</strong> • December 9, 2025 </p> <!-- ARTICLE PREVIEW --> <p style="font-size:13px;line-height:1.7;margin:0 0 10px;text-align:left"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ev esetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since er since esetting industry. Lorem Ipsum has been the indust esetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since ry’s standard dummy text ever since the 1500s... </p> <!-- BUTTON --> <div> <a href="https://asul77.wordpress.com/news-page/" style="display:inline-block;margin-top:4px;padding:6px 18px;background:#000;color:#fff;text-decoration:none;border-radius:6px;font-size:11px"> Read More </a> </div> </div> </div> </div> 4. Editorial 3 columns (HTML CODE) - 3 Photos (400x400 pixels) Code: <div style="background:black;width:100%;padding:20px 0"> <!-- EDITORIAL TITLE --> <div style="text-align:center;color:white;font-size:28px;font-weight:900;margin-bottom:20px;letter-spa cing:1px"> EDITORIAL </div> <!-- MAIN WRAPPER --> <div style="width:100%;max-width:1000px;margin:auto;display:flex;flex-wrap:nowrap;justify-content:c enter;gap:50px"> <!-- 1ST CONTAINER --> <a href="https://asul77.wordpress.com/news-page/" style="text-decoration:none;color:#fff;width:300px;border:1px solid #ccc;padding:15px;display:block"> <h2 style="font-size:20px;font-weight:bold;margin-top:0;line-height:1.2;color:#fff"> Running on Empty: The Stuggles of Journalists </h2> <p style="font-style:italic;margin-top:-5px;font-size:13px;color:#fff"> Pen Name | December 9, 2025 </p> <p style="line-height:1.4;font-size:14px;height:90px;overflow:hidden;color:#fff"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard... </p> <img src="https://asul77.wordpress.com/wp-content/uploads/2025/12/2.jpg" style="width:100%;aspect-ratio:1/1;object-fit:cover;margin-top:10px"> </a> <!-- 2ND CONTAINER --> <a href="https://asul77.wordpress.com/news-page/" style="text-decoration:none;color:#fff;width:300px;border:1px solid #ccc;padding:15px;display:block"> <img src="https://asul77.wordpress.com/wp-content/uploads/2025/12/1.jpg" style="width:100%;aspect-ratio:1/1;object-fit:cover"> <h2 style="font-size:20px;font-weight:bold;margin-top:10px;line-height:1.2;color:#fff"> Running on Empty: The Stuggles of Journalists </h2> <p style="font-style:italic;margin-top:-5px;font-size:13px;color:#fff"> Pen Name | December 9, 2025 </p> <p style="line-height:1.4;font-size:14px;height:90px;overflow:hidden;color:#fff"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text eve... </p> </a> <!-- 3RD CONTAINER --> <a href="https://asul77.wordpress.com/news-page/" style="text-decoration:none;color:#fff;width:300px;border:1px solid #ccc;padding:15px;display:block"> <h2 style="font-size:20px;font-weight:bold;margin-top:0;line-height:1.2;color:#fff"> Running on Empty: The Stuggles of Journalists </h2> <p style="font-style:italic;margin-top:-5px;font-size:13px;color:#fff"> Pen Name | December 9, 2025 </p> <p style="line-height:1.4;font-size:14px;height:90px;overflow:hidden;color:#fff"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy.... </p> <img src="https://asul77.wordpress.com/wp-content/uploads/2025/12/3.jpg" style="width:100%;aspect-ratio:1/1;object-fit:cover;margin-top:10px"> </a> </div> </div> 5. Feature Pic 1 - size 2:4 inches landscape Pic 2 and 3 size - 1:1 inches Code: <div style="text-align:center;margin-bottom:30px;border-bottom:1px solid rgba(0,0,0,0.2);padding-bottom:10px"> <div style="font-size:32px;font-weight:600;font-family:cursive"> Feature </div> </div> <div style="max-width:1200px;margin:0 auto;display:flex;gap:20px"> <!-- LEFT BIG CONTAINER --> <a href="https://asul77.wordpress.com/news-page/" style="text-decoration:none;color:black;flex:0 0 50%"> <div style="padding:10px"> <img src="https://asul77.wordpress.com/wp-content/uploads/2025/12/untitled-design-1-1.jpg" style="width:100%;aspect-ratio:2/1;object-fit:cover;border-radius:4px"> <h2 style="font-size:26px;font-weight:700;margin-top:15px;margin-bottom:5px"> Running on Empty: The Stuggles of Journalists </h2> <p style="font-style:italic;margin:0 0 12px;font-size:14px"> Pen Name | December 9, 2025 </p> <p style="font-size:14px;line-height:1.5"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, whenare like Aldus PageMaker including been the industry’s... </p> </div> </a> <!-- RIGHT COLUMN SPLIT --> <div style="flex:0 0 50%;display:flex;flex-direction:column;gap:20px"> <!-- CONTAINER 2 --> <a href="https://asul77.wordpress.com/news-page/" style="text-decoration:none;color:black"> <div style="padding:10px;background:#f4f4f4;border-radius:4px;display:flex;gap:15px"> <img src="https://asul77.wordpress.com/wp-content/uploads/2025/12/2.jpg" style="width:38%;aspect-ratio:1/1;object-fit:cover;border-radius:4px"> <div style="width:62%"> <h3 style="font-size:20px;font-weight:700;margin:0 0 5px"> Running on Empty: The Stuggles of Journalists </h3> <p style="font-style:italic;margin:0 0 10px;font-size:13px"> Pen Name | December 9, 2025 </p> <p style="font-size:13px;line-height:1.5"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s... </p> </div> </div> </a> <!-- CONTAINER 3 --> <a href="https://asul77.wordpress.com/news-page/" style="text-decoration:none;color:black"> <div style="padding:10px;background:#f4f4f4;border-radius:4px;display:flex;gap:15px"> <div style="width:60%"> <h3 style="font-size:20px;font-weight:700;margin:0 0 5px"> Running on Empty: The Stuggles of Journalists </h3> <p style="font-style:italic;margin:0 0 10px;font-size:13px"> Pen Name | December 9, 2025 </p> <p style="font-size:13px;line-height:1.5"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s... </p> </div> <img src="https://asul77.wordpress.com/wp-content/uploads/2025/12/2.jpg" style="width:40%;aspect-ratio:1/1;object-fit:cover;border-radius:4px"> </div> </a> </div> </div> 5. Sports: Pic Size 5:4 inches and 3 1:1 inches <!-- Start --> <div style="max-width:1100px;margin:40px auto"> <!-- TOP TITLE --> <div style="text-align:left;font-size:26px;font-weight:900;margin-bottom:30px;letter-spacing:2px"> SPORTS </div> <div style="display:flex;gap:40px;align-items:center"> <!-- ============ LEFT IMAGE (UNCHANGED) ============ --> <div style="flex:0 0 500px;display:flex;align-items:center"> <img src="https://asul77.wordpress.com/wp-content/uploads/2025/12/untitled-design-1-1.jpg" style="width:100%;height:auto;object-fit:cover;border-radius:6px"> </div> <!-- ============ RIGHT CONTENT WITH 1:1 IMAGES ============ --> <div style="flex:0 0 400px;display:flex;flex-direction:column;gap:30px"> <!-- - Block 1 - --> <div style="display:flex;gap:15px;align-items:flex-start"> <img src="https://asul77.wordpress.com/wp-content/uploads/2025/12/1-2.jpg" style="width:85px;height:85px;object-fit:cover;border-radius:4px"> <div> <div style="font-size:10px;font-weight:700;margin-bottom:6px;letter-spacing:1px;text-transform:uppercase"> Sports Editorial </div> <a href="https://asul77.wordpress.com/news-page/" style="font-size:18px;font-weight:800;color:#000;text-decoration:none;line-height:1.25;border-bottom:1p x solid #000;padding-bottom:2px"> Running on Empty: The Struggles of Journalists </a> <div style="font-size:9px;margin-top:6px;font-style:italic;color:#444"> Pen Name | December 9, 2025 </div> </div> </div> <!-- - Block 2 (Big Title) - --> <div style="display:flex;gap:15px;align-items:flex-start"> <img src="https://asul77.wordpress.com/wp-content/uploads/2025/12/2-2.jpg" style="width:85px;height:85px;object-fit:cover;border-radius:4px"> <div> <div style="font-size:10px;font-weight:700;margin-bottom:6px;letter-spacing:1px;text-transform:uppercase"> Sports Editorial </div> <a href="https://asul77.wordpress.com/news-page/" style="font-size:22px;font-weight:900;color:#000;text-decoration:none;line-height:1.25;border-bottom:1p x solid #000;padding-bottom:2px"> Running on Empty: The Struggles of Journalists </a> <div style="font-size:9px;margin-top:6px;font-style:italic;color:#444"> Pen Name | December 9, 2025 </div> </div> </div> <!-- - Block 3 - --> <div style="display:flex;gap:15px;align-items:flex-start"> <img src="https://asul77.wordpress.com/wp-content/uploads/2025/12/3-2.jpg" style="width:85px;height:85px;object-fit:cover;border-radius:4px"> <div> <div style="font-size:10px;font-weight:700;margin-bottom:6px;letter-spacing:1px;text-transform:uppercase"> Sports Feature </div> <a href="https://asul77.wordpress.com/news-page/" style="font-size:18px;font-weight:800;color:#000;text-decoration:none;line-height:1.25;border-bottom:1p x solid #000;padding-bottom:2px"> Running on Empty: The Struggles of Journalists </a> <div style="font-size:9px;margin-top:6px;font-style:italic;color:#444"> Pen Name | December 9, 2025 </div> </div> </div> </div> </div> </div> <!-- End --> 6. Live Traffic Forcast (Google Embed) Code for button: <p style="text-align:center;margin:20px 0"> <a href="https://www.google.com/maps/@6.125983,124.965158,12z/data=!5m1!1e1" target="_blank" style="text-decoration:none;padding:12px 25px;background:#000;color:#fff;border-radius:10px;font-weight:bold;font-size:12px"> View Live Traffic in Gensan </a> </p>