BDEMetz
/
bde-liste
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

CSS reborn

ohnoyoutriggeredmytrapcard
asyncnomi 3 years ago
parent
2d4a80bb67
commit
49e530a9c5
2 changed files with 110 additions and 173 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 208
      static/css/main.css
  2. 75
      static/index.html

208
static/css/main.css
View File

@ -6,26 +6,10 @@
}
body {
display: flex;
flex-direction: column;
font-family: 'MODERN TYPEWRITER', sans-serif;
font-size: medium;
color: black;
align-items: center;
justify-content: center;
height: 100%;
overflow: visible;
}
.bg-full {
position: fixed;
background: url('../img/spy-background.png');
background-size: cover;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
z-index: -99;
margin: 0;
}
h1 {
@ -34,48 +18,6 @@ h1 {
margin-top: 0px;
}
.container {
position: absolute;
z-index: 0;
top: 0px;
margin: 5vh 0vh;
justify-content: center;
width: 90vw;
min-height: 100%;
border-radius: 2px;
border: none;
padding: 5vw;
background: url("../img/background-letter.jpg");
background-size: cover;
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;
}
.row {
display: flex;
flex-direction: row;
width: 100%;
justify-content: center;
align-items: stretch;
background-position: absolute;
}
hr {
text-align: center;
border: none;
@ -88,6 +30,11 @@ hr::before {
content: url('../img/divider.svg');
}
img {
max-width: 100%;
height: auto
}
p {
font-size: 1.5vw;
font-weight: 300;
@ -104,109 +51,118 @@ a:hover {
cursor: pointer;
}
.prank-button {
text-align: center;
font-size: 2.5vw;
margin-top: 30px;
#wrapper {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
width: 100%;
height: 100%;
background: url('../img/spy-background.png');
background-size: cover;
overflow: scroll;
}
img {
max-width: 100%;
#container {
display: flex;
flex-direction: column;
position: absolute;
top: 40px;
width: calc(100% - 10vw);
height: auto;
padding: 4vw;
border-radius: 2px;
background: url("../img/background-letter.jpg");
background-size: cover;
}
.prank-button a .underline{
position: relative;
max-width: 100%;
top: -30px;
#logo {
display: flex;
justify-content: center;
height: 220px;
}
.prank-button a {
color: black;
position: relative;
padding: 20px 10px;
width: 100%;
#timer {
font-size: 40px;
color: red;
text-align: center;
}
.prank-button a:hover {
text-decoration: none;
#spacer {
padding: 1px;
margin: 30px 0 30px 0;
background-color: #00000054;
}
.hover-circle {
position: absolute;
z-index: 10;
top: 2px;
left: 0px;
height: 100%;
width: 100%;
display: none;
.row-section {
display: flex;
flex-direction: row;
}
.banner {
padding: 3vw;
.column-section {
display: flex;
flex-direction: column;
align-items: left;
flex-shrink: 1;
flex-basis: fit-content;
padding: 2vw
}
.col {
#prank-button {
display: flex;
flex-direction: column;
align-items: left;
padding: 20px;
margin: 50px 0px;
width: 50%;
justify-content: top;
align-items: center;
padding: 30px 0 30px 0;
background: none;
}
#prank-button > span {
font-size: 25px;
}
#prank-button:hover{
background: url("../img/circle-hand.png");
background-size: 100% 100%;
}
.col-left {
border-right: 1px solid black;
padding-right: 5vw;
#underline {
width: 350px;
height: 25px;
}
.col-right {
padding-left: 5vw;
#login-page {
position: fixed;
display: none;
flex-direction: column;
width: 400px;
height: 400px;
}
.activite-temps {
font-size: 40px;
color: red;
text-align: center;
.login-input {
}
@media screen and (max-width: 800px) {
#container {
padding: 2vw;
}
}
@media screen and (max-width: 600px) {
.bg-full {
display: none;
h1 {
font-size: 40px;
}
#wrapper{
background: none;
}
.container {
#container {
margin: 0px;
width: 100%;
top: 0;
border-radius: 0px;
box-shadow: none;
}
body {
margin: 0px;
}
.logo>img {
#logo {
height: 150px;
margin-left: calc(50% - 75px);
}
.row {
.row-section {
flex-direction: column;
}
.col {
width: 100%;
margin: 10px 0px;
}
.col-left {
border: none;
}
h1 {
font-size: 40px;
}
}

75
static/index.html
View File

@ -31,85 +31,66 @@
<meta name="theme-color" content="#ff6600">
</head>
<body>
<div class="bg-full"></div>
<div class="container">
<div id="main-page">
<div class="logo"><img src="img/scep_gobelet.png" alt="logo du bde"></div>
<div class="row banner">
<div id="wrapper">
<div id="container">
<div id="logo">
<img src="img/scep_gobelet.png" alt="logo du bde"/>
</div>
<div class="column-section">
<h1>Prochaine activité</h1>
<span class="activite-temps" id="timer">00:00:10</span>
<span id="timer">00:00:10</span>
<p id="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>
<hr/>
<div class="row">
<div class="col col-left">
<div class="row-section">
<div class="column-section">
<h1>Planning des activité</h1>
<img src="img/schedule.png" class="schedule" alt="Planning des activité" srcset="">
<img src="img/schedule.png" id="schedule" alt="Planning des activité" srcset="">
</div>
<div class="col col-right">
<div id="spacer" class="column-section"></div>
<div class="column-section">
<h1>Ordre de mission</h1>
<div class="prank-button">
<a id="prank-button">
<span>Demander une mission !</span>
<img src="img/circle-hand.png" class="hover-circle"/>
</a>
<img src="img/underline-red.png" class="underline"/>
</div>
<a id="prank-button">
<span>Demander une mission !</span>
<img src="img/underline-red.png" id="underline"/>
</a>
<p id="prank-desc">
OSS 110'Metz est une organisation remplie d'espions qualifiés pour remplir presque toutes tes 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>
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>
<hr/>
<div class="row banner">
<div class="column-section">
<h1>Chasse au trésor</h1>
<p id="chasse-desc">
Chaque jour de la semaine tes espions préférés ont préparé pour toi une <i style="font-weight: 900;">chasse au trésor</i> !
Résous les énigmes pour tenter de gagner le fameux <u>ticket d'or</u>. Il te permettra de t'abrever gratuitement pendants les évènements festifs !
</p>
</div>
<hr/>
<div class="row banner">
<div class="column-section">
<h1>À propos de nous !</h1>
<img src="img/team.jpeg" alt="la liste du bde de 2025" />
</div>
</div> <!-- end main page -->
<footer class="column-section">
Copyright © OSS 110'Metz
</footer>
</div>
<div id="admin-page" style="display: none">
</div> <!-- end admin page -->
<div id="login-page" style="display: none">
<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"/>
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" name="password" id="password" />
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Se connecter</button>
</div>
</form>
</div>
<div id="login-page">
<input type="text" class="login-input" placeholder="Nom d'utilisateur Rezo" name="login" id="login"/>
<input type="password" class="login-input" placeholder="Password" name="password" id="password" />
<input type="button" class="login-submit">Se connecter</button>
</div> <!-- end login page -->
<div id="demande-page" style="display: none">
</div> <!-- end demande page -->
<footer class="row">
Copyright © OSS 110'Metz
</footer>
</div>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

Write Preview
Loading…
Cancel
Save