Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <!--head-->
- <head>
- <!-- Meta -->
- <meta charset="utf-8" />
- <link rel="stylesheet" href="style.css" />
- <title>findThePrecious.com</title>
- </head>
- <!--body-->
- <body>
- <!--NAV BAR-->
- <header>
- <nav>
- <ul>
- <li><a href="#home">FindThePrecious.com</a></li>
- <li class="active"><a href="#fellows">Fellows</a></li>
- <li><a href="#contactus">Contact us</a></li>
- </ul>
- </nav>
- </header>
- <!-- MAIN CAROUSSEL -->
- <section id="main_caroussel">
- <div class="carousel-part">
- <div class = "carousel_content">
- <div class="carousel-item active">
- <img src="https://via.placeholder.com/140" alt="first_description">
- <h1> Dangerous fellowship try to destroy the ring </h1>
- <p> Orcs, Goblins, Balrogs, protect your master Sauron ! </p>
- </div>
- <div class="carousel-item">
- <img src="https://via.placeholder.com/140" alt="first_description">
- <h1> Dangerous fellowship try to destroy the city</h1>
- <p> Cyprum itidem insulam procul a continenti discretam et portuosam inter municipia crebra urbes duae </p>
- </div>
- <div class="carousel-item">
- <img src="https://via.placeholder.com/140" alt="first_description">
- <h1> Dangerous fellowship try to destroy the country</h1>
- <p> Nec sane haec sola pernicies orientem diversis cladibus adfligebat. Namque et Isauri, quibus est usitatum saepe pacari saepeque inopinis excursibus cuncta miscere </p>
- </div>
- </div>
- <a class="carousel_previous" href="#carousel_prev" role="button" data-slide="prev">
- <span class="carousel_prev_icon" aria-hidden="true"></span>
- <span class="sr-only">previous</span>
- </a>
- <a class="carousel_next" href="#carousel_next" role="button" data-slide="next">
- <span class="carousel_next_icon" aria-hidden="true"></span>
- <span class="sr-only">next</span>
- </a>
- </div>
- </section>
- <!-- MAIN PORTRAITS -->
- <section id ="main_portrait">
- <div id ="title_main_portrait">
- <h2> Fellows wanted dead </h2>
- <p> (or alive if you want to eat them later) </p>
- </div>
- <div id = "content_main_portrait">
- <div id = "first_portrait" class ="alive_fellow">
- <div id = first_image >
- <img src="https://via.placeholder.com/20" alt="thewizard" class="alive_image_fellow">
- </div>
- <div id = first_abstract class="alive_comment_fellow">
- <p> Reward 1000 gold coins </p>
- </div>
- <div id = first_title>
- <h3> The Wizard </h3>
- </div>
- <div id = first_description>
- <p> formidable adversary </p>
- </div>
- </div>
- <div id = "second_portrait" class ="dead_fellow">
- <div id = second_image >
- <img src="https://via.placeholder.com/20" alt="hobbit" class="dead_image_fellow">
- </div>
- <div id = second_abstract class="dead_comment_fellow">
- <p> Reward 1000 gold coins </p>
- </div>
- <div id = second_title>
- <h3> Hobbit #3 </h3>
- </div>
- <div id = seconde_description>
- <p> formidable adversary </p>
- </div>
- </div>
- <div id = "third_portrait" class ="alive_fellow">
- <div id = third_image >
- <img src="https://via.placeholder.com/20" alt="yummy" class="alive_image_fellow">
- </div>
- <div id = third_abstract class="alive_comment_fellow">
- <p> Reward 250 gold coins </p>
- </div>
- <div id = third_title>
- <h3> Yummy Dwarf </h3>
- </div>
- <div id = third_description>
- <p> average opponent </p>
- </div>
- </div>
- </div>
- </section>
- <!-- MAIN CONTACT_US -->
- <section id="contactus">
- <h2> Contact us </h2>
- <label for="email"> </label>
- <input id="email" type="email" placeholder="@" >
- <br>
- <label for="home"> </label>
- <input id="home" type="text">
- <form>
- <select id = "seen" name = "seen" >
- <option value = "oneThem" > I have seen one of them </option>
- <option value = "someMissing" > Is there one missing </option>
- <option value = "haveNot" > I have not seen </option>
- <option value = "sawThat" > I saw that </option>
- </select >
- </form >
- <textarea id="message" name="message" rows="5" cols="50"> Your message </textarea>
- <form>
- <input type = "submit" value = "Send !">
- </form>
- </section>
- <!-- FOOTER -->
- <footer>
- <div id = "footer_container">
- <div class="about_us">
- <ul>
- <li><a href="#">About us</a></li>
- <li><a href="#">Fellows</a></li>
- <li><a href="#">Join our army</a></li>
- </ul>
- </div>
- <div class="mentions">
- <ul>
- <li><a href="#">FAQ</a></li>
- <li><a href="#">Reward conditions</a></li>
- <li><a href="#">Legal mentions</a></li>
- </ul>
- </div>
- <div class="twitter">
- <ul>
- <li><a href="#">Sauron4ever.com</a></li>
- <li><a href="#">Follow him also on twitter</a></li>
- </ul>
- </div>
- </div>
- </footer>
- <!-- SCRIPT -->
- <script src="scripts/index.js"></script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement