Skip to content

Instantly share code, notes, and snippets.

@stevommmm

stevommmm/index.html

Last active November 19, 2015 06:03
Show Gist options
  • Save stevommmm/546875b6848280256b1d to your computer and use it in GitHub Desktop.
Save stevommmm/546875b6848280256b1d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!doctype html>
<html>
<head>
<style type="text/css">
.alertbox {
margin: 10px;
display: block;
border: 1px solid #eee;
box-shadow: 0 0 3px 0 #ddd, inset 0 0 1px #ccc;
}
.alertbox > svg {
display: inline-block;
vertical-align: top;
}
.alertbox > p {
display: inline-block;
line-height: 60px;
margin: 0;
padding: 0;
vertial-align: top;
}
</style>
</head>
<body>
<div class="alertbox" style="border-color: #2c0">
<svg xmlns="http://www.w3.org/2000/svg" width="60px" height="60px" viewBox="0 0 500 500">
<text x="250" y="250" font-family="Rockwell" font-size="400" text-anchor="middle" dominant-baseline="central" fill="none" stroke="#2c0" stroke-width="6px">i</text>
<circle cx="250" cy="250" r="200" fill="transparent" stroke="#2c0" stroke-width="6px" />
</svg>
<p style="color: #2c0">Informational alert</p>
</div>
<div class="alertbox" style="border-color: #c00">
<svg xmlns="http://www.w3.org/2000/svg" width="60px" height="60px" viewBox="0 0 500 500">
<text x="250" y="250" font-family="Rockwell" font-size="400" text-anchor="middle" dominant-baseline="central" fill="none" stroke="#c00" stroke-width="6px">!</text>
<circle cx="250" cy="250" r="200" fill="transparent" stroke="#c00" stroke-width="6px" />
</svg>
<p style="color: #c00">Warning alert</p>
</div>
<div class="alertbox" style="border-color: #00adcc">
<svg xmlns="http://www.w3.org/2000/svg" width="60px" height="60px" viewBox="0 0 500 500">
<text x="250" y="250" font-family="Rockwell" font-size="400" text-anchor="middle" dominant-baseline="central" fill="none" stroke="#00adcc" stroke-width="6px">?</text>
<circle cx="250" cy="250" r="200" fill="transparent" stroke="#00adcc" stroke-width="6px" />
</svg>
<p style="color: #00adcc">Question </p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment