Hey coders, today I'll share the code of my latest project where I made a callout message box. Before that, I'll explain where I recommend you to use this box. 

In my opinion, You can use this callout box in any website where you would like to attract an user to do something. For example, you may use it on your website main page and inside the callout message box, you can promote your youtube channel and ask people to subscribe to it. Btw, do subscribe to my channel for the video tutorial of this video and more projects like this.

Below you can get the source code with a button to copy the codes below. Do watch the tutorial video below too for better understanding. 



 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!-- Created by CodingPorium,2021. Visit https://youtube.com/c/CodingPorium for more tutorials with free source code -->
<html>
<head>
<title>Callout Message Box with HTML & CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
body {font-family:poppins, Arial, Helvetica, sans-serif;}
::selection{
  color:white;
  background:gold;
}
.callout {
  position: fixed;
  bottom: 35px;
  right: 20px;
  margin-left: 20px;
  font-family:poppins;
  max-width: 300px;
}

.callout-title {
  padding: 25px 15px;
  background: royalblue;
  font-size: 30px;
  color: white;
}

.callout-container {
  padding: 15px;
  background-color: dodgerblue;
  color: white;
}

.closebtn {
  position: absolute;
  top: 5px;
  right: 15px;
  color: white;
  cursor: pointer;
}

.closebtn:hover {
  color: black;
}
.button {
  background-color: #00c96b; 
  font-family:poppins;
  border: none;
  color: white;
  padding: 10px 17px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  transition:0.3s;
}
.button:hover{
background-color:#00a85a;
}

</style>
</head>
<body>
<div style="font-size:20px;">
<h1>Welcome!</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div class="callout">
  <div class="callout-title"><b style=" ">Subscribe</b></div>
  <span style="font-size:30px;" class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
  <div class="callout-container">
    <p>Hey there! At CodingPorium, we make coding tutorials with free source code! Do subscribe to our channel to support us!<br> <a href="#"><button class="button">Learn more</button></a></p>
  </div>
</div>

</body>
</html>
 

That's all for this post! Thanks for reading and I hope you enjoyed it. Do subscribe to our channel for more coding tutorials with Free Source Code and to support us for free. Till the next post, goodbyeee!
Tags

Post a Comment

Post a Comment

Previous Post Next Post