Tryit Editor v3.6

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}

.callout {
  position: fixed;
  bottom: 35px;
  right: 20px;
  margin-left: 20px;
  max-width: 300px;
}

.callout-header {
  padding: 25px 15px;
  background: #555;
  font-size: 30px;
  color: white;
}

.callout-container {
  padding: 15px;
  background-color: #ccc;
  color: black
}

.closebtn {
  position: absolute;
  top: 5px;
  right: 15px;
  color: white;
  font-size: 30px;
  cursor: pointer;
}

.closebtn:hover {
  color: lightgrey;
}
</style>
</head>
<body>

<h2>Callout Messages</h2>

<p>Some content text, blabla.</p>
<p>Some content text, blabla.</p>
<p>Click on the "x" symbol to close the callout message.</p>
<div class="callout">
  <div class="callout-header">Callout Header</div>
  <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
  <div class="callout-container">
    <p>Some text to describe the callout message. <a href="#">Learn more</a> or close it if it is in your way.</p>
  </div>
</div>

</body>

</html>

​x
 
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><style>body {font-family: Arial, Helvetica, sans-serif;}​.callout {  position: fixed;  bottom: 35px;  right: 20px;  margin-left: 20px;  max-width: 300px;}​.callout-header {  padding: 25px 15px;  background: #555;  font-size: 30px;  color: white;}​.callout-container {  padding: 15px;  background-color: #ccc;  color: black}​.closebtn {  position: absolute;  top: 5px;  right: 15px;  color: white;  font-size: 30px;  cursor: pointer;}​.closebtn:hover {  color: lightgrey;}</style></head><body>​<h2>Callout Messages</h2>​<p>Some content text, blabla.</p>

Save to Google Drive

Open from Google Drive

Report a Problem: