creativetimofficial--ui
Alireza Esfahani
239 行
9.9 KiB
HTML
239 行
9.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
|
|
<link rel="icon" type="image/png" href="../assets/img/favicon.png">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
|
<title>
|
|
Material Dashboard by Creative Tim
|
|
</title>
|
|
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
|
|
<!-- Fonts and icons -->
|
|
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
|
|
<!-- CSS Files -->
|
|
<link href="../assets/css/material-dashboard.css?v=2.1.0" rel="stylesheet" />
|
|
<!-- CSS Just for demo purpose, don't include it in your project -->
|
|
<link href="../assets/demo/demo.css" rel="stylesheet" />
|
|
</head>
|
|
|
|
<body class="">
|
|
<div class="wrapper ">
|
|
<div class="sidebar" data-color="purple" data-background-color="white" data-image="../assets/img/sidebar-1.jpg">
|
|
<!--
|
|
Tip 1: You can change the color of the sidebar using: data-color="purple | azure | green | orange | danger"
|
|
|
|
Tip 2: you can also add an image using data-image tag
|
|
-->
|
|
<div class="logo">
|
|
<a href="http://www.creative-tim.com" class="simple-text logo-normal">
|
|
Creative Tim
|
|
</a>
|
|
</div>
|
|
<div class="sidebar-wrapper">
|
|
<ul class="nav">
|
|
<li class="nav-item ">
|
|
<a class="nav-link" href="./dashboard.html">
|
|
<i class="material-icons">dashboard</i>
|
|
<p>Dashboard</p>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item ">
|
|
<a class="nav-link" href="./user.html">
|
|
<i class="material-icons">person</i>
|
|
<p>User Profile</p>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item ">
|
|
<a class="nav-link" href="./tables.html">
|
|
<i class="material-icons">content_paste</i>
|
|
<p>Table List</p>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item ">
|
|
<a class="nav-link" href="./typography.html">
|
|
<i class="material-icons">library_books</i>
|
|
<p>Typography</p>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item active ">
|
|
<a class="nav-link" href="./icons.html">
|
|
<i class="material-icons">bubble_chart</i>
|
|
<p>Icons</p>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item ">
|
|
<a class="nav-link" href="./map.html">
|
|
<i class="material-icons">location_ons</i>
|
|
<p>Maps</p>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item ">
|
|
<a class="nav-link" href="./notifications.html">
|
|
<i class="material-icons">notifications</i>
|
|
<p>Notifications</p>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item ">
|
|
<a class="nav-link" href="./rtl.html">
|
|
<i class="material-icons">language</i>
|
|
<p>RTL Support</p>
|
|
</a>
|
|
</li>
|
|
<!-- <li class="nav-item active-pro ">
|
|
<a class="nav-link" href="./upgrade.html">
|
|
<i class="material-icons">unarchive</i>
|
|
<p>Upgrade to PRO</p>
|
|
</a>
|
|
</li> -->
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="main-panel">
|
|
<!-- Navbar -->
|
|
<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top ">
|
|
<div class="container-fluid">
|
|
<div class="navbar-wrapper">
|
|
<a class="navbar-brand" href="#pablo">Icons</a>
|
|
</div>
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="navbar-toggler-icon icon-bar"></span>
|
|
<span class="navbar-toggler-icon icon-bar"></span>
|
|
<span class="navbar-toggler-icon icon-bar"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse justify-content-end">
|
|
<form class="navbar-form">
|
|
<div class="input-group no-border">
|
|
<input type="text" value="" class="form-control" placeholder="Search...">
|
|
<button type="submit" class="btn btn-white btn-round btn-just-icon">
|
|
<i class="material-icons">search</i>
|
|
<div class="ripple-container"></div>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#pablo">
|
|
<i class="material-icons">dashboard</i>
|
|
<p class="d-lg-none d-md-block">
|
|
Stats
|
|
</p>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
<i class="material-icons">notifications</i>
|
|
<span class="notification">5</span>
|
|
<p class="d-lg-none d-md-block">
|
|
Some Actions
|
|
</p>
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
|
|
<a class="dropdown-item" href="#">Mike John responded to your email</a>
|
|
<a class="dropdown-item" href="#">You have 5 new tasks</a>
|
|
<a class="dropdown-item" href="#">You're now friend with Andrew</a>
|
|
<a class="dropdown-item" href="#">Another Notification</a>
|
|
<a class="dropdown-item" href="#">Another One</a>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#pablo">
|
|
<i class="material-icons">person</i>
|
|
<p class="d-lg-none d-md-block">
|
|
Account
|
|
</p>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<!-- End Navbar -->
|
|
<div class="content">
|
|
<div class="container-fluid">
|
|
<div class="container-fluid">
|
|
<div class="card card-plain">
|
|
<div class="card-header card-header-primary">
|
|
<h4 class="card-title">Material Design Icons</h4>
|
|
<p class="card-category">Handcrafted by our friends from
|
|
<a target="_blank" href="https://design.google.com/icons/">Google</a>
|
|
</p>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="card-body">
|
|
<div class="iframe-container d-none d-lg-block">
|
|
<iframe src="https://design.google.com/icons/">
|
|
<p>Your browser does not support iframes.</p>
|
|
</iframe>
|
|
</div>
|
|
<div class="col-md-12 d-none d-sm-block d-md-block d-lg-none d-block d-sm-none text-center ml-auto mr-auto">
|
|
<h5>The icons are visible on Desktop mode inside an iframe. Since the iframe is not working on Mobile and Tablets please visit the icons on their original page on Google. Check the
|
|
<a href="https://design.google.com/icons/" target="_blank">Material Icons</a>
|
|
</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<footer class="footer">
|
|
<div class="container-fluid">
|
|
<nav class="float-left">
|
|
<ul>
|
|
<li>
|
|
<a href="https://www.creative-tim.com">
|
|
Creative Tim
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://creative-tim.com/presentation">
|
|
About Us
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="http://blog.creative-tim.com">
|
|
Blog
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://www.creative-tim.com/license">
|
|
Licenses
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<div class="copyright float-right">
|
|
©
|
|
<script>
|
|
document.write(new Date().getFullYear())
|
|
</script>, made with <i class="material-icons">favorite</i> by
|
|
<a href="https://www.creative-tim.com" target="_blank">Creative Tim</a> for a better web.
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
<!-- Core JS Files -->
|
|
<script src="../assets/js/core/jquery.min.js" type="text/javascript"></script>
|
|
<script src="../assets/js/core/popper.min.js" type="text/javascript"></script>
|
|
<script src="../assets/js/core/bootstrap-material-design.min.js" type="text/javascript"></script>
|
|
<script src="../assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
|
|
<!-- Google Maps Plugin -->
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
|
|
<!-- Chartist JS -->
|
|
<script src="../assets/js/plugins/chartist.min.js"></script>
|
|
<!-- Notifications Plugin -->
|
|
<script src="../assets/js/plugins/bootstrap-notify.js"></script>
|
|
<!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
|
|
<script src="../assets/js/material-dashboard.min.js?v=2.1.0" type="text/javascript"></script>
|
|
<!-- Material Dashboard DEMO methods, don't include it in your project! -->
|
|
<script src="../assets/demo/demo.js"></script>
|
|
</body>
|
|
|
|
</html> |