Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- index.html :
- <!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</a></li>
- <li><a href="#">Fellows</a></li>
- <li><a href="#">Contact us</a></li>
- </ul>
- </nav>
- <section>
- <div class="carousel"></div>
- </section>
- <section>
- <h2>Fellows wanted dead <span>(or alive if you want to eat them later)</span></h2>
- </section>
- <section class=centrage>
- <article></article>
- <article></article>
- <article></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">
- -->
- <select name="#">
- <option value="I have seen one of them">I have seen one of them</option>
- <option value="A">A</option>
- <option value="B">B</option>
- <option value="C">C</option>
- <option value="D">D</option>
- </select>
- <textarea placeholder="Your message"></textarea>
- </form>
- </body>
- <footer>
- <div class=footergauche><ul>
- <li>About us</li>
- <li>Fellows</li>
- <li>Join our Army</li>
- </ul></div>
- <div class=footergauche><ul>
- <li>FAQ</li>
- <li>Reward conditions</li>
- <li>Legal Mentions</li>
- </ul></div>
- <div class=footerdroite><ul>
- <li>Sauron4Ever.com</li>
- <li>Follow him on Twitter</li>
- </ul></div>
- </footer>
- </html>
- style.css :
- *{
- box-sizing: border-box
- }
- body{
- margin: 1px;
- font-family: 'arial';
- color: #463A3A
- }
- nav {
- display:flex;
- }
- nav ul{
- display: inline-flex;
- width: 100%;
- list-style-type: none;
- margin: 0;
- padding: 0;
- overflow: hidden;
- background-color: #333
- }
- nav li{
- float: left;
- width: 100px;
- font-size: 12px
- }
- nav li:first-child{
- width: 200px;
- font-size: 15px
- }
- nav li a{
- text-decoration: none;
- text-align: center;
- height: 32px;
- display: block;
- color: #FBF6F6;
- padding: 10px;
- }
- nav li a:hover{
- background-color: #E1DCD3;
- color: #333
- }
- nav li a:active{
- background-color: #E1DCD3;
- color: #333
- }
- .carousel{
- display: block;
- height: 150px;
- padding: 0;
- border: 0;
- background-color: #E1DCD3
- }
- h2{
- text-align: center
- }
- span{
- font-size: 10px
- }
- .centrage{
- text-align: center
- }
- article{
- display: inline-flex;
- height: 150px;
- width: 25%;
- background-color: #E1DCD3;
- margin: 5px;
- padding: 15%;
- }
- form h2{
- text-align: left;
- padding: 10px;
- border-top: 1px solid #333
- }
- select, input, textarea {
- display: block;
- margin-left: auto;
- margin-right: auto;
- width: 80%;
- padding: 12px;
- border: 1px solid #ccc;
- /*border-radius: 4px; */
- box-sizing: border-box;
- margin-top: 6px;
- margin-bottom: 16px;
- }
- select{
- background-color: white
- }
- footer{
- display: inline-flex;
- background-color: #463A3A;
- width: 100%;
- padding: 2%;
- }
- footer ul li{
- font-size: 14px;
- color: white;
- list-style: none;
- text-align: left;
- margin-right: 30px;
- margin-left: 0px;
- }
- .footerdroite{
- display: flex;
- flex-direction: column;
- margin-left: 50%
- }
- @media only screen and (max-width:961px) {
- h2{
- font-size: 2em
- }
- span{
- font-size: 0.5em
- }
- form h2{
- text-align: center
- }
- article{
- display:flex;
- background-color: #E1DCD3;
- margin: 5px;
- padding: 15%;
- width: 95%;
- }
- footer{
- display: flex;
- flex-direction: column;
- background-color: #463A3A;
- }
- footer ul li{
- font-size: 12px;
- color: white;
- list-style: none;
- text-align: center;
- margin-right: 30px;
- margin-left: 0px;
- }
- .footerdroite{
- margin-left: 0%;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement