Style almost finished

This commit is contained in:
johan 2022-12-15 14:30:34 +01:00
parent 9b9ce19093
commit 54e3b919d2
7 changed files with 115 additions and 9 deletions

View file

@ -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

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

BIN
static/img/schedule.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 207 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

View file

@ -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>

View file

@ -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});
});*/
});

View file

@ -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);
});