Skip to main content

Archive

Show more

Notification Card Design | HTML And CSS

by Rustcode
Notification-Card-Design-HTML-And-CSS

Notification Card Design | HTML And CSS

"Notification Card UI" is a very important element for a website that regularly updates its content and brings new notifications. An information interface is needed to reach your audience. Notification cards can also be used on normal websites such as notifications of new interface updates, email subscription notifications, and notifications of any free content, etc.

The design of this card is going to be very simple, this card will have two buttons and a title with a description. In addition, there will be an image that will help make the interface of the "notification card" look good. We will use HTML and CSS to make this card.

You can read more articles on useful cards like profile cards, cookies card, course cards, credit card, blog post card etc. We have created a separate playlist for cards you can follow that playlist.

You can read interesting articles on web development. The link is given below.

If you want to learn animation using javascript and jsplugins, We have already created a lot of animation using various plugins of javascript, check out the playlist. We hope you like it.


01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Notification Card Design | Rustcode</title>	
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>



02. HTML

<body>

<div class="card-wrapper">
  <img src="01.jpg">
  <div class="text">
    <div class="title">We Launch New User Interface</div>
    <div class="info">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut dignissim ipsum. Phasellus ultrices, ipsum a lobortis sollicitudin.
    </div>
  </div>
  <div class="btn-wrapper">
    <button class="btn">Later</button>
    <button class="btn">Take A Tour!</button>
  </div>
</div>

</body>



03. CSS

Import font-family in 'style.css' file. We are using google font link as you can see below.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700');



*{
  box-sizing: border-box;
}

body{
  margin: 0px;
  padding: 0px;
  font-family: "Poppins", sans-serif;
  background: #EEF0F6;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.card-wrapper{
  max-width: 340px;
  width: 98%;
  padding: 20px;
  background: #FFF;
  border-radius: 4px;
  align-items: center;
  display: flex;
  flex-direction: column;
  box-shadow: rgba(0, 0, 0, 0.075) 0px 20px 30px 0px;
}

img{
  width: 260px;
  height: 240px;
}

.text{
  width: 100%;
  font-size: 14px;
  font-weight: 500;
}

.title{
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 6px;
}

.info{
  color: #64686B;
}

.btn-wrapper{
  width: 100%;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.btn{
  background: #EDF1F7;
  border-radius: 2px;
  width: 140px;
  height: 50px;
  border: 0px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.3s ease;
}

.btn:hover{
  background: #0060F6;
  color: #FFF;
  transform: translateY(-3px);
}

.btn:last-child{
  background: #0060F6;
  color: #FFF;
}



04. Youtube Video

Here we are attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also, learn about web development from there.




05. SOURCE CODE

After reading this article and watching a Youtube video, if you want to download the source code, you can download it from here and change this according to your need.





Comments

Post a Comment