Advertisement
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>
- <div class="flex-container-row">
- <section>
- <h2 class="fellows-title">Fellows wanted dead <span>(or alive if you want to eat them later)</span></h2>
- </section>
- <section class="article-section">
- <article></article>
- <article></article>
- <article></article>
- </section>
- </div>
- <form>
- <h2 class="contact-title">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>
- <input type="submit" value="Send!">
- </form>
- <footer>
- <ul>
- <li><a href="https://www.findtheprecious.com/about">About us</a></li>
- <li><a href="https://www.findtheprecious.com/fellows">Fellows</a></li>
- <li><a href="https://www.findtheprecious.com/join">Join our army</a></li>
- </ul>
- <ul>
- <li><a href="https://www.findtheprecious.com/faq">FAQ</a></li>
- <li><a href="https://www.findtheprecious.com/rewards-conditions">Reward conditions</a></li>
- <li><a href="https://www.findtheprecious.com/legal-mentions">Legal mentions</a></li>
- </ul>
- <ul>
- <li><a href="https://www.sauron4ever.com">Sauron4ever.com</a></li>
- <li><a href="https://www.twitter.com/sauron4ever">Follow him</a></li>
- </ul>
- </footer>
- </body>
- </html>
- CSS :
- h2, p {
- color:#424242;
- }
- /* Navigation */
- nav {
- background-color:#424242;
- width:100vw;
- height:30px;
- }
- nav ul {
- display:inline-block;
- color:#bbbbbb;
- padding-left:0px;
- margin-top:0px;
- margin-bottom:0px;
- }
- nav ul li {
- display:inline;
- transition:all 0.2s ease-in-out;
- padding-left:10px;
- padding-right:10px;
- line-height:30px;
- height:30px;
- position:absolute;
- top:8px;
- }
- nav ul li:hover {
- background-color:#bbbbbb;
- color:#424242;
- }
- nav ul li:nth-child(2) {
- left:168.88px;
- }
- nav ul li:nth-child(3) {
- left:227px;
- }
- nav ul li:nth-child(2), nav ul li:nth-child(3) {
- font-size:12px;
- }
- /* Carousel */
- .carousel {
- width:100%;
- height:150px;
- background-color: #efefef;
- }
- /* Fellows wanted */
- .fellows-title {
- text-align:center;
- margin:25px 0;
- }
- .fellows-title span {
- font-size:12px;
- }
- article {
- width:calc(33% - 11px);
- height:250px;
- display:inline-block;
- margin-left:5px;
- margin-right:5px;
- background-color:#efefef;
- }
- /* Contact */
- .contact-title {
- margin:25px 0;
- position:relative;
- }
- .contact-title::before {
- position:absolute;
- content:'';
- width:100%;
- height:1px;
- background-color:#424242;
- left:0;
- margin-top:-10px;
- }
- /* Formulaire */
- input, textarea {
- display:block;
- width:80%;
- margin:10px auto;
- }
- textarea {
- height:100px;
- }
- /* FOOTER */
- footer {
- background-color:#424242;
- padding:20px 0;
- }
- footer a {
- color:white;
- text-decoration:none;
- }
- footer ul {
- list-style-type:none;
- text-align:center;
- margin:0;
- padding:0;
- }
- /* RESPONSIVE DESIGN */
- @media all and (max-width:960px) {
- h2.fellows-title {
- font-size:2em;
- }
- h2.fellows-title span {
- font-size:16px;
- }
- .contact-title {
- text-align:center;
- }
- .flex-container-row {
- display:flex;
- flex-direction:column;
- }
- .article-section {
- display:flex;
- flex-direction:column;
- align-items:center;
- }
- .article-section article {
- width:90%;
- margin:20px 0;
- }
- form {
- display:flex;
- flex-direction:column;
- }
- input[type="submit"] {
- margin-left:84%;
- width:auto;
- }
- footer {
- display:flex;
- flex-direction:column;
- align-items:center;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement