Skip to content
Snippets Groups Projects
Commit b6c0aeae authored by romain's avatar romain
Browse files

Ajout d'une page d'acceuil avec images

parent b2923f0b
No related branches found
No related tags found
No related merge requests found
body {
background: linear-gradient(
to bottom,
#F7FF00 0%,
#F9FF26 60%,
#F8FF30 95%,
#FAFF43 100%);
}
h1 {
position: fixed;
top: 0;
width: 500px;
margin-left: 10px;
padding: 10px;
font-family: 'Chewy', cursive;
font-size: 80px;
}
h2 {
position: fixed;
top: 100px;
width: 800px;
margin-left: 720px;
padding: 10px;
font-family: 'Chewy', cursive;
font-size: 80px;
}
h3{
position: fixed;
top: 200px;
margin-left: 660px;
padding: 10px;
font-family: 'Chewy', cursive;
font-size: 80px;
}
.image-slider {
width: 2500px;
overflow: hidden;
margin-left: 0px;
margin-top: 600px;
}
.images {
display: flex;
animation: slide 30s infinite;
}
.images img {
width: 600px;
height: 400px;
flex-shrink: 0;
}
@keyframes slide {
0% { transform: translateX(0); }
33% { transform: translateX(-10%); }
66% { transform: translateX(-16%); }
100% { transform: translateX(0); }
}
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css2.css">
<meta charset="UTF-8">
<title>OUCEQUECE le quizz à ne pas louper</title>
<style>
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
font-size: 23px;
border: none;
border-radius: 20px;
cursor: pointer;
width : 175px;
height: 70px;
font-size: 15;
margin-left: 260px;
}
button:hover {
background-color: #45a049;
}
input[type="text"] {
width: 700px;
height: 85px;
border-radius: 50px;
color: black;
text-align: center;
line-height: 100px;
font-family: sans-serif;
font-size: 35px;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.4);
outline: none;
box-sizing: border-box;
border: none;
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Chewy&display=swap" rel="stylesheet">
</head>
<body>
<h1> OUCÉQUECÉ</h1>
<h2>Quel est ton nom ?</h2>
<h3><form action="/submit-name" method="post">
<input type="text" id="nom" name="nom" required>
<br>
<button type="submit">Envoyer</button>
</form></h3>
<div class="image-slider">
<div class="images">
<img src="paris.jpg" alt="Image 1">
<img src="marseille.jpg" alt="Image 2">
<img src="tokyo.jpg" alt="Image 3">
<img src="perpignan.jpg" alt="Image 4">
</div>
</div>
</body>
</html>
\ No newline at end of file
frontend/marseille.jpg

21.7 KiB

frontend/paris.jpg

1.27 MiB

frontend/perpignan-france.jpg

225 KiB

frontend/perpignan.jpg

640 KiB

frontend/tokyo.jpg

2.61 MiB

0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment