649 lines
31 KiB
HTML
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&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>
|