beaucoup de travail

2021-10-29 12:13:54 +02:00 · 2021-10-29 12:13:54 +02:00 · d99f587aa2
commit d99f587aa2
parent 53ee980c5f
16 changed files with 280 additions and 4 deletions
--- a/contact.html
+++ b/contact.html
--- a/for.html
+++ b/for.html
@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Recherche d'un homme | Don't meet me</title>
+</head>
+<body>
+    <header>
+
+    </header>
+    <main>
+        <section id="intro">
+            <h2>Tu cherches un homme beau, fort, musclé qui se verse du coca quand il travaille ?</h2>
+            <p>Tu es au bon endroit !</p>
+        </section>
+        <section id="form">
+            <form action="" id="form" method="post" enctype="text/plain">
+                <label for="lechercoude">Sais-tu te lécher le coude ?</label>
+                <select name="lechercoude" id="lechercoude">
+                    <option value="Oui">Oui</option>
+                    <option value="Non">Non</option>
+                </select>
+                <label for="100m">Combien de temps fais-tu au 100m nage libre ? (minutes)</label>
+                <input type="number" name="100m" id="100m">
+                
+            </form>
+        </section>
+    </main>
+    <footer>
+
+    </footer>
+</body>
+</html>
--- a/img/avis1.jpeg
+++ b/img/avis1.jpeg
--- a/img/avis2.jpg
+++ b/img/avis2.jpg
--- a/img/avis3.jpeg
+++ b/img/avis3.jpeg
--- a/img/favicon.png
+++ b/img/favicon.png
--- a/img/logo.png
+++ b/img/logo.png
--- a/img/man.jpg
+++ b/img/man.jpg
--- a/img/switchoff.png
+++ b/img/switchoff.png
--- a/img/switchon.png
+++ b/img/switchon.png
--- a/img/woman.jpeg
+++ b/img/woman.jpeg
--- a/index.html
+++ b/index.html
@ -3,18 +3,81 @@
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" type="text/css" href="styles/today/main.css"/>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Zen+Kurenaido&display=swap" rel="stylesheet">
+    <link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
    <title>Acceuil | Don't meet me</title>
 </head>
 <body>
    <header>
-        
+        <section id="title">
+            <img src="/img/logo.png" alt="Logo don't meet me" id="logo">
+        </section>
+        <section>
+            <nav>
+                <ul>
+                    <li><a href="index.html">Acceuil</a></li>
+                    <li><a href="for.html?wanted=man">Trouve un homme !</a></li>
+                    <li><a href="for.html?wanted=woman">Trouve une femme ! </a></li>
+                    <li><a href="contact.html">Qui sommes nous</a></li>
+                    <li>
+                        <section id="sec_switch">
+                            <a href="index.html"><img src="img/switchoff.png" alt="bouton pour chager de thème" id="switch"></a>
+                        </section>
+                    </li>
+                </ul>
+            </nav>
+        </section>
    </header>
    <main>
-        
+        <section id="makeachoicehf">
+            <section id="secman">
+                <img id="homme" src="img/man.jpg" alt="imgage homme">
+                <article id="txthomme">Chercher un homme</article>
+            </section>
+            <section id="secwoman">
+                <img id="femme" src="img/woman.jpeg" alt="image femme">
+                <article id="txtfemme">Chercher une femme</article>
+            </section>
+        </section>
+        <section id="comments">
+            <section id="comment1">
+                <figure>
+                    <img id="avis1" src="img/avis1.jpeg" alt="image femme avis 1"> 
+                </figure>
+                <figcaption id="caption1">"avis1"</figcaption>
+            </section>
+            <section>
+                <figure>
+                    <img id="avis2" src="img/avis2.jpg" alt="image femme avis 2"> 
+                </figure>
+                <figcaption id="caption2">"avis2"</figcaption>
+            </section>
+            <section>
+                <figure>
+                    <img id="avis3" src="img/avis3.jpeg" alt="image homme avis 3"> 
+                </figure>
+                <figcaption id="caption3">"avis3"</figcaption>
+            </section>
+        </section>
    </main>
    <footer>
-        coucou
+        <section id="feedback">
+            <h2>Donnez nous votre avis</h2>
+            <h3>C'est 100% anonyme !</h3>
+            <form id="form" action="" method="post" enctype="text/plain">
+                <textarea name="feedback" id="txtfeedback" cols="70" rows="10" placeholder="Donnez votre avis sur le site"></textarea>
+                <input id="send" type="submit" value="Envoyer">
+            </form>
+        </section>
+        <section>
+            <ul>
+                <li>Mentions légales</li>
+                <li>Qui sommes nous</li>
+            </ul>
+        </section>
    </footer>
 </body>
 </html>
--- a/styles/2000/main.css
+++ b/styles/2000/main.css
--- a/styles/today/main.css
+++ b/styles/today/main.css
@ -0,0 +1,58 @@
+body{
+    background-color: beige;
+}
+
+#title{
+    display: flex;
+    justify-content: center;
+}
+
+nav ul{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    list-style-type: none;
+    font-family: 'Zen Kurenaido', sans-serif;
+    padding-left: 0;
+    align-items: center;
+}
+
+nav ul li{
+    transition: 1s;
+    border-right: 1px solid #bbb;
+    background-color: rgb(124, 124, 145);
+    padding: 1rem;
+    margin-top: auto;
+    margin-bottom: auto;
+}
+
+#sec_switch img{
+    height : 1rem;
+    width : auto;
+}
+
+nav ul li:last-child {
+    border-right: none;
+    background-color: transparent;
+}
+
+/*nav ul li:hover{
+    background-color: rgb(24, 88, 207);
+    transition: background-color 1s;
+}*/
+
+footer{
+    display: flex;
+    flex-direction: row;
+    background-color: pink;
+}
+footer #feedback #form{
+    display: flex;
+    flex-direction: column;
+}
+footer #feedback #form #send{
+    justify-self: flex-start;
+}
+footer #feedback #form #txtfeedback{
+    resize: none;
+}
--- a/styles/today/sucess.css
+++ b/styles/today/sucess.css
@ -0,0 +1,33 @@
+main{
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    margin: 7rem;
+    background-color: grey;
+    padding-top: 10px;
+}
+main h2{
+    text-align: center;
+    font-size: 7rem;
+}
+main #succes{
+    margin-left: 15rem;
+    margin-right: 15rem;
+}
+main #succes #sec_img{
+    display: flex;
+    justify-content: center;
+}
+main #succes img{
+    border-radius: 60%;
+    max-width: 100%;
+    max-height: 100%;
+}
+main #info_bases{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+}
+main #bio p{
+    text-align: justify;
+}
--- a/succes.html
+++ b/succes.html
@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <link rel="stylesheet" type="text/css" href="styles/today/main.css"/>
+    <!--
+    <?php
+        if(isset($_GET["theme"]) && $_GET["theme"]=="vieux"){
+            echo '<link rel="stylesheet" href="resource/vieux.css">';
+        }
+        else{
+            echo '<link rel="stylesheet" href="resource/moderne.css">';
+        }
+    ?>
+    -->
+    <link rel="stylesheet" type="text/css" href="styles/today/sucess.css"/>
+    <link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
+    <title>Succes | Don't meet me</title>
+</head>
+<body>
+    <!--
+    <?php
+    $seed = 
+    ?>-->
+    <header>
+        <section id="title">
+            <img src="/img/logo.png" alt="Logo don't meet me" id="logo">
+            <h1>Don't meet me</h1>
+        </section>
+        <section>
+            <nav>
+                <ul>
+                    <li>Acceuil</li>
+                    <li>Trouve un homme !</li>
+                    <li>Trouve une femme ! </li>
+                    <li>Qui sommes nous</li>
+                </ul>
+            </nav>
+            <section id="sec_switch">
+                <p>Thème années 2000</p>
+                <img src="img/switchoff.png" alt="bouton pour chager de thème" id="switch">
+            </section>
+        </section>
+    </header>
+    <main>
+        <h2>It's a don't meet !</h2>
+        <section id="succes">
+            <section id="sec_img">
+                <img src="img/avis1.jpeg" alt="La tếte de votre vie">
+            </section>
+            <section id="info_bases">
+                <section id="prenom">
+                    <h3>PRENOM</h2>
+                    <p>Jeanine</p>
+                </section>
+                <section id="nom">
+                    <h3>NOM</h2>
+                    <p>Du pain</p>
+                </section>
+                <section id="age">
+                    <h3>AGE</h2>
+                    <p>69</p>
+                </section>
+            </section>
+            <section id="bio">
+                <p>Coucou je suis pas trop belle mais tu peux peut être être au moins un peu heureux avec moi car j'ai plein de tunne ! Tu peu aller voir ma page CopainD'Avant pour voir comme j'étais fresh</p>
+            </section>
+        </section>
+    </main>
+    <footer>
+        <section id="feedback">
+            <h2>Donnez nous votre avis</h2>
+            <h3>C'est 100% anonyme !</h3>
+            <form id="form" action="" method="post" enctype="text/plain">
+                <textarea name="feedback" id="txtfeedback" cols="70" rows="10" placeholder="Donnez votre avis sur le site"></textarea>
+                <input id="send" type="submit" value="Envoyer">
+            </form>
+        </section>
+        <section>
+            <ul>
+                <li>Mentions légales</li>
+                <li>Qui sommes nous</li>
+            </ul>
+        </section>
+    </footer>
+</body>
+</html>