creativetimofficial--ui
dragosct10
258 行
12 KiB
HTML
258 行
12 KiB
HTML
<!--
|
|
=========================================================
|
|
* Material Dashboard 3 - v3.2.0
|
|
=========================================================
|
|
|
|
* Product Page: https://www.creative-tim.com/product/material-dashboard
|
|
* Copyright 2024 Creative Tim (https://www.creative-tim.com)
|
|
* Licensed under MIT (https://www.creative-tim.com/license)
|
|
* Coded by Creative Tim
|
|
|
|
=========================================================
|
|
|
|
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
-->
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
|
|
<link rel="icon" type="image/png" href="../assets/img/favicon.png">
|
|
<title>
|
|
Material Dashboard 3 by Creative Tim
|
|
</title>
|
|
<!-- Extra details for Live View on GitHub Pages -->
|
|
<!-- Canonical SEO -->
|
|
<link rel="canonical" href="https://www.creative-tim.com/product/material-dashboard" />
|
|
<!-- Social tags -->
|
|
<meta name="keywords" content="creative tim, html dashboard, html css dashboard, web dashboard, bootstrap 5 dashboard, bootstrap 5, css3 dashboard, bootstrap 5 admin, Material Dashboard bootstrap 5 dashboard, frontend, responsive bootstrap 5 dashboard, free dashboard, free admin dashboard, free bootstrap 5 admin dashboard">
|
|
<meta name="description" content="Material Dashboard 3 is a beautiful Bootstrap 5 admin dashboard with a large number of components, designed to look beautiful and organized. If you are looking for a tool to manage and visualize data about your business, this dashboard is the thing for you.">
|
|
<!-- Twitter Card data -->
|
|
<meta name="twitter:card" content="product">
|
|
<meta name="twitter:site" content="@creativetim">
|
|
<meta name="twitter:title" content="Material Dashboard 3 by Creative Tim">
|
|
<meta name="twitter:description" content="Material Dashboard 3 is a beautiful Bootstrap 5 admin dashboard with a large number of components, designed to look beautiful and organized. If you are looking for a tool to manage and visualize data about your business, this dashboard is the thing for you.">
|
|
<meta name="twitter:creator" content="@creativetim">
|
|
<meta name="twitter:image" content="https://s3.amazonaws.com/creativetim_bucket/products/450/original/material-dashboard.jpg">
|
|
<!-- Open Graph data -->
|
|
<meta property="fb:app_id" content="655968634437471">
|
|
<meta property="og:title" content="Material Dashboard 3 by Creative Tim" />
|
|
<meta property="og:type" content="article" />
|
|
<meta property="og:url" content="http://demos.creative-tim.com/material-dashboard/pages/dashboard.html" />
|
|
<meta property="og:image" content="https://s3.amazonaws.com/creativetim_bucket/products/450/original/material-dashboard.jpg" />
|
|
<meta property="og:description" content="Material Dashboard 3 is a beautiful Bootstrap 5 admin dashboard with a large number of components, designed to look beautiful and organized. If you are looking for a tool to manage and visualize data about your business, this dashboard is the thing for you." />
|
|
<meta property="og:site_name" content="Creative Tim" />
|
|
<!-- Fonts and icons -->
|
|
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700,900" />
|
|
<!-- Nucleo Icons -->
|
|
<link href="../assets/css/nucleo-icons.css" rel="stylesheet" />
|
|
<link href="../assets/css/nucleo-svg.css" rel="stylesheet" />
|
|
<!-- Font Awesome Icons -->
|
|
<script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
|
|
<!-- Material Icons -->
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />
|
|
<!-- CSS Files -->
|
|
<link id="pagestyle" href="../assets/css/material-dashboard.min.css?v=3.2.0" rel="stylesheet" />
|
|
<!-- Anti-flicker snippet (recommended) -->
|
|
<style>
|
|
.async-hide {
|
|
opacity: 0 !important
|
|
}
|
|
</style>
|
|
<script>
|
|
(function(a, s, y, n, c, h, i, d, e) {
|
|
s.className += ' ' + y;
|
|
h.start = 1 * new Date;
|
|
h.end = i = function() {
|
|
s.className = s.className.replace(RegExp(' ?' + y), '')
|
|
};
|
|
(a[n] = a[n] || []).hide = h;
|
|
setTimeout(function() {
|
|
i();
|
|
h.end = null
|
|
}, c);
|
|
h.timeout = c;
|
|
})(window, document.documentElement, 'async-hide', 'dataLayer', 4000, {
|
|
'GTM-K9BGS8K': true
|
|
});
|
|
</script>
|
|
<!-- Analytics-Optimize Snippet -->
|
|
<script>
|
|
(function(i, s, o, g, r, a, m) {
|
|
i['GoogleAnalyticsObject'] = r;
|
|
i[r] = i[r] || function() {
|
|
(i[r].q = i[r].q || []).push(arguments)
|
|
}, i[r].l = 1 * new Date();
|
|
a = s.createElement(o),
|
|
m = s.getElementsByTagName(o)[0];
|
|
a.async = 1;
|
|
a.src = g;
|
|
m.parentNode.insertBefore(a, m)
|
|
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
|
|
ga('create', 'UA-46172202-22', 'auto', {
|
|
allowLinker: true
|
|
});
|
|
ga('set', 'anonymizeIp', true);
|
|
ga('require', 'GTM-K9BGS8K');
|
|
ga('require', 'displayfeatures');
|
|
ga('require', 'linker');
|
|
ga('linker:autoLink', ["2checkout.com", "avangate.com"]);
|
|
</script>
|
|
<!-- end Analytics-Optimize Snippet -->
|
|
<!-- Google Tag Manager -->
|
|
<script>
|
|
(function(w, d, s, l, i) {
|
|
w[l] = w[l] || [];
|
|
w[l].push({
|
|
'gtm.start': new Date().getTime(),
|
|
event: 'gtm.js'
|
|
});
|
|
var f = d.getElementsByTagName(s)[0],
|
|
j = d.createElement(s),
|
|
dl = l != 'dataLayer' ? '&l=' + l : '';
|
|
j.async = true;
|
|
j.src =
|
|
'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
|
|
f.parentNode.insertBefore(j, f);
|
|
})(window, document, 'script', 'dataLayer', 'GTM-NKDMSK6');
|
|
</script>
|
|
<!-- End Google Tag Manager -->
|
|
</head>
|
|
|
|
<body class=""><!-- Extra details for Live View on GitHub Pages --><!-- Google Tag Manager (noscript) -->
|
|
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NKDMSK6" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
|
<!-- End Google Tag Manager (noscript) -->
|
|
<div class="container position-sticky z-index-sticky top-0">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<!-- Navbar -->
|
|
<nav class="navbar navbar-expand-lg blur border-radius-lg top-0 z-index-3 shadow position-absolute mt-4 py-2 start-0 end-0 mx-4">
|
|
<div class="container-fluid ps-2 pe-0">
|
|
<a class="navbar-brand font-weight-bolder ms-lg-0 ms-3 " href="../pages/dashboard.html">
|
|
Material Dashboard 3
|
|
</a>
|
|
<button class="navbar-toggler shadow-none ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon mt-2">
|
|
<span class="navbar-toggler-bar bar1"></span>
|
|
<span class="navbar-toggler-bar bar2"></span>
|
|
<span class="navbar-toggler-bar bar3"></span>
|
|
</span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navigation">
|
|
<ul class="navbar-nav mx-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link d-flex align-items-center me-2 active" aria-current="page" href="../pages/dashboard.html">
|
|
<i class="fa fa-chart-pie opacity-6 text-dark me-1"></i>
|
|
Dashboard
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link me-2" href="../pages/profile.html">
|
|
<i class="fa fa-user opacity-6 text-dark me-1"></i>
|
|
Profile
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link me-2" href="../pages/sign-up.html">
|
|
<i class="fas fa-user-circle opacity-6 text-dark me-1"></i>
|
|
Sign Up
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link me-2" href="../pages/sign-in.html">
|
|
<i class="fas fa-key opacity-6 text-dark me-1"></i>
|
|
Sign In
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<ul class="navbar-nav d-lg-flex d-none">
|
|
<li class="nav-item d-flex align-items-center">
|
|
<a class="btn btn-outline-primary btn-sm mb-0 me-2" target="_blank" href="https://www.creative-tim.com/builder?ref=navbar-material-dashboard">Online Builder</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="https://www.creative-tim.com/product/material-dashboard" class="btn btn-sm mb-0 me-1 bg-gradient-dark">Free download</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<!-- End Navbar -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<main class="main-content mt-0">
|
|
<section>
|
|
<div class="page-header min-vh-100">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-6 d-lg-flex d-none h-100 my-auto pe-0 position-absolute top-0 start-0 text-center justify-content-center flex-column">
|
|
<div class="position-relative bg-gradient-primary h-100 m-3 px-7 border-radius-lg d-flex flex-column justify-content-center" style="background-image: url('../assets/img/illustrations/illustration-signup.jpg'); background-size: cover;">
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-4 col-lg-5 col-md-7 d-flex flex-column ms-auto me-auto ms-lg-auto me-lg-5">
|
|
<div class="card card-plain">
|
|
<div class="card-header">
|
|
<h4 class="font-weight-bolder">Sign Up</h4>
|
|
<p class="mb-0">Enter your email and password to register</p>
|
|
</div>
|
|
<div class="card-body">
|
|
<form role="form">
|
|
<div class="input-group input-group-outline mb-3">
|
|
<label class="form-label">Name</label>
|
|
<input type="text" class="form-control">
|
|
</div>
|
|
<div class="input-group input-group-outline mb-3">
|
|
<label class="form-label">Email</label>
|
|
<input type="email" class="form-control">
|
|
</div>
|
|
<div class="input-group input-group-outline mb-3">
|
|
<label class="form-label">Password</label>
|
|
<input type="password" class="form-control">
|
|
</div>
|
|
<div class="form-check form-check-info text-start ps-0">
|
|
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" checked>
|
|
<label class="form-check-label" for="flexCheckDefault">
|
|
I agree the <a href="javascript:;" class="text-dark font-weight-bolder">Terms and Conditions</a>
|
|
</label>
|
|
</div>
|
|
<div class="text-center">
|
|
<button type="button" class="btn btn-lg bg-gradient-dark btn-lg w-100 mt-4 mb-0">Sign Up</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="card-footer text-center pt-0 px-lg-2 px-1">
|
|
<p class="mb-2 text-sm mx-auto">
|
|
Already have an account?
|
|
<a href="../pages/sign-in.html" class="text-primary text-gradient font-weight-bold">Sign in</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<!-- Core JS Files -->
|
|
<script src="../assets/js/core/popper.min.js"></script>
|
|
<script src="../assets/js/core/bootstrap.min.js"></script>
|
|
<script src="../assets/js/plugins/perfect-scrollbar.min.js"></script>
|
|
<script src="../assets/js/plugins/smooth-scrollbar.min.js"></script>
|
|
<script>
|
|
var win = navigator.platform.indexOf('Win') > -1;
|
|
if (win && document.querySelector('#sidenav-scrollbar')) {
|
|
var options = {
|
|
damping: '0.5'
|
|
}
|
|
Scrollbar.init(document.querySelector('#sidenav-scrollbar'), options);
|
|
}
|
|
</script>
|
|
<!-- Github buttons -->
|
|
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
|
<!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
|
|
<script src="../assets/js/material-dashboard.min.js?v=3.2.0"></script>
|
|
</body>
|
|
|
|
</html> |