Menu
I want to create an alert using materialize css. I don't know how. Please help. I just want to create a simple html that will display an alert error without using javascript. Thanks.
227
since this has no answer yet, I made something that may help you. Here is the repo
And here is a preview.
html {
line-height: 1.5;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}
.materialert{
position: relative;
min-width: 150px;
padding: 15px;
margin-bottom: 20px;
margin-top: 15px;
border: 1px solid transparent;
border-radius: 4px;
transition: all 0.1s linear;
webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.materialert .material-icons{
margin-right: 10px;
}
.materialert .close-alert{
-webkit-appearance: none;
border: 0;
cursor: pointer;
color: inherit;
background: 0 0;
font-size: 22px;
line-height: 1;
font-weight: bold;
text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
filter: alpha(opacity=40);
margin-bottom: -5px;
position: absolute;
top: 16px;
right: 5px;
}
.materialert.info{
background-color: #039be5;
color: #fff;
}
.materialert.success{
background-color: #43a047;
color: #fff;
}
.materialert.error{
background-color: #c62828;
color: #fff;
}
.materialert.danger{
background-color: #c62828;
color: #fff;
}
.materialert.warning{
background-color: #fbc02d;
color: #fff;
}<html lang="es-MX">
<head>
<meta charset="UTF-8">
<link href="css/materialert.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="materialert">
<i class="material-icons">check_circle</i> <span>Bienvenido, Linebeck</span>
<button type="button" class="close-alert">×</button>
</div>
<div class="materialert info">
<div class="material-icons">info_outline</div>
Oh! What a beautiful alert :)
</div>
<div class="materialert error">
<div class="material-icons">error_outline</div>
Oh! What a beautiful alert :)
</div>
<div class="materialert success">
<div class="material-icons">check</div>
Oh! What a beautiful alert :)
</div>
<div class="materialert warning">
<div class="material-icons">warning</div>
Oh! What a beautiful alert :)
</div>
</body>
</html>Hope it helps!
198
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With