Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="fr">
- <head >
- <title>FindThePrecious.com</title>
- <meta charset="UTF-8">
- <meta name="description" content="Structure of an HTML page">
- <meta name="keywords" content="HTML, CSS">
- <meta name="author" content="Raym648">
- <meta http-equiv="refresh" content="300">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet">
- <link rel="stylesheet" type="text/css" href="https://pastebin.com/XwJttyaa.css">
- </head>
- <body>
- <header >
- <nav>
- <ul class="navigation" >
- <li class="b" >FindThePrecious.com</li>
- </ul>
- </nav>
- <div class="slideshow-container">
- <div class="centered">
- <p >Dangerous fellowship try to destroy the ring
- Orc, Goblings, Balrogs, protect your master Sauron !</p>
- </div>
- <div class="mySlides fade">
- <div class="numbertext"></div>
- <a href = "https://placeholder.com"><img class="a4" src = "https://via.placeholder.com/950x125" width="950" height="125" alt="" ></a>
- <div class="text"></div>
- </div>
- <div class="mySlides fade">
- <div class="numbertext"></div>
- <a href = "https://placeholder.com"><img class="a4" src = "https://via.placeholder.com/950x125" width="950" height="125" alt="" ></a>
- <div class="text"></div>
- </div>
- <div class="mySlides fade">
- <div class="numbertext"></div>
- <a href = "https://placeholder.com"><img class="a4" src = "https://via.placeholder.com/950x125" width="950" height="125" alt="" ></a>
- <div class="text"></div>
- </div>
- </div>
- <div style="text-align:center">
- <span class="dot"></span>
- <span class="dot"></span>
- <span class="dot"></span>
- </div>
- <script>
- var slideIndex = 0;
- showSlides();
- function showSlides() {
- var i;
- var slides = document.getElementsByClassName("mySlides");
- var dots = document.getElementsByClassName("dot");
- for (i = 0; i < slides.length; i++) {
- slides[i].style.display = "none";
- }
- slideIndex++;
- if (slideIndex > slides.length) {slideIndex = 1}
- for (i = 0; i < dots.length; i++) {
- dots[i].className = dots[i].className.replace(" active", "");
- }
- slides[slideIndex-1].style.display = "block";
- dots[slideIndex-1].className += " active";
- setTimeout(showSlides, 2000); // Change image every 2 seconds
- }
- </script>
- </header>
- <script>
- function openMenu(evt, menuName) {
- var i, tabcontent, tablinks;
- tabcontent = document.getElementsByClassName("tabcontent");
- for (i = 0; i < tabcontent.length; i++) {
- tabcontent[i].style.display = "none";
- }
- tablinks = document.getElementsByClassName("tablinks");
- for (i = 0; i < tablinks.length; i++) {
- tablinks[i].className = tablinks[i].className.replace(" active", "");
- }
- document.getElementById(menuName).style.display = "block";
- evt.currentTarget.className += " active";
- }
- </script>
- <p class="a0">* Move the mouse over a button inside the tabbed menu:</p>
- <div class="tab">
- <button class="tablinks" onmouseover="openMenu(event, 'Follows')">Follows</button>
- <button class="tablinks" onmouseover="openMenu(event, 'Contact')">Contact US</button>
- </div>
- <section id="Follows" class="tabcontent">
- <h2 class="centretitre">Fellows wanted dead (or alive if you want to eat them later)</h2>
- <ul class="flex-container1">
- <li class="a">
- <h3 id="c1" >Reward 1000 gold coins</h3>
- <a href = "http://images.innoveduc.fr"><img class="a3" src = "http://images.innoveduc.fr/integration_gandalf.png" width="240" height="240" alt="" ></a>
- <h3 class="a1">The Wizard</h3>
- <p class="a2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
- et dolore magna aliqua.
- </p>
- </li>
- <li class="a">
- <h3 id="c2" >DEAD</h3>
- <a href = "https://placeholder.com"><img class="a3" src = "https://via.placeholder.com/240" width="240" height="240" alt="" ></a>
- <h3 class="a1">Hobbit #3</h3>
- <p class="a2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
- et dolore magna aliqua.
- </li>
- <li class="a">
- <h3 id="c3" >Reward 250 gold coins</h3>
- <a href = "https://placeholder.com"><img class="a3" src = "https://via.placeholder.com/240" width="240" height="240" alt="" ></a>
- <h3 class="a1">Yummy Dwarf</h3>
- <p class="a2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
- et dolore magna aliqua.
- </p>
- </li>
- </ul>
- </section>
- <section id="Contact" class="tabcontent" >
- <h2 class="centretitre" >Contact US</h2>
- <form action="/contact.php" method="post">
- <div class="resa9" >
- <label for="prenom2"><b>First name :</b></label>
- <input type="text" id="prenom2" name="user_prenom2" placeholder="First name"/>
- </div>
- <div class="resa9" >
- <label for="name2"><b>Last name :</b></label>
- <input type="text" id="name2" name="user_name2" placeholder="Last name"/>
- </div>
- <div class="resa9" >
- <label for="telephone2"><b>Phone :</b></label>
- <input type="tel" id="telephone2" name="user_telephone2" />
- </div>
- <div class="resa9" >
- <label for="mail2"><b>E-mail :</b></label>
- <input type="email" id="mail2" name="user_mail2" placeholder="E-mail"/>
- </div>
- <div class="resa9" >
- <label for="selectionItem"><b>Select :</b></label>
- <select id="selectionItem" name="user_selectionItem" >
- <option value="0" > I have seen one of them </option>
- <option value="1"> Lorem ipsum dolor sit amet</option>
- <option value="2"> Lorem ipsum dolor sit amet</option>
- <option value="3"> Lorem ipsum dolor sit amet</option>
- <option value="4"> Lorem ipsum dolor sit amet</option>
- <option value="5"> Lorem ipsum dolor sit amet</option>
- </select>
- </div>
- <div class="textarea" >
- <label for="msg2"><b>Message :</b></label>
- <textarea id="msg2" name="user_message2" placeholder="Your Message"></textarea>
- </div>
- <div class="button" >
- <button type="submit"><b>Send</b></button>
- <button type="reset"><b>Cancel</b></button>
- </div>
- </form>
- </section>
- <footer>
- <p>Posted by: Raym648
- - Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.
- - [Réalisé le : 25/01/2020]</p>
- </footer>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement