Create Registration Successful Message In Html And Css Code

Create Registration Successful Message In Html And Css Code

Introduction For Registration Successful Message: 

Hello coders, A very warm welcome to Code With Random. Today we’ll see the building of the Registration Successful Message. 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 of 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.

HTML Code For Registration Successful Message:-

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 <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.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 <xml> 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.

HTML Output Registration Successful 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.

Final Output Registration Successful Message:

Summary For Registration Successful Message:

We have created the Registration Successful Message. 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 on it.

If you loved it do 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

Share on:

Leave a Comment