Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!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 id="pres">
- <h2>Fellows wanted dead (or alive if you want to eat them later)</h2>
- </section>
- <section id="articles">
- <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">
- <textarea placeholder="Your message"></textarea>
- </form>
- <footer>
- <ul>
- <li>Lorem</li>
- <li>Ipsum</li>
- <li>Lamet</li>
- <li>Sidao</li>
- <li>kamaq</li>
- <li>Balios</li>
- <li>Sigma</li>
- <li>Test</li>
- <li>Yes</li>
- </ul>
- </footer>
- </body>
- </html>
- style.css
- * {
- padding: 0;
- margin: 0;
- }
- html {
- height: 100%;
- width: 100%;
- }
- body {
- display: flex;
- align-items: center;
- flex-direction: column;
- height: 100%;
- }
- nav {
- width: 100%;
- background-color: gray;
- }
- nav>ul {
- display: flex;
- justify-content: flex-start;
- }
- nav>ul>li {
- display: block;
- padding: 10px 30px;
- }
- nav>ul>li:hover {
- background-color: darkgrey;
- }
- section {
- width: 100%;
- }
- section>div.carousel {
- height: 400px;
- background-color: black;
- }
- section#pres {
- text-align: center;
- padding: 20px;
- }
- section#articles {
- display: flex;
- justify-content: space-around;
- align-items: center;
- margin-bottom: 80px;
- }
- section#articles>article {
- padding: 10px;
- height: 300px;
- background-color: gray;
- width: 30%;
- }
- form {
- width: 80%;
- display: flex;
- justify-content: center;
- flex-direction: column;
- }
- form>* {
- padding: 10px;
- margin: 10px;
- }
- form>textarea {
- height: 250px;
- }
- footer {
- width: 100%;
- background-color: gray;
- }
- footer>ul {
- list-style: none;
- align-items: center;
- height: 90px;
- display: flex;
- flex-direction: column;
- flex-wrap: wrap;
- padding: 20px;
- justify-content: center;
- }
- @media screen and (max-width: 640px) {
- footer>ul {
- flex-wrap: nowrap;
- height: auto;
- }
- section#articles {
- flex-direction: column;
- justify-content: space-between;
- height: 300px;
- width: 100%;
- }
- section#articles>article {
- width: 90%;
- margin: 10px;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement