form designed
This commit is contained in:
parent
d6aa41af93
commit
8b07e8848e
3 changed files with 73 additions and 21 deletions
|
@ -50,18 +50,6 @@ h1 {
|
|||
background-position-x: right;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.container {
|
||||
margin: 0px;
|
||||
width: 100%;
|
||||
border-radius: 0px;
|
||||
box-shadow: none;
|
||||
}
|
||||
body {
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.logo>img {
|
||||
height: 220px;
|
||||
margin-left: 3vw;
|
||||
|
@ -88,8 +76,9 @@ hr::before {
|
|||
content: url('../img/divider.svg');
|
||||
}
|
||||
|
||||
|
||||
p {
|
||||
font-size: 1.5vw;
|
||||
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
|
@ -176,7 +165,56 @@ img {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
|
||||
form {
|
||||
margin-top: 25vh;
|
||||
margin-bottom: 10vh;
|
||||
padding: 0px;
|
||||
width: 50vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-bottom: 1px solid #d75b00;
|
||||
height: 40px;
|
||||
background: none;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: none;
|
||||
border-bottom: 2px solid #923e01;
|
||||
}
|
||||
|
||||
button[type="submit"] {
|
||||
padding: 5px 10px;
|
||||
height: 30px;
|
||||
outline: 1px solid #d75b00;
|
||||
background: none;
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
color: #d75b00;
|
||||
transition-property: all;
|
||||
transition-duration: 0.3s;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
|
||||
button[type="submit"]:hover {
|
||||
cursor: pointer;
|
||||
background-color: #d75b00;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.bg-full {
|
||||
display: none;
|
||||
}
|
||||
|
@ -195,6 +233,8 @@ img {
|
|||
}
|
||||
.row {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.col {
|
||||
|
@ -209,4 +249,8 @@ img {
|
|||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
width: 85vw;
|
||||
}
|
||||
}
|
|
@ -33,7 +33,7 @@
|
|||
<body>
|
||||
<div class="bg-full"></div>
|
||||
<div class="container">
|
||||
<div id="main-page">
|
||||
<div id="main-page" style="display: none;">
|
||||
<div class="logo"><img src="img/scep_gobelet.png" alt="logo du bde"></div>
|
||||
<div class="row banner">
|
||||
<h1>Prochaine activité</h1>
|
||||
|
@ -87,20 +87,28 @@
|
|||
|
||||
</div> <!-- end admin page -->
|
||||
|
||||
<div id="login-page" style="display: none">
|
||||
<div id="login-page" style="display: block;">
|
||||
<div class="row">
|
||||
<form id="login-form" method="POST">
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" placeholder="Nom d'utilisateur Rezo" name="login" id="login"/>
|
||||
<input type="text" class="form-control" placeholder="Nom d'espion" name="login" id="login"/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="password" class="form-control" placeholder="Password" name="password" id="password" />
|
||||
<input type="password" class="form-control" placeholder="Mot de passe secret" name="password" id="password" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button type="submit" class="btn btn-primary">Se connecter</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<hr/>
|
||||
<div class="row banner">
|
||||
<h2>Notice de l'espion</h2>
|
||||
<p id="notice-espion">
|
||||
Seul les espions reconnus par le Rézo pourrons se connecter pour jouer des tours à leurs camarrades.
|
||||
Si tu n'es pas encore un espion reconnu, tu peux le devenir <a href="https://re2o.rezo-rm.fr/users/new_user">ici</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div> <!-- end login page -->
|
||||
|
||||
<div id="demande-page" style="display: none">
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
var $animation_elements = $("#prank-desc, #activite-desc, #chasse-desc");
|
||||
var $animation_elements = $("#prank-desc, #activite-desc, #chasse-desc, #notice-espion");
|
||||
var $window = $(window)
|
||||
|
||||
function check_if_in_view() {
|
||||
|
@ -14,7 +14,7 @@ function check_if_in_view() {
|
|||
|
||||
//check to see if this current container is within viewport
|
||||
if ((element_bottom_position >= window_top_position) &&
|
||||
(element_top_position <= window_bottom_position)) {
|
||||
(element_top_position <= window_bottom_position) && $element.is(':visible')) {
|
||||
if(!$element.hasClass('animated')) {
|
||||
$element.addClass('animated');
|
||||
new TypeIt('#' + $element.attr('id'), {
|
||||
|
|
Loading…
Reference in a new issue