Web Interface Design Using Html Css Javascript and Jquery Set
For anyone who is running an online business, checkout becomes an important part of the selling process to maintain the convenience for online sales and Fast transactions. An appealing User-Interface(UI) will help us in bringing in potential visitors and facilitates the user experience.
In this article, we will be creating a payment page for transaction purposes. The simple project is a perfect example of how easily we can make a User Interface design using HTML and CSS.
Attention reader! Don't stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
Creating Structure for our web-page: We will be starting out with creating a structural aspect of our website by using simple HTML, and later on, we will style it by using Cascading Style Sheets(CSS), which will be describing the style of our HTML document and its elements.
HTML Code: In this HTML file we have mainly divided our webpage into several <div> tags, and we have use several classes as well like "main-content", "centre-content", "last-content" etc. This CSS classes are to stylize our HTML elements.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" />
< meta
name = "viewport"
content=" width = device -width,
initial-scale = 1 .0"/>
< link rel = "stylesheet" href = "style.css"
class = "css" />
</ head >
< body >
< div class = "container" >
< div class = "main-content" >
< p class = "text" >GeeksforGeeks</ p >
</ div >
< div class = "centre-content" >
< h1 class = "price" >2499< span >/-</ span ></ h1 >
< p class = "course" >
Buy DSA Self-Paced Course Now !
</ p >
</ div >
< div class = "last-content" >
< button type = "button" class = "pay-now-btn" >
Apply Coupons
</ button >
< button type = "button" class = "pay-now-btn" >
Pay with Netbanking
</ button >
</ div >
< div class = "card-details" >
< p >Pay using Credit or Debit card</ p >
< div class = "card-number" >
< label > Card Number </ label >
< input
type = "text"
class = "card-number-field"
placeholder = "###-###-###" />
</ div >
< br />
< div class = "date-number" >
< label > Expiry Date </ label >
< input type = "text" class = "date-number-field"
placeholder = "DD-MM-YY" />
</ div >
< div class = "cvv-number" >
< label > CVV number </ label >
< input type = "text" class = "cvv-number-field"
placeholder = "xxx" />
</ div >
< div class = "nameholder-number" >
< label > Card Holder name </ label >
< input
type = "text"
class = "card-name-field"
placeholder = "Enter your Name" />
</ div >
< button type = "submit"
class = "submit-now-btn" >
submit
</ button >
</ div >
</ div >
</ body >
</ html >
Designing Our Payment Page: Using CSS, we can store all the style information that our page would share. Whenever a user will visit the web page, the browser will load all the related information along with the proper styling related to the contents of the page. In CSS, a class is an element group that is the same or similar. You can have the elements that you want in a class. And each element can be a member of multiple classes. Every class has CSS attributes (like color and font-size) that are specific to that class.
CSS Code: CSS allows us to create unique and interactive websites.
style.css
* {
margin : 0 ;
padding : 0 ;
}
body {
font-family : "Segoe UI" , Tahoma , Geneva, Verdana , sans-serif ;
font-weight : bold ;
}
.container {
height : 900px ;
width : 400px ;
background-image : linear-gradient( #1e6b30 , #308d46 );
top : 50% ;
left : 50% ;
position : absolute ;
transform: translate( -50% , -50% );
position : absolute ;
border-bottom-left-radius: 180px ;
border-top-right-radius: 150px ;
}
.main-content {
height : 235px ;
background-color : #1b9236 ;
border-bottom-left-radius: 90px ;
border-bottom-right-radius: 80px ;
border-top : #1e6b30 ;
}
.text {
text-align : center ;
font-size : 300% ;
text-decoration : aliceblue;
color : aliceblue;
}
.course {
color : black ;
font-size : 25px ;
font-weight : bolder ;
}
.centre-content {
height : 180px ;
margin : -70px 30px 20px ;
color : aliceblue;
text-align : center ;
font-size : 20px ;
border-radius: 25px ;
padding-top : 0.5px ;
background-image : linear-gradient( #1e6b30 , #308d46 );
}
.centre-content-h 1 {
padding-top : 30px ;
padding-bottom : 30px ;
font-weight : normal ;
}
.price {
font-size : 60px ;
margin-left : 5px ;
bottom : 15px ;
position : relative ;
}
.pay-now-btn {
cursor : pointer ;
color : #fff ;
height : 50px ;
width : 290px ;
border : none ;
margin : 5px 30px ;
background-color : rgb ( 71 , 177 , 61 );
position : relative ;
}
.card-details {
background : rgb ( 8 , 49 , 14 );
color : rgb ( 225 , 223 , 233 );
margin : 10px 30px ;
padding : 10px ;
}
.card-details p {
font-size : 15px ;
}
.card-details label {
font-size : 15px ;
line-height : 35px ;
}
.submit-now-btn {
cursor : pointer ;
color : #fff ;
height : 30px ;
width : 240px ;
border : none ;
margin : 5px 30px ;
background-color : rgb ( 71 , 177 , 61 );
}
Final Code: Combine above two section, will give you final representation of our online payment page.
Output:
Web Interface Design Using Html Css Javascript and Jquery Set
Source: https://www.geeksforgeeks.org/create-an-online-payment-ui-design-using-html-css/
0 Response to "Web Interface Design Using Html Css Javascript and Jquery Set"
Post a Comment