Created
March 5, 2019 13:21
-
-
Save JonesCharly/b1eb5410fc6afc2778c3ffe7ea810ab7 to your computer and use it in GitHub Desktop.
FindThePrecious.Final.Int
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .navbar{ | |
| background-color: #3d7996!important; | |
| } | |
| .carousel-caption{ | |
| margin-bottom: 5%; | |
| } | |
| .carousel-caption p{ | |
| color:white; | |
| } | |
| .machin img{ | |
| position: relative; | |
| opacity: 0.5; | |
| } | |
| .machin:hover img{ | |
| opacity: 1; | |
| } | |
| .card .gollum{ | |
| opacity: 1; | |
| } | |
| .hove{ | |
| position: absolute; | |
| top: 5%; | |
| left: 5%; | |
| color: black; | |
| background-color: white; | |
| margin-left: 90px; | |
| margin-right: 90px; | |
| border-radius: 4px; | |
| } | |
| strong{ | |
| text-decoration: none; | |
| color: orange; | |
| opacity: 1; | |
| } | |
| h6{ | |
| position: absolute; | |
| top: 40%; | |
| left: 40%; | |
| color: white; | |
| } | |
| .machin:hover .hove{ | |
| opacity: 0; | |
| } | |
| .machin:hover h6{ | |
| position: absolute; | |
| font-size: 28px; | |
| top: 30%; | |
| left: 32%; | |
| color: white; | |
| } | |
| .nav-pills{ | |
| margin-top: 20px; | |
| } | |
| .nav-pills .nav-link.active { | |
| background-color: #3d7996!important; | |
| margin-bottom: 10px; | |
| } | |
| .container{ | |
| margin-top:25px; | |
| } | |
| p{ | |
| color: #86888c; | |
| } | |
| .card-deck{ | |
| margin-top:40px; | |
| } | |
| .btn-primary{ | |
| background-color: #3d7996!important; | |
| } | |
| .container .card-text{ | |
| max-height: 140px; | |
| overflow: scroll; | |
| margin-top: 15px; | |
| margin-bottom: 15px; | |
| } | |
| .media p{ | |
| overflow: hidden; | |
| margin-top: -5px; | |
| margin-bottom: 5px; | |
| } | |
| .media{ | |
| margin-bottom: 30px; | |
| } | |
| .card-body .rounded { | |
| margin-top: -5%; | |
| } | |
| table{ | |
| border: 1px #c9d7ed double; | |
| } | |
| thead{ | |
| background-color: #c9d7ed!important; | |
| color: black; | |
| border: 1px #c9d7ed solid; | |
| } | |
| td, th{ | |
| border: 1px #c9d7ed solid; | |
| } | |
| .row .rounded{ | |
| margin-right: 30px; | |
| margin-top: 15px; | |
| margin-left: 25px; | |
| } | |
| footer .navbar li{ | |
| list-style-type: none; | |
| color: white; | |
| } | |
| footer .navbar a{ | |
| text-decoration: none; | |
| list-style-type: none; | |
| color: white; | |
| } | |
| footer .navbar p{ | |
| color: white; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <link rel="stylesheet" type="text/css" href="Ftp-Final-css.css"> | |
| <title>Findtheprecious</title> | |
| <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,400i,700,800" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| </head> | |
| <body> | |
| <nav class="navbar navbar-expand-lg navbar-dark "> | |
| <a class="navbar-brand" href="#">FindThePrecious.com</a> | |
| <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> | |
| <span class="navbar-toggler-icon"></span> | |
| </button> | |
| <div class="collapse navbar-collapse" id="navbarSupportedContent"> | |
| <ul class="navbar-nav mr-auto"> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="#fellows">Fellows<span class="sr-only">(current)</span></a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="#thering">The Ring</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="#reward">Get my reward</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="#hunters">Best hunters</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="#army">Join the army</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="#contact">Contact us</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </nav> | |
| <div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> | |
| <div class="carousel-inner"> | |
| <!-- <div class="carousel-caption d-none d-md-block"> | |
| <h3>Dangerous fellowship try to destroy the ring</h3> | |
| <p>Orcs, Goblins, Balrogs, protect your master Sauron !</p> | |
| </div>--> | |
| <div class="carousel-item active"> | |
| <img class="d-block w-100" src="https://res.cloudinary.com/dn4gqvfba/image/upload/v1551623163/Findtheprecious/thumb-1920-86098.jpg" alt="First slide"> | |
| <div class="carousel-caption d-none d-md-block"> | |
| <h3>Dangerous fellowship try to destroy the ring</h3> | |
| <p>Orcs, Goblins, Balrogs, protect your master Sauron !</p> | |
| </div> | |
| </div> | |
| <div class="carousel-item"> | |
| <img class="d-block w-100" src="https://res.cloudinary.com/dn4gqvfba/image/upload/v1551623003/Findtheprecious/The-Hobbit-Azog-the-White-Orc.jpg" alt="Second slide"> | |
| <div class="carousel-caption d-none d-md-block"> | |
| <h3>Hello ! Enjoy my website!</h3> | |
| <p>Like and share..</p> | |
| </div> | |
| </div> | |
| <div class="carousel-item"> | |
| <img class="d-block w-100" src="https://res.cloudinary.com/dn4gqvfba/image/upload/v1551623003/Findtheprecious/the_cold_steps_of_solitude_by_chriscold-d4om0gs.jpg" alt="Third slide"> | |
| <div class="carousel-caption d-none d-md-block"> | |
| <h3>Design by Charline</h3> | |
| <p>An elfic graphic designer</p> | |
| </div> | |
| </div> | |
| </div> | |
| <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> | |
| <span class="carousel-control-prev-icon" aria-hidden="true"></span> | |
| <span class="sr-only">Previous</span> | |
| </a> | |
| <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> | |
| <span class="carousel-control-next-icon" aria-hidden="true"></span> | |
| <span class="sr-only">Next</span> | |
| </a> | |
| </div> | |
| <div class="container"> | |
| <div class="row align-items-baseline"> | |
| <h2 id="fellows"> Fellows wanted dead</h2> | |
| <p>(or alive if you want to eat them later)</p> | |
| </div> | |
| </div> | |
| <ul class="nav nav-pills nav-fill justify-content-center black"> | |
| <li class="nav-item col-lg-2 col-sm-6"> | |
| <a class="nav-link active" href="#">Most wanted</a> | |
| </li> | |
| <li class="nav-item col-lg-2 col-sm-6"> | |
| <a class="nav-link active" href="#">Most dangerous</a> | |
| </li> | |
| <li class="nav-item col-lg-2 col-sm-6"> | |
| <a class="nav-link active" href="#">Already captured</a> | |
| </li> | |
| </ul> | |
| <div class="card-deck"> | |
| <div class="card"> | |
| <div class="machin"> | |
| <img class="card-img-top" src="https://res.cloudinary.com/dn4gqvfba/image/upload/v1551627770/Findtheprecious/radagast.jpg" alt="Card image cap"> | |
| <p class="hove">Reward <strong>1000</strong> gold coins</p> | |
| <h6 class="name">Radagast</h6> | |
| </div> | |
| <div class="card-body"> | |
| <h5 class="card-title">The Wizard</h5> | |
| <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="machin2"> | |
| <img class="card-img" src="https://res.cloudinary.com/dn4gqvfba/image/upload/v1551627776/Findtheprecious/gollum.jpg" alt="Card image cap"> | |
| <h6>DEAD</h6> | |
| </div> | |
| <div class="card-body"> | |
| <h5 class="card-title">Hobbit</h5> | |
| <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="machin"> | |
| <img class="card-img-top" src="https://res.cloudinary.com/dn4gqvfba/image/upload/v1551627783/Findtheprecious/44f12acbf5ba121142ecfedc7ddd9abb.jpg" alt="Card image cap"> | |
| <p class="hove">Reward <strong>800</strong> gold coins</p> | |
| <h6 class="name">Small man</h6> | |
| </div> | |
| <div class="card-body"> | |
| <h5 class="card-title">Yummy Dwarf</h5> | |
| <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <hr> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-8"> | |
| <h2 id="reward">I have captured one of them, how to get my reward?</h2> | |
| <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum, sem eu sagittis interdum, lacus lectus rhoncus erat, a placerat nibh lorem et lectus. Proin ultrices nunc id rutrum elementum. Nam porttitor dignissim ullamcorper. Duis tempor hendrerit nisl, sit amet venenatis massa. Suspendisse potenti. Nam tempor viverra est at bibendum. Sed ut urna tincidunt, fringilla neque nec, commodo purus. Morbi vehicula est non quam elementum maximus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut tempus lectus in quam tempus, sed faucibus eros placerat. Curabitur placerat accumsan libero et porta. Nam eleifend congue mauris id auctor.</p> | |
| </div> | |
| <div class="row align-items-end"> | |
| <div class=""> | |
| <img class="rounded left-right" src="https://res.cloudinary.com/dn4gqvfba/image/upload/v1551630520/Findtheprecious/maxresdefault.jpg" alt="Card image cap"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row justify-content-center"> | |
| <a href="#" class="btn btn-primary">Contact us</a> | |
| </div> | |
| </div> | |
| <hr> | |
| <div class="container"> | |
| <div class="row"> | |
| <h2 id="hunters">Best hunters</h2> | |
| </div> | |
| </div> | |
| <div class="container"> | |
| <div class="row justify-content-around"> | |
| <div class="media"> | |
| <img class="mr-3" src="https://res.cloudinary.com/dn4gqvfba/image/upload/v1551633226/Findtheprecious/145841-avatar-set.png" alt="Generic placeholder image"> | |
| <div class="media-body"> | |
| <h5 class="mt-0">Media heading</h5> | |
| <p>2 captures - <a href="..">Profile</a></p> | |
| <a href="https://placeholder.com"><img src="https://via.placeholder.com/60x20" alt="placeholder"></a> | |
| </div> | |
| </div> | |
| <div class="media"> | |
| <img class="mr-3" src="https://res.cloudinary.com/dn4gqvfba/image/upload/v1551633226/Findtheprecious/145841-avatar-set.png" alt="Generic placeholder image"> | |
| <div class="media-body"> | |
| <h5 class="mt-0">Media heading</h5> | |
| <p>2 captures - <a href="..">Profile</a></p> | |
| <a href="https://placeholder.com"><img src="https://via.placeholder.com/60x20" alt="placeholder"></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <hr> | |
| <div class="container"> | |
| <div class="row"> | |
| <h2 id="thering">About the ring</h2> | |
| </div> | |
| </div> | |
| <div class="container "> | |
| <div class="card"> | |
| <div class="card-header"> | |
| Ring Capabilities | |
| </div> | |
| <div class="card-body text-center"> | |
| <table class="table table-striped"> | |
| <thead> | |
| <tr> | |
| <th scope="col">Feature</th> | |
| <th scope="col">Description</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>Main</td> | |
| <td>One ring to rules them all</td> | |
| </tr> | |
| <tr> | |
| <td>Invisibility</td> | |
| <td>You can't see me</td> | |
| </tr> | |
| <tr> | |
| <td>Power</td> | |
| <td>Destroy the world</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| Why the ring is awesome ? | |
| </div> | |
| <div class="card-body"> | |
| <blockquote class="blockquote mb-0"> | |
| <p>MY preciooooooooouuuussss! Hrk Hrk, we want our preciiiiiooooous !!</p> | |
| <footer class="blockquote-footer">Gollum</footer> | |
| </blockquote> | |
| <img src="https://res.cloudinary.com/dn4gqvfba/image/upload/v1551634418/Findtheprecious/hossein-diba-34.jpg" class="gollum rounded float-right" alt="gollum"> | |
| </div> | |
| </div> | |
| </div> | |
| <hr> | |
| <div class="container"> | |
| <div class="row justify-content-around"> | |
| <div class="col-10"> | |
| <img class="rounded float-left" src="https://res.cloudinary.com/dn4gqvfba/image/upload/v1551637454/Findtheprecious/5c467334fa1250f0be7038b462efc497--elrond-the-hobbit.jpg" alt="Card image cap"> | |
| <h2 id="army">Join the Army, we need you!</h2> | |
| <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum, sem eu sagittis interdum, lacus lectus rhoncus erat, a placerat nibh lorem et lectus. Proin ultrices nunc id rutrum elementum. Nam porttitor dignissim ullamcorper. Duis tempor hendrerit nisl, sit amet venenatis massa. Suspendisse potenti. Nam tempor viverra est at bibendum. Sed ut urna tincidunt, fringilla neque nec, commodo purus. Morbi vehicula est non quam elementum maximus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut tempus lectus in quam tempus, sed faucibus eros placerat. Curabitur placerat accumsan libero et porta. Nam eleifend congue mauris id auctor.</p> | |
| </div> | |
| </div> | |
| <div class="row justify-content-center"> | |
| <a href="#" class="btn btn-primary">More info on SauronrulesThemAll.com</a> | |
| </div> | |
| </div> | |
| <hr> | |
| <div class="container "> | |
| <h2 id="contact">Contact us</h2> | |
| <div class="row justify-content-center"> | |
| <div class="col-lg-5 col-sm-8"> | |
| <form> | |
| <div class="form-group"> | |
| <label for="exampleFormControlInput1"></label> | |
| <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="@"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="exampleFormControlInput1"></label> | |
| <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="home"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="exampleFormControlSelect1"></label> | |
| <select class="form-control" id="exampleFormControlSelect1" > | |
| <option>I have seen one of them</option> | |
| <option>Sauron</option> | |
| <option>Hobbit</option> | |
| <option>Wizard</option> | |
| <option>Dwarf</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="exampleFormControlTextarea1"></label> | |
| <textarea class="form-control" id="exampleFormControlTextarea1" placeholder="your message" rows="3"></textarea> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <hr> | |
| <footer> | |
| <div class="navbar navbar-expand-lg navbar-dark justify-content-around"> | |
| <ul> | |
| <li>About us</li> | |
| <li><a href="#fellows">Fellows</a></li> | |
| <li><a href="#Join">Join our army</a></li> | |
| </ul> | |
| <ul > | |
| <li>FAQ</li> | |
| <li><a href="#reward">Reward conditions</a></li> | |
| <li>Legal mentions</li> | |
| </ul> | |
| <p>Sauron4Ever.com <br/> | |
| Follow him also on twitter</p> | |
| </div> | |
| </footer> | |
| </body> | |
| <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> | |
| <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment