DjalimSimaila/dontmeetme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

index.php w3c

Browse Source
This commit is contained in:
itrooz 2021-11-20 19:19:48 +01:00
parent 374db08a13
commit 99337bdcd0
No known key found for this signature in database
GPG Key ID: DE9A7704072EDD89
5 changed files with 47 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
footer.php
View File

@ -7,10 +7,10 @@
<input id="send" type="submit" value="Envoyer">
</form>
</section>
<section id="rightfoot">
<div id="rightfoot">
<ul>
<li><a href="mentions.php">Mentions légales</a></li>
<li><a href="contact.php">Qui sommes nous</a></li>
</ul>
</section>
</div>
</footer>

41
header.php
View File

@ -5,28 +5,25 @@
?>
<header>
<section id="buttonSec">
<div id="buttonSec">
<button type="button" onclick="switchTheme()">Click Me!</button>
</section>
<section id="title">
</div>
<div id="title">
<img src="img/logo.png" alt="Logo don't meet me" id="logo">
</section>
<section>
<nav>
<a href="#" class="burger_button" onclick="menu()">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar_links hide">
<ul>
<li><a href="index.php">Accueil</a></li>
<li><a href="for.php?gender=man">Trouve un homme !</a></li>
<li><a href="for.php?gender=woman">Trouve une femme ! </a></li>
<li><a href="contact.php">Qui sommes nous</a></li>
</li>
</ul>
</div>
</nav>
</section>
</div>
<nav>
<a href="#" class="burger_button" onclick="menu()">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar_links hide">
<ul>
<li><a href="index.php">Accueil</a></li>
<li><a href="for.php?gender=man">Trouve un homme !</a></li>
<li><a href="for.php?gender=woman">Trouve une femme ! </a></li>
<li><a href="contact.php">Qui sommes nous</a></li>
</ul>
</div>
</nav>
</header>

38
index.php
View File

@ -19,9 +19,11 @@
<div id="fade"></div>
<?php include("header.php") ?>
<main>
<h1>Rencontrez une personne qui vous correspond !</h1>
<p id="intropage">Nous avons eu l'idée de proposer un service où hommes et femmes peuvent communiquer afin de se rencontrer. Grâce à notre système de sélection simple et rapide, trouvez votre Roméo ou votre Juliette. Cliquez en dessous pour commencer l'aventure don't meet me !</p>
<section id="makeachoicehf">
<section>
<h1>Rencontrez une personne qui vous correspond !</h1>
<p id="intropage">Nous avons eu l'idée de proposer un service où hommes et femmes peuvent communiquer afin de se rencontrer. Grâce à notre système de sélection simple et rapide, trouvez votre Roméo ou votre Juliette. Cliquez en dessous pour commencer l'aventure don't meet me !</p>
<div id="makeachoicehf">
<a href="for.php?gender=woman" class="tuile">
<img src="img/woman.jpeg" alt="image femme" class="imgbouton">
<p>Trouver une femme</p>
@ -30,6 +32,7 @@
<img src="img/man.jpg" alt="image homme" class="imgbouton">
<p>Trouver un homme</p>
</a>
</div>
</section>
<section id="whydmm">
<h2 id="whydmmtitle">Pourquoi Don't meet me ?</h2>
@ -41,19 +44,22 @@
De plus ceci permet d'éviter l'harcèlement présent sur de nombreux sites, la personne entre en contact avec vous uniquement si vous l'acceptez sur la plateforme. <br/><strong>Mais évidemment, notre sélection ne se trompe jamais. ;)</strong>
</p>
</section>
<section id="comments">
<figure>
<img class="avis" src="img/avis1.jpeg" alt="image femme avis 1">
<figcaption class="caption">DMM m'a permis de rencontrer l'homme de ma vie. Le principe de sélection m'a semblé très pertinant et vous évite de devoir chercher pendant de longues heures !<br/>Juliette Artois</figcaption>
</figure>
<figure>
<img class="avis" src="img/avis2.jpg" alt="image femme avis 2">
<figcaption class="caption">Je trouve le principe très simple et rapide. En suivant la section qui vous correspond vous trouvez UNE personne qui vous correspond, contrairement à d'autres sites... Je ne peux que dire oui !</br>Elise David</figcaption>
</figure>
<figure>
<img class="avis" src="img/avis3.jpeg" alt="image homme avis 3">
<figcaption class="caption">Bien que le questionnaire à remplir soit original, la rencontre avec mon "Don't meet" s'est déroulée avec succès. La satisfaction est totale.<br/>Julien Martin</figcaption>
</figure>
<section>
<h2 id="comments_head"> Commentaires </h2>
<div id="comments">
<figure>
<img class="avis" src="img/avis1.jpeg" alt="image femme avis 1">
<figcaption class="caption">DMM m'a permis de rencontrer l'homme de ma vie. Le principe de sélection m'a semblé très pertinant et vous évite de devoir chercher pendant de longues heures !<br/>Juliette Artois</figcaption>
</figure>
<figure>
<img class="avis" src="img/avis2.jpg" alt="image femme avis 2">
<figcaption class="caption">Je trouve le principe très simple et rapide. En suivant la section qui vous correspond vous trouvez UNE personne qui vous correspond, contrairement à d'autres sites... Je ne peux que dire oui !<br/>Elise David</figcaption>
</figure>
<figure>
<img class="avis" src="img/avis3.jpeg" alt="image homme avis 3">
<figcaption class="caption">Bien que le questionnaire à remplir soit original, la rencontre avec mon "Don't meet" s'est déroulée avec succès. La satisfaction est totale.<br/>Julien Martin</figcaption>
</figure>
</div>
</section>
</main>
<?php include("footer.php") ?>

4
styles/today/index.css
View File

@ -54,6 +54,10 @@ p{
color: black;
}
#comments_head{
text-align: center;
}
#whydmmtitle{
padding-right: 2rem;
padding-left: 2rem;

60
test.html
View File

@ -1,60 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div>
<span id="fade_in">Fade In</span> |
<span id="fade_out">Fade Out</span></div>
<div id="fading_div" style="display:none;height:100px;background:#f00">Fading Box</div>
</div>
</div>
<script type="text/javascript">
// global varibles
var done = true,
fading_div = document.getElementById('fading_div'),
fade_in_button = document.getElementById('fade_in'),
fade_out_button = document.getElementById('fade_out');
function function_opacity(opacity_value, fade_in_or_fade_out) { // fade_in_or_out - 0 = fade in, 1 = fade out
fading_div.style.opacity = opacity_value / 100;
fading_div.style.filter = 'alpha(opacity=' + opacity_value + ')';
if (fade_in_or_fade_out == 'in' && opacity_value == 1) {
fading_div.style.display = 'block';
}
if (fade_in_or_fade_out == 'in' && opacity_value == 100) {
done = true;
}
if (fade_in_or_fade_out == 'out' && opacity_value == 1) {
fading_div.style.display = 'none';
done = true;
}
}
// fade in button
fade_in_button.onclick = function () {
if (done && fading_div.style.opacity !== '1') {
done = false;
for (var i = 1; i <= 100; i++) {
setTimeout("function_opacity(" + i + ",'in')", i * 5);
}
}
};
// fade out button
fade_out_button.onclick = function () {
if (done && fading_div.style.opacity !== '0') {
done = false;
for (var i = 100; i >= 1; i--) {
setTimeout("function_opacity(" + i + ",'out')", (i - 100) * -1 * 5);
}
}
};
alert (test);
</script>
</body>
</html>