<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet">
<div class="section section-notifications">
<div class="container mb-5">
<h4>Notifications</h4>
</div>
<div class="alert alert-success" role="alert">
<div class="container">
<div class="alert-icon">
<i class="now-ui-icons ui-2_like"></i>
</div>
<strong>Well done!</strong> You successfully read this important alert message.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<i class="now-ui-icons ui-1_simple-remove"></i>
</span>
</button>
</div>
</div>
<div class="alert alert-info" role="alert">
<div class="container">
<div class="alert-icon">
<i class="now-ui-icons travel_info"></i>
</div>
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<i class="now-ui-icons ui-1_simple-remove"></i>
</span>
</button>
</div>
</div>
<div class="alert alert-warning" role="alert">
<div class="container">
<div class="alert-icon">
<i class="now-ui-icons ui-1_bell-53"></i>
</div>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<i class="now-ui-icons ui-1_simple-remove"></i>
</span>
</button>
</div>
</div>
<div class="alert alert-danger" role="alert">
<div class="container">
<div class="alert-icon">
<i class="now-ui-icons objects_support-17"></i>
</div>
<strong>Oh snap!</strong> Change a few things up and try submitting again.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">
<i class="now-ui-icons ui-1_simple-remove"></i>
</span>
</button>
</div>
</div>
</div>
<footer class="footer text-center ">
<p>Made with <a href="https://demos.creative-tim.com/now-ui-kit/index.html" target="_blank">Now UI Kit</a> by Creative Tim</p>
</footer>
button,
input {
font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}
body {
color: #2c2c2c;
font-size: 14px;
font-family: Montserrat,Helvetica Neue,Arial,sans-serif;
overflow-x: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
@font-face {
font-family: 'Nucleo Outline';
src: url("https://github.com/creativetimofficial/now-ui-kit/blob/master/assets/fonts/nucleo-outline.eot");
src: url("https://github.com/creativetimofficial/now-ui-kit/blob/master/assets/fonts/nucleo-outline.eot") format("embedded-opentype");
src: url("https://raw.githack.com/creativetimofficial/now-ui-kit/master/assets/fonts/nucleo-outline.woff2");
font-weight: normal;
font-style: normal;
}
h4 {
font-weight: 400;
}
a {
color: #f96332;
}
a:hover,
a:focus {
color: #f96332;
}
h4,
.h4 {
font-size: 1.5em;
line-height: 1.45em;
margin-top: 30px;
margin-bottom: 15px;
}
[data-toggle="collapse"][data-parent="#accordion"] i {
-webkit-transition: transform 150ms ease 0s;
-moz-transition: transform 150ms ease 0s;
-o-transition: transform 150ms ease 0s;
-ms-transition: all 150ms ease 0s;
transition: transform 150ms ease 0s;
}
[data-toggle="collapse"][data-parent="#accordion"][aria-expanded="true"] i {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
@font-face {
font-family: 'Nucleo Outline';
src: url("../fonts/nucleo-outline.eot");
src: url("../fonts/nucleo-outline.eot") format("embedded-opentype"), url("../fonts/nucleo-outline.woff2") format("woff2"), url("../fonts/nucleo-outline.woff") format("woff"), url("../fonts/nucleo-outline.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
.now-ui-icons {
display: inline-block;
font: normal normal normal 14px/1 'Nucleo Outline';
font-size: inherit;
speak: none;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@-webkit-keyframes nc-icon-spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes nc-icon-spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
@keyframes nc-icon-spin {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.now-ui-icons.objects_support-17:before {
content: "\ea56";
}
.now-ui-icons.travel_info:before {
content: "\ea04";
}
.now-ui-icons.ui-1_bell-53:before {
content: "\ea0f";
}
.now-ui-icons.ui-1_simple-remove:before {
content: "\ea53";
}
.now-ui-icons.ui-2_like:before {
content: "\ea37";
}
.alert {
border: 0;
border-radius: 0;
color: #FFFFFF;
padding-top: .9rem;
padding-bottom: .9rem;
}
.alert.alert-success {
background-color: rgba(24, 206, 15, 0.8);
}
.alert.alert-danger {
background-color: rgba(255, 54, 54, 0.8);
}
.alert.alert-warning {
background-color: rgba(255, 178, 54, 0.8);
}
.alert.alert-info {
background-color: rgba(44, 168, 255, 0.8);
}
.alert .alert-icon {
display: block;
float: left;
margin-right: 15px;
margin-top: -1px;
}
.alert strong {
text-transform: uppercase;
font-size: 12px;
}
.alert i.now-ui-icons {
font-size: 20px;
}
.alert .close {
color: #FFFFFF;
opacity: .9;
text-shadow: none;
line-height: 0;
outline: 0;
display: inline-block;
cursor: pointer;
}
.section {
padding: 70px 0;
position: relative;
background: #FFFFFF;
}
[data-background-color="orange"] {
background-color: #e95e38;
}
[data-background-color="black"] {
background-color: #2c2c2c;
}
[data-background-color]:not([data-background-color="gray"]) {
color: #FFFFFF;
}
[data-background-color]:not([data-background-color="gray"]) h4,
[data-background-color]:not([data-background-color="gray"]) a:not(.btn):not(.dropdown-item) {
color: #FFFFFF;
}
@media screen and (max-width: 517px) {
.alert .alert-icon {
margin-top: 10px;
}
}
@media screen and (max-width: 580px) {
.alert button.close {
position: absolute;
right: 11px;
top: 50%;
transform: translateY(-50%);
}
}
.section-notifications {
padding: 0;
}
footer{
margin-top:50px;
color: #555;
background: #fff;
padding: 25px;
font-weight: 300;
background: #f7f7f7;
}
.footer p{
margin-bottom: 0;
}
footer p a{
color: #555;
font-weight: 400;
}
footer p a:hover{
color: #e86c42;
}
