up
This commit is contained in:
parent
26ff42c99b
commit
ad64dd9a33
5
project/.gitignore
vendored
5
project/.gitignore
vendored
@ -35,4 +35,7 @@ build/
|
|||||||
.vscode/
|
.vscode/
|
||||||
|
|
||||||
### Mac OS ###
|
### Mac OS ###
|
||||||
.DS_Store
|
.DS_Store
|
||||||
|
|
||||||
|
### out ###
|
||||||
|
out/
|
||||||
@ -76,5 +76,10 @@
|
|||||||
<version>2.20.0</version>
|
<version>2.20.0</version>
|
||||||
</dependency>
|
</dependency>
|
||||||
|
|
||||||
|
<dependency>
|
||||||
|
<groupId>commons-dbcp</groupId>
|
||||||
|
<artifactId>commons-dbcp</artifactId>
|
||||||
|
<version>1.4</version>
|
||||||
|
</dependency>
|
||||||
</dependencies>
|
</dependencies>
|
||||||
</project>
|
</project>
|
||||||
@ -12,33 +12,29 @@ import org.springframework.web.bind.annotation.RequestParam;
|
|||||||
@RequestMapping("/admin")
|
@RequestMapping("/admin")
|
||||||
public class AdminController {
|
public class AdminController {
|
||||||
|
|
||||||
private final AdminService adminService;
|
|
||||||
|
|
||||||
@Autowired
|
@Autowired
|
||||||
public AdminController(AdminService adminService) {
|
private AdminService adminService;
|
||||||
this.adminService = adminService;
|
|
||||||
}
|
|
||||||
|
|
||||||
@GetMapping("/login")
|
|
||||||
public String showLoginForm() {
|
|
||||||
return "admin-login-form";
|
|
||||||
}
|
|
||||||
|
|
||||||
@PostMapping("/login")
|
@PostMapping("/login")
|
||||||
public String login(@RequestParam("username") String username, @RequestParam("password") String password) {
|
public String login(@RequestParam("username") String username,
|
||||||
boolean isValid = adminService.validateCredentials(username, password);
|
@RequestParam("password") String password) {
|
||||||
if (isValid) {
|
|
||||||
// 登录成功，重定向到管理页面
|
// 进行用户名和密码的验证逻辑
|
||||||
|
if (adminService.validateCredentials(username, password)) {
|
||||||
|
// 验证成功，进行相应的操作
|
||||||
|
// 这里可以进行重定向或返回视图等操作
|
||||||
return "redirect:/admin/dashboard";
|
return "redirect:/admin/dashboard";
|
||||||
} else {
|
} else {
|
||||||
// 登录失败，返回登录页面并显示错误消息
|
// 验证失败，返回登录页面或错误提示
|
||||||
return "redirect:/admin/login?error";
|
return "redirect:/admin/login?error";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@GetMapping("/dashboard")
|
@GetMapping("/dashboard")
|
||||||
public String showDashboard() {
|
public String dashboard() {
|
||||||
return "admin-dashboard";
|
// 处理管理员登录后的仪表盘页面
|
||||||
|
// 返回相应的视图页面
|
||||||
|
return "admin/dashboard";
|
||||||
}
|
}
|
||||||
|
|
||||||
@GetMapping("/logout")
|
@GetMapping("/logout")
|
||||||
|
|||||||
@ -18,6 +18,7 @@ public class AdminServiceImpl implements AdminService {
|
|||||||
this.adminDao = adminDao;
|
this.adminDao = adminDao;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@Override
|
@Override
|
||||||
public void addAdmin(Admin admin) {
|
public void addAdmin(Admin admin) {
|
||||||
adminDao.addAdmin(admin);
|
adminDao.addAdmin(admin);
|
||||||
|
|||||||
@ -1,4 +1,43 @@
|
|||||||
package cyou.chenx221.servlet;
|
package cyou.chenx221.servlet;
|
||||||
|
|
||||||
public class AdminServlet {
|
import cyou.chenx221.service.AdminService;
|
||||||
|
import cyou.chenx221.service.impl.AdminServiceImpl;
|
||||||
|
import org.springframework.beans.factory.annotation.Autowired;
|
||||||
|
|
||||||
|
import javax.servlet.ServletException;
|
||||||
|
import javax.servlet.annotation.WebServlet;
|
||||||
|
import javax.servlet.http.HttpServlet;
|
||||||
|
import javax.servlet.http.HttpServletRequest;
|
||||||
|
import javax.servlet.http.HttpServletResponse;
|
||||||
|
import java.io.IOException;
|
||||||
|
import java.io.PrintWriter;
|
||||||
|
|
||||||
|
@WebServlet("/admin")
|
||||||
|
public class AdminServlet extends HttpServlet {
|
||||||
|
|
||||||
|
@Autowired
|
||||||
|
private AdminService adminService;
|
||||||
|
|
||||||
|
@Override
|
||||||
|
protected void doPost(HttpServletRequest request, HttpServletResponse response)
|
||||||
|
throws ServletException, IOException {
|
||||||
|
String username = request.getParameter("username");
|
||||||
|
String password = request.getParameter("password");
|
||||||
|
|
||||||
|
// 调用 AdminService 的验证凭证方法进行验证
|
||||||
|
boolean isValidCredentials = adminService.validateCredentials(username, password);
|
||||||
|
|
||||||
|
if (isValidCredentials) {
|
||||||
|
// 登录成功，设置会话状态
|
||||||
|
request.getSession().setAttribute("isLoggedIn", true);
|
||||||
|
response.sendRedirect("dashboard.jsp"); // 重定向到仪表盘页面
|
||||||
|
} else {
|
||||||
|
// 登录失败，返回错误消息
|
||||||
|
response.setContentType("text/html");
|
||||||
|
PrintWriter out = response.getWriter();
|
||||||
|
out.println("<html><body>");
|
||||||
|
out.println("<h3>登录失败，用户名或密码不正确。</h3>");
|
||||||
|
out.println("</body></html>");
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
40
project/src/main/resources/applicationContext.xml
Normal file
40
project/src/main/resources/applicationContext.xml
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<beans xmlns="http://www.springframework.org/schema/beans"
|
||||||
|
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||||
|
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd">
|
||||||
|
<bean id="propertyConfigurer" class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer">
|
||||||
|
<property name="locations">
|
||||||
|
<list>
|
||||||
|
<value>classpath:db.properties</value>
|
||||||
|
</list>
|
||||||
|
</property>
|
||||||
|
</bean>
|
||||||
|
|
||||||
|
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
|
||||||
|
<property name="configLocation" value="classpath:mybatis-config.xml" />
|
||||||
|
<property name="dataSource" ref="dataSource" />
|
||||||
|
</bean>
|
||||||
|
|
||||||
|
<bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource" destroy-method="close">
|
||||||
|
<property name="driverClassName" value="${db.driver}" />
|
||||||
|
<property name="url" value="${db.url}" />
|
||||||
|
<property name="username" value="${db.username}" />
|
||||||
|
<property name="password" value="${db.password}" />
|
||||||
|
</bean>
|
||||||
|
|
||||||
|
<!-- 配置其他 Bean -->
|
||||||
|
<bean id="sqlSession" class="org.mybatis.spring.SqlSessionTemplate">
|
||||||
|
<constructor-arg ref="sqlSessionFactory" />
|
||||||
|
</bean>
|
||||||
|
|
||||||
|
<!-- 配置 AdminDao Bean -->
|
||||||
|
<bean id="adminDao" class="cyou.chenx221.dao.impl.AdminDaoImpl">
|
||||||
|
<constructor-arg ref="sqlSession" />
|
||||||
|
</bean>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 配置 AdminService Bean -->
|
||||||
|
<bean id="adminService" class="cyou.chenx221.service.impl.AdminServiceImpl">
|
||||||
|
<constructor-arg ref="adminDao" />
|
||||||
|
</bean>
|
||||||
|
</beans>
|
||||||
@ -16,6 +16,8 @@
|
|||||||
</environment>
|
</environment>
|
||||||
</environments>
|
</environments>
|
||||||
<mappers>
|
<mappers>
|
||||||
<!-- <mapper resource="mapper/Message.xml"/>-->
|
<mapper resource="mapper/AdminMapper.xml"/>
|
||||||
|
<mapper resource="mapper/ScoreMapper.xml"/>
|
||||||
|
<mapper resource="mapper/StudentMapper.xml"/>
|
||||||
</mappers>
|
</mappers>
|
||||||
</configuration>
|
</configuration>
|
||||||
|
|||||||
BIN
project/web/img/jason-blackeye-nyL-rzwP-Mk-unsplash.jpg
Normal file
BIN
project/web/img/jason-blackeye-nyL-rzwP-Mk-unsplash.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 615 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
@ -12,10 +12,108 @@
|
|||||||
rel="stylesheet">
|
rel="stylesheet">
|
||||||
<link rel="stylesheet" href="css/mdb.min.css"/>
|
<link rel="stylesheet" href="css/mdb.min.css"/>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
|
||||||
<div class="container">
|
|
||||||
|
|
||||||
</div>
|
<body>
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="z-index: 1;min-height: 58.59px">
|
||||||
|
<div class="container">
|
||||||
|
<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>
|
||||||
|
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||||
|
<a class="navbar-brand mt-2 mt-lg-0" href="#">
|
||||||
|
<i class="fas fa-chalkboard-user me-2"></i>
|
||||||
|
教务管理系统
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<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">
|
||||||
|
<i class="fas fa-circle-user fa-lg"></i>
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuAvatar">
|
||||||
|
<li>
|
||||||
|
<a class="dropdown-item" href="login.html">登录</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<div class="bg-image shadow-2-strong vh-100"
|
||||||
|
style="background-image: url('img/jason-blackeye-nyL-rzwP-Mk-unsplash.jpg');margin-top: -58.59px;">
|
||||||
|
<div class="mask d-flex align-items-center h-100" style="background-color: hsl(0deg 0% 100% / 13%);">
|
||||||
|
<div class="container-fluid px-0">
|
||||||
|
<div class="container d-flex align-items-center justify-content-center h-100">
|
||||||
|
<div style="background-color: rgba(255,255,255,0.7);backdrop-filter: blur(30px)"
|
||||||
|
class="rounded-5 shadow-5-strong p-5">
|
||||||
|
<form action="/admin/login" method="POST">
|
||||||
|
<h1 class="text-center mb-4" style="font-family: 'Noto Sans SC Light',serif">用户登录</h1>
|
||||||
|
<div class="form-outline mb-4">
|
||||||
|
<input type="text" id="form1Example1" class="form-control" name="username"/>
|
||||||
|
<label class="form-label" for="form1Example1">用户名</label>
|
||||||
|
</div>
|
||||||
|
<div class="form-outline mb-4">
|
||||||
|
<input type="password" id="form1Example2" class="form-control" name="password"/>
|
||||||
|
<label class="form-label" for="form1Example2">密码</label>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col d-flex justify-content-center">
|
||||||
|
<div class="form-check">
|
||||||
|
<input class="form-check-input" type="checkbox" value=""
|
||||||
|
id="form1Example3"
|
||||||
|
checked/>
|
||||||
|
<label class="form-check-label" for="form1Example3">记住密码</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<a href="#!">忘记密码?</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="btn btn-tertiary btn-block mx-auto"
|
||||||
|
data-mdb-ripple-color="light">没有账户? 注册账户
|
||||||
|
</button>
|
||||||
|
<button type="submit" class="btn btn-primary btn-block">登录</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Button trigger modal -->
|
||||||
|
<button type="button" class="btn btn-primary" data-mdb-toggle="modal" data-mdb-target="#exampleModal">
|
||||||
|
Launch demo modal
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Modal -->
|
||||||
|
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
|
||||||
|
<button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">...</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">Close</button>
|
||||||
|
<button type="button" class="btn btn-primary">Save changes</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
|
||||||
<script type="text/javascript" src="js/mdb.min.js"></script>
|
<script type="text/javascript" src="js/mdb.min.js"></script>
|
||||||
|
|||||||
@ -13,9 +13,25 @@
|
|||||||
<link rel="stylesheet" href="css/mdb.min.css"/>
|
<link rel="stylesheet" href="css/mdb.min.css"/>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<!--Main Navigation-->
|
||||||
|
<header>
|
||||||
|
|
||||||
</div>
|
</header>
|
||||||
|
<!--Main Navigation-->
|
||||||
|
|
||||||
|
<!--Main layout-->
|
||||||
|
<main>
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<!--Main layout-->
|
||||||
|
|
||||||
|
<!--Footer-->
|
||||||
|
<footer>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
<!--Footer-->
|
||||||
|
|
||||||
|
|
||||||
<script type="text/javascript" src="js/mdb.min.js"></script>
|
<script type="text/javascript" src="js/mdb.min.js"></script>
|
||||||
|
|||||||
648
project/web/test/test1.html
Normal file
648
project/web/test/test1.html
Normal file
@ -0,0 +1,648 @@
|
|||||||
|
<!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>
|
||||||
926
project/web/test/test2.html
Normal file
926
project/web/test/test2.html
Normal file
@ -0,0 +1,926 @@
|
|||||||
|
<!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"/>
|
||||||
|
<!-- Custom styles -->
|
||||||
|
<style>
|
||||||
|
/* Color of the links BEFORE scroll */
|
||||||
|
.navbar-before-scroll .nav-link,
|
||||||
|
.navbar-before-scroll .navbar-toggler-icon {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Color of the links AFTER scroll */
|
||||||
|
.navbar-after-scroll .nav-link,
|
||||||
|
.navbar-after-scroll .navbar-toggler-icon {
|
||||||
|
color: #4f4f4f;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Color of the navbar AFTER scroll */
|
||||||
|
.navbar-after-scroll {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Transition after scrolling */
|
||||||
|
.navbar-after-scroll {
|
||||||
|
transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Transition to the initial state */
|
||||||
|
.navbar-before-scroll {
|
||||||
|
transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* An optional height of the navbar AFTER scroll */
|
||||||
|
.navbar.navbar-before-scroll.navbar-after-scroll {
|
||||||
|
padding-top: 5px;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Navbar on mobile */
|
||||||
|
@media (max-width: 991.98px) {
|
||||||
|
#main-navbar {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link,
|
||||||
|
.navbar-toggler-icon {
|
||||||
|
color: #4f4f4f !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.rotate-lg {
|
||||||
|
transform: rotate(6deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!--Main Navigation-->
|
||||||
|
<header class="mb-10">
|
||||||
|
<!-- Navbar -->
|
||||||
|
<nav class="navbar navbar-expand-md fixed-top navbar-before-scroll shadow-0" id="main-navbar">
|
||||||
|
<!-- Container wrapper -->
|
||||||
|
<div class="container-fluid">
|
||||||
|
<!-- 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">
|
||||||
|
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link text-dark" href="#!">Projects</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link text-dark" href="#!">About me</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link text-dark" href="#!">Testimonials</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link text-dark" href="#!">Contact</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<ul class="navbar-nav flex-row">
|
||||||
|
<!-- Icons -->
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link pe-2" href="#!">
|
||||||
|
<i class="fab fa-youtube"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link px-2" href="#!">
|
||||||
|
<i class="fab fa-facebook-f"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link px-2" href="#!">
|
||||||
|
<i class="fab fa-twitter"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link ps-2" href="#!">
|
||||||
|
<i class="fab fa-instagram"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<!-- Collapsible wrapper -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- Container wrapper -->
|
||||||
|
</nav>
|
||||||
|
<!-- Navbar -->
|
||||||
|
<!-- Section: Split screen -->
|
||||||
|
<section class="">
|
||||||
|
|
||||||
|
<div class="container-fluid px-0">
|
||||||
|
<div class="row g-0">
|
||||||
|
|
||||||
|
<!-- First column -->
|
||||||
|
<div class="col-lg-6 vh-100 d-flex flex-column justify-content-center align-items-center">
|
||||||
|
|
||||||
|
<!-- Headings -->
|
||||||
|
<div class="h-100 d-flex justify-content-center align-items-center px-5">
|
||||||
|
<div class="">
|
||||||
|
<h2 class="display-4">John Doe</h2>
|
||||||
|
<h1 class="display-2 fw-bold text-uppercase">Web developer</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- CTA elements -->
|
||||||
|
<div class="d-flex align-items-center w-100 justify-content-between px-5 mb-5">
|
||||||
|
<a href="https://github.com/mdbootstrap/mdb-ui-kit" target="_blank" class="text-dark"><i
|
||||||
|
class="fab fa-github fa-xl"></i></a>
|
||||||
|
<hr class="hr d-none d-xl-flex" style="height: 2px; width: 200px;">
|
||||||
|
<a class="btn btn-primary btn-lg btn-rounded" href="#" role="button">See my projects<i
|
||||||
|
class="fas fa-angle-down ms-2"></i></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- First column -->
|
||||||
|
|
||||||
|
<!-- Second column -->
|
||||||
|
<div class="col-lg-6 vh-100 d-none d-lg-inline-block">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- Second column -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
<!-- Section: Split screen -->
|
||||||
|
|
||||||
|
</header>
|
||||||
|
<!--Main Navigation-->
|
||||||
|
|
||||||
|
<!--Main layout-->
|
||||||
|
<main>
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<!-- Section: My projects -->
|
||||||
|
<section class="mb-10 text-center">
|
||||||
|
<h2 class="fw-bold mb-7 text-center">My projects</h2>
|
||||||
|
|
||||||
|
<div class="row gx-lg-5">
|
||||||
|
|
||||||
|
<!-- First column -->
|
||||||
|
<div class="col-lg-4 col-md-12 mb-6 mb-lg-0">
|
||||||
|
|
||||||
|
<div class="card rounded-6 h-100">
|
||||||
|
<div class="bg-image hover-overlay ripple mx-3 shadow-4-strong rounded-6 mt-n3"
|
||||||
|
data-mdb-ripple-color="light">
|
||||||
|
<img src="https://mdbootstrap.com/img/new/textures/small/148.jpg" class="w-100"/>
|
||||||
|
|
||||||
|
<a href="#!" data-mdb-toggle="modal" data-mdb-target="#project-1">
|
||||||
|
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title">AI engine</h5>
|
||||||
|
<p class="text-muted">
|
||||||
|
<small>Finished <u>13.09.2021</u> for
|
||||||
|
<a href="" class="text-dark">Techify</a></small>
|
||||||
|
</p>
|
||||||
|
<p class="card-text">
|
||||||
|
Ut pretium ultricies dignissim. Sed sit amet mi eget urna
|
||||||
|
placerat vulputate. Ut vulputate est non quam dignissim
|
||||||
|
elementum. Donec a ullamcorper diam.
|
||||||
|
</p>
|
||||||
|
<a href="#!" class="btn btn-secondary btn-rounded" data-mdb-toggle="modal"
|
||||||
|
data-mdb-target="#project-1">Read more</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- First column -->
|
||||||
|
|
||||||
|
<!-- Second column -->
|
||||||
|
<div class="col-lg-4 mb-6 mb-lg-0">
|
||||||
|
|
||||||
|
<div class="card rounded-6 h-100">
|
||||||
|
<div class="bg-image hover-overlay ripple mx-3 shadow-4-strong rounded-6 mt-n3"
|
||||||
|
data-mdb-ripple-color="light">
|
||||||
|
<img src="https://mdbootstrap.com/img/new/textures/small/38.jpg" class="w-100"/>
|
||||||
|
<a href="#!" data-mdb-toggle="modal" data-mdb-target="#project-2">
|
||||||
|
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title">Balanced design</h5>
|
||||||
|
<p class="text-muted">
|
||||||
|
<small>Finished <u>12.01.2022</u> for
|
||||||
|
<a href="" class="text-dark">Rubicon</a></small>
|
||||||
|
</p>
|
||||||
|
<p class="card-text">
|
||||||
|
Suspendisse in volutpat massa. Nulla facilisi. Sed aliquet
|
||||||
|
diam orci, nec ornare metus semper sed. Integer volutpat
|
||||||
|
ornare erat sit amet rutrum. Ut vulputate est non quam.
|
||||||
|
</p>
|
||||||
|
<a href="#!" class="btn btn-secondary btn-rounded" data-mdb-toggle="modal"
|
||||||
|
data-mdb-target="#project-2">Read more</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- Second column -->
|
||||||
|
|
||||||
|
<!-- Third column -->
|
||||||
|
<div class="col-lg-4 mb-6 mb-lg-0">
|
||||||
|
|
||||||
|
<div class="card rounded-6 h-100">
|
||||||
|
<div class="bg-image hover-overlay ripple mx-3 shadow-4-strong rounded-6 mt-n3"
|
||||||
|
data-mdb-ripple-color="light">
|
||||||
|
<img src="https://mdbootstrap.com/img/new/textures/small/55.jpg" class="w-100"/>
|
||||||
|
<a href="#!" data-mdb-toggle="modal" data-mdb-target="#project-3">
|
||||||
|
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title">Metaverse 2.0</h5>
|
||||||
|
<p class="text-muted">
|
||||||
|
<small>Finished <u>10.11.2022</u> for
|
||||||
|
<a href="" class="text-dark">Venom Tech</a></small>
|
||||||
|
</p>
|
||||||
|
<p class="card-text">
|
||||||
|
Curabitur tristique, mi a mollis sagittis, metus felis mattis
|
||||||
|
arcu, non vehicula nisl dui quis diam. Mauris ut risus eget
|
||||||
|
massa volutpat feugiat. Donec.
|
||||||
|
</p>
|
||||||
|
<a href="#!" class="btn btn-secondary btn-rounded" data-mdb-toggle="modal"
|
||||||
|
data-mdb-target="#project-3">Read more</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- Third column -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
<!-- Section: My projects -->
|
||||||
|
<!-- Section: Projects modals -->
|
||||||
|
<section class="">
|
||||||
|
|
||||||
|
<!-- Modal project 1 -->
|
||||||
|
<div class="modal fade" id="project-1" tabindex="-1" aria-labelledby="project-1Label" aria-hidden="true">
|
||||||
|
<div class="modal-dialog modal-xl">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="project-1Label">AI engine</h5>
|
||||||
|
<button type="button" class="btn-close" data-mdb-dismiss="modal"
|
||||||
|
aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
|
||||||
|
<!-- Section: Design Block -->
|
||||||
|
<section>
|
||||||
|
|
||||||
|
<div class="row gx-lg-5 align-items-center">
|
||||||
|
<div class="col-lg-5 mb-5 mb-lg-0">
|
||||||
|
<div class="bg-image ripple rounded-7 shadow-5-strong"
|
||||||
|
data-mdb-ripple-color="light">
|
||||||
|
<img src="https://mdbootstrap.com/img/new/textures/full/98.jpg"
|
||||||
|
class="w-100"/>
|
||||||
|
<a href="#!">
|
||||||
|
<div class="mask" style="background-color: rgba(0, 0, 0, 0.4)">
|
||||||
|
<div class="d-flex justify-content-center align-items-center h-100">
|
||||||
|
<div class="px-4 py-5 px-md-5 text-white text-center">
|
||||||
|
<h3 class="text-uppercase fw-bold mb-4">
|
||||||
|
The future is <u
|
||||||
|
style="color: hsl(210, 12%, 80%)">now</u>
|
||||||
|
</h3>
|
||||||
|
<p class="mb-0" style="color: hsl(210, 12%, 80%)">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
||||||
|
Harum quia laboriosam error consequuntur fugit,
|
||||||
|
doloribus rerum, iure nesciunt amet quidem veniam
|
||||||
|
cupiditate hic fugiat dolore aperiam quisquam libero
|
||||||
|
earum quibusdam?
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hover-overlay">
|
||||||
|
<div class="mask"
|
||||||
|
style="background-color: rgba(251, 251, 251, 0.2)"></div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-lg-7 mb-4 mb-lg-0">
|
||||||
|
<div class="d-flex align-items-start mb-5">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="p-3 rounded-4 shadow-2-strong"
|
||||||
|
style="background-color: hsl(204, 30%, 20%)">
|
||||||
|
<i class="fas fa-headset fa-lg text-white fa-fw"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow-1 ms-4">
|
||||||
|
<p class="fw-bold mb-1">Support 24/7</p>
|
||||||
|
<p class="text-muted mb-0">
|
||||||
|
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
|
||||||
|
Nihil quisquam quibusdam modi sapiente magni molestias
|
||||||
|
pariatur facilis reprehenderit facere aliquam ex.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="d-flex align-items-start mb-5">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="p-3 rounded-4 shadow-2-strong"
|
||||||
|
style="background-color: hsl(204, 30%, 20%)">
|
||||||
|
<i class="fas fa-shield-alt fa-lg text-white fa-fw"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow-1 ms-4">
|
||||||
|
<p class="fw-bold mb-1">Safe and solid</p>
|
||||||
|
<p class="text-muted mb-0">
|
||||||
|
Eum nostrum fugit numquam, voluptates veniam neque quibusdam ullam
|
||||||
|
aspernatur odio soluta,
|
||||||
|
quisquam dolore animi mollitia a omnis praesentium, expedita nobis!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="d-flex align-items-start mb-5">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="p-3 rounded-4 shadow-2-strong"
|
||||||
|
style="background-color: hsl(204, 30%, 20%)">
|
||||||
|
<i class="fas fa-shipping-fast fa-lg text-white fa-fw"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow-1 ms-4">
|
||||||
|
<p class="fw-bold mb-1">Extremely fast</p>
|
||||||
|
<p class="text-muted mb-0">
|
||||||
|
Enim cupiditate, minus nulla dolor cumque iure eveniet facere ullam
|
||||||
|
beatae hic voluptatibus
|
||||||
|
dolores exercitationem? Facilis debitis aspernatur amet nisi iure
|
||||||
|
eveniet facere?
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="d-flex align-items-start">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="p-3 rounded-4 shadow-2-strong"
|
||||||
|
style="background-color: hsl(204, 30%, 20%)">
|
||||||
|
<i class="fas fa-chart-pie fa-lg text-white fa-fw"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow-1 ms-4">
|
||||||
|
<p class="fw-bold mb-1">Live analytics</p>
|
||||||
|
<p class="text-muted mb-0">
|
||||||
|
Illum doloremque ea, blanditiis sed dolor laborum praesentium maxime
|
||||||
|
sint, consectetur atque
|
||||||
|
ipsum ab adipisci ullam aspernatur odio soluta, quisquam dolore
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Section: Design Block -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">Close</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Modal project 2 -->
|
||||||
|
<div class="modal fade" id="project-2" tabindex="-1" aria-labelledby="project-2Label" aria-hidden="true">
|
||||||
|
<div class="modal-dialog modal-xl">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="project-2Label">Balanced design</h5>
|
||||||
|
<button type="button" class="btn-close" data-mdb-dismiss="modal"
|
||||||
|
aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<!-- Section: Design Block -->
|
||||||
|
<section>
|
||||||
|
|
||||||
|
<div class="row gx-lg-5 align-items-center">
|
||||||
|
<div class="col-lg-5 mb-5 mb-lg-0">
|
||||||
|
<div class="bg-image ripple rounded-7 shadow-5-strong"
|
||||||
|
data-mdb-ripple-color="light">
|
||||||
|
<img src="https://mdbootstrap.com/img/new/textures/full/7.jpg"
|
||||||
|
class="w-100"/>
|
||||||
|
<a href="#!">
|
||||||
|
<div class="mask" style="background-color: rgba(0, 0, 0, 0.4)">
|
||||||
|
<div class="d-flex justify-content-center align-items-center h-100">
|
||||||
|
<div class="px-4 py-5 px-md-5 text-white text-center">
|
||||||
|
<h3 class="text-uppercase fw-bold mb-4">
|
||||||
|
The future is <u
|
||||||
|
style="color: hsl(210, 12%, 80%)">now</u>
|
||||||
|
</h3>
|
||||||
|
<p class="mb-0" style="color: hsl(210, 12%, 80%)">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
||||||
|
Harum quia laboriosam error consequuntur fugit,
|
||||||
|
doloribus rerum, iure nesciunt amet quidem veniam
|
||||||
|
cupiditate hic fugiat dolore aperiam quisquam libero
|
||||||
|
earum quibusdam?
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hover-overlay">
|
||||||
|
<div class="mask"
|
||||||
|
style="background-color: rgba(251, 251, 251, 0.2)"></div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-lg-7 mb-4 mb-lg-0">
|
||||||
|
<div class="d-flex align-items-start mb-5">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="p-3 rounded-4 shadow-2-strong"
|
||||||
|
style="background-color: hsl(0, 63%, 44%)">
|
||||||
|
<i class="fas fa-headset fa-lg text-white fa-fw"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow-1 ms-4">
|
||||||
|
<p class="fw-bold mb-1">Support 24/7</p>
|
||||||
|
<p class="text-muted mb-0">
|
||||||
|
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
|
||||||
|
Nihil quisquam quibusdam modi sapiente magni molestias
|
||||||
|
pariatur facilis reprehenderit facere aliquam ex.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="d-flex align-items-start mb-5">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="p-3 rounded-4 shadow-2-strong"
|
||||||
|
style="background-color: hsl(0, 63%, 44%)">
|
||||||
|
<i class="fas fa-shield-alt fa-lg text-white fa-fw"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow-1 ms-4">
|
||||||
|
<p class="fw-bold mb-1">Safe and solid</p>
|
||||||
|
<p class="text-muted mb-0">
|
||||||
|
Eum nostrum fugit numquam, voluptates veniam neque quibusdam ullam
|
||||||
|
aspernatur odio soluta,
|
||||||
|
quisquam dolore animi mollitia a omnis praesentium, expedita nobis!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="d-flex align-items-start mb-5">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="p-3 rounded-4 shadow-2-strong"
|
||||||
|
style="background-color: hsl(0, 63%, 44%)">
|
||||||
|
<i class="fas fa-shipping-fast fa-lg text-white fa-fw"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow-1 ms-4">
|
||||||
|
<p class="fw-bold mb-1">Extremely fast</p>
|
||||||
|
<p class="text-muted mb-0">
|
||||||
|
Enim cupiditate, minus nulla dolor cumque iure eveniet facere ullam
|
||||||
|
beatae hic voluptatibus
|
||||||
|
dolores exercitationem? Facilis debitis aspernatur amet nisi iure
|
||||||
|
eveniet facere?
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="d-flex align-items-start">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="p-3 rounded-4 shadow-2-strong"
|
||||||
|
style="background-color: hsl(0, 63%, 44%)">
|
||||||
|
<i class="fas fa-chart-pie fa-lg text-white fa-fw"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow-1 ms-4">
|
||||||
|
<p class="fw-bold mb-1">Live analytics</p>
|
||||||
|
<p class="text-muted mb-0">
|
||||||
|
Illum doloremque ea, blanditiis sed dolor laborum praesentium maxime
|
||||||
|
sint, consectetur atque
|
||||||
|
ipsum ab adipisci ullam aspernatur odio soluta, quisquam dolore
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Section: Design Block -->
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">Close</button>
|
||||||
|
<button type="button" class="btn btn-primary">Save changes</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Modal project 3 -->
|
||||||
|
<div class="modal fade" id="project-3" tabindex="-1" aria-labelledby="project-3Label" aria-hidden="true">
|
||||||
|
<div class="modal-dialog modal-xl">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="project-3Label">Metaverse 2.0</h5>
|
||||||
|
<button type="button" class="btn-close" data-mdb-dismiss="modal"
|
||||||
|
aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<!-- Section: Design Block -->
|
||||||
|
<section>
|
||||||
|
|
||||||
|
<div class="row gx-lg-5 align-items-center">
|
||||||
|
<div class="col-lg-5 mb-5 mb-lg-0">
|
||||||
|
<div class="bg-image ripple rounded-7 shadow-5-strong"
|
||||||
|
data-mdb-ripple-color="light">
|
||||||
|
<img src="https://mdbootstrap.com/img/new/textures/full/30.jpg"
|
||||||
|
class="w-100"/>
|
||||||
|
<a href="#!">
|
||||||
|
<div class="mask" style="background-color: rgba(0, 0, 0, 0.4)">
|
||||||
|
<div class="d-flex justify-content-center align-items-center h-100">
|
||||||
|
<div class="px-4 py-5 px-md-5 text-white text-center">
|
||||||
|
<h3 class="text-uppercase fw-bold mb-4">
|
||||||
|
The future is <u
|
||||||
|
style="color: hsl(210, 12%, 80%)">now</u>
|
||||||
|
</h3>
|
||||||
|
<p class="mb-0" style="color: hsl(210, 12%, 80%)">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
||||||
|
Harum quia laboriosam error consequuntur fugit,
|
||||||
|
doloribus rerum, iure nesciunt amet quidem veniam
|
||||||
|
cupiditate hic fugiat dolore aperiam quisquam libero
|
||||||
|
earum quibusdam?
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hover-overlay">
|
||||||
|
<div class="mask"
|
||||||
|
style="background-color: rgba(251, 251, 251, 0.2)"></div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-lg-7 mb-4 mb-lg-0">
|
||||||
|
<div class="d-flex align-items-start mb-5">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="p-3 rounded-4 shadow-2-strong"
|
||||||
|
style="background-color: hsl(260, 84%, 43%)">
|
||||||
|
<i class="fas fa-headset fa-lg text-white fa-fw"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow-1 ms-4">
|
||||||
|
<p class="fw-bold mb-1">Support 24/7</p>
|
||||||
|
<p class="text-muted mb-0">
|
||||||
|
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
|
||||||
|
Nihil quisquam quibusdam modi sapiente magni molestias
|
||||||
|
pariatur facilis reprehenderit facere aliquam ex.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="d-flex align-items-start mb-5">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="p-3 rounded-4 shadow-2-strong"
|
||||||
|
style="background-color: hsl(260, 84%, 43%)">
|
||||||
|
<i class="fas fa-shield-alt fa-lg text-white fa-fw"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow-1 ms-4">
|
||||||
|
<p class="fw-bold mb-1">Safe and solid</p>
|
||||||
|
<p class="text-muted mb-0">
|
||||||
|
Eum nostrum fugit numquam, voluptates veniam neque quibusdam ullam
|
||||||
|
aspernatur odio soluta,
|
||||||
|
quisquam dolore animi mollitia a omnis praesentium, expedita nobis!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="d-flex align-items-start mb-5">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="p-3 rounded-4 shadow-2-strong"
|
||||||
|
style="background-color: hsl(260, 84%, 43%)">
|
||||||
|
<i class="fas fa-shipping-fast fa-lg text-white fa-fw"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow-1 ms-4">
|
||||||
|
<p class="fw-bold mb-1">Extremely fast</p>
|
||||||
|
<p class="text-muted mb-0">
|
||||||
|
Enim cupiditate, minus nulla dolor cumque iure eveniet facere ullam
|
||||||
|
beatae hic voluptatibus
|
||||||
|
dolores exercitationem? Facilis debitis aspernatur amet nisi iure
|
||||||
|
eveniet facere?
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="d-flex align-items-start">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="p-3 rounded-4 shadow-2-strong"
|
||||||
|
style="background-color: hsl(260, 84%, 43%)">
|
||||||
|
<i class="fas fa-chart-pie fa-lg text-white fa-fw"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow-1 ms-4">
|
||||||
|
<p class="fw-bold mb-1">Live analytics</p>
|
||||||
|
<p class="text-muted mb-0">
|
||||||
|
Illum doloremque ea, blanditiis sed dolor laborum praesentium maxime
|
||||||
|
sint, consectetur atque
|
||||||
|
ipsum ab adipisci ullam aspernatur odio soluta, quisquam dolore
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Section: Design Block -->
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">Close</button>
|
||||||
|
<button type="button" class="btn btn-primary">Save changes</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
<!-- Section: Projects modals -->
|
||||||
|
<!-- Section: About me -->
|
||||||
|
<section class="mb-10">
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<div class="row gx-0 align-items-center">
|
||||||
|
|
||||||
|
<!-- First column -->
|
||||||
|
<div class="col-lg-6 mb-5 mb-lg-0">
|
||||||
|
|
||||||
|
<div style="background: hsla(0, 0%, 100%, 0.55);backdrop-filter: blur(30px);z-index: 1"
|
||||||
|
class="card rounded-7 me-lg-n5">
|
||||||
|
<div class="card-body p-lg-5 shadow-5">
|
||||||
|
<h2 class="fw-bold">
|
||||||
|
<span class="text-primary">John Doe</span>
|
||||||
|
</h2>
|
||||||
|
<p class="fw-bold"><em>“Design is intelligence made visible.”</em></p>
|
||||||
|
|
||||||
|
<p class="text-muted mb-4">
|
||||||
|
Nunc tincidunt vulputate elit. Mauris varius purus malesuada
|
||||||
|
neque iaculis malesuada. Aenean gravida magna orci, non
|
||||||
|
efficitur est porta id. Donec magna diam.
|
||||||
|
</p>
|
||||||
|
<p class="text-muted">
|
||||||
|
Ad, at blanditiis quaerat laborum officia incidunt
|
||||||
|
cupiditate dignissimos voluptates eius aliquid minus
|
||||||
|
praesentium! Perferendis et totam ipsum ex aut earum libero
|
||||||
|
accusamus voluptas quod numquam saepe, consequuntur nihil
|
||||||
|
quia tenetur consequatur. Quis, explicabo deserunt quasi
|
||||||
|
assumenda ea maiores nulla, et dolor saepe praesentium natus
|
||||||
|
error reiciendis voluptas iste. Esse, laudantium ipsum
|
||||||
|
animi, quos voluptatibus atque vero repellat sit eligendi
|
||||||
|
autem maiores quasi cum aperiam. Aperiam rerum culpa
|
||||||
|
accusantium, ducimus deserunt aliquid alias vitae quasi
|
||||||
|
corporis placeat vel maiores explicabo commodi!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- First column -->
|
||||||
|
|
||||||
|
<!-- Second column -->
|
||||||
|
<div class="col-lg-6 mb-5 mb-lg-0">
|
||||||
|
<div class="bg-image hover-overlay rotate-lg rounded-7 shadow-4">
|
||||||
|
<img src="https://mdbootstrap.com/img/new/standard/people/272.jpg" class="w-100" alt=""/>
|
||||||
|
<div class="mask"
|
||||||
|
style="background: linear-gradient(45deg,hsla(169, 84.5%, 52%, 0.3),hsla(263, 87.7%, 44.7%, 0.3) 100%)"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Second column -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
<!-- Section: About me -->
|
||||||
|
<!-- Section: Testimonials -->
|
||||||
|
<section class="mb-10 text-center">
|
||||||
|
|
||||||
|
<h2 class="fw-bold mb-7 text-center">Happy clients</h2>
|
||||||
|
|
||||||
|
<div class="row gx-lg-5">
|
||||||
|
|
||||||
|
<!-- First column -->
|
||||||
|
<div class="col-lg-4 mb-5 mb-lg-0">
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="rounded-7 p-4 shadow-3" style="background-color: hsl(218, 62.2%, 95%)">
|
||||||
|
<!-- Divider here -->
|
||||||
|
<hr class="hr hr-blurry">
|
||||||
|
<p class="text-muted mt-4 mb-2">Project Manager at Spotify</p>
|
||||||
|
<p class="h5 mb-4 text-primary">Garry Lindman</p>
|
||||||
|
<p class="pb-4 mb-4">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis molestias quidem
|
||||||
|
itaque earum tempora distinctio soluta ut, eius, impedit porro iure praesentium
|
||||||
|
ratione possimus quos suscipit, ratione nostrum cum odit.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<img src="https://mdbootstrap.com/img/new/avatars/22.jpg"
|
||||||
|
class="w-100 rounded-7 mt-n5 shadow-5-strong"
|
||||||
|
style="max-width: 100px" alt="Avatar"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- First column -->
|
||||||
|
|
||||||
|
<!-- Second column -->
|
||||||
|
<div class="col-lg-4 mb-5 mb-lg-0">
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="rounded-7 p-4 shadow-3" style="background-color: hsl(218, 62.2%, 95%)">
|
||||||
|
<!-- Divider here -->
|
||||||
|
<hr class="hr hr-blurry">
|
||||||
|
<p class="text-muted mt-4 mb-2">CEO at Reddit</p>
|
||||||
|
<p class="h5 mb-4 text-primary">Lisa Montessori</p>
|
||||||
|
<p class="pb-4 mb-4">
|
||||||
|
Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum
|
||||||
|
soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime
|
||||||
|
placeat facere possimus, omnis voluptas assumenda est omnis.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<img src="https://mdbootstrap.com/img/new/avatars/11.jpg"
|
||||||
|
class="w-100 rounded-7 mt-n5 shadow-5-strong"
|
||||||
|
style="max-width: 100px" alt="Avatar"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- Second column -->
|
||||||
|
|
||||||
|
<!-- Third column -->
|
||||||
|
<div class="col-lg-4">
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="rounded-7 p-4 shadow-3" style="background-color: hsl(218, 62.2%, 95%)">
|
||||||
|
<!-- Divider here -->
|
||||||
|
<hr class="hr hr-blurry">
|
||||||
|
<p class="text-muted mt-4 mb-2">Senior Product Designer at Twitter</p>
|
||||||
|
<p class="h5 mb-4 text-primary">Ozzy McRyan</p>
|
||||||
|
<p class="pb-4 mb-4">
|
||||||
|
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe
|
||||||
|
eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque
|
||||||
|
earum rerum hic tenetur a sapiente delectus ut aut reiciendis.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<img src="https://mdbootstrap.com/img/new/avatars/25.jpg"
|
||||||
|
class="w-100 rounded-7 mt-n5 shadow-5-strong"
|
||||||
|
style="max-width: 100px" alt="Avatar"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- Third column -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Section: Testimonials -->
|
||||||
|
<!-- Section: Contact -->
|
||||||
|
<section class="mb-10 text-center">
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<div class="row gx-0 align-items-center">
|
||||||
|
|
||||||
|
<!-- First column -->
|
||||||
|
<div class="col-lg-6 mb-5 mb-lg-0">
|
||||||
|
|
||||||
|
<div style="background: hsla(0, 0%, 100%, 0.55);
|
||||||
|
backdrop-filter: blur(30px);
|
||||||
|
z-index: 1;" class="card rounded-7 me-lg-n5">
|
||||||
|
<div class="card-body p-lg-5 shadow-5">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- First column -->
|
||||||
|
|
||||||
|
<!-- Second column -->
|
||||||
|
<div class="col-lg-6 mb-5 mb-lg-0">
|
||||||
|
|
||||||
|
<div class="ratio ratio-1x1">
|
||||||
|
<iframe class="shadow-3-strong rounded-7" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d96813.17497894862!2d-73.97484803586903!3d40.68692922859912!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c2588f046ee661%3A0xa0b3281fcecc08c!2sManhattan%2C%20New%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2spl!4v1671718528728!5m2!1sen!2spl" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Second column -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
<!-- Section: Contact -->
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<!--Main layout-->
|
||||||
|
|
||||||
|
<!--Footer-->
|
||||||
|
<footer class="text-center" style="background-color: hsl(218, 62.2%, 95%)">
|
||||||
|
<div class="container py-4">
|
||||||
|
|
||||||
|
<!-- Facebook -->
|
||||||
|
<a class="btn text-white btn-floating m-2" style="background-color: #3b5998;" href="#!" role="button"><i
|
||||||
|
class="fab fa-facebook-f"></i></a>
|
||||||
|
|
||||||
|
<!-- Twitter -->
|
||||||
|
<a class="btn text-white btn-floating m-2" style="background-color: #55acee;" href="#!" role="button"><i
|
||||||
|
class="fab fa-twitter"></i></a>
|
||||||
|
|
||||||
|
<!-- Google -->
|
||||||
|
<a class="btn text-white btn-floating m-2" style="background-color: #dd4b39;" href="#!" role="button"><i
|
||||||
|
class="fab fa-google"></i></a>
|
||||||
|
|
||||||
|
<!-- Instagram -->
|
||||||
|
<a class="btn text-white btn-floating m-2" style="background-color: #ac2bac;" href="#!" role="button"><i
|
||||||
|
class="fab fa-instagram"></i></a>
|
||||||
|
|
||||||
|
<!-- Linkedin -->
|
||||||
|
<a class="btn text-white btn-floating m-2" style="background-color: #0082ca;" href="#!" role="button"><i
|
||||||
|
class="fab fa-linkedin-in"></i></a>
|
||||||
|
<!-- Github -->
|
||||||
|
<a class="btn text-white btn-floating m-2" style="background-color: #333333;" href="#!" role="button"><i
|
||||||
|
class="fab fa-github"></i></a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- Copyright -->
|
||||||
|
<div class="text-center p-3" style="background-color: hsla(218, 62.2%, 35%, 0.2)">
|
||||||
|
© 2022 Copyright:
|
||||||
|
<a class="text-dark" href="https://mdbootstrap.com/">MDBootstrap.com</a>
|
||||||
|
</div>
|
||||||
|
<!-- Copyright -->
|
||||||
|
</footer>
|
||||||
|
<!--Footer-->
|
||||||
|
|
||||||
|
|
||||||
|
<script type="text/javascript" src="../js/mdb.min.js"></script>
|
||||||
|
<!-- Custom scripts -->
|
||||||
|
<script type="text/javascript">
|
||||||
|
|
||||||
|
const navbar = document.getElementById("main-navbar")
|
||||||
|
window.addEventListener('scroll', function () {
|
||||||
|
if (window.pageYOffset > 0) {
|
||||||
|
navbar.classList.add("navbar-after-scroll")
|
||||||
|
} else {
|
||||||
|
navbar.classList.remove("navbar-after-scroll")
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user