SHARE
TWEET

Untitled

a guest Oct 22nd, 2019 86 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Find the precious!</title>
  7.     <link rel="stylesheet" href="style.css">
  8. </head>
  9.  
  10. <body>
  11.     <nav>
  12.         <ul>
  13.             <li>FindThePrecious.com</li>
  14.             <li>Fellows</li>
  15.             <li>Contact us</li>
  16.         </ul>
  17.     </nav>
  18.     <section>
  19.         <div class="carousel"></div>
  20.     </section>
  21.     <section id="pres">
  22.         <h2>Fellows wanted dead (or alive if you want to eat them later)</h2>
  23.     </section>
  24.     <section id="articles">
  25.         <article></article>
  26.         <article></article>
  27.         <article></article>
  28.     </section>
  29.     <form>
  30.         <h2>Contact us</h2>
  31.         <input type="email" placeholder="@">
  32.         <input type="text" placeholder="&#8962;">
  33.         <input type="text" placeholder="I have seen one of them">
  34.         <textarea placeholder="Your message"></textarea>
  35.     </form>
  36.     <footer>
  37.         <ul>
  38.             <li>Lorem</li>
  39.             <li>Ipsum</li>
  40.             <li>Lamet</li>
  41.             <li>Sidao</li>
  42.             <li>kamaq</li>
  43.             <li>Balios</li>
  44.             <li>Sigma</li>
  45.             <li>Test</li>
  46.             <li>Yes</li>
  47.         </ul>
  48.     </footer>
  49. </body>
  50.  
  51. </html>
  52.  
  53.  
  54. style.css
  55.  
  56. * {
  57.     padding: 0;
  58.     margin: 0;
  59. }
  60.  
  61. html {
  62.     height: 100%;
  63.     width: 100%;
  64.  
  65. }
  66.  
  67. body {
  68.     display: flex;
  69.     align-items: center;
  70.     flex-direction: column;
  71.     height: 100%;
  72. }
  73.  
  74. nav {
  75.     width: 100%;
  76.     background-color: gray;
  77. }
  78.  
  79. nav>ul {
  80.     display: flex;
  81.     justify-content: flex-start;
  82. }
  83.  
  84. nav>ul>li {
  85.     display: block;
  86.     padding: 10px 30px;
  87. }
  88.  
  89. nav>ul>li:hover {
  90.     background-color: darkgrey;
  91. }
  92.  
  93. section {
  94.     width: 100%;
  95. }
  96.  
  97. section>div.carousel {
  98.     height: 400px;
  99.     background-color: black;
  100. }
  101.  
  102. section#pres {
  103.     text-align: center;
  104.     padding: 20px;
  105. }
  106.  
  107. section#articles {
  108.     display: flex;
  109.     justify-content: space-around;
  110.     align-items: center;
  111.  
  112.     margin-bottom: 80px;
  113. }
  114.  
  115. section#articles>article {
  116.     padding: 10px;
  117.     height: 300px;
  118.     background-color: gray;
  119.     width: 30%;
  120. }
  121.  
  122. form {
  123.     width: 80%;
  124.     display: flex;
  125.     justify-content: center;
  126.     flex-direction: column;
  127. }
  128.  
  129. form>* {
  130.     padding: 10px;
  131.     margin: 10px;
  132.  
  133. }
  134.  
  135. form>textarea {
  136.     height: 250px;
  137. }
  138.  
  139. footer {
  140.     width: 100%;
  141.     background-color: gray;
  142. }
  143.  
  144. footer>ul {
  145.     list-style: none;
  146.     align-items: center;
  147.     height: 90px;
  148.     display: flex;
  149.     flex-direction: column;
  150.     flex-wrap: wrap;
  151.     padding: 20px;
  152.     justify-content: center;
  153. }
  154.  
  155. @media screen and (max-width: 640px) {
  156.     footer>ul {
  157.         flex-wrap: nowrap;
  158.         height: auto;
  159.  
  160.     }
  161.  
  162.     section#articles {
  163.         flex-direction: column;
  164.         justify-content: space-between;
  165.         height: 300px;
  166.         width: 100%;
  167.  
  168.     }
  169.  
  170.     section#articles>article {
  171.         width: 90%;
  172.         margin: 10px;
  173.     }
  174. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top