Template Name: OTP Verification Using Sms4india Api With Php and Mysql.
High Resolution:&nbsp;&ndash; Yes.
Compatible Browsers:&nbsp;&ndash;&nbsp;All Browser.
Source Files included:&nbsp;&ndash; HTML, External CSS, and PHP.
OTP verification is used for security purposes during registration or login time. So here, we made OTP Verification using the third-party API with some PHP functions and validation. Here we also used a database for a matching purpose OTP is right/wrong.
Also Read:-&nbsp;<a href="../water-ripple-effect-on-click-hover-in-jquery/" target="_blank" rel="noreferrer noopener">Water Ripple Effect on Click &amp; Hover In Jquery</a>
In this OTP verification, we used one form with some primary input fields. Also, for validation purposes, we used submit function, which we write in code. Here we used sms4india free API(25 messages only) with the primary API key and secret keys.
How to create an account in Sms4india:-
Step 1:&nbsp;Create an account in&nbsp;<a href="https://www.sms4india.com/" target="_blank" rel="noreferrer noopener">sms4india</a>.
Step 2:&nbsp;After Login, Click To Api and See over The Navbar.
Step 3: Click on Test Key, Then Copy API Key And Secret Key, Paste "apikey=''&amp;secret='', and remove the Comma.
Step 4:&nbsp;Then They Provide Only 25 Test Free SMS.
After that, you have to create one database with one table. Under the table, you have added 3 Columns contact numbers, OTP, and time. Then make a connection in the PHP file.

Demo

Download Now

OTP verification is used for security purposes during registration or login time. So here, we made OTP Verification using the third-party API with some PHP functions and validation. Here we also used a database for a matching purpose OTP is right/wrong.

OTP Verification Using Sms4india Api With Php and Mysql

Template Name: Contact Us In Bootstrap 4.
High Resolution:&nbsp;&ndash; Yes.
Compatible Browsers:&nbsp;&ndash;&nbsp;All Browser.
Source Files included: &ndash; HTML, Internal CSS, images(SVG - undraw), and CDN.
How the website owner gets in touch with you and much more. So here we designed a simple and responsive contact us form using Bootstrap 4.
In this form, we used the bootstrap grid class and one image HTML tag. Also, we used CSS3 properties and media queries to make this element responsive. Here we used the box-shadow effect in a form and we also modify bootstrap input filed classes. We used some attractive background colors and also used for texts.
Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

How the website owner gets in touch with you and much more. So here we designed a simple and responsive contact us form using Bootstrap 4.

Contact Us In Bootstrap 4

Template Name: Responsive Service Section In Tailwind CSS.
High Resolution:&nbsp;&ndash; Yes.
Compatible Browsers:&nbsp;&ndash;&nbsp;All Browser.
Source Files included:&nbsp;&ndash; HTML, Internal CSS, and CDN.
The service section must be important for the service base website to show what type of services we provide. Previously we made the Service section in a different way like in pure CSS and Bootstrap and others. So here we design a minimal and Responsive Service Section In Tailwind CSS with some basic CSS properties.
In this element, we use the Tailwind CSS grid class with flex utility classes. Also, we used shadow class and width classes to make this section equally. Also, we used a responsive grid class to make this card mobile-friendly.
Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

The service section must be important for the service base website to show what type of services we provide. Previously we made the Service section in a different way like in pure CSS and Bootstrap and others

Responsive Service Section In Tailwind CSS

Template Name: Footer Using Foundation CSS.
High Resolution:&nbsp;&ndash; Yes.
Compatible Browsers:&nbsp;&ndash;&nbsp;All Browser.
Source Files included:&nbsp;&ndash; Html, Internal CSS, and CDN.
Footer is most important for the website with an important link and some basic information. So here we design a basic Footer Using the Foundation CSS framework with some CSS properties.
In these elements, we used a foundation grid with a container and responsive column classes. Also, we used the bottom footer for a show credit purpose with some links. To make it responsive with mobile and tablets side we used responsive columns classes. To make it responsive for tablets and the mobile side we used media queries.
Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

Footer is most important for the website with an important link and some basic information. So here we design a basic Footer Using the Foundation CSS framework with some CSS properties.

Footer Using Foundation CSS

Template Name: Flat Pricing Table In Bootstrap 4.
High Resolution:&nbsp;&ndash; Yes.
Compatible Browsers:&nbsp;&ndash;&nbsp;All Browser.
Source Files included:&nbsp;&ndash; HTML and Internal CSS.
Flat design is most important nowadays to attract user's to your website. So here we design a Flat Pricing Table In Bootstrap 4 with some CSS properties.
In this element, we used a bootstrap grid and Html tags. Here we used a custom button and also modify bootstrap 4 classes. This is fully responsive to mobile and tablet views.
Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

Flat design is most important nowadays to attract user's to your website. So here we design a Flat Pricing Table In Bootstrap 4 with some CSS properties.

Flat Pricing Table In Bootstrap 4

Template Name: Simple Cookie Consent Using Bootstrap 4.
High Resolution:&nbsp;&ndash; Yes.
Compatible Browsers:&nbsp;&ndash;&nbsp;All Browser.
Source Files included:&nbsp;&ndash; HTML, Internal CSS, and CDN.
Cookies mostly use on every website nowadays with a different user interface. So here we design Simple Cookie Consent Using Bootstrap 4 and some CSS properties.
In this element, we used fixed position properties and left and right CSS properties. Here we also used one button with simple bootstrap grid columns and font awesome icons.
Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

Cookies mostly use on every website nowadays with a different user interface. So here we design Simple Cookie Consent Using Bootstrap 4 and some CSS properties.

Simple Cookie Consent Using Bootstrap 4

Template Name: Parallax Scrolling Effect In UIKIT.
High Resolution:&nbsp;&ndash; Yes.
Compatible Browsers:&nbsp;&ndash;&nbsp;All Browser.
Source Files included:&nbsp;&ndash; HTML, Internal CSS, CDN, and&nbsp;<a class="aioseop-link" href="https://unsplash.com/" target="_blank" rel="noreferrer noopener nofollow" aria-label="Images (opens in a new tab)">Images</a>.
Parallax is a background fix effect that is the first web trending effect. Here we used the&nbsp;<a href="https://getuikit.com/" target="_blank" rel="noreferrer noopener">UI-KIt</a>&nbsp;CSS framework to make these awesome Parallax Scrolling effects elements.
In this element, we used the UI-KIT class to make this Parallax effect. For making full screen we used CSS height properties and width properties. Also, we used a heading tag with a CSS flex property to make this text a proper centre. We also used some background properties to make an image perfectly centred and flexible.
Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

Parallax is a background fix effect that is the first web trending effect. Here we used the UI-KIt CSS framework to make these awesome Parallax Scrolling effects elements.

Parallax Scrolling Effect In UIKIT

Template Name: Registration Form In Tailwind CSS.
High Resolution:&nbsp;&ndash; Yes.
Compatible Browsers:&nbsp;&ndash;&nbsp;All Browser.
Source Files included:&nbsp;&ndash; HTML, Internal CSS, and CDN.
The registration Form has some input fields like username, email, password, and one register button. So here we designed an awesome Registration Form using Tailwind CSS and also used CSS properties.
In this form, we used the Tailwind CSS form component and also used utility classes. Here we also modify input fields in an attractive interface and used background images with a transparent form. Also, we used flex utilities classes and alignment item centre classes with a justify-centre class.
Make it yours now by using it, downloading it and please share it. we will design more elements for you.

The registration Form has some input fields like username, email, password, and one register button. So here we designed an awesome Registration Form using Tailwind CSS and also used CSS properties.

Registration Form In Tailwind CSS

Template Name: Social Icons Using CSS.
High Resolution:&nbsp;&ndash; Yes.
Compatible Browsers:&nbsp;&ndash;&nbsp;All Browser.
Source Files included:&nbsp;&ndash; HTML, Internal CSS and CDN.
We used font-awesome icons with some CSS properties to make this element more attractive in these elements.
Also Read:-&nbsp;<a href="https://w3hubs.com/jquery-slider-using-html-css/" target="_blank" rel="noreferrer noopener">JQuery Slider Using HTML/CSS</a>
 Social icons are more important to show on the website. We used this type of icon for sharing purposes, and users want something different. Also, here we use text-shadow properties for a shadow on the icon side.
Make it yours now by using it, downloading it and please share it.

Social icons are more important to show on the website. We used this type of icon for sharing purposes, and users want something different. Also, here we use text-shadow properties for a shadow on the icon side.

Social Icons Using CSS

Template Name: CSS Multiple Colors Scrollbar.
High Resolution:&nbsp;&ndash; Yes.
Compatible Browsers:&nbsp;&ndash;&nbsp;All Browser.
Source Files included:&nbsp;&ndash; HTML and Internal CSS.
The scrollbar is come's after when you have large data. So here we have to modify the scrollbar with colours.
In this element, we used custom colours in a scroll and also modify the border-radius colour. Here also we used width in the scroll bar side and commonly used background colour in content. Here we used some popular colours in a Y scrollbar and here we used hidden properties in the X scroll side.
Make it yours now by using it, downloading it and please share it. we will design more elements for you.

The scrollbar is come's after when you have large data. So here we have to modify the scrollbar with colours.

CSS Multiple Colors Scrollbar

Template Name: Tooltip Using CSS.
High Resolution:&nbsp;&ndash; Yes.
Compatible Browsers:&nbsp;&ndash;&nbsp;All Browser.
Source Files included:&nbsp;&ndash; HTML and Internal CSS.
Tooltip is a cool graphic interface to show on hover simple messages. So here we made a simple and basic Tooltip Using CSS and HTML.
In this element, we used basic HTML tags and css3 properties. Here we used CSS before and after selectors with and position properties. Also, we used hover effects with the content properties of CSS. Content CSS properties in great properties for showing your content to a before or after with and display properties.
Make it yours now by using it, downloading it and please share it. we will design more elements for you.

Tooltip is a cool graphic interface to show on hover simple messages. So here we made a simple and basic Tooltip Using CSS and HTML.

Tooltip Using CSS

Template Name: Image In Text Using CSS.
High Resolution:&nbsp;&ndash; Yes.
Compatible Browsers:&nbsp;&ndash;&nbsp;All Browser.
Source Files included:&nbsp;&ndash; HTML, Internal CSS, and Images.
Image is an important part of any website, like how you organize images on the website, etc. So here we used the image in a text format using a single line of the property.
In this element, we used the H1 heading tag and for a used image we used to colour transparent. For use over the image, we used background-clip and also used background cover. Also, we used media queries to make it responsive to this element.
Make it yours now by using it, downloading it and please share it. we will design more elements for you.

Image is an important part of any website, like how you organize images on the website, etc. So here we used the image in a text format using a single line of the property.