daily pastebin goal
49%
SHARE
TWEET

Untitled

a guest Oct 12th, 2018 64 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="utf-8">
  6.         <title>Basic Website</title>
  7.         <link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
  8.     </head>
  9.  
  10.  
  11. <body>
  12.  
  13.     <header>
  14.  
  15. <div class="container-2 clearfix">
  16.         <div class="container">
  17.             <a href="#" title="Retour à l'accueil" id="logo">
  18.                 <img src="images/logo.png" alt="Logo">
  19.             </a>
  20.  
  21. <!-- nav -->
  22.             <nav>
  23.                 <ul>
  24.                     <li><a href="">Société</a></li>
  25.                     <li><a href="">Services</a></li>
  26.                     <li><a href="">Contact</a></li>
  27.                 </ul>
  28.             </nav>
  29.         </div>
  30. <!-- /nav -->
  31. </div>     
  32.  
  33. <!-- hero -->
  34.         <div id="hero">
  35.             <div class="container clearfix">
  36.  
  37.                 <div id="hero-title">
  38.                     <h1>Slogan de la société</h1>
  39.                     <h2>Phrase d'accroche</h2>
  40.  
  41.                     <div id="call-to-action">
  42.                         <a href="">Bouton CTA 1</a>
  43.                         <a href="">Bouton CTA 2</a>
  44.                     </div>
  45.  
  46.                 </div>
  47.                 <img src="images/ecran.png" alt="Ecran" id="hero-image">
  48.             </div>
  49.         </div>
  50. <!-- hero -->
  51.  
  52.     </header>
  53.  
  54.  
  55. <!-- content -->
  56.    
  57.     <div id="content" class="container clearfix">
  58.         <section id="column-content">
  59.  
  60.         <div id="lead-in">
  61.             <h3>Nos services en HTML5 et CSS3</h3>
  62.             <p>Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
  63.         </div>
  64.  
  65.         <div class="column four">
  66.             <a href=""><img src="images/photo1.png" alt="laptop"></a>
  67.             <h4>Colonne 1</h4>
  68.             <p>Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
  69.         </div>
  70.  
  71.         <div class="column four">
  72.             <a href=""><img src="images/photo2.png" alt="html code"></a>
  73.             <h4>Colonne 2</h4>
  74.             <p>Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
  75.         </div>
  76.  
  77.         <div class="column four last">
  78.             <a href=""><img src="images/photo3.png" alt="statistiques"></a>
  79.             <h4>Colonne 3</h4>
  80.             <p>Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
  81.         </div>
  82.  
  83.         </section>
  84.  
  85.         <aside>
  86.  
  87.             <div class="widget">
  88.                 <h4>Actualités</h4>
  89.                 <h5>05 octobre 2018</h5>
  90.                 <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
  91.             </div>
  92.  
  93.  
  94.             <div class="widget socials">
  95.                 <h4>Suivez-nous</h4>
  96.                 <a href="" target="_blank"><img src="images/fb.png" alt="Suivez-nous sur Facebook"></a>
  97.                 <a href="" target="_blank"><img src="images/twitter.png" alt="Suivez-nous sur Twitter"></a>
  98.                 <a href="" target="_blank"><img src="images/youtube.png" alt="Suivez-nous sur Youtube"></a>
  99.             </div>
  100.  
  101.         </aside>
  102.  
  103.  
  104.     </div>
  105.  
  106. <!-- /content -->
  107.  
  108.  
  109. <!-- second cta -->
  110.    
  111.     <div id="secondary-cta" class="container clearfix">
  112.         <div>
  113.             <h4>Recevez les dernières nouvelles de notre société</h4>
  114.  
  115.             <form>
  116.                 <input type="email" placeholder="email@address.com">
  117.                 <input type="submit" value="S'inscrire">
  118.             </form>
  119.         </div>
  120.     </div>
  121.  
  122. <!-- /second cta -->
  123.  
  124. <footer>
  125.     <div  class="container clearfix">
  126.         <p id="copyright">Copyright © 2018</p>
  127.         <nav>
  128.             <ul>
  129.                 <li><a href="#logo">Accueil</a></li>
  130.                 <li><a href="">Société</a></li>
  131.                 <li><a href="">Services</a></li>
  132.                 <li><a href="">Contact</a></li>
  133.             </ul>
  134.         </nav>
  135.     </div>
  136. </footer>
  137.  
  138. </body>
  139.  
  140.  
  141. </html>
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