Skip to content

Instantly share code, notes, and snippets.

@tonebeta

tonebeta/page

Created March 2, 2018 07:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tonebeta/28ba50a1fc06747fcd77af1e1992e32b to your computer and use it in GitHub Desktop.
Save tonebeta/28ba50a1fc06747fcd77af1e1992e32b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.label {
background-color: #f1f1f1;
padding: 15px;
line-height: 1.5;
font-size: 1em;
}
.radius {
border-radius: 8px;
}
.succuss {
border-left: 6px solid greenyellow;
}
.warning {
border-left: 6px solid red;
}
.info {
border-left: 6px solid blue;
}
.headingBottom {
border-bottom: 1px solid rgb(212, 212, 212);
padding-bottom: 5px;
}
.container {
width: 70%;
margin: 30px auto;
}
</style>
</head>
<body>
<div class="container">
<h2 class="headingBottom">Warning</h2>
<p class="label warning">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi tempora totam vitae soluta quasi! Expedita accusantium
iste, aperiam harum sed illo cumque sit quod distinctio ea consectetur saepe ullam tempore?</p>
<p class="label warning radius">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat impedit itaque quod! Reprehenderit numquam officia
nesciunt doloribus unde quidem, quod sit quia animi. Suscipit ex vitae velit commodi. Expedita, quis.</p>
<h2 class="headingBottom">Succuss</h2>
<p class="label succuss">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum labore delectus dignissimos enim, optio fugiat aliquid
sapiente quia in tempore. Aperiam delectus, nam possimus sunt iste quisquam reiciendis consequatur atque.</p>
<p class="label succuss radius">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum labore delectus dignissimos enim, optio fugiat aliquid
sapiente quia in tempore. Aperiam delectus, nam possimus sunt iste quisquam reiciendis consequatur atque.</p>
<h2 class="headingBottom">Info</h2>
<p class="label info">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum labore delectus dignissimos enim, optio fugiat aliquid
sapiente quia in tempore. Aperiam delectus, nam possimus sunt iste quisquam reiciendis consequatur atque.</p>
<p class="label info radius">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum labore delectus dignissimos enim, optio fugiat aliquid
sapiente quia in tempore. Aperiam delectus, nam possimus sunt iste quisquam reiciendis consequatur atque.</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment