Skip to content
Snippets Groups Projects
Commit ebc74217 authored by ROUILLARD AUGUSTIN p2415289's avatar ROUILLARD AUGUSTIN p2415289
Browse files

Update file index.html

parent 5ec3b0df
Branches master
No related tags found
No related merge requests found
Pipeline #191531 passed
Stage: deploy
Hide whitespace changes
Inline Side-by-side
Showing
with 99 additions and 117 deletions
public/index.html
+ 99
− 117
View file @ ebc74217
......@@ -5,181 +5,163 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tournoi de Ping-Pong - BUT Informatique</title>
<style>
/* Style général */
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
background: #f8f9fa;
margin: 0;
padding: 0;
color: #212529;
overflow-x: hidden;
}
header {
background: linear-gradient(135deg, #0056b3, #002952);
header, footer {
background: linear-gradient(135deg, #ff7f50, #ff4500);
color: white;
text-align: center;
padding: 30px;
}
header h1 {
margin: 0;
font-size: 2.5rem;
}
header h2 {
font-size: 1.5rem;
margin-top: 10px;
padding: 20px;
}
nav {
background-color: #343a40;
background: #343a40;
color: white;
padding: 10px;
text-align: center;
}
nav ul {
display: flex;
list-style: none;
justify-content: center;
margin: 0;
padding: 0;
nav a {
color: white;
text-decoration: none;
margin: 0 10px;
font-weight: bold;
position: relative;
}
nav ul li {
margin: 0 15px;
nav a::before, nav a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
background: white;
transition: 0.5s;
}
nav ul li a {
color: black;
text-decoration: none;
nav a::before {
left: 50%;
top: 0;
}
nav a::after {
right: 50%;
bottom: 0;
}
nav a:hover::before, nav a:hover::after {
width: 50%;
}
section {
padding: 20px;
text-align: center;
position: relative;
}
section h2 {
color: #0056b3;
margin-bottom: 15px;
}
ul {
list-style-type: none;
padding: 0;
color: #ff4500;
}
ul li {
background-color: #e9ecef;
margin: 5px 0;
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
section p {
margin: 10px 0;
font-size: 1.2rem;
}
.highlight {
color: #d9534f;
font-weight: bold;
}
footer {
background-color: #343a40;
color: white;
text-align: center;
padding: 15px;
margin-top: 20px;
footer p {
margin: 0;
}
.cta {
background-color: #0056b3;
background: #ff4500;
color: white;
padding: 10px 20px;
text-align: center;
display: inline-block;
border-radius: 5px;
text-decoration: none;
margin-top: 20px;
border-radius: 5px;
transition: background 0.5s;
}
.cta:hover {
background-color: #004080;
background: #e33d00;
}
/* Responsive */
@media (max-width: 600px) {
header h1 {
font-size: 1.8rem;
}
header h2 {
font-size: 1.2rem;
.cta::before, .cta::after {
content: '';
position: absolute;
width: 0;
height: 2px;
background: white;
transition: 0.5s;
}
.cta::before {
left: 50%;
top: 0;
}
.cta::after {
right: 50%;
bottom: 0;
}
.cta:hover::before, .cta:hover::after {
width: 50%;
}
.highlight {
background: #ff7f50;
color: white;
padding: 5px;
border-radius: 5px;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
nav ul {
flex-direction: column;
align-items: center;
40% {
transform: translateY(-30px);
}
nav ul li {
margin: 5px 0;
60% {
transform: translateY(-15px);
}
}
h1, h2 {
animation: bounce 2s infinite;
}
</style>
</head>
<body>
<header>
<h1>Tournoi de Ping-Pong</h1>
<h2>Organisé par l'année spéciale</h2>
<h2>Rejoignez-nous mardi 11/03 de 12h15 à 13h45</h2>
</header>
<nav>
<ul>
<li><a href="#infos">Infos</a></li>
<li><a href="#format">Format</a></li>
<li><a href="#phases">Phases</a></li>
<li><a href="#inscription">Inscription</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<a href="#infos">Infos</a>
<a href="#inscription">Inscription</a>
<a href="#contact">Contact</a>
</nav>
<section id="infos">
<h2>Informations sur le tournoi</h2>
<p>Le tournoi de Ping-Pong est ouvert à tous les étudiants et enseignants du BUT Informatique.</p>
<p>Rejoignez-nous pour des moments de compétition et de convivialité !</p>
</section>
<section id="format">
<h2>Format du tournoi</h2>
<ul>
<li>Compétition en <span class="highlight">double</span> (équipes de 2 joueurs)</li>
<li>Ouvert à tous les niveaux</li>
<li>Rencontres organisées sur plusieurs semaines</li>
</ul>
</section>
<section id="phases">
<h2>Phases de la compétition</h2>
<ul>
<li><span class="highlight">Phases de poule</span> : semaines du 3 mars et du 10 mars 2025</li>
<li><span class="highlight">Finale</span> : semaine du 24 mars 2025</li>
<li>Matchs entre 12h15 et 13h45 selon les disponibilités</li>
</ul>
<h2>Informations</h2>
<p>Ouvert à tous les étudiants et enseignants du BUT Informatique.</p>
</section>
<section id="inscription">
<h2>Inscription</h2>
<p>Les inscriptions sont ouvertes !</p>
<a href="https://forms.gle/uz9NUsr2wCxzdLMd7" class="cta">S'inscrire</a>
</section>
<section id="contact">
<h2>Contact</h2>
<p>Pour toute question, veuillez contacter l’organisateur :</p>
<p>Email : <a href="mailto:augustin.rouillard@etu.univ-lyon1.fr">augustin.rouillard@etu.univ-lyon1.fr</a></p>
<p>Téléphone : 07 83 48 14 74</p>
</section>
<footer>
<p>&copy; 2024 Tournoi de Ping-Pong - BUT Informatique. Tous droits réservés.</p>
</footer>
<script>
document.querySelectorAll('nav a, .cta').forEach(link => {
link.addEventListener('mouseover', () => {
link.style.transform = 'scale(1.1)';
link.style.transition = 'transform 0.5s';
});
link.addEventListener('mouseout', () => {
link.style.transform = 'scale(1)';
link.style.transition = 'transform 0.5s';
});
});
</script>
<?
// Un message simple en PHP
echo '<p style="color: blue; text-align: center;">Préparez-vous pour le tournoi !</p>';
?>
</body>
</html>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment