Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Find the precious!</title>
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <nav>
- <ul>
- <li>FindThePrecious.com</li>
- <li>Fellows</li>
- <li>Contact us</li>
- </ul>
- </nav>
- <section>
- <div class="carousel"></div>
- </section>
- <section>
- <h2>Fellows wanted dead (or alive if you want to eat them later)</h2>
- </section>
- <section>
- <article><img src="https://via.placeholder.com/350x450" alt="placeholder"></article>
- <article><img src="https://via.placeholder.com/350x450" alt="placeholder"></article>
- <article><img src="https://via.placeholder.com/350x450" alt="placeholder"></article>
- </section>
- <form>
- <h2>Contact us</h2>
- <input type="email" placeholder="@">
- <input type="text" placeholder="⌂">
- <input type="text" placeholder="I have seen one of them">
- <textarea placeholder="Your message"></textarea>
- <!-- Bouton de soumission -->
- <button type="submit" name="submit">Send !</button>
- <!-- Bouton de soumission -->
- </form>
- <!-- Footer -->
- <footer>
- <!-- Liens de bas de page -->
- <nav>
- <ul>
- <li>About us</li>
- <li>Fellows</li>
- <li>Join our army</li>
- <li>FAQ</li>
- <li>Reward conditions</li>
- <li>Legal mentions</li>
- <li>Sauron4ever.com</li>
- <li>Follow him</li>
- </ul>
- </nav>
- <!-- Liens de bas de page -->
- </footer>
- <!-- Footer -->
- </body>
- </html>
- /****************************** CSS
- /* Overhaul */
- /** Barre de Navigation **/
- nav{
- margin:0;
- padding:0;
- background:black;
- height:50px;
- }
- nav ul li{
- margin:0;
- line-height:50px;
- display:inline;
- padding-right:20px;
- color:white;
- }
- /** Barre de Navigation **/
- /** Section "Fellows wanted dead" **/
- section{
- color:grey;
- text-align:center;
- }
- section h2{
- margin-top:50px;
- margin-bottom:50px;
- }
- /** Section "Fellows wanted dead" **/
- /** Formulaire de Contact **/
- form{
- display:flex;
- flex-direction:column;
- margin-top:100px;
- border-top: 3px solid grey;
- }
- input{
- display:block;
- margin-left:auto;
- margin-right:auto;
- font-size:1.8em;
- height:30px;
- margin-top:20px;
- width:80%;
- }
- textarea{
- display:block;
- margin-left:auto;
- margin-right:auto;
- margin-top:20px;
- height:150px;
- width:80%;
- }
- button{
- display:block;
- margin-left:80%;
- margin-top:20px;
- height:30px;
- width:10%;
- }
- /** Formulaire de Contact **/
- /** Footer **/
- footer{
- background:black;
- height:80px;
- }
- footer nav ul{
- display:flex;
- flex-direction:row;
- flex-wrap: wrap;
- padding-left:5px;
- padding-right:5px;
- }
- footer nav ul li{
- color:white;
- }
- /** Footer **/
- /* Overhaul */
- /* Desktop */
- form h2{
- color:grey;
- margin-bottom:50px;
- }
- .carousel{
- margin:0;
- height:250px;
- background:grey;
- }
- section article{
- margin:0;
- display:inline;
- padding-right:5px;
- padding-left:5px;
- margin-bottom:100px;
- display:inline;
- }
- article img{
- margin:0;
- width:30%;
- }
- /* Desktop */
- /* Mobile */
- @media only screen and (max-width:961px){
- section article{
- display:flex;
- flex-direction:column;
- margin-bottom:20px;
- }
- article img{
- height:150px;
- margin-left:5%;
- margin-right:5%;
- width:90%;
- }
- form{
- margin-top:0;
- }
- form h2{
- text-align:center;
- }
- footer{
- height:400px;
- }
- footer nav ul{
- display:flex;
- flex-direction:column;
- align-items:center;
- justify-content:center;
- }
- footer nav ul li{
- color:white;
- margin:0;
- padding:0;
- }
- }
- /* Mobile */
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement