<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#"><img src="https://img.icons8.com/cute-clipart/64/000000/orange.png"/></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="btn btn-save " href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
<section class="main__box">
<div class="container">
<div class="row">
<div class="col-md-6">
<form>
<div class="form-group mb-4">
<label for="primaryEmail">Primary Email</label>
<input type="email" class="form-control" id="primaryEmail" aria-describedby="primaryEmail" placeholder="Enter Your Email">
</div>
<div class="form-group mb-4">
<label for="AccountAddress">Address</label>
<input type="text" class="form-control" id="AccountAddress" value="228 Evergreen Ave">
</div>
<div class="form-group mb-4">
<input type="text" class="form-control" id="AccountAddress" value="Brooklyn">
</div>
<div class="row mb-4">
<div class="col-md-6">
<div class="form-group">
<label>Dropdown 1</label>
<select class="form-select" aria-label="Default select example">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Dropdown 2</label>
<select class="form-select" aria-label="Default select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label>Message</label>
<textarea type="text" id="message" name="message" rows="5" class="form-control md-textarea"></textarea>
</div>
<div class=" mt-4">
<button type="button" class="btn btn-save ">Save Changes</button>
<button type="button" class="btn btn-save btn-save-border" data-dismiss="modal">Cancel</button>
</div>
</form>
</div>
<div class="col-md-6">
<div class="output__box">
<h4>Output Here</h4>
<div class="output__content p-3">
<code class="d-block">
Hello World !
<br>
<br>
var myDefaultAllowList = bootstrap.Tooltip.Default.allowList
<br>
<br>
// To allow table elements
myDefaultAllowList.table = []
<br>
<br>
// To allow td elements and data-bs-option attributes on td elements
myDefaultAllowList.td = ['data-bs-option']
<br>
<br>
// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultAllowList['*'].push(myCustomRegex)
<br><br>
var yourTooltipEl = document.getElementById('yourTooltip')
var tooltip = new bootstrap.Tooltip(yourTooltipEl, {
sanitizeFn: function (content) {
return DOMPurify.sanitize(content)
}
})
<br>
<br>
var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultAllowlist = {
// Global attributes allowed on any supplied element below.
'*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
a: ['target', 'href', 'title', 'rel'],
area: [],
b: [],
br: [],
col: [],
code: [],
div: [],
em: [],
hr: [],
h1: [],
h2: [],
h3: [],
h4: [],
h5: [],
h6: [],
i: [],
img: ['src', 'srcset', 'alt', 'title', 'width', 'height'],
li: [],
ol: [],
p: [],
pre: [],
s: [],
small: [],
span: [],
sub: [],
sup: [],
strong: [],
u: [],
ul: []
}
</code>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<p><img src="https://img.icons8.com/cute-clipart/64/000000/orange.png" class="order-md-2" alt=""> Copyright © 2021 stc. All rights reserved </p>
</div>
</footer>
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-size: 16px;
font-family: 'Poppins', sans-serif;
}
img {
max-width: 100%;
display: inline-block;
}
.navbar-brand img {
width: 50px;
}
.navbar {
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.178);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.178);
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 99;
}
.navbar .nav-item {
margin-left: 10px;
}
.navbar .nav-item .btn-save {
line-height: 2;
}
.main__box {
margin: 30px 0;
}
.main__box form label {
color: #121416;
font-size: 14px;
font-weight: 400;
line-height: 19px;
letter-spacing: 0.1166667px;
margin-bottom: 10px;
}
.main__box form textarea,
.main__box form .form-select,
.main__box form input.form-control,
.main__box form textarea.form-control,
.main__box form select.form-control {
font-size: 14px;
}
.main__box form .form-select{
width:100%;
border:1px solid #ccc;
}
.main__box form textarea:focus,
.main__box form .form-select:focus,
.main__box form input.form-control:focus,
.main__box form textarea.form-control:focus,
.main__box form select.form-control:focus {
-webkit-box-shadow: none;
box-shadow: none;
outline: none;
}
.main__box form .form-select,
.main__box form input {
height: 45px;
border-radius: 0;
}
.btn-save {
border: 1px solid transparent;
min-width: 114px;
height: 44px;
text-transform: uppercase;
border-radius: 0;
background-color: #502c84;
color: #fff;
font-size: 14px;
font-weight: 400;
padding: 5px 20px;
line-height: 19px;
text-transform: uppercase;
letter-spacing: 1.3125px;
}
.btn-save:hover {
background-color: #2e1255;
color: #fff;
}
.btn-save-border {
border-color: #111;
background-color: #fff;
margin-right: 10px;
color: #000;
}
.btn-save-border:hover {
background-color: #502c84;
color: #fff;
border-color: #502c84;
}
footer {
padding: 15px 0;
background-color: #390065;
}
footer img{
width:50px;
}
footer p {
color: #fff;
font-size: 12px;
margin: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.output__box {
background-color: #f6f6f6;
max-height: 100vh;
min-height: 500px;
overflow-y: scroll;
position: relative;
border: 1px solid #ccc;
}
.output__box h4 {
font-size: 14px;
color: #999;
border-bottom: 1px solid #ccc;
padding: 15px;
padding-bottom: 10px;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1;
background-color: #f6f6f6;
}
