Created
September 13, 2019 09:45
-
-
Save krez69/9d963e41419ae0df8b4d4a10f8aa7262 to your computer and use it in GitHub Desktop.
This file contains hidden or 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
| /* responsive desktop*/ | |
| @media screen and (min-width: 961px) { | |
| body{ | |
| margin: 0 auto; | |
| width: 100%; | |
| } | |
| ul{ | |
| list-style: none; | |
| display: flex; | |
| font-size: 30px; | |
| width: 100%; | |
| padding: 2px; | |
| background-color: black; | |
| margin-bottom: 0px; | |
| } | |
| a{ | |
| padding: 30px 15px 10px 0px; | |
| text-decoration: none; | |
| color: darkgrey; | |
| } | |
| .conteneur{ | |
| margin: 80px; | |
| display: flex; | |
| flex-direction: row; | |
| justify-content: space-around; | |
| border-bottom: 2px solid; | |
| padding-bottom: 80px; | |
| } | |
| form h2{ | |
| text-align: left; | |
| } | |
| h2{ | |
| text-align: center; | |
| margin-top: 80px; | |
| } | |
| .image{ | |
| margin: 0 auto; | |
| display: block; | |
| width: 100%; | |
| } | |
| form{ | |
| display: block; | |
| text-align: center; | |
| margin-bottom: 50px; | |
| margin-top: 10px; | |
| width: 100%; | |
| /* limite du formulaire */ | |
| padding: 15px; | |
| } | |
| input{ | |
| width: 80%; | |
| margin-bottom: 30px; | |
| } | |
| .textarea{ | |
| width: 80%; | |
| padding-bottom: 150px; | |
| } | |
| .button{ | |
| text-align: right; | |
| margin-right: 10%; | |
| } | |
| footer{ | |
| display: flex; | |
| background-color: black; | |
| height: 130px; | |
| width: 100%; | |
| } | |
| footer ul { | |
| display: flex; | |
| justify-content: flex-start; | |
| flex-direction: column; | |
| margin: auto; | |
| } | |
| } | |
| /* Responsive mobile*/ | |
| @media screen and (max-width: 961px) { | |
| body{ | |
| margin: 0 auto; | |
| width: 100%; | |
| } | |
| ul{ | |
| list-style: none; | |
| display: flex; | |
| flex-wrap: wrap; | |
| font-size: 30px; | |
| width: 100%; | |
| padding: 2px; | |
| background-color: black; | |
| margin-bottom: 0px; | |
| } | |
| ul a{ | |
| padding: 5px 15px ; | |
| text-decoration: none; | |
| color: darkgrey; | |
| } | |
| .conteneur{ | |
| margin: 80px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-around; | |
| border-bottom: 2px solid; | |
| padding-bottom: 80px; | |
| } | |
| h2{ | |
| text-align: center; | |
| margin-top: 0px; | |
| } | |
| .image{ | |
| margin: 0 auto; | |
| display: block; | |
| width: 100%; | |
| } | |
| form{ | |
| display: block; | |
| text-align: center; | |
| margin-bottom: 50px; | |
| margin-top: 10px; | |
| width: 100%; | |
| /* limite du formulaire */ | |
| padding: 15px; | |
| } | |
| input{ | |
| width: 80%; | |
| margin-bottom: 30px; | |
| } | |
| .textarea{ | |
| width: 80%; | |
| padding-bottom: 150px; | |
| } | |
| .button{ | |
| text-align: right; | |
| margin-right: 10%; | |
| } | |
| footer{ | |
| background-color: black; | |
| } | |
| footer ul{ | |
| display: flex; | |
| flex-direction: column; | |
| text-align: center; | |
| background-color: black; | |
| width: 100%; | |
| margin: 0; | |
| } | |
| } |
This file contains hidden or 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"> | |
| <title>Find the precious!</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <nav> | |
| <ul> | |
| <li><a href="#FindThePrecious.com" title="FindThePrecious">FindPrecious.com</a></li> | |
| <li><a href="#Fellows" title="the Fellows">Fellows</a></li> | |
| <li><a href="#Contact_us" title="contact">Contact us</a></li> | |
| </ul> | |
| </nav> | |
| <section> | |
| <div class="carousel"> | |
| <img src="https://via.placeholder.com/1680X250.jpg" alt="fellows" class="image"/> | |
| </div> | |
| </section> | |
| <section> | |
| <h2>Fellows wanted dead (or alive if you want to eat them later)</h2> | |
| </section> | |
| <section> | |
| <div class="conteneur"> | |
| <div><img src="https://via.placeholder.com/250.jpg" alt="fellows" class="image"/></div> | |
| <div><img src= "https://via.placeholder.com/250.jpg" alt="fellows" class="image"/></div> | |
| <div><img src="https://via.placeholder.com/250.jpg" alt="fellows" class="image"/></div> | |
| </div> | |
| </section> | |
| <form> | |
| <h2>Contact us</h2> | |
| <input type="text" placeholder="@"> | |
| <input type="text" placeholder="⌂"> | |
| <input type="text" placeholder="I have seen one of them"> | |
| <textarea class="textarea" placeholder="Your message"></textarea> | |
| <div class="button"> | |
| <button type="submit">send !</button> | |
| </div> | |
| </form> | |
| <footer> | |
| <ul> | |
| <li><a href="About_us.html" title="page2">About us</a></li> | |
| <li><a href="fellows.html" title="page3">Fellows</a></li> | |
| <li><a href="Join_our_army.html" title="page4">Join our army</a></li> | |
| </ul> | |
| <ul> | |
| <li><a href="FAQ.html" title="page5">FAQ</a></li> | |
| <li><a href="Reward_condition.html" title="page6">Reward condition</a></li> | |
| <li><a href="Legal_mention.html" title="page7">Legal mention</a></li> | |
| </ul> | |
| <ul> | |
| <li><a href="https://www.Sauron4Ever.com/" title="website Sauron">[Sauron4Ever.com]</a></li> | |
| <li><a href="http://www.twitter.com" title="website twitter">[Follow him also on twitter]</a></li> | |
| </ul> | |
| </footer> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment