у меня есть индекс. html файл с 2 делениями, 1 для страницы приветствия и вторым делом для страницы регистрации. я хочу, чтобы первой страницей, которая будет загружаться, была страница welcoma, затем, если пользователь нажал на кнопку регистрации, я хочу переключиться, чтобы зарегистрировать страницу, поэтому будет загружен css регистра и содержимое div. Мне нужно реализовать это в jQuery. я знаю, что могу разделить страницы на 2 страницы 1 для регистрации и одну для приветствия, но это не цель.
мой индекс. html:
<!DOCTYPE html>
<html>
<head>
<script src="./jquery-3.4.1.slim.min.js"></script>
<link rel="stylesheet" type="text/css" href="Pages/Register/Register.css">
<link rel="stylesheet" type="text/css" href="Pages/Welcome/Welcome.css">
<script type="text/javascript" src="./app.js"></script>
<script type="text/javascript" src="./Pages/Welcome/welcome.js"></script>
</head>
<body>
<!-- Welcome page div -->
<div class="welcomePage" id="welcome">
<div class="box">
<button class="btn1" id="button1">Register</button>
<button class="btn2" id="button2">Login</button>
</div>
</div>
</div>
<!-- Register page div -->
<div class="registerPage" id="register">
<div class="wrapper">
<div class="header-area">
<h2 style="font-family: 'packFont';">Pac-Man</h2>
<p>Suscribe to our Social Profile</p>
</div>
<div class="social-area">
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-twitter"></i>
</div>
<div class="form-area">
<i class="fa fa-user"></i>
<input type="text" placeholder="Enter Username"/>
<i class="fas fa-user-edit"></i>
<input type="text" placeholder="Enter Name"/>
<i class="fa fa-envelope"></i>
<input type="email" placeholder="Enter Email Address"/>
<i class="fa fa-key"></i>
<input type="password" placeholder="Enter Password"/>
<i class="far fa-calendar-alt"></i>
<input placeholder="Date" type="text" onfocus="(this.type='date')" id="date">
<input type="submit" value="Register"/>
</div>
</div>
</div>
теперь я создал мой приветственный знак. js и попробовал:
$(document).ready(function() {
$('body > :not(#welcome)').hide(); // hide everything that isn't #myDiv
$('#welcome').appendTo('body');
$('body').removeClass().addClass('welcomePage');
$( "#button1" ).click(function() {
$('body > :not(#register)').hide();
$('#register').appendTo('body');
$('body').removeClass().addClass('wrapper');
});
});
, но он не работает.
мой css:
Register.css
@font-face {
font-family: 'packFont';
src: url(../../assets/fonts/PAC-FONT.TTF);
}
body{
height: 100vh;
background: url("../../assets/img/RegisterBackground.jpg") no-repeat center center/cover;
width: 100%;
height: 100vh;
margin:0;
padding:0;
font-family:poppins;
}
.wrapper{
background-color: rgba(255,255,255,0.5);
width: 800px;
height: 500px;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
.wrapper:before{
content: '';
width: 350px;
height: 500px;
background-color: rgba(0,0,0,0.5);
position: absolute;
}
.header-area h2{
position: absolute;
top: 20%;
left: 20%;
transform: translate(-50%,-50%);
width: 25%;
border: 1px inset #fff;
text-align: center;
color:#fff;
font-size:35px;
}
.header-area p{
position: absolute;
top:50%;
left:20%;
transform: translate(-50%,-50%);
color: #fff;
}
.social-area{
position: absolute;
top:70%;
left:20%;
transform: translate(-50%,-50%);
}
.social-area i{
width: 30px;
height: 30px;
padding-top: 5px;
margin: 0 2px;
box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
color:#fff;
font-size:30px;
}
.social-area i:nth-child(1){
background: #0e32ff;
}
.social-area i:nth-child(2){
background: #0e70e0;
}
.social-area i:nth-child(3){
background: #55acee;
}
.form-area{
position: absolute;
top:50%;
left:70%;
transform: translate(-50%,-50%);
width: 350px;
overflow: hidden;
}
.form-area input{
outline:none;
padding: 0 0 0 35px;
border: 1px solid rgba(0,0,0,0);
border-bottom-color: #262626;
background: transparent;
width: 100%;
height: 50px;
margin-bottom: 10px;
}
.form-area i{
width: 20px;
position: absolute;
margin-top: 15px;
}
.form-area input[type=submit]{
margin-top: 10%;
width: 100%;
border:none;
background-color: #262626;
color:#fff;
cursor: pointer;
}
Добро пожаловать. css
@font-face {
font-family: 'packFont';
src: url(../../assets/fonts/PAC-FONT.TTF);
}
body{
height: 90vh;
background: url("../../assets/img/welcomeBackground.jpg") no-repeat center center/cover;
width: 100%;
text-align: center;
font-family: 'packFont';
}
.box {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding-top: 65vh;
}
.btn1{
width: 265px;
background: transparent;
font-family: 'packFont';
font-size:38px;
color:white;
outline: none;
border:none;
cursor: pointer;
}
.btn2{
width: 220px;
margin-top: 3%;
background: transparent;
font-family: 'packFont';
font-size:38px;
color:yellow;
border:none;
outline: none;
cursor: pointer;
}
.btn1:hover {
transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
rotate: 4px;
}
.btn2:hover {
transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}