first commit
This commit is contained in:
Val Jenson
79
css/contact-style.css
Normal file
79
css/contact-style.css
Normal file
@@ -0,0 +1,79 @@
|
||||
body {
|
||||
font-family: 'Segoe UI', sans-serif;
|
||||
margin: 0;
|
||||
background-color: #0d0d0d;
|
||||
color: #f0f0f0;
|
||||
}
|
||||
|
||||
.contact-container {
|
||||
padding: 2rem;
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.contact-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 2rem;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.contact-info, .contact-form {
|
||||
flex: 1 1 45%;
|
||||
background-color: #1a1a1a;
|
||||
padding: 2rem;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.contact-info h2, .contact-form h2 {
|
||||
margin-top: 0;
|
||||
color: #7a61b3;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.contact-info a {
|
||||
color: #7a61b3;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.contact-form input, .contact-form textarea {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
margin-top: 1rem;
|
||||
background-color: #2a2a2a;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.contact-form button {
|
||||
margin-top: 1rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
background-color: #7a61b3;
|
||||
border: none;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.map-container {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.map-container h2 {
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
color: #7a61b3;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border-radius: 10px;
|
||||
}
|
||||
10
css/contact.css
Normal file
10
css/contact.css
Normal file
@@ -0,0 +1,10 @@
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: rgb(122, 97, 179);
|
||||
padding: 15px;
|
||||
}
|
||||
0
css/contact.php
Normal file
0
css/contact.php
Normal file
239
css/creator.css
Normal file
239
css/creator.css
Normal file
@@ -0,0 +1,239 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "Josefin Sans", sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background-image: url("../img/cielprince.png");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
.titre-page {
|
||||
text-align: center;
|
||||
|
||||
margin-left: 242px;
|
||||
background-color: rgb(122, 97, 179);
|
||||
padding: 30px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.titre-page h1 {
|
||||
font-size: 2.2rem;
|
||||
margin-bottom: 8px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.titre-page p {
|
||||
font-size: 1.1rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* MESSAGES */
|
||||
.message {
|
||||
padding: 15px;
|
||||
margin: 15px auto 20px 270px;
|
||||
max-width: 800px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.message.success {
|
||||
background: rgba(76, 175, 80, 0.2);
|
||||
color: #4caf50;
|
||||
border: 1px solid rgba(76, 175, 80, 0.4);
|
||||
}
|
||||
|
||||
.message.error {
|
||||
background: rgba(244, 67, 54, 0.2);
|
||||
color: #f44336;
|
||||
border: 1px solid rgba(244, 67, 54, 0.4);
|
||||
}
|
||||
|
||||
|
||||
.bouton-deco {
|
||||
position: absolute;
|
||||
top: 35px;
|
||||
right: 20px;
|
||||
}
|
||||
.bouton-deco a {
|
||||
|
||||
text-decoration: none;
|
||||
padding: 10px 20px;
|
||||
background-color: #d94c4c;
|
||||
color: white;
|
||||
border-radius: 8px;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.bouton-deco a:hover {
|
||||
background-color: #b73838;
|
||||
}
|
||||
|
||||
|
||||
/* CONTENU PRINCIPAL */
|
||||
.main {
|
||||
margin-left: 270px;
|
||||
padding: 20px;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.creator {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr; /*pour avoir 2 colones egale*/
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
/* BOX DE BASE */
|
||||
.box-creation, .box-liste {
|
||||
background-color: rgba(17, 17, 17, 0.8);
|
||||
padding: 25px;
|
||||
border-radius: 15px;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.box-creation h3, .box-liste h3 {
|
||||
color: rgb(122, 97, 179);
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 2px solid rgba(122, 97, 179, 0.3);
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
/* FORMULAIRE */
|
||||
.champ {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.champ label {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
color: rgb(122, 97, 179);
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.champ input, .champ textarea {
|
||||
width: 100%;
|
||||
padding: 12px 15px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.champ input:focus, .champ textarea:focus {
|
||||
outline: none;
|
||||
border-color: rgb(122, 97, 179);
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.champ textarea {
|
||||
resize: vertical;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
/* BOUTON CRÉER */
|
||||
.bouton-creer {
|
||||
width: 100%;
|
||||
background: linear-gradient(135deg, rgb(122, 97, 179), #8b5fbf);
|
||||
color: white;
|
||||
padding: 14px;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
margin-top: 15px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.bouton-creer:hover {
|
||||
transform: translateY(-2px);
|
||||
|
||||
}
|
||||
|
||||
/* LISTE DES ÉVÉNEMENTS */
|
||||
.event-recent {
|
||||
max-height: 450px;
|
||||
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.mini-event {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
padding: 15px;
|
||||
margin-bottom: 12px;
|
||||
border-radius: 10px;
|
||||
border-left: 4px solid rgb(122, 97, 179);
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.mini-event:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.mini-event h4 {
|
||||
color: white;
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.lieu {
|
||||
color: rgb(122, 97, 179);
|
||||
font-weight: bold;
|
||||
margin-bottom: 6px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.4;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.aucun-event {
|
||||
text-align: center;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-style: italic;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* RESPONSIVE */
|
||||
@media (max-width: 1000px) {
|
||||
.creator {
|
||||
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.main {
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.titre-page {
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.message {
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
196
css/event.css
Normal file
196
css/event.css
Normal file
@@ -0,0 +1,196 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "Josefin Sans", sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background: url('../img/cielprince.png') no-repeat center center fixed;
|
||||
background-size: cover;
|
||||
color: white;
|
||||
font-family: 'Josefin Sans', sans-serif;
|
||||
margin: 0;
|
||||
|
||||
}
|
||||
.page-header {
|
||||
margin-top: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.evenement-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
max-width: 800px;
|
||||
margin: auto;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.evenement-card {
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
border-top: 8px solid rgba(122, 97, 179);
|
||||
}
|
||||
|
||||
.evenement-card h3 {
|
||||
color: rgb(122, 97, 179);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.commentaires {
|
||||
margin-top: 20px;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.commentaire {
|
||||
margin-bottom: 15px;
|
||||
padding: 8px;
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
border-radius: 5px;
|
||||
}
|
||||
.commentaires button {
|
||||
margin-top: 10px;
|
||||
padding: 8px 15px;
|
||||
border: none;
|
||||
background-color: #7a61b3;
|
||||
color: white;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* .commentaires-textarea {
|
||||
width: 100% !important;
|
||||
padding: 10px !important;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
resize: vertical;
|
||||
margin-top: 10px;
|
||||
height: 150px !important;
|
||||
font-size: 16px;
|
||||
} */
|
||||
|
||||
.inscrire-btn, .desinscription {
|
||||
background-color: #7a61b3;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
margin-top: 10px;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.inscrire-btn:hover, .desinscription:hover{
|
||||
background-color: #5f4aa3;
|
||||
}
|
||||
|
||||
.message {
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
background-color: rgba(122, 97, 179, 0.2);
|
||||
border-left: 5px solid #7a61b3;
|
||||
border-radius: 6px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
textarea {
|
||||
all: unset; /*reset tout les styles, car y avait un bug je n'arrivai pas modifier son style*/
|
||||
box-sizing: border-box;
|
||||
/* background: white; */
|
||||
color: rgb(255, 255, 255);
|
||||
border: 2px solid rgb(80, 80, 80);
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
font-size: 16px;
|
||||
height: 150px ;
|
||||
resize: vertical;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* Styles pour la barre de recherche */
|
||||
.recherche-form {
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.recherche-input {
|
||||
padding: 10px;
|
||||
width: 300px;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.recherche-btn {
|
||||
padding: 10px 15px;
|
||||
background-color: #7a61b3;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.recherche-btn:hover {
|
||||
background-color: #5f4aa3;
|
||||
}
|
||||
|
||||
.effacer-link {
|
||||
margin-left: 10px;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.effacer-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Styles spécifiques pour la désinscription */
|
||||
.desinscription {
|
||||
background-color: #dc3545 ;
|
||||
}
|
||||
|
||||
.desinscription:hover {
|
||||
background-color: #c82333 ;
|
||||
}
|
||||
|
||||
/* Messages d'alerte adaptés au thème */
|
||||
.message.success {
|
||||
background-color: rgba(40, 167, 69, 0.2);
|
||||
color: rgb(0, 255, 221);
|
||||
border-left: 5px solid #28a745;
|
||||
padding: 10px;
|
||||
margin: 20px auto;
|
||||
max-width: 800px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.message.error {
|
||||
background-color: rgba(220, 53, 69, 0.2);
|
||||
color: #ff6b6b;
|
||||
border-left: 5px solid #dc3545;
|
||||
padding: 10px;
|
||||
margin: 20px auto;
|
||||
max-width: 800px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* Style pour aucun événement */
|
||||
.aucun-evenement {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.aucun-evenement p {
|
||||
color: white;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.aucun-evenement a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
141
css/login.css
Normal file
141
css/login.css
Normal file
@@ -0,0 +1,141 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "Josefin Sans", sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background-image: url('../img/cielprince.png');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
header{
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
header button{
|
||||
padding: 20px;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
font-size: 20px;
|
||||
transition: 0.2s;
|
||||
color: white;
|
||||
border: 0;
|
||||
|
||||
|
||||
}
|
||||
|
||||
header button:hover{
|
||||
background-color: rgb(122, 97, 179,0.5);
|
||||
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
section {
|
||||
|
||||
padding: 30px;
|
||||
width: 420px;
|
||||
/* border-radius: 20px;
|
||||
background-color: rgb(122, 97, 179,0.2);
|
||||
|
||||
border: 2px solid rgba(255, 255, 255, 0.2); */
|
||||
|
||||
}
|
||||
|
||||
section h2{
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
margin-bottom: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
/* rentrer les informations */
|
||||
.box {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.box input {
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
background-color: transparent;
|
||||
border: 2px solid white;
|
||||
color: white;
|
||||
outline: none;
|
||||
padding-right: 45px;
|
||||
}
|
||||
|
||||
|
||||
.box input::placeholder{
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* icon */
|
||||
.box i {
|
||||
position: absolute;
|
||||
right: 900px;
|
||||
margin-top: 15px;
|
||||
color: white;
|
||||
|
||||
}
|
||||
/* -------------------------- */
|
||||
|
||||
|
||||
.souvenir{
|
||||
color: white;
|
||||
margin-bottom: 20px;
|
||||
|
||||
}
|
||||
|
||||
.but1{
|
||||
width: 100%;
|
||||
border-radius: 20px;
|
||||
border: 0;
|
||||
padding: 15px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
.but1:hover{
|
||||
background-color: transparent;
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.inscrire{
|
||||
text-align: center;
|
||||
margin-top: 25px;
|
||||
color: white;
|
||||
|
||||
}
|
||||
|
||||
.inscrire a{
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
transition: 0.2s;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.inscrire a:hover{
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.message {
|
||||
color: rgb(117, 117, 117);
|
||||
text-align: center;
|
||||
}
|
||||
208
css/main.css
Normal file
208
css/main.css
Normal file
@@ -0,0 +1,208 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background: url('../img/cielprince.png') no-repeat center center fixed;
|
||||
background-size: cover;
|
||||
color: white;
|
||||
font-family: 'Josefin Sans', sans-serif;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Section hero */
|
||||
.hero {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
background: linear-gradient(rgba(0,0,0,0.3), rgba(107, 91, 149, 0.2));
|
||||
}
|
||||
|
||||
.hero-content h1 {
|
||||
font-size: 4rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.hero-content h2 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 400;
|
||||
color: #c9b8e0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.hero-content p {
|
||||
font-size: 1.3rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* Contenu principal */
|
||||
.main-content {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
padding: 60px 30px;
|
||||
}
|
||||
|
||||
/* Section mission */
|
||||
.mission {
|
||||
background: rgba(157, 143, 190, 0.15);
|
||||
padding: 50px;
|
||||
border-radius: 20px;
|
||||
margin-bottom: 60px;
|
||||
text-align: center;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(157, 143, 190, 0.3);
|
||||
}
|
||||
|
||||
.mission h3 {
|
||||
font-size: 2.2rem;
|
||||
color: #c9b8e0;
|
||||
margin-bottom: 25px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.mission p {
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.8;
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
/* Services */
|
||||
.services {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 30px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.service {
|
||||
background: rgba(157, 143, 190, 0.1);
|
||||
padding: 35px;
|
||||
border-radius: 15px;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid rgba(157, 143, 190, 0.2);
|
||||
}
|
||||
|
||||
.service:hover {
|
||||
background: rgba(157, 143, 190, 0.2);
|
||||
transform: translateY(-5px);
|
||||
|
||||
}
|
||||
|
||||
.service-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.service h4 {
|
||||
font-size: 1.5rem;
|
||||
color: #c9b8e0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.service p {
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* Section inscription */
|
||||
.inscription {
|
||||
background: rgba(107, 91, 149, 0.2);
|
||||
padding: 50px;
|
||||
border-radius: 20px;
|
||||
text-align: center;
|
||||
border: 1px solid rgba(107, 91, 149, 0.4);
|
||||
}
|
||||
|
||||
.inscription h3 {
|
||||
font-size: 2rem;
|
||||
color: #c9b8e0;
|
||||
margin-bottom: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.inscription p {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 30px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
background: linear-gradient(135deg, #9d8fbe, #6b5b95);
|
||||
color: white;
|
||||
padding: 15px 35px;
|
||||
border-radius: 30px;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 5px 15px rgba(107, 91, 149, 0.3);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 8px 25px rgba(107, 91, 149, 0.4);
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.bas-de-page {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
text-align: center;
|
||||
padding: 25px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.bas-de-page p {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.hero-content h1 {
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
|
||||
.hero-content h2 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.mission,
|
||||
.inscription {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.services {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.service-header {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Compatibilité */
|
||||
p, h2, h3 {
|
||||
color: aliceblue;
|
||||
}
|
||||
75
css/menunav-inv.css
Normal file
75
css/menunav-inv.css
Normal file
@@ -0,0 +1,75 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');
|
||||
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "Josefin Sans", sans-serif;
|
||||
}
|
||||
|
||||
/* header */
|
||||
|
||||
header{
|
||||
background-color: rgb(122, 97, 179);
|
||||
padding: 25px;
|
||||
|
||||
}
|
||||
|
||||
header div{
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
header img{
|
||||
margin-right: 20px;
|
||||
|
||||
}
|
||||
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* navigation */
|
||||
|
||||
nav.menu ul li{
|
||||
list-style-type:none ;
|
||||
display: inline-block;
|
||||
}
|
||||
nav.menu ul li a{
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
background-color: rgb(122, 97, 179);
|
||||
padding: 15px;
|
||||
padding-left: 100px;
|
||||
padding-bottom: 35px;
|
||||
border-bottom: 8px solid rgb(98, 59, 190);
|
||||
width: 100%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
nav.menu ul li:hover a{
|
||||
color: white;
|
||||
background-color: rgb(164, 146, 206);
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
div.connexion {
|
||||
margin-left : 350px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
div.connexion button{
|
||||
color: white;
|
||||
background-color: black;
|
||||
outline: none;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
div.connexion button:hover{
|
||||
transition: 0.2s;
|
||||
cursor: pointer;
|
||||
background-color: rgb(56, 56, 56);
|
||||
}
|
||||
84
css/menunav-user.css
Normal file
84
css/menunav-user.css
Normal file
@@ -0,0 +1,84 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');
|
||||
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "Josefin Sans", sans-serif;
|
||||
}
|
||||
|
||||
header{
|
||||
background-color: rgb(122, 97, 179);
|
||||
padding: 25px;
|
||||
|
||||
}
|
||||
|
||||
header div{
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
header img{
|
||||
margin-right: 20px;
|
||||
|
||||
}
|
||||
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
/* navigation */
|
||||
nav.menu-nav ul li{
|
||||
list-style-type:none ;
|
||||
display: inline-block;
|
||||
}
|
||||
nav.menu-nav ul li a{
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
background-color: rgb(122, 97, 179);
|
||||
padding: 15px;
|
||||
padding-left: 100px;
|
||||
padding-bottom: 35px;
|
||||
border-bottom: 8px solid rgb(98, 79, 145);
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
nav.menu-nav ul li:hover a{
|
||||
color: white;
|
||||
background-color: rgb(164, 146, 206);
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
div.profil {
|
||||
margin-left: 300px;
|
||||
}
|
||||
div.profil button{
|
||||
color: white;
|
||||
background-color: rgb(98, 79, 145);
|
||||
outline: none;
|
||||
padding: 10px 25px;
|
||||
|
||||
border-radius: 10px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
div.profil button:hover{
|
||||
transition: 0.2s;
|
||||
cursor: pointer;
|
||||
background-color: rgb(54, 44, 80);
|
||||
}
|
||||
|
||||
div.deco button{
|
||||
color: white;
|
||||
background-color: #d94c4c;
|
||||
outline: none;
|
||||
padding: 10px 25px;
|
||||
|
||||
border-radius: 10px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
div.deco button:hover{
|
||||
transition: 0.2s;
|
||||
cursor: pointer;
|
||||
background-color: #b73838;
|
||||
}
|
||||
213
css/my_event.css
Normal file
213
css/my_event.css
Normal file
@@ -0,0 +1,213 @@
|
||||
/* Reprendre le style de event.css mais adapté */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Arial', sans-serif;
|
||||
background: #0a0a0a;
|
||||
color: #ffffff;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Header identique */
|
||||
header {
|
||||
background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
|
||||
padding: 1rem 0;
|
||||
text-align: center;
|
||||
border-bottom: 2px solid #333;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
text-shadow: 0 0 30px rgba(255, 107, 107, 0.5);
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
padding: 0.7rem 1.5rem;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 25px;
|
||||
transition: all 0.3s ease;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
nav a:hover,
|
||||
nav a.active {
|
||||
border-color: #4ecdc4;
|
||||
background: rgba(78, 205, 196, 0.2);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(78, 205, 196, 0.3);
|
||||
}
|
||||
|
||||
nav span {
|
||||
color: #4ecdc4;
|
||||
padding: 0.7rem 1.5rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Titre principal */
|
||||
.grand-titre {
|
||||
text-align: center;
|
||||
margin: 3rem 0;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.grand-titre h2 {
|
||||
font-size: 2.5rem;
|
||||
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Messages */
|
||||
.message {
|
||||
padding: 1rem 2rem;
|
||||
margin: 1rem auto;
|
||||
max-width: 600px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.message.success {
|
||||
background: rgba(40, 167, 69, 0.2);
|
||||
border: 2px solid #28a745;
|
||||
color: #4ecdc4;
|
||||
box-shadow: 0 5px 20px rgba(40, 167, 69, 0.3);
|
||||
}
|
||||
|
||||
.message.error {
|
||||
background: rgba(220, 53, 69, 0.2);
|
||||
border: 2px solid #dc3545;
|
||||
color: #ff6b6b;
|
||||
box-shadow: 0 5px 20px rgba(220, 53, 69, 0.3);
|
||||
}
|
||||
|
||||
/* Container des événements */
|
||||
.evenements {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
/* Style des cartes d'événements */
|
||||
.evenement {
|
||||
background: linear-gradient(145deg, #1a1a1a, #2d2d2d);
|
||||
border: 2px solid #333;
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
position: relative;
|
||||
transition: all 0.4s ease;
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.evenement:hover {
|
||||
transform: translateY(-10px) scale(1.02);
|
||||
border-color: #4ecdc4;
|
||||
box-shadow: 0 20px 40px rgba(78, 205, 196, 0.2);
|
||||
}
|
||||
|
||||
.evenement::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
|
||||
border-radius: 20px 20px 0 0;
|
||||
}
|
||||
|
||||
.evenement h3 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #4ecdc4;
|
||||
text-shadow: 0 0 10px rgba(78, 205, 196, 0.5);
|
||||
}
|
||||
|
||||
.evenement .adresse {
|
||||
color: #ff6b6b;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.evenement .description {
|
||||
color: #cccccc;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 2rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* Actions */
|
||||
.actions {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-inscription {
|
||||
display: inline-block;
|
||||
padding: 1rem 2rem;
|
||||
background: linear-gradient(45deg, #dc3545, #c82333);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 25px;
|
||||
font-weight: bold;
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid transparent;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.btn-inscription:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 10px 25px rgba(220, 53, 69, 0.4);
|
||||
border-color: #dc3545;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Message aucun événement */
|
||||
.aucun-evenement {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
}
|
||||
|
||||
.aucun-evenement p {
|
||||
font-size: 1.2rem;
|
||||
color: #cccccc;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.aucun-evenement .btn-inscription {
|
||||
background: linear-gradient(45deg, #4ecdc4, #45b7b8);
|
||||
}
|
||||
|
||||
.aucun-evenement .btn-inscription:hover {
|
||||
box-shadow: 0 10px 25px rgba(78, 205, 196, 0.4);
|
||||
border-color: #4ecdc4;
|
||||
}
|
||||
298
css/profil.css
Normal file
298
css/profil.css
Normal file
@@ -0,0 +1,298 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');
|
||||
|
||||
* {
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "Josefin Sans", sans-serif;
|
||||
}
|
||||
|
||||
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
}
|
||||
|
||||
body {
|
||||
background: url('../img/cielprince.png') no-repeat center center fixed;
|
||||
background-size: cover;
|
||||
color: white;
|
||||
font-family: 'Josefin Sans', sans-serif;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.grand-titre {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
margin-left: 233px;
|
||||
/* background-color: rgba(255, 255, 255, 0.1); */
|
||||
background-color: rgb(122, 97, 179);
|
||||
padding: 30px;
|
||||
|
||||
}
|
||||
|
||||
.grand-titre h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 10px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.grand-titre p {
|
||||
font-size: 1.2rem;
|
||||
opacity: 0.8;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* navigation */
|
||||
|
||||
.menu {
|
||||
position: fixed;
|
||||
top:0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
background-color: rgb(32, 32, 32);
|
||||
padding-top: 100px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.menu img{
|
||||
margin-left: 25px;
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.menu a{
|
||||
|
||||
text-decoration: none;
|
||||
|
||||
}
|
||||
.menu ul .but1 {
|
||||
list-style-type: none;
|
||||
margin-top: 50px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.menu ul .but1 a{
|
||||
color: white;
|
||||
width: 100%;
|
||||
padding: 20px 40px;
|
||||
text-decoration: none;
|
||||
width: 50%;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.menu ul .but1 a:hover{
|
||||
background-color: rgb(53, 53, 53);
|
||||
}
|
||||
/* déco */
|
||||
.but2 a {
|
||||
|
||||
text-decoration: none;
|
||||
padding: 10px 20px;
|
||||
|
||||
background-color: #d94c4c;
|
||||
color: white;
|
||||
border-radius: 8px;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.but2 a:hover {
|
||||
background-color: #b73838;
|
||||
}
|
||||
|
||||
.but2 {
|
||||
position: absolute;
|
||||
top: 35px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
/* PROFIL */
|
||||
|
||||
|
||||
.profile {
|
||||
|
||||
|
||||
max-width: 800px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.profile-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 40px;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
padding: 30px;
|
||||
border-radius: 15px;
|
||||
backdrop-filter: blur(10px);
|
||||
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
background-color: rgb(122, 97, 179);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
margin-right: 25px;
|
||||
}
|
||||
|
||||
.nom h2 {
|
||||
font-size: 28px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.pseudo {
|
||||
opacity: 0.7;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.profile-info {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.section {
|
||||
background-color: rgba(17, 17, 17, 0.7);
|
||||
padding: 25px;
|
||||
border-radius: 15px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.section h3 {
|
||||
color: rgb(122, 97, 179);
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 2px solid rgba(122, 97, 179, 0.3);
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 15px;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.info label {
|
||||
font-weight: 600;
|
||||
color: rgb(122, 97, 179);
|
||||
}
|
||||
|
||||
.info p {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* Disposition en deux colonnes */
|
||||
.profil-section {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
max-width: 1200px;
|
||||
margin-left: 250px; /* Pour éviter le menu */
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.profile-info{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.profil-section .profile {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Styles pour les champs de formulaire */
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
color: #a17df5;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group textarea:focus {
|
||||
outline: none;
|
||||
border-color: #a17df5;
|
||||
}
|
||||
|
||||
.btn-modifier {
|
||||
width: 100%;
|
||||
background: linear-gradient(135deg, #a17df5, #8b5fbf);
|
||||
color: white;
|
||||
padding: 12px;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.btn-modifier:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Messages */
|
||||
.message-alert {
|
||||
padding: 10px;
|
||||
margin: 20px auto 20px 270px; /* top right bottom left */
|
||||
max-width: 800px;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.message-alert.success {
|
||||
background: rgba(76, 175, 80, 0.2);
|
||||
color: rgb(39, 173, 39);
|
||||
border: 1px solid rgba(76, 175, 80, 0.3);
|
||||
}
|
||||
|
||||
.message-alert.error {
|
||||
background: rgba(244, 67, 54, 0.2);
|
||||
color: rgb(216, 52, 40);
|
||||
border: 1px solid rgba(244, 67, 54, 0.3);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.profil-wrapper {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
115
css/register.css
Normal file
115
css/register.css
Normal file
@@ -0,0 +1,115 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "Josefin Sans", sans-serif;
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
background-image: url('../img/cielprince.png');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
header{
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
header button{
|
||||
padding: 20px;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
font-size: 20px;
|
||||
transition: 0.2s;
|
||||
color: white;
|
||||
border: 0;
|
||||
|
||||
}
|
||||
|
||||
header button:hover{
|
||||
background-color: rgb(122, 97, 179,0.2);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
section {
|
||||
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
margin-bottom: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* rentrer les informations */
|
||||
.box {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.info {
|
||||
display:inline-flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.box input {
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
background-color: transparent;
|
||||
border: 2px solid white;
|
||||
color: white;
|
||||
outline: none;
|
||||
padding-right: 45px;
|
||||
}
|
||||
|
||||
|
||||
.box input::placeholder{
|
||||
color: white;
|
||||
}
|
||||
|
||||
.box i {
|
||||
position: absolute;
|
||||
right: 790px;
|
||||
margin-top: 15px;
|
||||
color: white;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* -------------------------- */
|
||||
|
||||
.but1 {
|
||||
width: 100%;
|
||||
border-radius: 20px;
|
||||
border: 0;
|
||||
padding: 15px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
border: 2px solid transparent;
|
||||
margin-bottom: 15px;
|
||||
margin-top: 15px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.but1:hover {
|
||||
background-color: transparent;
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user