This repository has been archived on 2024-07-21. You can view files and clone it, but cannot push or open issues or pull requests.
2023-06-05 17:21:58 +08:00

649 lines
31 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<meta http-equiv="x-ua-compatible" content="ie=edge"/>
<title>登录</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="../css/mdb.min.css"/>
</head>
<body>
<!--Main Navigation-->
<header>
<!--Main Navigation-->
<header class="mb-7">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="z-index: 1;min-height: 58.59px">
<!-- Container wrapper -->
<div class="container">
<!-- Toggle button -->
<button class="navbar-toggler" type="button" data-mdb-toggle="collapse"
data-mdb-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<!-- Collapsible wrapper -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Navbar brand -->
<a class="navbar-brand mt-2 mt-lg-0" href="#">
<i class="fas fa-chalkboard-user"></i>
</a>
<!-- Left links -->
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
</ul>
<!-- Left links -->
</div>
<!-- Collapsible wrapper -->
<!-- Right elements -->
<div class="d-flex align-items-center">
<!-- Icon -->
<a class="text-reset me-3" href="#">
<i class="fas fa-shopping-cart"></i>
</a>
<a class="text-reset me-3" href="#">
<i class="fas fa-shopping-cart"></i>
</a>
<a class="text-reset me-3" href="#">
<i class="fas fa-shopping-cart"></i>
</a>
<!-- Notifications -->
<div class="dropdown">
<a class="text-reset me-3 dropdown-toggle hidden-arrow" href="#" id="navbarDropdownMenuLink"
role="button"
data-mdb-toggle="dropdown" aria-expanded="false">
<i class="fas fa-bell"></i>
<span class="badge rounded-pill badge-notification bg-danger">1</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLink">
<li>
<a class="dropdown-item" href="#">Some news</a>
</li>
<li>
<a class="dropdown-item" href="#">Another news</a>
</li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</div>
<!-- Avatar -->
<div class="dropdown">
<a class="dropdown-toggle d-flex align-items-center hidden-arrow" href="#"
id="navbarDropdownMenuAvatar"
role="button" data-mdb-toggle="dropdown" aria-expanded="false">
<img src="https://mdbcdn.b-cdn.net/img/new/avatars/2.webp" class="rounded-circle"
height="25"
alt="Black and White Portrait of a Man" loading="lazy"/>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuAvatar">
<li>
<a class="dropdown-item" href="#">My profile</a>
</li>
<li>
<a class="dropdown-item" href="#">Settings</a>
</li>
<li>
<a class="dropdown-item" href="#">Logout</a>
</li>
</ul>
</div>
</div>
<!-- Right elements -->
</div>
<!-- Container wrapper -->
</nav>
<!-- Navbar -->
<!-- Add only the code below -->
<!-- Background image -->
<div class="bg-image vh-100" style="
margin-top: -58.59px;
background-image: url('https://mdbcdn.b-cdn.net/img/new/fluid/city/018.jpg');">
<!-- Mask -->
<div class="mask" style="background-color: hsla(0, 0%, 0%, 0.6)">
<!-- Call to action -->
<div class="container d-flex justify-content-center align-items-center h-100">
<div class="text-white text-center">
<h1 class="mb-3">Whoah, what a view!</h1>
<h5 class="mb-4">Learning web design is such an amazing thing</h5>
<a class="btn btn-secondary btn-rounded btn-lg m-2" data-ripple-color="primary" href="#"
role="button">Learn with me<i class="fas fa-graduation-cap ms-2"></i></a>
</div>
</div>
</div>
<!-- Add only the code above -->
</div>
</header>
</header>
<!--Main Navigation-->
<!--Main layout-->
<main>
<div class="container">
<!--Main layout-->
<main>
<div class="container">
<!-- Section: Details -->
<section class="mb-10">
<div class="row gx-xl-5">
<div class="col-lg-7 mb-5 mb-lg-0">
<!-- Carousel wrapper -->
<div id="carouselBasicExample" class="carousel slide carousel-fade"
data-mdb-ride="carousel">
<!-- Indicators -->
<div class="carousel-indicators">
<button
type="button"
data-mdb-target="#carouselBasicExample"
data-mdb-slide-to="0"
class="active"
aria-current="true"
aria-label="Slide 1"
></button>
<button
type="button"
data-mdb-target="#carouselBasicExample"
data-mdb-slide-to="1"
aria-label="Slide 2"
></button>
<button
type="button"
data-mdb-target="#carouselBasicExample"
data-mdb-slide-to="2"
aria-label="Slide 3"
></button>
</div>
<!-- Inner -->
<div class="carousel-inner rounded-6 shadow-4-strong">
<!-- Single item -->
<div class="carousel-item active">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(15).webp"
class="d-block w-100" alt="Sunset Over the City"/>
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(22).webp"
class="d-block w-100" alt="Canyon at Nigh"/>
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(23).webp"
class="d-block w-100" alt="Cliff Above a Stormy Sea"/>
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<!-- Inner -->
<!-- Controls -->
<button class="carousel-control-prev" type="button"
data-mdb-target="#carouselBasicExample" data-mdb-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button"
data-mdb-target="#carouselBasicExample" data-mdb-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- Carousel wrapper -->
</div>
<div class="col-lg-5 mb-5 mb-lg-0">
<h3 class="fw-bold mb-4">Details</h3>
<p>This beginner-friendly, example-based course will guide you through the essential
knowledge of MDB
ecosystem.</p>
<p class="mb-2"><strong>What will you learn:</strong></p>
<ul class="list-unstyled">
<li><i class="fas fa-check text-success me-2"></i>Bootstrap</li>
<li><i class="fas fa-check text-success me-2"></i>MDBootstrap</li>
<li><i class="fas fa-check text-success me-2"></i>UI & UX design</li>
<li><i class="fas fa-check text-success me-2"></i>Responsive web design</li>
</ul>
<a class="btn btn-link btn-rounded" href="#" role="button"
data-mdb-ripple-color="primary">Learn more</a>
</div>
</div>
</section>
<!-- Section: Details -->
<!-- Section: Pricing -->
<section class="mb-5 mb-lg-10">
<h3 class="fw-bold text-center mb-5">Pricing</h3>
<div class="row gx-xl-5">
<div class="col-lg-4 col-md-6 mb-4 mb-lg-0 order-2 order-lg-1">
<div class="card h-100">
<div class="card-header text-center pt-4">
<p class="text-uppercase">
<strong>Basic</strong>
</p>
<h3 class="mb-4">
<strong>$ 129</strong>
<small class="text-muted" style="font-size: 16px">/year</small>
</h3>
<button type="button" class="btn btn-secondary btn-rounded w-100 mb-3">
Buy
</button>
</div>
<div class="card-body">
<ol class="list-unstyled mb-0">
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>Unlimited
updates
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>Git repository
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>npm
installation
</li>
</ol>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 mb-4 mb-lg-0 order-1 order-lg-2">
<div class="card h-100">
<div class="card-header text-center pt-4">
<p class="text-uppercase">
<strong>Advanced</strong>
</p>
<h3 class="mb-4">
<strong>$ 299</strong>
<small class="text-muted" style="font-size: 16px"
>/year</small
>
</h3>
<button type="button" class="btn btn-primary btn-rounded w-100 mb-3">
Buy
</button>
</div>
<div class="card-body">
<ol class="list-unstyled mb-0">
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>Unlimited
updates
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>Git repository
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>npm
installation
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>Code examples
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>Premium
snippets
</li>
</ol>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4 mb-lg-0 order-3 order-lg-3">
<div class="card h-100">
<div class="card-header text-center pt-4">
<p class="text-uppercase">
<strong>Enterprise</strong>
</p>
<h3 class="mb-4">
<strong>$ 499</strong>
<small class="text-muted" style="font-size: 16px"
>/year</small
>
</h3>
<button
type="button"
class="btn btn-secondary btn-rounded w-100 mb-3"
>
Buy
</button>
</div>
<div class="card-body">
<ol class="list-unstyled mb-0">
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>Unlimited
updates
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>Git repository
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>npm
installation
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>Code examples
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>Premium
snippets
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>Premium
support
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>Drag&amp;Drop
builder
</li>
</ol>
</div>
</div>
</div>
</div>
</section>
<!-- Section: Pricing -->
<!-- Section: Contact -->
<section class="mb-5 mb-lg-10">
<h3 class="fw-bold text-center mb-5">Contact us</h3>
<div class="row gx-xl-5">
<div class="col-lg-5 mb-4 mb-lg-0">
<form>
<!-- Name input -->
<div class="form-outline mb-4">
<input type="text" id="form4Example1" class="form-control" />
<label class="form-label" for="form4Example1">Name</label>
</div>
<!-- Email input -->
<div class="form-outline mb-4">
<input type="email" id="form4Example2" class="form-control" />
<label class="form-label" for="form4Example2">Email address</label>
</div>
<!-- Message input -->
<div class="form-outline mb-4">
<textarea class="form-control" id="form4Example3" rows="4"></textarea>
<label class="form-label" for="form4Example3">Message</label>
</div>
<!-- Checkbox -->
<div class="form-check d-flex justify-content-center mb-4">
<input class="form-check-input me-2" type="checkbox" value="" id="form4Example4" checked />
<label class="form-check-label" for="form4Example4">
Send me a copy of this message
</label>
</div>
<!-- Submit button -->
<button type="submit" class="btn btn-primary btn-block mb-4">Send</button>
</form>
</div>
<div class="col-lg-7 mb-4 mb-lg-0">
<div class="row gx-lg-5">
<div class="col-md-6 mb-4 mb-md-5">
<div class="d-flex align-items-start">
<div class="p-3 badge-primary rounded-4">
<i class="fas fa-headset fa-lg fa-fw"></i>
</div>
<div class="ms-4">
<p class="fw-bold mb-1">Technical support</p>
<p class="text-muted mb-0">support@example.com</p>
<p class="text-muted mb-0">+1 234-567-89</p>
</div>
</div>
</div>
<div class="col-md-6 mb-4 mb-md-5">
<div class="d-flex align-items-start">
<div class="p-3 badge-primary rounded-4">
<i class="fas fa-dollar-sign fa-lg fa-fw"></i>
</div>
<div class="ms-4">
<p class="fw-bold mb-1">Sales questions</p>
<p class="text-muted mb-0">sales@example.com</p>
<p class="text-muted mb-0">+1 234-567-88</p>
</div>
</div>
</div>
<div class="col-md-6 mb-4 mb-md-5">
<div class="d-flex align-items-start">
<div class="p-3 badge-primary rounded-4">
<i class="fas fa-newspaper fa-lg fa-fw"></i>
</div>
<div class="ms-4">
<p class="fw-bold mb-1">Press</p>
<p class="text-muted mb-0">press@example.com</p>
<p class="text-muted mb-0">+1 234-567-87</p>
</div>
</div>
</div>
<div class="col-md-6 mb-4 mb-md-5">
<div class="d-flex align-items-start">
<div class="p-3 badge-primary rounded-4">
<i class="fas fa-bug fa-lg fa-fw"></i>
</div>
<div class="ms-4">
<p class="fw-bold mb-1">Bug report</p>
<p class="text-muted mb-0">bugs@example.com</p>
<p class="text-muted mb-0">+1 234-567-86</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Section: Contact -->
</div>
</main>
<!--Main layout-->
</div>
</main>
<!--Main layout-->
<!-- Footer -->
<footer class="text-center text-lg-start bg-light text-muted">
<div class="container">
<!-- Section: Social media -->
<section class="d-flex justify-content-center justify-content-lg-between p-4 pb-1">
<!-- Left -->
<div class="me-5 d-none d-lg-block">
<span>Get connected with us on social networks:</span>
</div>
<!-- Left -->
<!-- Right -->
<div>
<a href="" class="me-4 text-reset">
<i class="fab fa-facebook-f"></i>
</a>
<a href="" class="me-4 text-reset">
<i class="fab fa-twitter"></i>
</a>
<a href="" class="me-4 text-reset">
<i class="fab fa-google"></i>
</a>
<a href="" class="me-4 text-reset">
<i class="fab fa-instagram"></i>
</a>
<a href="" class="me-4 text-reset">
<i class="fab fa-linkedin"></i>
</a>
<a href="" class="me-4 text-reset">
<i class="fab fa-github"></i>
</a>
</div>
<!-- Right -->
</section>
<!-- Section: Social media -->
</div>
<hr class="hr">
<div class="container">
<!-- Section: Links -->
<section class="">
<div class="container text-center text-md-start mt-5">
<!-- Grid row -->
<div class="row mt-3">
<!-- Grid column -->
<div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
<!-- Content -->
<h6 class="text-uppercase fw-bold mb-4">
<i class="fas fa-gem me-3"></i>Company name
</h6>
<p>
Here you can use rows and columns to organize your footer content. Lorem ipsum
dolor sit amet, consectetur adipisicing elit.
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">
Products
</h6>
<p>
<a href="#!" class="text-reset">Angular</a>
</p>
<p>
<a href="#!" class="text-reset">React</a>
</p>
<p>
<a href="#!" class="text-reset">Vue</a>
</p>
<p>
<a href="#!" class="text-reset">Laravel</a>
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">
Useful links
</h6>
<p>
<a href="#!" class="text-reset">Pricing</a>
</p>
<p>
<a href="#!" class="text-reset">Settings</a>
</p>
<p>
<a href="#!" class="text-reset">Orders</a>
</p>
<p>
<a href="#!" class="text-reset">Help</a>
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">Contact</h6>
<p><i class="fas fa-home me-3"></i> New York, NY 10012, US</p>
<p>
<i class="fas fa-envelope me-3"></i>
info@example.com
</p>
<p><i class="fas fa-phone me-3"></i> + 01 234 567 88</p>
<p><i class="fas fa-print me-3"></i> + 01 234 567 89</p>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
</section>
<!-- Section: Links -->
</div>
<!-- Copyright -->
<div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">
© 2022 Copyright:
<a class="text-reset fw-bold" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
<script type="text/javascript" src="../js/mdb.min.js"></script>
</body>
</html>