Alert Message using HTML5 & CSS3

Creating Alert Message using HTML5 And CSS3

Alert Message, this feature is now available for each site when the site is down, crashed, hacked. It signals the user or client the service have temporary stopped or permanently crashed so that user is aware of it.

Creating Alert Message using HTML5 And CSS3 | Alert CSS Code

Now in Todays blog we’ll see how we can program this message. So Hey Guys Welcome to Codewithrandom I hope you have got the idea of todays project.

HTML Code for Alert Message

<div class="alert-dialog">
  <div class="triangle-up-red"></div>
  <div class="triangle-up-white">
    <div class="rectangle-path"></div>
    <div class="dot-path"></div>
  </div>
  <div class="alert-text">
    <h1>Oh Snap!</h1>
    <p>Something went wrong, try again later.</p>
  </div>
</div>

In this HTML Code we have defined the structure of our message that what text should be appear an it should in which format and under which section or division. Let’s style the alert message using CSS. 

CSS Code for Alert Message

@import url('https://fonts.googleapis.com/css?family=Lato:300,900');

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: 'Lato', sans-serif;
  background-color: #212121;
}

.alert-dialog {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 377px;
  width: 668px;
  background-color: #fff;
  border-radius: 6px;
}

.alert-text {
  margin-top: -45px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  h1 {
    font-size: 36px;
    color: #36424a;
    margin: 0;
  }
  p {
    margin: 0;
    margin-top: 14px;
  }
}

.triangle-up-red {
  position: relative;
  top: 0;
    width: 0;
    height: 0;
    border-left: 62px solid transparent;
    border-right: 62px solid transparent;
    border-bottom: 109px solid #ef8b8b;
}

.triangle-up-white {
  position: relative;
  top: -99px;
    width: 0;
    height: 0;
    border-left: 53px solid transparent;
    border-right: 53px solid transparent;
    border-bottom: 94px solid white;
}

.rectangle-path {
  position: relative;
  top: 30px;
  left: -2.1px;
  width: 5px;
  height: 34px;
  background-color: #ef8b8b;
}

.dot-path {
  position: relative;
  top: 38px;
  left: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ef8b8b;
}


In this CSS code we have aligned all the defined tags in a proper way so that it didn’t get meshy and everything is in proper manner. We have given the color to the triangle in which our message is defined and stated the font-size, font-style, font-weight etc. Now let us see the output.

Final Output Creating Alert Message using HTML5 & CSS3

We have Successfully created our Creating Alert Message using HTML5 & CSS3 | Alert CSS You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned below.

100+ Front-end Projects for Web developers (Source Code)

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Written By – Harsh Sawant

Code By – Xavier Martinez



Leave a Reply