<!DOCTYPE html>
<html lang="en">
<head>
<title>Azure B2C change login page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://www.markuptag.com/bootstrap/5/css/bootstrap.min.css">
<style type="text/css">
body {
background-color: #4887e6;
font-family: Verdana;
font-size: 14px;
}
.bg-light {
background-color:#dde4eb !important;
}
h2 {
font-size: medium !important;
color: blue !important;
}
#next {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
button {
background-color: #4CAF50 !important; /* Green */
border: none !important;
color: white !important;
padding: 10px 20px !important;
text-align: center !important;
text-decoration: none !important;
display: inline-block !important;
font-size: 14px !important;
margin: 2px 2px 2px 2px !important;
}
input[type=email] {
width: 100%;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
margin-bottom: 3px !important;
}
.dropdown_single {
width: 100%;
box-sizing: border-box !important;
border: 2px solid #ccc !important;
border-radius: 4px !important;
font-size: 16px !important;
background-color: white !important;
background-image: url('searchicon.png') !important;
background-position: 10px 10px !important;
background-repeat: no-repeat !important;
padding: 12px 20px 12px 40px !important;
margin-bottom: 3px !important;
}
input[type=password] {
width: 100%;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
margin-bottom: 3px !important;
}
input[type=text] {
width: 100%;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
margin-bottom: 3px !important;
}
.buttons {
margin-top:2px!important;
}
ul {
list-style: none !important;
padding-inline-start: 20px !important;
}
a {
color: #8caad8 !important;
text-decoration: underline !important;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 offset-md-4">
<div class="login-form bg-light mt-4 p-4">
<h4>Welcome To Azure AD B2C Example</h4>
<hr class="mt-2">
<div id="api" class="row g-3">
</div>
<hr class="mt-4">
</div>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://www.markuptag.com/bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>
</html>