Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>FindThePrecious</title>
- <meta charset="UTF-8">
- <meta name="author" content="Lionel">
- <meta name="description"
- content="A website to look for a bunch of fellows">
- <meta name="viewport"
- content="width=device-width, initial-scale=1.0">
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <nav>
- <ul id=nav_ul>
- <li>FindThePrecious.com</li>
- <li>Fellows</li>
- <li>Contact us</li>
- </ul>
- </nav>
- <section>
- <div class="carousel"></div>
- </section>
- <section>
- <h2 class=fellows>Fellows wanted dead (or alive
- if you want to eat them later)</h2>
- </section>
- <section class=art>
- <article></article>
- <article></article>
- <article></article>
- </section>
- <hr>
- <form>
- <h2 class=contactus>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>
- <p class=right> <button type="submit">Send
- !</button> </p>
- </form>
- <footer>
- <div>
- <p>About us</p>
- <p>Fellow</p>
- <p>Join our army</p>
- </div>
- <div>
- <p>FAQ</p>
- <p>Reward conditions</p>
- <p>Legal mentions</p>
- </div>
- <div>
- <p>Sauron4ever.com</p>
- <p>Follow him also on twitter</p>
- </div>
- </footer>
- </body>
- </html>
- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
- html{
- height: 100%;
- }
- body {
- text-align: center;
- min-height: 100%;
- display: flex;
- flex-direction: column;
- /* min-height: 100%;
- display: flex;
- flex-direction: column;
- = force the body to adopt 100% of the viewport otherwise it will take the height of the content + height:100% sur HTML + margin-top: auto; sur footer*/
- }
- nav{
- height: 40px;
- background-color:#3a3a3a;
- }
- #nav_ul {
- display: flex;
- margin: 0;
- }
- li {
- padding-right: 40px;
- padding-top: 10px;
- color: white;
- list-style: none;
- }
- .carousel {
- background-color:lightgrey;
- height: 150px;
- width: 100%;
- }
- h2 {font-size: 18px;}
- input, textarea{
- width: 80%;
- margin: 0 auto;
- display: block;
- margin-top: 10px;
- }
- .contactus {
- display: flex;
- justify-content:flex-start;
- }
- .right {
- display: flex;
- justify-content: flex-end;
- }
- .fellows {
- display: flex;
- justify-content: center;
- }
- .container {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- }
- article{
- width: 20vw;
- height: 10vw;
- background:lightgrey;
- }
- .art {
- display:flex;
- flex-direction:row;
- justify-content: space-around;
- align-items: center;
- }
- input, textarea{
- width: 80%;
- margin: 0 auto;
- display: block;
- margin-top: 10px;
- }
- footer{
- display: flex;
- flex-direction: row;
- justify-content: space-around;
- color: white;
- background-color:#3a3a3a;
- margin-top: auto;
- }
- @media (max-width:961px) {
- .contactus{justify-content: center;}
- .art {flex-direction: column;}
- article {width: 30vw; height: 20vw; margin-bottom: 6vw;}
- footer {flex-direction: column;}
- .container{flex-direction: column;}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement