index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design Form</title>
<!-- library css js bootstrapt -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- link add css -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container px-4 py-5 mx-auto">
<div class="card card0">
<div class="d-flex flex-lg-row flex-column-reverse">
<div class="card card1">
<div class="row justify-content-center my-auto">
<div class="col-md-8 col-10 my-5">
<h3 class="mb-5 text-center heading">Soeng Souy</h3>
<h6 class="msg-info text-center">Please login to your account</h6>
<div class="form-group"> <label class="form-control-label text-muted">Username</label> <input type="text" id="email" name="email" placeholder="Enter email" class="form-control"> </div>
<div class="form-group"> <label class="form-control-label text-muted">Password</label> <input type="password" id="psw" name="psw" placeholder="Enter password" class="form-control"> </div>
<div class="row justify-content-center my-3 px-3"> <button class="btn-block btn-color">LOG IN</button> </div>
<div class="row justify-content-center my-2"> <a href="#"><small class="text-muted">Forgot Password?</small></a> </div>
</div>
</div>
</div>
<div class="card card2">
<div class="my-auto mx-md-5 px-md-5 right">
<h3 class="text-white">SoengSouy Webdesign</h3>
<small class="text-white">SoengSouy.Webdesign Is a free online learning program that introduces methods and how to coding websites from the limit First, to the highest level. There are websites such as HTML, CSS, Javascript, PHP,
How to Learn Website Design Template, Layout, Footer, Panel Right, Panel Left, Other.</small>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design Form</title>
<!-- library css js bootstrapt -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- link add css -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container px-4 py-5 mx-auto">
<div class="card card0">
<div class="d-flex flex-lg-row flex-column-reverse">
<div class="card card1">
<div class="row justify-content-center my-auto">
<div class="col-md-8 col-10 my-5">
<h3 class="mb-5 text-center heading">Soeng Souy</h3>
<h6 class="msg-info text-center">Please login to your account</h6>
<div class="form-group"> <label class="form-control-label text-muted">Username</label> <input type="text" id="email" name="email" placeholder="Enter email" class="form-control"> </div>
<div class="form-group"> <label class="form-control-label text-muted">Password</label> <input type="password" id="psw" name="psw" placeholder="Enter password" class="form-control"> </div>
<div class="row justify-content-center my-3 px-3"> <button class="btn-block btn-color">LOG IN</button> </div>
<div class="row justify-content-center my-2"> <a href="#"><small class="text-muted">Forgot Password?</small></a> </div>
</div>
</div>
</div>
<div class="card card2">
<div class="my-auto mx-md-5 px-md-5 right">
<h3 class="text-white">SoengSouy Webdesign</h3>
<small class="text-white">SoengSouy.Webdesign Is a free online learning program that introduces methods and how to coding websites from the limit First, to the highest level. There are websites such as HTML, CSS, Javascript, PHP,
How to Learn Website Design Template, Layout, Footer, Panel Right, Panel Left, Other.</small>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
styles.css
.body {
color: rgb(190, 188, 188);
}
.flex-lg-row {
-ms-flex-direction: row!important;
flex-direction: row!important;
box-shadow: 10px 10px 15px 15px #aaaaaa;
}
input,
textarea {
background-color: #F3E5F5;
border-radius: 1px !important;
padding: 12px 15px 12px 15px !important;
width: 100%;
box-sizing: border-box;
border: none !important;
border: 1px solid #F3E5F5 !important;
font-size: 16px !important;
color: #000 !important;
font-weight: 400
}
input:focus,
textarea:focus {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
border: 1px solid #D500F9 !important;
outline-width: 0;
font-weight: 400
}
button:focus {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
outline-width: 0
}
.card {
border-radius: 0;
border: none
}
.card1 {
width: 50%;
padding: 40px 30px 10px 30px
}
.card2 {
width: 50%;
background-image: linear-gradient(to right,
rgb(31, 210, 241), rgb(248, 64, 8))
}
.heading {
margin-bottom: 60px !important
}
::placeholder {
color: #000 !important;
opacity: 1
}
:-ms-input-placeholder {
color: #000 !important
}
::-ms-input-placeholder {
color: #000 !important
}
.form-control-label {
font-size: 12px;
margin-left: 15px
}
.msg-info {
padding-left: 15px;
margin-bottom: 30px
}
.btn-color {
border-radius: 1px;
color: #fff;
background-image: linear-gradient(to
right, #FFD54F, #D500F9);
padding: 15px;
cursor: pointer;
border: none !important;
margin-top: 40px
}
.btn-color:hover {
color: #fff;
background-image: linear-gradient(to right,
rgb(123, 10, 143), rgb(0, 255, 76))
}
.btn-white {
border-radius: 1px;
color: #D500F9;
background-color: #fff;
padding: 8px 40px;
cursor: pointer;
border: 2px solid #D500F9 !important
}
.btn-white:hover {
color: #fff;
background-image: linear-gradient(to right,
rgb(173, 255, 79), rgb(0, 46, 249))
}
a {
color: #000
}
a:hover {
color: #000
}
.bottom {
width: 100%;
margin-top: 50px !important
}
.sm-text {
font-size: 15px
}
.form-group .form-control {
border-radius: 1px;
}
.body { color: rgb(190, 188, 188); } .flex-lg-row { -ms-flex-direction: row!important; flex-direction: row!important; box-shadow: 10px 10px 15px 15px #aaaaaa; } input, textarea { background-color: #F3E5F5; border-radius: 1px !important; padding: 12px 15px 12px 15px !important; width: 100%; box-sizing: border-box; border: none !important; border: 1px solid #F3E5F5 !important; font-size: 16px !important; color: #000 !important; font-weight: 400 } input:focus, textarea:focus { -moz-box-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; border: 1px solid #D500F9 !important; outline-width: 0; font-weight: 400 } button:focus { -moz-box-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; outline-width: 0 } .card { border-radius: 0; border: none } .card1 { width: 50%; padding: 40px 30px 10px 30px } .card2 { width: 50%; background-image: linear-gradient(to right, rgb(31, 210, 241), rgb(248, 64, 8)) } .heading { margin-bottom: 60px !important } ::placeholder { color: #000 !important; opacity: 1 } :-ms-input-placeholder { color: #000 !important } ::-ms-input-placeholder { color: #000 !important } .form-control-label { font-size: 12px; margin-left: 15px } .msg-info { padding-left: 15px; margin-bottom: 30px } .btn-color { border-radius: 1px; color: #fff; background-image: linear-gradient(to right, #FFD54F, #D500F9); padding: 15px; cursor: pointer; border: none !important; margin-top: 40px } .btn-color:hover { color: #fff; background-image: linear-gradient(to right, rgb(123, 10, 143), rgb(0, 255, 76)) } .btn-white { border-radius: 1px; color: #D500F9; background-color: #fff; padding: 8px 40px; cursor: pointer; border: 2px solid #D500F9 !important } .btn-white:hover { color: #fff; background-image: linear-gradient(to right, rgb(173, 255, 79), rgb(0, 46, 249)) } a { color: #000 } a:hover { color: #000 } .bottom { width: 100%; margin-top: 50px !important } .sm-text { font-size: 15px } .form-group .form-control { border-radius: 1px; } |
0 Comments
CAN FEEDBACK
Emoji