SHARE
TWEET

Untitled

MrBIGBEBEN Feb 25th, 2020 89 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <link rel="stylesheet" href="style3.css">
  6.         <title>Service traiteur - Chez Pierrot</title>
  7.     </head>
  8. <body>
  9.     <div id="blocpage">
  10.     <header>
  11.         <h1>Restaurant chez Pierrot</h1>
  12.         <nav>
  13.                 <ul>
  14.                     <li><a href="page_accueil.html">Accueil</a></li>
  15.                     <li><a href="page_carte.html">La carte</a></li>
  16.                     <li><a href="page_traiteur.html" id="page">Service traiteur</a></li>
  17.                     <li><a href="pagereservationstyle4.html">Réservations</a></li>
  18.                     <li><a href="#">Nous contacter</a></li>
  19.                 </ul>
  20.         </nav>
  21.     </header>
  22.  
  23.     <section>
  24.         <div id="traiteurpage">
  25.         <article>
  26.             <div id="logopierrot">
  27.                 <img src="images/logo_pierrot.png"/>
  28.             </div>
  29.                 <p id="premierp">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  30.                 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  31.                 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  32.                 consequat.
  33.                 </p>
  34.             <div id="images">
  35.                 <img src="images/plat1.jpg"/>
  36.                 <img src="images/plat2.jpg"/>
  37.                 <img src="images/plat3.jpg"/>
  38.             </div>
  39.                 <p id="deuxiemep">Pour toutes commandes auprès du service traiteur veuillez nous appeler au 01 01 01 01 01
  40.                 </p>
  41.         </article>
  42.         </div>
  43.     </section>
  44.  
  45.     <footer>        <!-- Début bloc footer -->
  46.     <div id="blocfooter">
  47.         <div id="meslistes">
  48.             <div id="adresse">
  49.                 <h1>Adresse</h1>
  50.                 <ul>
  51.                     <li>16 quai de Stalingrad</li>
  52.                     <li>75001 Paris</li>
  53.                     <li>Métro : Châtelet</li>
  54.                 </ul>
  55.             </div>
  56.  
  57.         <div id="horraires">
  58.                 <h1>Horraires</h1>
  59.                 <ul>
  60.                     <li>Lundi au Vendredi : 11h30 - 15h / 18h - 23h</li>
  61.                     <li>Samedi : 11h30 - 15h / 18h - 2h</li>
  62.                     <li>Dimanche : Fermé</li>
  63.                 </ul>
  64.         </div>
  65.  
  66.             <div id="telephonecontact">
  67.                 <h1>Téléphone</h1>
  68.                 <p>06 06 06 06 06</p>
  69.             </div>
  70.         </div>  <!-- Fin div " mes listes " -->
  71.     </div>  <!-- Fin bloc footer -->
  72. </footer>
  73. </div>
  74.  
  75. </body>
  76. </html>
  77.  
  78.  
  79.  
  80.  
  81.  
  82. /* Dimenssions et Polices d'écriture */
  83.  
  84. @font-face
  85. {
  86.     font-family: Arial, sans-serif;
  87. }
  88.  
  89.  
  90.  
  91. html, body
  92. {
  93.     margin: 0;
  94.     padding: 0;
  95.     width: 100%;
  96.    
  97. }
  98.  
  99.  
  100.  
  101.  
  102.  
  103.  
  104.  
  105.  
  106.  
  107. #blocpage
  108. {
  109.     font-family: Arial, sans-serif;
  110.     background: url("images/restaurant.jpg") repeat-x;
  111.    
  112.     width: 100%;
  113.    
  114. }
  115.  
  116. /* Structure du header */
  117.  
  118. header
  119. {
  120.     background-color: rgba(91, 30, 20, 90%);
  121.     height: 135px;
  122.  
  123. }
  124.  
  125. header h1
  126. {
  127.     color: #FDD78C;
  128.     text-align: center;
  129.     padding-top: 5px;
  130.     padding-bottom: 5px;
  131.     margin-top: 0px;
  132.     font-size: 2em;
  133.        
  134. }
  135.  
  136. /* Structure du nav dans le header */
  137.  
  138. nav
  139. {
  140.     background-color: rgba(58, 14, 6, 95%);
  141.     height: 70px;
  142.     margin-top: -20px;
  143.  
  144. }
  145.  
  146. nav ul
  147. {
  148.     list-style: none;
  149.     display: flex;
  150.     justify-content: center;
  151.     padding-top: 10px;
  152.     padding-bottom: 10px;
  153. }
  154.  
  155. nav li
  156. {
  157. padding-top: 12px;
  158. padding-bottom: 12px;
  159. }
  160.  
  161. nav a
  162. {
  163.     color: white;
  164.     font-size: 1.3em;
  165.     text-decoration: none;
  166.     border: 1px solid white;
  167.     border-radius: 8px;
  168.     margin-left: 25px;
  169.     padding: 5px;
  170.     font-weight: bold;
  171. }
  172.  
  173. nav a:hover
  174. {
  175.     color: black;
  176.     background-color: white;
  177.     font-weight: bold;
  178. }
  179.  
  180. #page
  181. {
  182.     background-color: white;
  183.     color: black;
  184.     font-weight: bold;
  185. }
  186.  
  187. /* Structure page section */
  188. section
  189. {
  190.     width: 100%;
  191.     height: 600px;
  192.    
  193.     margin-top: 50px;
  194.  
  195. }
  196.  
  197. #traiteurpage
  198. {
  199.     width: 100%;
  200.     height: 1000px;
  201.     margin-top: 0px;
  202.     display: flex;
  203.     justify-content: center;
  204.  
  205. }
  206.  
  207. #traiteurpage p
  208. {
  209.     color: white;
  210.     font-size: 1em;
  211.    
  212.    
  213.    
  214. }
  215.  
  216.  
  217.  
  218. article
  219. {
  220.     background-color: rgba(0, 0, 0, 95%);
  221.     width: 1000px;
  222.     height: 550px;
  223.     border-radius: 10px;
  224.     margin-top: 0px;
  225. }
  226.  
  227. #logopierrot
  228. {
  229.  
  230.     width: 300px;
  231.     display: flex;
  232.     justify-content: center;
  233.     margin: auto;
  234. }
  235.  
  236. #logopierrot img
  237. {
  238.     margin-top: -90px;
  239. }
  240.  
  241.  
  242. #premierp
  243. {
  244.     margin-top: -30px;
  245.     text-align: center;
  246.    
  247. }
  248.  
  249. #deuxiemep
  250. {
  251.    
  252.     width: 1000px;
  253.  
  254.     margin-top: 15px;
  255.     text-align: center;
  256.    
  257. }
  258. #images
  259. {
  260.     display: flex;
  261.     justify-content: center;
  262.     width: 1000px;
  263.     margin-top: 25px;
  264.  
  265.    
  266.  
  267. }
  268.  
  269. #images img
  270. {
  271.     padding-top: 10px;
  272.     padding-bottom: 10px;
  273.     padding-left: 10px;
  274.     width: 250px;
  275.     border-radius: 15px;
  276. }
  277. /* Pied de page */
  278.  
  279. footer
  280. {
  281.     width: 100%;
  282.     height: 100px;
  283.     margin-top: 0px;
  284.    
  285.     border-bottom: 27px solid #5B1E14;
  286.     border-top: 27px solid #5B1E14;
  287.     background-color: yellow;
  288. }
  289.  
  290. #blocfooter
  291. {
  292.     width: 100%;
  293.     height: 100px;
  294.     margin-top: 0px;
  295.     margin: auto;              
  296. }
  297.  
  298. #meslistes
  299. {
  300.     background-color: #FDD78C;
  301.     height: 100px;
  302.     width: 100%;
  303.     display: flex;
  304.     justify-content: space-around;
  305.     margin-top: 0px;   
  306. }
  307.  
  308. #meslistes ul
  309. {
  310.     text-align: center;
  311.     font-style: italic;
  312.     padding-left: 10px;
  313.     padding-right: 10px;
  314.     list-style: none;
  315.     font-size: 1em;
  316. }
  317.  
  318. /* Adresse du restaurant */
  319.  
  320. #adresse ul
  321. {
  322.     margin-top: -10px;
  323. }
  324.  
  325. #adresse
  326. {
  327.     height: 90px;
  328.     margin-top: 5px;
  329. }
  330.  
  331. #adresse h1
  332. {
  333.     font-size: 1.3em;
  334.     margin-top: 0px;
  335.     text-align: center;
  336. }
  337.  
  338. /* Horraires du restaurant */
  339.  
  340. #horraires ul
  341. {
  342.     margin-top: -10px;
  343. }
  344.  
  345. #horraires
  346. {
  347.    
  348.     height: 90px;
  349.     width: 520px;
  350.     margin-top: 5px;
  351.  
  352. }
  353.  
  354. #horraires h1
  355. {
  356.     font-size: 1.3em;
  357.     margin-top: 0px;
  358.     text-align: center;
  359. }
  360.  
  361. /* Téléphone du restaurant */
  362.  
  363. #telephonecontact p
  364. {
  365.     margin-top: -10px;
  366.     text-align: center;
  367. }
  368.  
  369. #telephonecontact
  370. {
  371.    
  372.     height: 90px;
  373.     width: 150px;
  374.     margin-top: 20px;
  375.    
  376. }
  377.  
  378. #telephonecontact h1
  379. {
  380.     font-size: 1.3em;
  381.     margin-top: 0px;
  382.     text-align: center;
  383. }
  384.  
  385. /* barre de defilement et
  386. opacity a regler / disposition des listes / positionnement du telephone */
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