SHARE
TWEET

CSS box model

swann44 Feb 14th, 2020 80 in 23 days
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>Find the precious!</title>
  6.         <link rel="stylesheet" href="style.css">
  7.     </head>
  8.     <body>
  9.         <header>
  10.         <nav>
  11.             <ul>
  12.                 <li>FindThePrecious.com</li>
  13.                 <li>Fellows</li>
  14.                 <li>Contact us</li>
  15.             </ul>
  16.         </nav>
  17.     </header>
  18.         <section>
  19.             <div class="carousel">
  20.             <h2>Dangerous Fellowship try to destroy the ring</h2>
  21.             <p>Orcs, Goblims, Balrogs, protect your master Sauron!</p>
  22.         </div>
  23.         </section>
  24.         <section>
  25.             <div class="titre">
  26.             <h2>Fellows wanted dead</h2>
  27.             <p>(or alive if you want to eat them later)</p>
  28.         </div>
  29.         </section>
  30.         <section>
  31.             <article class="bloc1">
  32.             <div class="photo1">
  33.                 <p>Reward 1000 gold coins</p>
  34.             </div>
  35.             <div class="the">
  36.                 <h3>The Wizard</h3>
  37.                 <p>Small description...</p>
  38.             </div>
  39.         </article>
  40.         <article class="bloc2">
  41.             <div class="photo2">
  42.                 <p>DEAD</p>
  43.                  </div>
  44.                  <div class="hobbit">
  45.                     <h3>Hobbit#3</h3>
  46.                     <p>Small description...</p>
  47.                 </div>
  48.              </article>
  49.              <article class="bloc3">
  50.             <div class="photo3">
  51.                 <p>Reward 250 gold coins</p>
  52.                 </div>
  53.                 <div class="yummy">
  54.                     <h3>Yummy Dwarf</h3>
  55.                     <p>Small description...</p>
  56.                 </div>
  57.             </article>
  58.         </section>
  59.         <section>
  60.             <h2 class="contact">Contact us</h2>
  61.  
  62.             <form method="post" action="traitement.php">
  63.                     <p>
  64.                         <input type="email" name="mail" id="mail" placeholder="@" />
  65.                     </p>
  66.                
  67.                
  68.                     <p>
  69.                         <input type="text" name="adresse" id="adresse" placeholder="adresse" />
  70.                     </p>
  71.                
  72.                     <p>
  73.                         <label for="motif"></label><br />
  74.                         <select name="motif" id="motif">
  75.                             <option value="bla">I have seen one of them</option>
  76.                             <option value="blabla">blabla</option>
  77.                             <option value="blablabla">blablabla</option>
  78.                             <option value="blablablabla">blablablabla</option>
  79.                         </select>
  80.                     </p>
  81.                
  82.                     <p>
  83.                         <label for="message"></label><br />
  84.                         <textarea name="message" id="message" placeholder="Your message"></textarea>
  85.                     </p>
  86.                
  87.                
  88.                     <p>
  89.                         <input type="submit" id="bouton" value="Send!" />
  90.                     </p>
  91.                 </form>
  92.             </section>
  93.             <footer>
  94.                
  95.                 <p>
  96.                    <a href="page2.html">About us</a><br />
  97.                    <a href="page2.html">Fellows</a><br />
  98.                    <a href="page2.html">Joins our army</a>
  99.                 </p>
  100.            
  101.                 <p>
  102.                     <a href="page2.html">FAQ</a><br />
  103.                     <a href="page2.html">Reward conditions</a><br />
  104.                     <a href="page2.html">Legal mentions</a>
  105.                 </p>
  106.            
  107.                 <p>
  108.                     <a href="page2.html">Sauron4Ever.com</a><br />
  109.                     <a href="page2.html">Follow him also on twitter</a>
  110.                 </p>
  111.            
  112.             </footer>
  113.  
  114.     </body>
  115. </html>
  116.  
  117. li
  118. {
  119.     display: inline;
  120.     list-style: none;
  121.     padding: 10px;
  122.  
  123. }
  124. ul
  125. {
  126.     margin-left: 5px;
  127.     margin-right: 5px;
  128.     background-color: black;
  129.     color: white;
  130.     padding-top: 5px;
  131.     padding-bottom: 5px;
  132.     margin-bottom: 0px;
  133.     padding-left: 5px;
  134.    
  135. }
  136. ul li:first-child
  137. {
  138.     font-size: 20px;
  139. }
  140.  
  141. .carousel
  142. {
  143.     background-color: silver;
  144.     margin-left: 5px;
  145.     margin-right: 5px;
  146.     height: 250px;
  147.    
  148. }
  149.  
  150.  
  151. .carousel
  152. {
  153.     padding: 50px;
  154.     text-align: center;
  155.     padding-top: 40px;
  156.    
  157. }
  158. .carousel h2,p
  159. {
  160.    
  161.     font-size: 20px;
  162.  
  163. }
  164.  
  165. h2
  166. {
  167.     font-style: bold;
  168.     font-size: 35px;
  169. }
  170.  
  171. .titre h2,p
  172. {
  173.     display: inline-block;
  174.  
  175. }
  176.  
  177. .titre
  178. {
  179.     text-align: center;
  180. }
  181.  
  182.  
  183.  
  184. .photo1
  185. {
  186.     background-color: silver;
  187.     width: 350px;
  188.     height: 250px;
  189.     margin-left: 5px;
  190.     margin-top: 5px;
  191.     border-radius: 5px;
  192. }
  193. .photo1 p
  194. {
  195.     color: white;
  196.     font-size: 15px;
  197.     background-color: gray;
  198.     border-radius: 5px;
  199.     text-align: center;
  200.     margin-left: 75px;
  201.     padding: 10px;
  202. }
  203.  
  204. .bloc1
  205. {
  206.     background-color: white;
  207.     width: 360px;
  208.     height: 350px;
  209.     border: solid silver;
  210.     margin-left: 20px;
  211.     margin-right: 20px;
  212.  
  213. }
  214.  
  215. .the h3
  216. {
  217.     font-size: 25px;
  218.     margin-bottom: 0px;
  219.     margin-left: 20px;
  220. }
  221.  
  222. .the p
  223. {
  224.     font-size: 15px;
  225.     margin-left: 10px;
  226. }
  227.  
  228. .photo2
  229. {
  230.     background-color: gray;
  231.     width: 350px;
  232.     height: 250px;
  233.     margin-left: 5px;
  234.     margin-top: 5px;
  235.     border-radius: 5px;
  236. }
  237.  
  238. .photo2 p
  239. {
  240.     margin-left: 140px;
  241.     margin-top: 120px;
  242. }
  243.  
  244. .bloc2
  245. {
  246.     background-color: white;
  247.     width: 360px;
  248.     height: 350px;
  249.     border: solid silver;
  250.     margin-left: 20px;
  251.     margin-right: 20px;
  252. }
  253.  
  254. .hobbit h3
  255. {
  256.     font-size: 25px;
  257.     margin-bottom: 0px;
  258.     margin-left: 20px
  259. }
  260.  
  261. .hobbit p
  262. {
  263.     font-size: 15px;
  264.     margin-left: 10px;
  265. }
  266.  
  267. .photo3
  268. {
  269.     background-color: silver;
  270.     width: 350px;
  271.     height: 250px;
  272.     margin-left: 5px;
  273.     margin-top: 5px;
  274.     border-radius: 5px;
  275. }
  276.  
  277. .photo3 p
  278. {
  279.     color: white;
  280.     font-size: 15px;
  281.     background-color: gray;
  282.     border-radius: 5px;
  283.     text-align: center;
  284.     margin-left: 75px;
  285.     padding: 10px;
  286. }
  287.  
  288. .bloc3
  289. {
  290.     background-color: white;
  291.     width: 360px;
  292.     height: 350px;
  293.     border: solid silver;
  294.     margin-left: 20px;
  295.     margin-right: 20px;
  296. }
  297.  
  298. .yummy h3
  299. {
  300.     font-size: 25px;
  301.     margin-bottom: 0px;
  302.     margin-left: 20px;
  303. }
  304.  
  305. .yummy p
  306. {
  307.     font-size: 15px;
  308.     margin-left: 10px;
  309. }
  310.  
  311. article
  312. {
  313.     display: inline-block;
  314.    
  315. }
  316.  
  317. .contact
  318. {
  319.     border-top: 3px black solid;
  320.     margin-top: 150px;
  321. }
  322.  
  323. form p
  324. {
  325.     display: block;
  326. }
  327.  
  328. #mail
  329. {
  330.     margin-left: 250px;
  331.     width: 700px;
  332.     border: 2px black solid;
  333.  
  334. }
  335.  
  336. #adresse
  337. {
  338.     margin-left: 250px;
  339.     width: 700px;
  340.     border: 2px black solid;
  341. }
  342.  
  343. #motif
  344. {
  345.     margin-left: 250px;
  346.     width: 700px;
  347.     border: 2px silver solid;
  348. }
  349.  
  350. #message
  351. {
  352.     margin-left: 250px;
  353.     width: 700px;
  354.     height: 150px;
  355.     border: 2px black solid;
  356. }
  357.  
  358. #bouton
  359. {
  360.     margin-left: 900px;
  361.     background-color: gray;
  362.     border-radius: 15px;
  363. }
  364.  
  365. footer
  366. {
  367.     background-color: gray;
  368.     color: white;
  369. }
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
Top