NT-Eink-Launcher
/
index.html

<!-- _   _   _   _       ___       ___  ___   _____   _   _____       ___   __   _   _____
| | | | | | | |     /   |     /   |/   | | ____| | | |_   _|     /   | |  \ | | /  ___|
| |_| | | | | |    / /| |    / /|   /| | | |__   | |   | |      / /| | |   \| | | |
|  _  | | | | |   / / | |   / / |__/ | | |  __|  | |   | |     / / | | | |\   | | |  _
| | | | | |_| |  / /  | |  / /       | | | |___  | |   | |    / /  | | | | \  | | |_| |
|_| |_| \_____/ /_/   |_| /_/        |_| |_____| |_|   |_|   /_/   |_| |_|  \_| \_____/ -->
<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="style.css">
		<title>Card</title>
		<style type="text/css">
			/* 这是引入了一些字体 */
			@import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');

			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
				font-family: 'Poppins', sans-serif;
			}

			body {
				display: flex;
				justify-content: center;
				align-items: center;
				min-height: 100vh;
				background: linear-gradient(45deg, #fbda61, #ff5acd);
			}

			.card {
				position: relative;
				width: 350px;
				height: 190px;
				/* height: 450px; */
				background: #fff;
				border-radius: 20px;
				box-shadow: 0 35px 80px rgba(0, 0, 0, 0.15);
				transition: 0.5s;
			}

			.card:hover {
				height: 450px;
			}

			.imgBx {
				position: absolute;
				left: 50%;
				top: -50px;
				transform: translateX(-50%);
				width: 150px;
				height: 150px;
				background: #fff;
				border-radius: 20px;
				box-shadow: 0 15px 50px rgba(0, 0, 0, 0.35);
				overflow: hidden;
				transition: 0.5s;
			}

			.card:hover .imgBx {
				width: 250px;
				height: 250px;
			}

			.imgBx img {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			.card .content {
				position: absolute;
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: flex-end;
				overflow: hidden;
			}

			.card .content .details {
				padding: 40px;
				text-align: center;
				width: 100%;
				transition: 0.5s;
				transform: translateY(150px);
			}

			.card:hover .content .details {
				transform: translateY(0px);
			}

			.card .content .details h2 {
				font-size: 1.25em;
				font-weight: 600;
				color: #555;
				line-height: 1.2em;
			}

			.card .content .details h2 span {
				font-size: 0.75em;
				font-weight: 500;
				opacity: 0.5;
			}

			.card .content .details .data {
				display: flex;
				justify-content: space-between;
				margin: 20px 0;
			}

			.card .content .details .data h3 {
				font-size: 1em;
				color: #555;
				line-height: 1.2em;
				font-weight: 600;
			}

			.card .content .details .data h3 span {
				font-size: 0.85em;
				font-weight: 400;
				opacity: 0.5;
			}

			.card .content .details .actionBtn {
				display: flex;
				justify-content: space-between;
			}

			.card .content .details .actionBtn button {
				padding: 10px 30px;
				border-radius: 5px;
				border: none;
				outline: none;
				font-size: 1em;
				font-weight: 500;
				background: #ff5f95;
				color: #fff;
				cursor: pointer;
			}

			.card .content .details .actionBtn button:nth-child(2) {
				border: 1px solid #999;
				color: #999;
				background: #fff;
			}
		</style>
	</head>

	<body>
		<div class="card">
			<div class="imgBx">
				<img src="https://q1.qlogo.cn/g?b=qq&nk=1097681347&s=640">
			</div>
			<div class="content">
				<div class="details">
					<h2>第七图书馆<br><span>安卓、鸿蒙开发者，二次元</span></h2>
					<div class="data">
						<h3>7个<br><span>通过认证</span></h3>
						<h3>MTProject<br><span>开源作品</span></h3>
						<h3>MTCore<br><span>自制核心</span></h3>
					</div>
					<div class="actionBtn">
						<a href="https://nyanon.online/">
							<button>小说\博客</button>
						</a>
						<a href="https://shop592156260.taobao.com/?spm=a21ar.c-design.0.0.5e6ebdc5cIGiVJ#/">
							<button>淘宝小店</button>
						</a>
					</div>
				</div>
			</div>
		</div>
	</body>

</html>