Hello Coders, A very warm welcome to Codewithrandom. Today we'll see the building of the Registration Successful Message Using Html and CSS. When we are new to some social media sites or any type of website where we are surfing for the first time then we have to register ourselves and give some information such as First Name, Last Name, Email, Phone No, and Password of our choice.
Later on, it gives the message Signup Complete. Just like creating Google Account. Now we as Front-End Developers can build this thing using HTML & CSS. So after filling in the information and submitting the form if everything goes well then we get a successful signup message on the screen If anything goes wrong from the client side like a network issue or wrong information or from the server side then we get the error message displayed on the screen.
Let us see the building of the Registration Successful Message Using HTML.
Registration Successful Message HTML Code:-
The Hyper Text Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser.
All HTML documents must start with a document type declaration: <!DOCTYPE html>.
The HTML document itself begins with and ends with .
The visible part of the HTML document is between
and .Inside the body tag of the HTML main content of the website lies.<div id="card" class="animated fadeIn">
<div id="upper-side">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
version="1.1"
id="checkmark"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
xml:space="preserve"
>
<path
d="M131.583,92.152l-0.026-0.041c-0.713-1.118-2.197-1.447-3.316-0.734l-31.782,20.257l-4.74-12.65 c-0.483-1.29-1.882-1.958-3.124-1.493l-0.045,0.017c-1.242,0.465-1.857,1.888-1.374,3.178l5.763,15.382 c0.131,0.351,0.334,0.65,0.579,0.898c0.028,0.029,0.06,0.052,0.089,0.08c0.08,0.073,0.159,0.147,0.246,0.209 c0.071,0.051,0.147,0.091,0.222,0.133c0.058,0.033,0.115,0.069,0.175,0.097c0.081,0.037,0.165,0.063,0.249,0.091 c0.065,0.022,0.128,0.047,0.195,0.063c0.079,0.019,0.159,0.026,0.239,0.037c0.074,0.01,0.147,0.024,0.221,0.027 c0.097,0.004,0.194-0.006,0.292-0.014c0.055-0.005,0.109-0.003,0.163-0.012c0.323-0.048,0.641-0.16,0.933-0.346l34.305-21.865 C131.967,94.755,132.296,93.271,131.583,92.152z"
/>
<circle
fill="none"
stroke="#ffffff"
stroke-width="5"
stroke-miterlimit="10"
cx="109.486"
cy="104.353"
r="32.53"
/>
</svg>
<h3 id="status">Success</h3>
</div>
<div id="lower-side">
<p id="message">
Congratulations, your account has been successfully created.
</p>
<a href="#" id="contBtn">Continue</a>
</div>
</div>
In this HTML Code, We define an id as a card and animation in it as fade-in. And then in the tag we linked the path of the tick symbol and set the stroke, stroke width, and stroke limit. And defined the message. Let us have a look at the HTML Output. Before writing CSS for Sign Up Success Message.
CSS Code Registration Successful Message:-
CSS stands for Cascading Styling Sheets. CSS is used for styling the layout of the website. Here we are using the basic concepts of the CSS like border-box and display property, and positioning property. The term 'WebKit' is used in the CSS syntax for rendering content in Safari and Chrome browsers.
Webkit code may need to be added in CSS to ensure it renders correctly on Chrome and Safari due to the lack of cross-compatibility. These are the vendor-prefixed properties offered by the relevant rendering engines ( -WebKit for Chrome, Safari; -Moz for Firefox, -o for Opera, -ms for Internet Explorer).
body {
background: #1488EA;
}
#card {
position: relative;
top: 110px;
width: 320px;
display: block;
margin: auto;
text-align: center;
font-family: "Source Sans Pro", sans-serif;
}
In this snippet we have given the background color in the body, And then we have included the message and tick symbol in the card and set the width, alignment, and Font Family.
#upper-side {
padding: 2em;
background-color: #8BC34A;
display: block;
color: #fff;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
}
#checkmark {
font-weight: lighter;
fill: #fff;
margin: -3.5em auto auto 20px;
}
#status {
font-weight: lighter;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 1em;
margin-top: -0.2em;
margin-bottom: 0;
}
#lower-side {
padding: 2em 2em 5em 2em;
background: #fff;
display: block;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}
In this snippet, we have given the position of the card and the tick symbol and set it with the help of padding, background color, color, and some appropriate border.
#message {
margin-top: -0.5em;
color: #757575;
letter-spacing: 1px;
}
#contBtn {
position: relative;
top: 1.5em;
text-decoration: none;
background: #8bc34a;
color: #fff;
margin: auto;
padding: 0.8em 3em;
-webkit-box-shadow: 0px 15px 30px rgba(50, 50, 50, 0.21);
-moz-box-shadow: 0px 15px 30px rgba(50, 50, 50, 0.21);
box-shadow: 0px 15px 30px rgba(50, 50, 50, 0.21);
border-radius: 25px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
#contBtn:hover {
-webkit-box-shadow: 0px 15px 30px rgba(60, 60, 60, 0.4);
-moz-box-shadow: 0px 15px 30px rgba(60, 60, 60, 0.4);
box-shadow: 0px 15px 30px rgba(60, 60, 60, 0.4);
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
In this final snippet, we design the button and the hover in it with position, color & border radius. And given the transition for the hover over the button. Let's see the output.
We have created the Registration Successful Message Using HTML and CSS Code. First, create an HTML file giving the attributes and the path of the tick symbol added some labels. And then the CSS file which plays a major role in building this project styled the tags defined in the HTML file and added some effects & hover over it.
If you loved it does comment as it boosts our motivation to bring new projects for you guys. If you feel any difficulty while performing feel free to reach out to us with the help of the comment section.
Happy Coding
Written by - @Harsh_9 & Himanshu Singh
Top comments (2)
Traffic Rider Mod APK brings an exciting, unrestricted racing experience with unlimited money and unlocked features, allowing you to fully enjoy high-speed motorbike action. The game offers stunning graphics, realistic bike sounds, and challenging missions, immersing you in a truly thrilling ride. With the modded version, you can easily customize and upgrade your bikes, ensuring you can dominate the leaderboards and ride with style.
This is such an insightful post! I really appreciate how you broke down the topic in a way that's easy to understand. Looking forward to implementing some of these tips in my daily routine!
International schools in Bangalore