<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign in & Sign up</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<div class="box">
<div class="inner-box">
<!-- 表单 -->
<div class="forms-wrap">
<!-- sign-in -->
<form action="index.html" autocomplete="off" class="sign-in-form">
<div class="logo">
<img src="./svg/logo.svg" alt="logo">
<h4>前端学习</h4>
</div>
<div class="heading">
<h2>欢迎回来</h2>
<h6>Not registerd yet?</h6>
<a href="#" class="toggle">Sign up</a>
</div>
<!-- 表单 -->
<div class="actual-form">
<div class="input-wrap">
<input type="text" minlength="4" autocomplete="off" required class="input-field">
<label>Name</label>
</div>
<div class="input-wrap">
<input type="password" autocomplete="off" required class="input-field">
<label>Password</label>
</div>
<input type="submit" value="Sign In" class="sign-btn">
<p class="text">忘记密码？
<a href="#">获取帮助</a>
</p>
</div>
</form>
<!-- sign-up -->
<form action="index.html" autocomplete="off" class="sign-up-form">
<div class="logo">
<img src="./svg/logo.svg" alt="logo">
<h4>前端学习</h4>
</div>
<div class="heading">
<h2>注册</h2>
<h6>Already have an account?</h6>
<a href="#" class="toggle">Sign in</a>
</div>
<!-- 表单 -->
<div class="actual-form">
<div class="input-wrap">
<input type="text" minlength="4" autocomplete="off" required class="input-field">
<label>Name</label>
</div>
<div class="input-wrap">
<input type="email" autocomplete="off" required class="input-field">
<label>Email</label>
</div>
<div class="input-wrap">
<input type="password" autocomplete="off" required class="input-field">
<label>Password</label>
</div>
<input type="submit" value="Sign Up" class="sign-btn">
<p class="text">注册前，我已经阅读并同意
<a href="#">服务条款</a>和
<a href="#">隐私协议</a>
</p>
</div>
</form>
</div>
<!-- 轮播 -->
<div class="carousel">
<div class="images-wrapper">
<img src="svg/signin.svg" alt="" class="image img-1 show">
<img src="svg/signup.svg" alt="" class="image img-2">
<img src="svg/signin.svg" alt="" class="image img-3">
</div>
<div class="text-slider">
<div class="text-wrap">
<div class="text-group">
<h2>开始你的学习旅程</h2>
<h2>准备创造奇迹吧</h2>
<h2>学习是一切创造力的开始</h2>
</div>
</div>
<div class="bullets">
<span class="active" data-value="1"></span>
<span data-value="2"></span>
<span data-value="3"></span>
</div>
</div>
</div>
</div>
</div>
</main>
<script src="app.js"></script>
</body>
</html>
登录页面自动适配移动端，登录注册平滑切换
3星 · 超过75%的资源 需积分: 0 156 浏览量
2023-05-09
11:31:25
上传
评论
收藏 10KB ZIP 举报 
03.zip （6个子文件） 
03 
style.css 6KB svg 
logo.svg 4KB signup.svg 5KB signin.svg 5KB app.js 1KB
index.html 4KB资源评论
从心、Sunshine2024-04-04轮播图无效哎哎
