andy/corporate_portal_westerindo
1
0
Fork 0
Code Issues 13 Pull Requests Packages Projects Releases Wiki Activity

Custom css SAS & layout playground

Browse Source
This commit is contained in:
Sas Andy
2024-04-25 16:56:20 +07:00
parent 34be7a29a1
commit da95e5b89f
13 changed files with 5213 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

586
assets/andy/coba.html Normal file
View File

@@ -0,0 +1,586 @@
<!DOCTYPE html>
<!--
Template Name: Metronic - Bootstrap 4 HTML, React, Angular 9 & VueJS Admin Dashboard Theme
Author: KeenThemes
Website: http://www.keenthemes.com/
Contact: support@keenthemes.com
Follow: www.twitter.com/keenthemes
Dribbble: www.dribbble.com/keenthemes
Like: www.facebook.com/keenthemes
Purchase: https://1.envato.market/EA4JP
Renew Support: https://1.envato.market/EA4JP
License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
-->
<html lang="en">
<!--begin::Head-->
<head>
<base href="../" />
<meta charset="utf-8" />
<title>Corporate portal | Landing Page</title>
<meta name="description" content="Login page example" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!--begin::Fonts-->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"
/>
<!--end::Fonts-->
<!--begin::Page Custom Styles(used by this page)-->
<link
href="assets/css/pages/login/login-1.css"
rel="stylesheet"
type="text/css"
/>
<!--end::Page Custom Styles-->
<!--begin::Global Theme Styles(used by all pages)-->
<link
href="assets/plugins/global/plugins.bundle.css"
rel="stylesheet"
type="text/css"
/>
<link
href="assets/plugins/custom/prismjs/prismjs.bundle.css"
rel="stylesheet"
type="text/css"
/>
<link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css" />
<!--end::Global Theme Styles-->
<!--begin::Layout Themes(used by all pages)-->
<link
href="assets/css/themes/layout/header/base/light.css"
rel="stylesheet"
type="text/css"
/>
<link
href="assets/css/themes/layout/header/menu/light.css"
rel="stylesheet"
type="text/css"
/>
<link
href="assets/css/themes/layout/brand/dark.css"
rel="stylesheet"
type="text/css"
/>
<link
href="assets/css/themes/layout/aside/dark.css"
rel="stylesheet"
type="text/css"
/>
<!--end::Layout Themes-->
<link
href="asset-corporate-portal/css/sas.bundle.css"
rel="stylesheet"
type="text/css"
/>
<link rel="shortcut icon" href="assets/media/logos/favicon.ico" />
</head>
<!--end::Head-->
<!--begin::Body-->
<body
id="kt_body"
class="header-fixed header-mobile-fixed subheader-enabled subheader-fixed subheader-mobile-fixed aside-enabled aside-fixed aside-minimize-hoverable page-loading"
>
<!--begin::Main-->
<div class="d-flex flex-column flex-root bg-white">
<!-- begin::Navbar -->
<div
class="d-flex flex-lg-row justify-content-between py-5"
style="height: 119px; align-items: center"
>
<img
src="asset-corporate-portal/media/logo.png"
alt=""
style="height: 39px"
/>
<ul class="nav">
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle font-weight-bolder"
data-toggle="dropdown"
role="button"
aria-haspopup="true"
aria-expanded="false"
>
Dashboard
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
</div>
</li>
<li class="nav-item">
<a
class="nav-link disabled"
href="#"
tabindex="-1"
aria-disabled="true"
>Disabled</a
>
</li>
</ul>
<img
src="asset-corporate-portal/media/logo.png"
alt=""
style="height: 39px"
/>
</div>
<div class="p-10">
<button type="button" class="btn">btn</button>
<button type="button" class="btn btn-tosca">btn cb</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-warning">Warning</button>
</div>
<div class="p-10">
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">
Secondary
</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
</div>
<div class="p-10">
<a href="#" class="btn btn-primary active">Active state</a>
<a href="#" class="btn btn-success active">Active state</a>
<a href="#" class="btn btn-danger active">Active state</a>
<a href="#" class="btn btn-warning active">Active state</a>
</div>
<div class="p-10">
<button class="btn btn-primary" disabled>Disabled state</button>
<button class="btn btn-success" disabled>Disabled state</button>
<button class="btn btn-danger" disabled>Disabled state</button>
<button class="btn btn-warning" disabled>Disabled state</button>
</div>
<div class="p-10">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-success active">
<input type="radio" name="options" id="option1" checked="checked" />
Active
</label>
<label class="btn btn-success">
<input type="radio" name="options" id="option2" /> Radio
</label>
<label class="btn btn-success">
<input type="radio" name="options" id="option3" /> Radio
</label>
</div>
</div>
<div class="p-10">
<a href="#" class="btn btn-success font-weight-bold btn-pill"
>Success</a
>
<a href="#" class="btn btn-primary font-weight-bold btn-pill"
>Primary</a
>
<a href="#" class="btn btn-danger font-weight-bold btn-pill">Danger</a>
<a href="#" class="btn btn-warning font-weight-bold btn-pill"
>Warning</a
>
<a href="#" class="btn btn-dark font-weight-bold btn-pill">Dark</a>
</div>
<div class="p-10">
<a href="#" class="btn btn-success font-weight-bold btn-square"
>Success</a
>
<a href="#" class="btn btn-primary font-weight-bold btn-square"
>Primary</a
>
<a href="#" class="btn btn-danger font-weight-bold btn-square"
>Danger</a
>
<a href="#" class="btn btn-warning font-weight-bold btn-square"
>Warning</a
>
<a href="#" class="btn btn-dark font-weight-bold btn-square">Dark</a>
</div>
<div class="p-10">
<a href="#" class="btn btn-light-success font-weight-bold mr-2"
>Success</a
>
<a href="#" class="btn btn-light-info font-weight-bold mr-2">info</a>
<a href="#" class="btn btn-light-primary font-weight-bold mr-2"
>Primary</a
>
<a href="#" class="btn btn-light-secondary font-weight-bold mr-2"
>secondary</a
>
<a href="#" class="btn btn-light-danger font-weight-bold mr-2"
>Danger</a
>
<a href="#" class="btn btn-light-warning font-weight-bold mr-2"
>Warning</a
>
<a href="#" class="btn btn-light-dark font-weight-bold">Dark</a>
</div>
<div class="p-10">
<a
href="#"
class="btn btn-text-info btn-hover-light-info font-weight-bold mr-2"
>info</a
>
<a
href="#"
class="btn btn-text-secondary btn-hover-light-secondary font-weight-bold mr-2"
>secondary</a
>
<a
href="#"
class="btn btn-text-success btn-hover-light-success font-weight-bold mr-2"
>Success</a
>
<a
href="#"
class="btn btn-text-primary btn-hover-light-primary font-weight-bold mr-2"
>Primary</a
>
<a
href="#"
class="btn btn-text-danger btn-hover-light-danger font-weight-bold mr-2"
>Danger</a
>
<a
href="#"
class="btn btn-text-warning btn-hover-light-warning font-weight-bold mr-2"
>Warning</a
>
<a
href="#"
class="btn btn-text-dark btn-hover-light-dark font-weight-bold mr-2"
>Dark</a
>
</div>
<div class="p-10">
<a
href="#"
class="btn btn-hover-bg-success btn-text-success btn-hover-text-white border-0 font-weight-bold mr-2"
>Success</a
>
<a
href="#"
class="btn btn-hover-bg-info btn-text-info btn-hover-text-white border-0 font-weight-bold mr-2"
>info</a
>
<a
href="#"
class="btn btn-hover-bg-primary btn-text-primary btn-hover-text-white border-0 font-weight-bold mr-2"
>Primary</a
>
<a
href="#"
class="btn btn-hover-bg-danger btn-text-danger btn-hover-text-white border-0 font-weight-bold mr-2"
>Danger</a
>
<a
href="#"
class="btn btn-hover-bg-warning btn-text-warning btn-hover-text-white border-0 font-weight-bold mr-2"
>Warning</a
>
<a
href="#"
class="btn btn-hover-bg-dark btn-text-dark btn-hover-text-white border-0 font-weight-bold mr-2"
>Dark</a
>
</div>
<div class="p-10">
<a
href="#"
class="btn btn-light btn-text-success btn-hover-text-success font-weight-bold"
>Success</a
>
<a
href="#"
class="btn btn-light btn-text-info btn-hover-text-info font-weight-bold"
>info</a
>
<a
href="#"
class="btn btn-light btn-text-primary btn-hover-text-primary font-weight-bold"
>Primary</a
>
<a
href="#"
class="btn btn-light btn-text-danger btn-hover-text-danger font-weight-bold"
>Danger</a
>
<a
href="#"
class="btn btn-light btn-text-warning btn-hover-text-dark-50 font-weight-bold"
>Warning</a
>
<a
href="#"
class="btn btn-light btn-text-dark btn-hover-text-dark font-weight-bold"
>Dark</a
>
</div>
<div class="p-10">
<a
href="#"
class="btn btn-light btn-hover-success font-weight-bold mr-2"
>Success</a
>
<a href="#" class="btn btn-light btn-hover-info font-weight-bold mr-2"
>info</a
>
<a href="#" class="btn btn-light btn-hover-primary font-weight-bold"
>Primary</a
>
<a href="#" class="btn btn-light btn-hover-danger font-weight-bold"
>Danger</a
>
<a href="#" class="btn btn-light btn-hover-warning font-weight-bold"
>Warning</a
>
<a href="#" class="btn btn-light btn-hover-dark font-weight-bold"
>Dark</a
>
</div>
<div class="p-10">
<a href="#" class="btn btn-link-success font-weight-bold">Success</a>
<a href="#" class="btn btn-link-info font-weight-bold">info</a>
<a href="#" class="btn btn-link-primary font-weight-bold">Primary</a>
<a href="#" class="btn btn-link-danger font-weight-bold">Danger</a>
<a href="#" class="btn btn-link-warning font-weight-bold">Warning</a>
<a href="#" class="btn btn-link-dark font-weight-bold">Dark</a>
</div>
<div class="p-10">
<a href="#" class="btn btn-light btn-shadow font-weight-bold mr-2"
>Light</a
>
<a href="#" class="btn btn-info btn-shadow font-weight-bold mr-2"
>info</a
>
<a href="#" class="btn btn-success btn-shadow font-weight-bold mr-2"
>Success</a
>
<a href="#" class="btn btn-primary btn-shadow font-weight-bold mr-2"
>Primary</a
>
<a href="#" class="btn btn-danger btn-shadow font-weight-bold mr-2"
>Danger</a
>
<a href="#" class="btn btn-warning btn-shadow font-weight-bold mr-2"
>Warning</a
>
</div>
<div class="p-10">
<a href="#" class="btn btn-light btn-shadow-hover font-weight-bold mr-2"
>Light</a
>
<a href="#" class="btn btn-info btn-shadow-hover font-weight-bold mr-2"
>info</a
>
<a
href="#"
class="btn btn-success btn-shadow-hover font-weight-bold mr-2"
>Success</a
>
<a
href="#"
class="btn btn-primary btn-shadow-hover font-weight-bold mr-2"
>Primary</a
>
<a
href="#"
class="btn btn-danger btn-shadow-hover font-weight-bold mr-2"
>Danger</a
>
<a
href="#"
class="btn btn-warning btn-shadow-hover font-weight-bold mr-2"
>Warning</a
>
</div>
<div class="p-10">
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</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"
data-toggle="dropdown"
href="#"
role="button"
aria-haspopup="true"
aria-expanded="false"
>
Dropdown
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a
class="nav-link disabled"
href="#"
tabindex="-1"
aria-disabled="true"
>Disabled</a
>
</li>
</ul>
</div>
<div class="p-10">
<ul class="nav nav-pills" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#">Active</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"
data-toggle="dropdown"
href="#"
role="button"
aria-haspopup="true"
aria-expanded="false"
>
Dropdown
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
<li class="nav-item">
<a
class="nav-link disabled"
href="#"
tabindex="-1"
aria-disabled="true"
>Disabled</a
>
</li>
</ul>
<div class="tab-content mt-5" id="myTabContent">...</div>
</div>
<div class="p-10">
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>
<p class="h1 text-disabled">text normal</p>
</div>
<!-- end::Navbar -->
</div>
<!--end::Main-->
<script>
var HOST_URL =
"https://preview.keenthemes.com/metronic/theme/html/tools/preview";
</script>
<!--begin::Global Config(global config for global JS scripts)-->
<script>
var KTAppSettings = {
breakpoints: {
sm: 576,
md: 768,
lg: 992,
xl: 1200,
xxl: 1400,
},
colors: {
theme: {
base: {
white: "#ffffff",
primary: "#3699FF",
secondary: "#E5EAEE",
success: "#1BC5BD",
info: "#8950FC",
warning: "#FFA800",
danger: "#F64E60",
light: "#E4E6EF",
dark: "#181C32",
},
light: {
white: "#ffffff",
primary: "#E1F0FF",
secondary: "#EBEDF3",
success: "#C9F7F5",
info: "#EEE5FF",
warning: "#FFF4DE",
danger: "#FFE2E5",
light: "#F3F6F9",
dark: "#D6D6E0",
},
inverse: {
white: "#ffffff",
primary: "#ffffff",
secondary: "#3F4254",
success: "#ffffff",
info: "#ffffff",
warning: "#ffffff",
danger: "#ffffff",
light: "#464E5F",
dark: "#ffffff",
},
},
gray: {
"gray-100": "#F3F6F9",
"gray-200": "#EBEDF3",
"gray-300": "#E4E6EF",
"gray-400": "#D1D3E0",
"gray-500": "#B5B5C3",
"gray-600": "#7E8299",
"gray-700": "#5E6278",
"gray-800": "#3F4254",
"gray-900": "#181C32",
},
},
"font-family": "Poppins",
};
</script>
<!--end::Global Config-->
<!--begin::Global Theme Bundle(used by all pages)-->
<script src="assets/plugins/global/plugins.bundle.js"></script>
<script src="assets/plugins/custom/prismjs/prismjs.bundle.js"></script>
<script src="assets/js/scripts.bundle.js"></script>
<!--end::Global Theme Bundle-->
<!--begin::Page Scripts(used by this page)-->
<!-- <script src="asset-corporate-portal/js/login-general.js"></script> -->
<!--end::Page Scripts-->
</body>
<!--end::Body-->
</html>

4064
assets/asset-corporate-portal/css/sas.bundle.css Normal file
View File

File diff suppressed because it is too large Load Diff