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>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></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>
- </body>
- </html>
- style.css
- * {
- box-sizing: border-box;
- }
- html, body {
- margin: 0;
- padding: 0;
- background: #fff;
- }
- .menu {
- width: 100%;
- height: 70px;
- background: rgb(50, 50, 50);
- line-height: 70px;
- }
- .logo {
- padding: 0;
- margin: 0;
- color: rgb(200, 200, 200);
- margin-left: 30px;
- margin-right: 30px;
- font-size: 30px;
- }
- .m-left {
- float: left;
- }
- .m-right {
- float: left;
- }
- .m-link {
- text-decoration: none;
- color: rgb(200, 200, 200);
- font-size: 20px;
- padding: 22px;
- }
- .m-link:hover {
- background: rgb(200, 200, 200);
- color: rgb(50, 50, 50);
- padding: 22px;
- }
- .carousel {
- width: 100%;
- margin: 0 auto;
- padding: 180px;
- box-sizing: border-box;
- background: rgb(210, 210, 210);
- }
- .pitch {
- color: rgb(50, 50, 50);
- text-align: center;
- }
- .pitch span {
- font-size: 20px;
- color: rgb(100, 100, 100);
- }
- .contact-title {
- margin-left: 30px;
- color: rgb(50, 50, 50);
- }
- .article1 {
- width: 400px;
- height: 350px;
- background: rgb(210, 210, 210);
- margin-left: 30px;
- margin-bottom: 120px;
- float: left;
- }
- .article2 {
- width: 400px;
- height: 350px;
- background: rgb(210, 210, 210);
- margin-left: 30px;
- margin-bottom: 120px;
- float: left;
- }
- .article3 {
- width: 400px;
- height: 350px;
- background: rgb(210, 210, 210);
- margin-left: 30px;
- margin-bottom: 120px;
- float: left;
- }
- .hr {
- clear: both;
- margin: 0px 30px 0px 30px;
- }
- .input-email {
- background: #fff;
- border: 2px solid rgb(50, 50, 50);
- padding: 8px 1000px 8px 4px;
- margin: 0px 20px 20px 30px;
- border-radius: 4px;
- }
- .input-address {
- background: #fff;
- border: 2px solid rgb(50, 50, 50);
- padding: 8px 1000px 8px 4px;
- margin: 0px 20px 20px 30px;
- border-radius: 4px;
- }
- .input-class {
- background: #fff;
- border: 2px solid rgb(50, 50, 50);
- padding: 8px 850px 8px 4px;
- margin: 0px 20px 20px 30px;
- border-radius: 4px;
- }
- .message {
- background: #fff;
- border: 2px solid rgb(50, 50, 50);
- padding: 8px 0 8px 4px;
- margin: 0px 1800px 20px 30px;
- border-radius: 4px;
- min-width : 1180px;
- min-height : 120px;
- max-width : 1180px;
- max-height : 120px;
- }
- .champ {
- margin-bottom: 20px;
- margin-left: 150px;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement