API tools faq
paste
Advertisement
juliusDum

flex box Jules

juliusDum
Mar 7th, 2020
103
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 4.36 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.         <title>Find the precious!</title>
  7.         <link rel="stylesheet" href="style.css">
  8.     </head>
  9.     <body>
  10.         <nav>
  11.             <ul>
  12.                 <li>FindThePrecious.com</li>
  13.                 <li class="color">Fellows</li>
  14.                 <li>Contact us</li>
  15.             </ul>
  16.         </nav>
  17.         <section>
  18.             <div class="carousel"></div>
  19.         </section>
  20.         <section>
  21.             <h2>Fellows wanted dead (or alive if you want to eat them later)</h2>
  22.         </section>
  23.         <section class="images">
  24.             <article></article>
  25.             <article></article>
  26.             <article></article>      
  27.         </section>
  28.         <hr>
  29.         <form>
  30.             <h2 class="formulaire">Contact us</h2>
  31.  
  32.             <input type="email" placeholder="@">
  33.             <input type="text" placeholder="&#8962;">
  34.             <input id="defilant" type="text" placeholder="I have seen one of them">
  35.             <textarea placeholder="Your message"></textarea>
  36.             <input id="button" type="submit" value="send !">
  37.         </form>
  38.         <footer>
  39.             <div class="container">
  40.                 <ul>
  41.                   <li><a href="" title="About us" target="_blank"> About us</a></li>
  42.                   <li><a href="" title="Fellow" target="_blank"> Fellow</a></li>
  43.                   <li><a href="" title="Joint our army" target="_blank"> Joint our army</a></li>
  44.                 </ul>
  45.                 <br/>
  46.             </div>
  47.             <div class="container">
  48.                 <ul>
  49.                      <li><a href="" title="FAQ" target="_blank"> FAQ</a></li>
  50.                      <li><a href="" title="Reward conditions" target="_blank"> Reward conditions</a></li>
  51.                      <li><a href="" title="Legal mentions" target="_blank"> Legal mentions</a></li>
  52.                 </ul>
  53.                 <br/>
  54.             </div>
  55.             <div class="container">
  56.                 <ul>
  57.                      <li><a href="" title="Sauron4Ever.com" target="_blank"> Sauron4Ever.com</a></li>
  58.                      <li><a href="" title="Follow him also on Twitter" target="_blank"> Follow him also on Twitter</a></li>
  59.                 </ul>
  60.                 <br/>
  61.             </div>
  62.         </footer>
  63.     </body>
  64. </html>
  65.  
  66. /* version desktop */
  67. * {
  68.     margin: 0;  
  69. }
  70.  
  71. nav ul {
  72.     display: flex;
  73.     list-style-type: none;
  74.     padding: 0 3px;
  75.     background-color: #696969;
  76. }
  77.  
  78.  
  79. li {
  80.     padding: 6px;
  81. }
  82.  
  83. .color {
  84.     background-color: #E7E4E4;
  85.  
  86. }
  87.  
  88. .carousel {
  89.     height: 120px;
  90.     background-color: #EFECEB;
  91. }
  92.    
  93. h2 {
  94.     padding: 30px;
  95.     text-align: center;
  96. }
  97. .images {
  98.     text-align: center;
  99. }
  100. article {
  101.     height: 200px;
  102.     width: 25%;
  103.     padding: 20px;
  104.     margin: 1%;
  105.     display: inline-block;
  106.     background-color: #EFECEB;
  107. }
  108.  
  109. hr {
  110.     color: black;
  111. }
  112.  
  113. form {
  114.     display: list-item;
  115. }
  116.  
  117. .formulaire {
  118.     text-align: left;
  119.     font-size: 40px
  120. }
  121. input {
  122.     display: list-item;
  123.     margin: 15px auto;
  124.     width: 80%;
  125. }
  126.  
  127. #defilant {
  128.     border-radius: 10px;
  129. }
  130.  
  131. textarea {
  132.     display: list-item;
  133.     width: 80%;
  134.     height: 100px;
  135.     margin: 15px auto;  
  136. }
  137.  
  138. #button {
  139.     text-align: center;
  140.     width: 60px;
  141.     background-color: #696969;
  142.     border: black;
  143.     border-radius: 5px;
  144. }
  145.  
  146. footer {
  147.     display: flex;
  148.     flex-direction: row;
  149.     justify-content: space-between;
  150.     margin-top: 10%;
  151.     height: auto;
  152.     width: 100%;
  153.     background-color: #696969;
  154.    
  155. }
  156.  
  157. ul {
  158.     list-style-type: none;
  159. }
  160.  
  161. @media only screen and (max-width: 961px) {
  162.  
  163.    
  164.     .images {
  165.         display: flex;
  166.         flex-direction: column;
  167.         align-items: center;
  168.         justify-content: center;
  169.     }
  170.  
  171.     h2 {
  172.         padding: 30px;
  173.         text-align: center;
  174.         font-size: 50px;
  175.     }
  176.  
  177.     .formulaire {
  178.         text-align: center;
  179.         font-size: 40px;
  180.     }
  181.     form {
  182.         display: flex;
  183.         flex-direction: column;
  184.         align-items: center;
  185.         justify-content: center;
  186.     }
  187.  
  188.     footer {
  189.         text-align: center;
  190.         display: flex;
  191.         flex-direction: column;
  192.         align-items: center;
  193.         justify-content: center;
  194.     }
  195.  }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!