style du formulaire
This commit is contained in:
Pontoporeia
160
formulaire.html
160
formulaire.html
@@ -15,105 +15,105 @@
|
||||
<a href="index.html">Mémoire post-ERG / A life after ERG</a>
|
||||
<div class="menu">
|
||||
<div class="menu-content">
|
||||
<input type="search" name="search" placeholder="Recherche..." button class="boutton boutton1"></input>
|
||||
<a href="formulaire.html" button class="boutton boutton1">Partager un mémoire</a>
|
||||
<a href="apropos.html" button class="boutton boutton1">À propos</a>
|
||||
<a href="contact.html" button class="boutton boutton1">Contact</a>
|
||||
<a href="licences.html" button class="boutton boutton1">Licences</a>
|
||||
<input type="search" name="search" placeholder="Recherche..." button class="button"></input>
|
||||
<a href="formulaire.html" button class="button">Partager un mémoire</a>
|
||||
<a href="apropos.html" button class="button">À propos</a>
|
||||
<a href="contact.html" button class="button">Contact</a>
|
||||
<a href="licences.html" button class="button">Licences</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- CONTENU PAGE -->
|
||||
<div id="page_content">
|
||||
|
||||
<h3>Partager son mémoire</h3>
|
||||
<form action=" partager.php" method="get">
|
||||
|
||||
<div class="button">
|
||||
<label>Votre nom/prénom/pseudo</label>
|
||||
<input type="text" name="nom" placeholder="...">
|
||||
</div>
|
||||
<h3>Partager son mémoire</h3>
|
||||
<form action=" partager.php" method="get">
|
||||
|
||||
<div class="boutton">
|
||||
<label>Année diplômante (2020, 2021, ...)</label>
|
||||
<input type="text" name="année" placeholder="...">
|
||||
</div>
|
||||
<div class="button">
|
||||
<label>Votre nom/prénom/pseudo</label>
|
||||
<input type="text" name="nom" placeholder="...">
|
||||
</div>
|
||||
|
||||
<div class="boutton">
|
||||
<label>Contact : mail, insta, ...</label>
|
||||
<input type="email" name="mail" placeholder="Votre contact">
|
||||
</div>
|
||||
<div class="button">
|
||||
<label>Année diplômante (2020, 2021, ...)</label>
|
||||
<input type="text" name="année" placeholder="...">
|
||||
</div>
|
||||
|
||||
<div class="boutton">
|
||||
<label>Titre du mémoire</label>
|
||||
<input type="titre" name="mémoire" placeholder="...">
|
||||
</div>
|
||||
<div class="button">
|
||||
<label>Contact : mail, insta, ...</label>
|
||||
<input type="email" name="mail" placeholder="Votre contact">
|
||||
</div>
|
||||
|
||||
<div class="boutton">
|
||||
<label>Tag/mots-clefs sur le mémoire</label>
|
||||
<input type="text" name="tag" placeholder="typographie, photographie, outils libre, post-colonial,..">
|
||||
</div>
|
||||
<div class="button">
|
||||
<label>Titre du mémoire</label>
|
||||
<input type="titre" name="mémoire" placeholder="...">
|
||||
</div>
|
||||
|
||||
<div class="boutton">
|
||||
<label>Promoteur.rice</label>
|
||||
<input type="text" name="nom" placeholder="nom/prénom/pseudo">
|
||||
</div>
|
||||
<div class="button">
|
||||
<label>Tag/mots-clefs sur le mémoire</label>
|
||||
<input type="text" name="tag" placeholder="typographie, photographie, outils libre, post-colonial,..">
|
||||
</div>
|
||||
|
||||
<div class="boutton">
|
||||
<label>Problématique</label>
|
||||
<input type="text" name="problématique" placeholder="...">
|
||||
</div>
|
||||
<div class="button">
|
||||
<label>Promoteur.rice</label>
|
||||
<input type="text" name="nom" placeholder="nom/prénom/pseudo">
|
||||
</div>
|
||||
|
||||
<div class="boutton">
|
||||
<label>Résumé en quelque lignes</label>
|
||||
<input type="text" name="résumé" placeholder="...">
|
||||
</div>
|
||||
<div class="button">
|
||||
<label>Problématique</label>
|
||||
<input type="text" name="problématique" placeholder="...">
|
||||
</div>
|
||||
|
||||
<div class="boutton">
|
||||
<label>Orientation principale</label>
|
||||
<select name="Orientation">
|
||||
<option value="typographie">Typographie</option>
|
||||
<option value="graphisme">Graphisme</option>
|
||||
<option value="designnumérique">Design Numérique</option>
|
||||
<option value="Cinéma d'animation">Cinéma d'animation</option>
|
||||
<option value="Illustration">Illustration</option>
|
||||
<option value="BD">Bande dessinée</option>
|
||||
<option value="Photographie">Photographie</option>
|
||||
<option value="Vidéographie">Vidéographie</option>
|
||||
<option value="Sculpture">Sculpture</option>
|
||||
<option value="Peinture">Peinture</option>
|
||||
<option value="Art numérique">Art numérique</option>
|
||||
<option value="Vidéographie">Vidéographie</option>
|
||||
<option value="Photographie">Photographie</option>
|
||||
<option value="Dessin">Dessin</option>
|
||||
<option value="Installation performance">Installation performance</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="button">
|
||||
<label>Résumé en quelque lignes</label>
|
||||
<input type="text" name="résumé" placeholder="...">
|
||||
</div>
|
||||
|
||||
<div class="boutton">
|
||||
<label>Atelier Pratique</label>
|
||||
<select name="AP">
|
||||
<option value="DPM">Design et politique du multiple</option>
|
||||
<option value="APS">Art et pratique situé</option>
|
||||
<option value="R&E">Récits et expérimentation</option>
|
||||
<option value="PAOC">Pratique de l'art et outils critiques</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="button">
|
||||
<label>Orientation principale</label>
|
||||
<select name="Orientation">
|
||||
<option value="typographie">Typographie</option>
|
||||
<option value="graphisme">Graphisme</option>
|
||||
<option value="designnumérique">Design Numérique</option>
|
||||
<option value="Cinéma d'animation">Cinéma d'animation</option>
|
||||
<option value="Illustration">Illustration</option>
|
||||
<option value="BD">Bande dessinée</option>
|
||||
<option value="Photographie">Photographie</option>
|
||||
<option value="Vidéographie">Vidéographie</option>
|
||||
<option value="Sculpture">Sculpture</option>
|
||||
<option value="Peinture">Peinture</option>
|
||||
<option value="Art numérique">Art numérique</option>
|
||||
<option value="Vidéographie">Vidéographie</option>
|
||||
<option value="Photographie">Photographie</option>
|
||||
<option value="Dessin">Dessin</option>
|
||||
<option value="Installation performance">Installation performance</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="boutton">
|
||||
<label>Formats de fichiers de mémoire</label>
|
||||
<input type="text" name="tag" placeholder="png, jpeg, pdf, mp3, html,... ">
|
||||
</div>
|
||||
<div class="button">
|
||||
<label>Atelier Pratique</label>
|
||||
<select name="AP">
|
||||
<option value="DPM">Design et politique du multiple</option>
|
||||
<option value="APS">Art et pratique situé</option>
|
||||
<option value="R&E">Récits et expérimentation</option>
|
||||
<option value="PAOC">Pratique de l'art et outils critiques</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="boutton">
|
||||
<label>Importer les divers fichers de son mémoire</label>
|
||||
<input type="text" name="upload" placeholder="upload ">
|
||||
</div>
|
||||
<div class="button">
|
||||
<label>Formats de fichiers de mémoire</label>
|
||||
<input type="text" name="tag" placeholder="png, jpeg, pdf, mp3, html,... ">
|
||||
</div>
|
||||
|
||||
<div class="boutton boutton1">
|
||||
<input type="submit" name="go" value="envoyer">
|
||||
</div>
|
||||
<div class="button">
|
||||
<label>Importer les divers fichers de son mémoire</label>
|
||||
<input type="text" name="upload" placeholder="upload ">
|
||||
</div>
|
||||
|
||||
<div id="enter"class="button">
|
||||
<input type="submit" name="go" value="envoyer">
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
89
style.css
89
style.css
@@ -5,10 +5,17 @@
|
||||
|
||||
body {
|
||||
background-color: white;
|
||||
/* overflow-x: hidden; */
|
||||
/* width: 100%; */
|
||||
}
|
||||
|
||||
/* PARAMÈTRE DE BASE DE BOUTTON */
|
||||
.button {
|
||||
margin: 0;
|
||||
width: auto;
|
||||
padding: 0.8rem;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
|
||||
/* ENTÊTE */
|
||||
header {
|
||||
z-index: 10000;
|
||||
@@ -44,46 +51,73 @@
|
||||
width: 100vw;
|
||||
left: 0;
|
||||
background-color: white;
|
||||
background: linear-gradient(0deg, rgba(2,0,36,0) 0%, rgba(255,255,255,1) 40%);
|
||||
background: linear-gradient(0deg, rgba(2, 0, 36, 0) 0%, rgba(255, 255, 255, 1) 40%);
|
||||
}
|
||||
|
||||
.menu-content{
|
||||
.menu-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
/* align-items: flex; */
|
||||
/* margin-top: 8vh; */
|
||||
padding: 2rem;
|
||||
gap: 1rem;
|
||||
/* align-self: flex-start; */
|
||||
|
||||
}
|
||||
|
||||
.boutton {
|
||||
margin: 0;
|
||||
width: auto;
|
||||
padding: 0.8rem;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font-size: 0.8rem;
|
||||
font-family: police1;
|
||||
transition-duration: 0.4s;
|
||||
cursor: pointer;
|
||||
border-radius: 16px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.boutton1 {
|
||||
header .button {
|
||||
background-color: none;
|
||||
color: rgb(193, 4, 252);
|
||||
border: 1px solid rgb(193, 4, 252);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font-size: 0.8rem;
|
||||
transition-duration: 0.4s;
|
||||
cursor: pointer;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.boutton1:hover {
|
||||
header input {
|
||||
font-family: police1;
|
||||
}
|
||||
|
||||
header .button:hover {
|
||||
background-color: rgb(193, 4, 252);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* FORMULAIRE */
|
||||
|
||||
form label {
|
||||
font-family: police1;
|
||||
font-size: 1rem;
|
||||
}
|
||||
form input{
|
||||
position: relative;
|
||||
border-color: #c104fc;
|
||||
border-radius: 5px;
|
||||
border-style: solid;
|
||||
margin: 1rem;
|
||||
padding: 0.5rem;
|
||||
width: auto;
|
||||
overflow:visible;
|
||||
}
|
||||
|
||||
form select{
|
||||
position: relative;
|
||||
border-color: #c104fc;
|
||||
border-radius: 5px;
|
||||
border-style: solid;
|
||||
margin: 1rem;
|
||||
padding: 0.5rem;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#enter input{
|
||||
font-family: police1;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
padding: 1.2rem;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
/* CONTENUS DE LA PAGE */
|
||||
#page_content {
|
||||
position: relative;
|
||||
@@ -96,7 +130,7 @@
|
||||
}
|
||||
|
||||
/* GRILLE */
|
||||
.grid-section{
|
||||
.grid-section {
|
||||
position: relative;
|
||||
/* display: block; */
|
||||
/* position: fixed; */
|
||||
@@ -122,4 +156,9 @@
|
||||
grid-column: 5 / 5;
|
||||
grid-row: 1 / 12;
|
||||
background-color: #4da870;
|
||||
}
|
||||
|
||||
form .boutton {
|
||||
position: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
Reference in New Issue
Block a user