Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 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>FindThePrecious.com</li>
- <li>Fellows</li>
- <li>Contact us</li>
- </ul>
- </nav>
- <section>
- <div class="carousel"></div>
- </section>
- <section>
- <h2> <span>Fellows wanted dead</span> (or alive if you want to eat them later)</h2>
- </section>
- <section class='portrait'>
- <article></article>
- <article></article>
- <article></article>
- </section>
- <hr>
- <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>
- </form>
- <footer>
- <div class="wrapper">
- <div>
- <p>About us</p>
- <p>Fellows</p>
- <p>Join our army</p>
- </div>
- <div>
- <p>FAQ</p>
- <p>Reward conditions</p>
- <p>Legal mentions</p>
- </div>
- </div>
- <div class="moitier">
- <p>Sauron4Ever.com</p>
- <p>Follow him also on twitter</p>
- </div>
- </footer>
- </body>
- </html>
- css
- body{
- max-width: 1180px;
- margin-left:auto;
- margin-right:auto;
- }
- /*header*/
- nav{
- height: 50px;
- background-color:black;
- }
- nav ul{
- color:#ece8e8;
- max-width: 50%;
- display:flex;
- list-style-type: none;
- margin: 0;
- padding: 0;
- justify-content:space-around;
- align-items: center;
- height: 100%;
- }
- ul li{
- font-weight:bold;
- font-size: 1.5em;
- margin:0;
- }
- ul li:nth-child(2){
- font-size:1em;
- padding-top: 5px;
- }
- ul li:nth-child(3){
- font-size:1em;
- padding-top:5px;
- }
- /*caroussel*/
- .carousel{
- background-color: #ece8e8;
- min-height:300px;
- }
- /*wanted*/
- section h2{
- min-height: 100px;
- color:grey;
- text-align:center;
- padding-top:40px;
- font-size:1.3em;
- }
- h2 span {
- font-size: 1.5em;
- }
- /*portrait*/
- .portrait{
- display: flex;
- justify-content:space-around;
- align-items: center;
- }
- section > article{
- height:370px;
- width:370px;
- background-color:#ece8e8;
- margin:10px;
- }
- hr {
- margin-top: 100px;
- }
- /*form*/
- input{
- min-width: 900px;
- margin-bottom:10px;
- margin-left:10%;
- margin-right:10%;
- }
- textarea{
- min-width: 900px;
- margin-bottom:10px;
- margin-left:10%;
- margin-right:10%;
- }
- /*footer*/
- footer{
- background-color: black;
- display:flex;
- flex-direction: row;
- }
- footer .wrapper{
- display:flex;
- color:#ece8e8;
- min-width: 50%;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- justify-content: space-around;
- }
- footer .moitier{
- color:white;
- font-weight: bolder;
- display:flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- min-width: 50%;
- }
- MEDIA QUERIE POUR EXO 7 (8 PLUS BAS)
- @media (max-width:961px){
- body{
- max-width: 961px;
- margin-left:auto;
- margin-right:auto;
- }
- /*header*/
- ul li{
- font-size: 1em;
- margin:0;
- }
- ul li:nth-child(2){
- font-size:0.8em;
- }
- ul li:nth-child(3){
- font-size:0.8em;
- }
- /*section*/
- .carousel{
- display: none;
- }
- .portrait{
- display: none;
- }
- /*form*/
- input{
- min-width:600px;
- margin-left:7%;
- margin-right:7%;
- }
- textarea{
- min-width:600px;
- margin-left:7%;
- margin-right:7%;
- }
- }
- MEDIA QUERIE POUR EXO 8
- @media (max-width:500px){
- body{
- max-width: 500px;
- margin-left:auto;
- margin-right:auto;
- }
- /*header*/
- nav ul{
- max-width: 90%;
- }
- /*caroussel*/
- .carousel{
- min-height:300px;
- }
- /*portrait*/
- .portrait{
- display: flex;
- flex-direction: column;
- justify-content:space-around;
- align-items: center;
- }
- section > article{
- height:150px;
- width:320px;
- }
- /*form*/
- input{
- min-width: 300px;
- margin-bottom:10px;
- margin-left:3%;
- margin-right:3%;
- }
- textarea{
- min-width: 300px;
- margin-bottom:10px;
- margin-left:3%;
- margin-right:3%;
- }
- /*footer*/
- footer{
- background-color: black;
- display:flex;
- flex-direction: column;
- }
- footer .wrapper{
- display:flex;
- color:#ece8e8;
- min-width: 50%;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- }
- footer .wrapper div{
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- }
- footer .moitier{
- color:#ece8e8;
- font-weight: normal;
- display:flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- min-width: 50%;
- }
- }
Add Comment
Please, Sign In to add comment