2019-05-08, 01:23 PM
Global.css
İndex & Header
#alert1 {
border-radius: 0px;
top: 0;
right: 0;
padding: 8px;
text-align: left;
background: rgba(22, 160, 133,0.7);
color: #FFF;
margin-bottom: 4px;
}
#alert1:before {
content: "";
display: inline-block;
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: inherit;
text-rendering: auto;
margin-right: 5px;
font-size: 13px;
content: "\f0e7";
color: #f1f1f1;
}
#alert2 {
background: #8a47a5;
border-radius: 0px;
top: 0;
right: 0;
padding: 8px;
text-align: left;
color: #FFF;
margin-bottom: 4px;
}
#alert2:before {
content: "";
display: inline-block;
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: inherit;
text-rendering: auto;
margin-right: 5px;
font-size: 13px;
content: "\f0eb";
color: #f1f1f1;
}
#alert3 {
border-radius: 0px;
top: 0;
right: 0;
padding: 8px;
text-align: left;
background: #5962b6;
color: #FFF;
margin-bottom: 4px;
}
#alert3:before {
content: "";
display: inline-block;
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: inherit;
text-rendering: auto;
margin-right: 5px;
font-size: 13px;
content: "\f0f3";
color: #f1f1f1;
}
#alert4 {
background: #b6596b;
border-radius: 0px;
top: 0;
right: 0;
padding: 8px;
text-align: left;
color: #FFF;
margin-bottom: 4px;
}
#alert4:before {
content: "";
display: inline-block;
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: inherit;
text-rendering: auto;
margin-right: 5px;
font-size: 13px;
content: "\f559";
color: #f1f1f1;
}
İndex & Header
<div id = 'alert1'> announcement 1</div>
<div id = 'alert2'> announcement 2</div>
<div id = 'alert3'> announcement 3</div>
<div id = 'alert4'> announcement 4</div><br />