Warning-Alert

test

by Marcel Landeweerd

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

<div class="apparent-message error-message">
  <div class="message-container">
    <div class="apparent-message-icon fa fa-fw fa-2x fa-exclamation-triangle">
        </div>
        <div class="content-container">
            <div class="message-header">
                <span>Warning from Police.nl</span>
            </div>
            <div class="message-body">There is a warning at Police.nl about webshop.nl</div>
            <div class="message-action">View</div>
        </div>
  </div>
</div>

<div class="apparent-message info-message">
  <div class="message-container">
    <div class="apparent-message-icon fa fa-fw fa-2x fa-external-link">
        </div>
        <div class="content-container">
            <div class="message-header">
                <span>More info at Drimble</span>
            </div>
            <div class="message-body">Company information available at Drimble</div>
            <div class="message-action">View</div>
        </div>
  </div>
</div>

<div class="apparent-message success-message">
  <div class="message-container">
    <div class="apparent-message-icon fa fa-fw fa-2x fa-check-circle">
        </div>
        <div class="content-container">
            <div class="message-header">
                <span>Winner of ShoppingAwards</span>
            </div>
            <div class="message-body">Webshop.nl won the shopping awards in 2020</div>
            <div class="message-action">View</div>
        </div>
  </div>
</div>

SCSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
* {
  box-sizing: border-box;
  margin:0;
  padding:0;
}
body {
  padding: 50px;
    font-family: 'Open Sans', sans-serif;
}
.apparent-message {
    
    width: 100%;
    border-style: solid;
    border-width: 2px;
    margin-bottom: 50px;

    .apparent-message-icon {
      
        flex: 0 0 70px;
        display: flex;
        align-items: center;
        justify-content: center;
       
        font-size: 30px;
        color: #fff;
  
        .fa-2x{
            box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.45);
        }
        text-shadow: 1px 1px 10px #000;
      
    }
}

.message-container {
  display: flex;


    .content-container {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        height: 75px;
        padding-left: 15px;
        background-color: #fff;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.45);
        position: relative;
        .message-header {
            font-size: 20px;
        }
        .message-body {
            margin-top: 10px;
            font-size: 14px;
            color: #515151;
        }
        .message-action {
            position: absolute;
            bottom: 10px;
            right: 30px;
        }
    }
}

.warning-message {
    background-color:#f39b0e;
    border-color: #f39b0e;
}

.info-message {
    background-color:#3598db;
    border-color: #3598db;
}

.success-message {
    background-color:#43a046;
    border-color: #43a046;
}

.error-message {
    background-color:#e1374c;
    border-color: #e1374c;
}