We prepared some examples of banners in HTML. Feel free to copy them and adjust them to your needs 😊
If you are not an expert in HTML, don't worry! You can use AI as ChatGPT to make it write HTML code for you 😊
You can use images inside your banners. Remember to use only legal content from sites like Adobe Stock.
Banner with image
<table style="border: 3px dotted red; padding: 10px; text-align: left;">
<tr>
<td>
<img src="https://drive.google.com/uc?export=view&id=1KFPbpwcA3UuJ5L0z1QGRBgnef_vTBiXw" style="width: 120px"></src>
</td>
<td>
We have an issue with database located at <a href="#">https:/192.168.0.102</a> Please <b>do not report a new issue</b> about this problem. We are working on it. For more information call our <a href="#">support</a>.
</td>
</tr>
</table>
Banner with nice CSS border
<div style="padding: 10px; border: solid 10px; border-image: repeating-linear-gradient( -75deg, yellow, yellow 10px, black 10px, black 20px) 20; background-color: #E8E8E8" >
<h3 style="color: red">Read this first</h3>
Our applications can be unstable today due to migration to the new stack. Contact channels in case of any incidents:
<style>li:before { content: '\27A4'; margin-left: -20px; margin-right: 10px; } </style>
<ul>
<li>Slack channel <a href="#">#help_me</a></li>
<li>Mobile support at +1 111 222 333 </li>
</div>
Banner with an exclamation mark
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Announcement Banner</title>
<style>
.announcement-banner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #ffcccc; /* Red background */
border: 2px solid #ff0000; /* Red border */
padding: 10px;
color: #000; /* Black text */
font-family: Arial, sans-serif;
font-size: 16px;
position: relative;
text-align: center;
}
.announcement-banner .icon {
margin-bottom: 10px; /* Add space between icon and text */
}
.bold-text {
font-weight: bold; /* Make text bold */
}
</style>
</head>
<body>
<div class="announcement-banner">
<img class="icon" src="https://cdn.jsdelivr.net/npm/bootstrap-icons/icons/exclamation-triangle-fill.svg" alt="Exclamation mark icon" width="24" height="24">
<p class="bold-text">Scheduled Maintenance Notice:</p>
<p>Our system will undergo maintenance on 26th May from 10AM to 2PM. During this period, access to certain features may be limited. We apologize for any inconvenience.</p>
</div>
</body>
</html>
