Style almost finished
This commit is contained in:
parent
9b9ce19093
commit
54e3b919d2
7 changed files with 115 additions and 9 deletions
|
@ -27,7 +27,7 @@ body {
|
|||
}
|
||||
|
||||
h1 {
|
||||
font-size: 50px;
|
||||
font-size: 60px;
|
||||
font-weight: 900;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
@ -83,6 +83,55 @@ hr::before {
|
|||
content: url('../img/divider.svg');
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.5vw;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #d75b00;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.prank-button {
|
||||
text-align: center;
|
||||
font-size: 2.5vw;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.prank-button a .underline{
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
top: -30px;
|
||||
}
|
||||
|
||||
.prank-button a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.prank-button a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.prank-button a:hover:after {
|
||||
content: url("../img/circle-hand.png");
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
top: 660px;
|
||||
left: 410px;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
|
||||
.banner {
|
||||
padding: 3vw;
|
||||
display: flex;
|
||||
|
@ -97,8 +146,8 @@ hr::before {
|
|||
align-items: left;
|
||||
padding: 20px;
|
||||
margin: 50px 0px;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
width: 50%;
|
||||
justify-content: top;
|
||||
}
|
||||
|
||||
.col-left {
|
||||
|
@ -110,6 +159,25 @@ hr::before {
|
|||
padding-left: 5vw;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.row {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.col {
|
||||
width: 100%;
|
||||
margin: 10px 0px;
|
||||
}
|
||||
|
||||
.col-left {
|
||||
border: none;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.activite-temps {
|
||||
font-size: 40px;
|
||||
color: red;
|
||||
|
|
BIN
static/img/circle-hand.png
Normal file
BIN
static/img/circle-hand.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 17 KiB |
BIN
static/img/schedule.png
Normal file
BIN
static/img/schedule.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 207 KiB |
BIN
static/img/underline-red.png
Normal file
BIN
static/img/underline-red.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 40 KiB |
|
@ -21,7 +21,7 @@
|
|||
<div id="typed-data">
|
||||
<div class="row banner">
|
||||
<h1>Prochaine activité</h1>
|
||||
<span class="activite-temps" id="timer">02:00:00</span>
|
||||
<span class="activite-temps" id="timer">00:00:10</span>
|
||||
<p class="activite-desc">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dicta tenetur tempora similique. A id esse expedita atque dolor eum itaque fugiat enim nisi dicta. Architecto mollitia quasi sed voluptatibus? Veniam.</p>
|
||||
</div>
|
||||
|
||||
|
@ -29,12 +29,22 @@
|
|||
|
||||
<div class="row">
|
||||
<div class="col col-left">
|
||||
<h2>Planning des activité</h2>
|
||||
<img src="img/schedule.jpg" alt="Planning des activité" srcset="">
|
||||
<h1>Planning des activité</h1>
|
||||
<img src="img/schedule.png" class="schedule" alt="Planning des activité" srcset="">
|
||||
</div>
|
||||
<div class="col col-right">
|
||||
<button class="prank-button" id="prank-button">Pranker quelqu'un !</button>
|
||||
<p class="prank-desc">Appuyer pour pranker quelqu'un</p>
|
||||
<h1>Ordre de mission</h1>
|
||||
<div class="prank-button">
|
||||
<a id="prank-button">
|
||||
Demander une mission !
|
||||
<img src="img/underline-red.png" class="underline"/>
|
||||
</a>
|
||||
</div>
|
||||
<p id="prank-desc">
|
||||
OSS 110'Metz est une organisation rempli d'espions qualifiés pour remplir presque toutes vos demandes !
|
||||
Cliquez sur le bouton ci-dessus puis suivez les instructions. Attention, un compte <a href="https://re2o.rezo-rm.fr/users/new_user">Rezo</a>
|
||||
est nécessaire afin de garantir l'identité des demandeurs !
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -49,6 +59,7 @@
|
|||
|
||||
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
|
||||
<script src="https://unpkg.com/typeit@8.7.0/dist/index.umd.js"></script>
|
||||
<script src="js/main.js" defer></script>
|
||||
<script src="js/anim.js" defer></script>
|
||||
</body>
|
||||
</html>
|
|
@ -1,10 +1,14 @@
|
|||
$(window).on("load", function() {
|
||||
|
||||
let type = new TypeIt("#typed-data", {
|
||||
/*let type = new TypeIt("#typed-data", {
|
||||
speed: 10,
|
||||
startDelay: 0,
|
||||
cursor: true
|
||||
})
|
||||
.go();
|
||||
|
||||
$(document).on("click", function() {
|
||||
type.options({speed: 1});
|
||||
});*/
|
||||
|
||||
});
|
|
@ -0,0 +1,23 @@
|
|||
$(window).on("load", function() {
|
||||
|
||||
/* load timer */
|
||||
window.setInterval(function() {
|
||||
var time = $("#timer").text();
|
||||
var t = time.split(":").map(t => parseInt(t));
|
||||
t[2] -= 1;
|
||||
if (t[2] < 0) {
|
||||
t[2] = 59;
|
||||
t[1] -= 1;
|
||||
}
|
||||
if (t[1] < 0) {
|
||||
t[1] = 59;
|
||||
t[0] -= 1;
|
||||
}
|
||||
if (t[0] < 0) {
|
||||
t[0] = 0;
|
||||
t[1] = 0;
|
||||
t[2] = 0;
|
||||
}
|
||||
$("#timer").text(t.join(":"));
|
||||
}, 1000);
|
||||
});
|
Loading…
Reference in a new issue