<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
<style>
html, body {
border: 0;
padding: 0;
margin: 0;
height: 100%;
}
body {
background: tomato;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
}
form {
background: white;
width: 47%;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.7);
font-family: lato;
position: relative;
color: #333;
border-radius: 10px;
}
form header {
background: #FF3838;
padding: 30px 20px;
color: white;
font-size: 1.2em;
font-weight: 600;
border-radius: 10px 10px 0 0;
}
form label {
margin-left: 20px;
display: inline-block;
margin-top: 30px;
margin-bottom: 5px;
position: relative;
}
form label span {
color: #FF3838;
font-size: 1.5em;
}
form input {
display: block;
width: 78%;
margin-left: 20px;
padding: 5px 20px;
font-size: 1em;
border-radius: 3px;
outline: none;
border: 1px solid #ccc;
}
form .help {
margin-left: 20px;
font-size: 0.8em;
color: #777;
}
form button {
position: relative;
margin-top: 30px;
margin-bottom: 30px;
left: 50%;
transform: translate(-50%, 0);
font-family: inherit;
color: white;
background: #FF3838;
outline: none;
border: none;
padding: 5px 15px;
font-size: 1.3em;
font-weight: 400;
border-radius: 3px;
box-shadow: 0px 0px 10px rgba(51, 51, 51, 0.4);
cursor: pointer;
transition: all 0.15s ease-in-out;
}
form button:hover {
background: #ff5252;
}
#newForm-innerCt{
padding-top : 45px;
padding-left : 161px;
}
#button-1011-btnInnerEl{
background: #ff5252;
width:67px;
height:25px;
font-size:1.5em;
}
.x-btn.x-unselectable.x-btn-default-small{
margin-left:76px;
margin-top:15px;
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.create('Ext.form.Panel', {
id: 'newForm',
renderTo: 'formId',
border: true,
width: 600,
height: 200,
items: [{
xtype: 'textfield',
fieldLabel: 'User Name'
},{
xtype: 'textfield',
fieldLabel: 'Password'
},{
xtype: 'button',
text: 'Login',
color : '#ff5252',
background : '#ff5252'
}]
});
});
</script>
</head>
<body>
<form>
<header>Login</header>
<div id = "formId"></div>
</form>
</body>
</html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
<style>
html, body {
border: 0;
padding: 0;
margin: 0;
height: 100%;
}
body {
background: tomato;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
}
form {
background: white;
width: 47%;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.7);
font-family: lato;
position: relative;
color: #333;
border-radius: 10px;
}
form header {
background: #FF3838;
padding: 30px 20px;
color: white;
font-size: 1.2em;
font-weight: 600;
border-radius: 10px 10px 0 0;
}
form label {
margin-left: 20px;
display: inline-block;
margin-top: 30px;
margin-bottom: 5px;
position: relative;
}
form label span {
color: #FF3838;
font-size: 1.5em;
}
form input {
display: block;
width: 78%;
margin-left: 20px;
padding: 5px 20px;
font-size: 1em;
border-radius: 3px;
outline: none;
border: 1px solid #ccc;
}
form .help {
margin-left: 20px;
font-size: 0.8em;
color: #777;
}
form button {
position: relative;
margin-top: 30px;
margin-bottom: 30px;
left: 50%;
transform: translate(-50%, 0);
font-family: inherit;
color: white;
background: #FF3838;
outline: none;
border: none;
padding: 5px 15px;
font-size: 1.3em;
font-weight: 400;
border-radius: 3px;
box-shadow: 0px 0px 10px rgba(51, 51, 51, 0.4);
cursor: pointer;
transition: all 0.15s ease-in-out;
}
form button:hover {
background: #ff5252;
}
#newForm-innerCt{
padding-top : 45px;
padding-left : 161px;
}
#button-1011-btnInnerEl{
background: #ff5252;
width:67px;
height:25px;
font-size:1.5em;
}
.x-btn.x-unselectable.x-btn-default-small{
margin-left:76px;
margin-top:15px;
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.create('Ext.form.Panel', {
id: 'newForm',
renderTo: 'formId',
border: true,
width: 600,
height: 200,
items: [{
xtype: 'textfield',
fieldLabel: 'User Name'
},{
xtype: 'textfield',
fieldLabel: 'Password'
},{
xtype: 'button',
text: 'Login',
color : '#ff5252',
background : '#ff5252'
}]
});
});
</script>
</head>
<body>
<form>
<header>Login</header>
<div id = "formId"></div>
</form>
</body>
</html>
No comments:
Post a Comment