湘潭网站定制旅游景点网站建设

当前位置： 首页 > news >正文

湘潭网站定制,旅游景点网站建设,建网站义乌,有什么做兼职的网站简介 该代码实现了一个响应式、视觉现代的登录注册页面。主要特点包括#xff1a; 页面布局#xff1a;顶部固定导航栏#xff0c;包含搜索框和菜单项#xff1b;主体分为欢迎内容和登录/注册表单区域。 交互功能#xff1a;支持登录和注册表单切换#xff0c;包含基本…简介 该代码实现了一个响应式、视觉现代的登录注册页面。主要特点包括 页面布局顶部固定导航栏包含搜索框和菜单项主体分为欢迎内容和登录/注册表单区域。 交互功能支持登录和注册表单切换包含基本的表单验证功能。 视觉设计使用CSS实现渐变背景、浮动动画效果和图标化输入框。 技术特点 使用Boxicons图标库响应式布局设计表单切换的JavaScript交互视觉过渡效果 页面整体风格现代简洁适合作为各类网站的登录入口。 效果 代码实现 HTML !DOCTYPE html html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedge/metameta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet hrefstyle.csslink hrefhttps://unpkg.com/boxicons2.1.4/css/boxicons.min.css relstylesheet /headbodyheader classheadernav classnavbara href#Home/aa href#About/aa href#Services/aa href#Contract/a/navform action# classsearch-barinput typetext placeholderSearch…button typesubmiti classbx bx-search/i/button/form/headerdiv classbackground/divdiv classcontainerdiv classcontenth2 classlogoi classbx bxl-firebase/i Zmrbak/h2div classtext-scih2Welcome!brspanTo Our new website./span/h2pLorem ipsum dolor, sit amet consectetur adipisicing elit. Magni, incidunt?/pdiv classsocal-iconsa hrefi classbx bxl-linkedin/i/aa hrefi classbx bxl-facebook/i/aa hrefi classbx bxl-google/i/aa hrefi classbx bxl-instagram/i/a/div/div/divdiv classlogreg-boxdiv classform-box loginform action#h2Sign In/h2div classinput-boxspan classiconi classbx bxs-envelope/i/spaninput typeemail requiredlabelEmail/label/divdiv classinput-boxspan classiconi classbx bxs-lock-alt/i/spaninput typepassword requiredlabelpassword/label/divdiv classremember-forgotlabelinput typecheckboxRemember me/labela href#Forgot Password/a/divbutton typesubmit classbtnSign In/buttondiv classlogin-registerpDont have an account? a href# classregister-linkSign Up/a/p/div/form/divdiv classform-box registerform action#h2Sign Up/h2div classinput-boxspan classiconi classbx bxs-user /i/i/spaninput typetext requiredlabelName/label/divdiv classinput-boxspan classiconi classbx bxs-envelope/i/spaninput typeemail requiredlabelEmail/label/divdiv classinput-boxspan classiconi classbx bxs-lock-alt/i/spaninput typepassword requiredlabelpassword/label/divdiv classremember-forgotlabelinput typecheckboxI agree the terms conditions/label/divbutton typesubmit classbtnSign Up/buttondiv classlogin-registerpAlready have an account? a href# classlogin-linkSign In/a/p/div/form/div/div/divscript srcscript.js/script /body/htmlCSS

• {margin: 0;padding: 0;box-sizing: border-box; }body {background: #020410; }.header {position: fixed;top: 0;left: 0;width: 100%;padding: 25px 12.5%;/* background-color: yellowgreen; /background: transparent;display: flex;justify-content: space-between;align-items: center;z-index: 100; }.navbar a {position: relative;font-size: 16px;color: #e4e4e4;text-decoration: none;font-weight: 500;margin: 30px; }.navbar a::after {content: ;position: absolute;left: 0;width: 100%;height: 2px;background: #e4e4e4;border-radius: 5px;bottom: -6px;transform: translateY(10px);opacity: 0;transition: 0.5s; }.navbar a:hover::after {transform: translateY(0);opacity: 1; }.search-bar {width: 250px;height: 45px;background: transparent;border: 2px solid #e4e4e4;border-radius: 6px;display: flex;align-items: center; }.search-bar input {width: 100%;background: transparent;outline: none;border: none;color: #e4e4e4;font-size: 16px;padding: 10px; }.search-bar input::placeholder {color: #e4e4e4; }.search-bar button {width: 40px;height: 100%;background: transparent;border: none;outline: none;display: flex;justify-content: center;align-items: center;cursor: pointer; }.search-bar button i {font-size: 22px;color: #e4e4e4; }.background {width: 100%;height: 100vh;background: url(bg.jpg) no-repeat;background-position: center;background-size: cover;filter: blur(5px); }.container {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 1000px;height: 550px;background: url(bg.jpg) no-repeat;background-position: center;background-size: cover;border-radius: 10px;margin: 20px;/ filter: hue-rotate(30deg); // filter: brightness(50%) contrast(150%); / }.container .content {position: absolute;top: 0;left: 0;width: 58%;height: 100%;/ background: yellowgreen; /padding: 80px;color: #e4e4e4;display: flex;justify-content: space-between;flex-direction: column;}.content .logo {font-size: 30px; }.text-sci h2 {font-size: 40px;line-height: 1; }.text-sci h2 span {font-size: 25px; }.text-sci p {font-size: 16px;margin: 20px 0; }.socal-icons a i {font-size: 22px;color: #e4e4e4;margin: 10px;transition: 0.5s ease; }.socal-icons a:hover i {transform: scale(1.2); }.container .logreg-box {position: absolute;top: 0;right: 0;width: calc(100% - 58%);height: 100%;/ background:red; */overflow: hidden; }.logreg-box .form-box {position: absolute;display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;background: transparent;-webkit-backdrop-filter: blur(20px);backdrop-filter: blur(20px);border-top-right-radius: 10px;border-bottom-right-radius: 10px;color: #e4e4e4 } .logreg-box .form-box.login{transform: translateX(0);transition: transform 0.6s ease;transition-delay: 0.7s; } .logreg-box.active .form-box.login{transform: translateX(430px);transition-delay: 0s; }.logreg-box .form-box.register{transform: translateX(430px);transition: transform 0.6s ease;transition-delay: 0s; } .logreg-box.active .form-box.register{transform: translateX(0);transition-delay: 0.7s; }.form-box h2 {font-size: 32px;text-align: center; }.form-box .input-box {position: relative;width: 340px;height: 50px;border-bottom: 2px solid #e4e4e4;margin: 30px 0; }.input-box input {width: 100%;height: 100%;border: none;outline: none;background: transparent;font-size: 16px;color: #e4e4e4;font-weight: 500;padding-right: 28px; }.input-box label {position: absolute;top: 50%;left: 0;transform: translateY(-50%);font-size: 16px;font-weight: 500;pointer-events: none;transition: 0.5s ease; }.input-box input:focus~label, .input-box input:valid~label {top: -5px; }.input-box .icon {position: absolute;top: 13px;right: 0;font-size: 19px; }.form-box .remember-forgot {font-size: 14.5px;font-weight: 500;margin: -15px 0 15px;display: flex;justify-content: space-between; }.remember-forgot label input {accent-color: #e4e4e4;margin-right: 4px; }.remember-forgot a {color: #e4e4e4;text-decoration: none; }.remember-forgot a:hover {text-decoration: underline; }.btn {width: 100%;height: 45px;background-color: #c4103d;border: none;outline: none;border-radius: 4px;cursor: pointer;font-size: 16px;font-weight: 600;color: #e4e4e4;box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }.form-box .login-register {font-size: 14.5px;font-weight: 500;text-align: center;margin-top: 25px; }.login-register p a {color: #e4e4e4;font-weight: 600;text-decoration: none; }.login-register p a:hover {text-decoration: underline; }JavaScript const logregBox document.querySelector(.logreg-box); const loginLink document.querySelector(.login-link); const registerLink document.querySelector(.register-link);registerLink.addEventListener(click, () {logregBox.classList.add(active); });loginLink.addEventListener(click, () {logregBox.classList.remove(active); });