API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Nov 24th, 2017
56
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.79 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="fr">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>La WebAgency: l'agence de tous vos projets</title>
  6. <meta name="WebAgency" content="La Web Agency qui introduit l'Art dans le monde du numérique">
  7. <!-- protocole Open Graph FB -->
  8. <meta property="og:title" content="La WebAgency: l'agence de tous vos projets"/>
  9. <meta property="og:type" content="website"/>
  10. <meta property="og:url" content="http://www.example.com/"/> <!-- à compléter -->
  11. <meta property="og:image" content="http://example.com/image.jpg"/>
  12. <meta property="og:description" content="Description Here"/>
  13. <!-- Twitter Card data -->
  14. <meta name="twitter:card" content="summary">
  15. <meta name="twitter:site" content="@patrick_valcke">
  16. <meta name="twitter:title" content="La WebAgency: l'agence de tous vos projets">
  17. <meta name="twitter:description" content="La Web Agency qui introduit l'Art dans le monde du numérique">
  18. <meta name="twitter:creator" content="@patrick_valcke">
  19. <!-- Twitter Summary card images must be at least 200x200px -->
  20. <meta name="twitter:image" content="http://www.example.com/image.jpg">
  21.  
  22. <!-- mettre les "styles" après les metas et les scripts ne sont pas utiles avant le navigateur
  23. , important au niveau optimisation -->
  24.  
  25. <link rel="stylesheet" href="style.css" />
  26. <link rel="stylesheet" href="fonts/font-awesome.min.css">
  27. <link rel="stylesheet" href="mediaqueries.css">
  28. <link rel="stylesheet" href="keyframes.css">
  29.  
  30. </head>
  31. <body>
  32. <!-- Header/En-tête -->
  33. <header>
  34. <div class="conteneur_1"> <!-- logo + menu -->
  35. <div class="logo_webagency"><img src="images/logo.png" alt="logo_webagency" />
  36. </div>
  37. <div class="menu">
  38. <nav>
  39. <ul class="menu_horizontal">
  40. <li><a href="#accueil">Accueil</a></li>
  41. <li><a href="#nos_services">Services</a></li>
  42. <li><a href="#nos_projets">Portfolio</a></li>
  43. <li><a href="#contact">Contact</a></li>
  44. </ul>
  45. </nav>
  46. </div>
  47. </div>
  48. <section id="accueil"> <!-- Slider + texte dessus -->
  49. <div class=conteneur_2>
  50. <ul class=slides>
  51. <li>
  52. <h1><span class="titleSlide">WEBAGENCY</span> : L'AGENCE DE TOUS <br>VOS PROJETS!</h1>
  53. <p>Vous avez un projet web ? La WebAgency vous aide à le réaliser !</p>
  54. <div class="sliderboutton"><button>Plus d'info</button></div>
  55. <img src="Images/slider/bg1.jpg" alt="photo jeune fille">
  56. </li>
  57. <li>
  58. <h1><span class="titleSlide">WEBAGENCY</span> : L'AGENCE DE TOUS <br>VOS PROJETS!</h1>
  59. <p>Vous avez un projet web ? La WebAgency vous aide à le réaliser !</p>
  60. <div class="sliderboutton"><button>Plus d'info</button></div>
  61. <img src='Images/slider/bg2.jpg' alt="photo jeune garcon">
  62. </li>
  63. </ul>
  64. </div>
  65. </section>
  66. </header>
  67. <!-- Section 1 : Les serices -->
  68. <section id="nos_services">
  69. <div class="conteneur_3">
  70. <div class="titre_services"> <!-- titre + séparateur + texte -->
  71. <div class="titre_1">
  72. <h2>NOS SERVICES</h2>
  73. </div>
  74. <div class="separateur"> <!-- ligne + icone + ligne -->
  75. <hr/>
  76. <span class="icone_1">
  77. <i class="fa fa-circle" color="" aria-hidden="true"></i>
  78. </span>
  79. <hr/>
  80. </div>
  81. <div class="texte_1">
  82. <p>
  83. Notre préoccupation est la satisfaction de nos clients.<br/> Et c'est pour cela que nous mettons en place les outils les plus avancés présents sur le marché,<br/> afin de répondre au mieux à leurs attentes
  84. </p>
  85. </div>
  86. </div>
  87. <div class="conteneur_4"> <!-- photo moniteur + icones + textes -->
  88. <div class="photo_apple"> <!-- uniquement photo moniteur -->
  89. <img src="images/main-feature.png" alt="photo_apple" />
  90. </div>
  91. <div class="texte_service"> <!-- icones + textes -->
  92. <ul>
  93. <li>
  94. <div class="ux_design">
  95. <div class="icones">
  96. <div class="ux_icon"><i class="fa fa-line-chart" aria-hidden="true"></i></div>
  97. <div class="point_bleu"></div>
  98. </div>
  99. <div class="texte_icone_2">
  100. <h3>UX design</h3>
  101. <p>Avec l'UX notre équipe de graphiste pense et conçoit de façon ergonomique vos sites web et applications</p>
  102. </div>
  103. </div>
  104. </li>
  105. <li>
  106. <div class="ui_design">
  107. <div class="icones">
  108. <div class="ui_icon"><i class="fa fa-cubes" aria-hidden="true"></i></div>
  109. <div class="point_bleu"></div>
  110. </div>
  111. <div class="texte_icone_3">
  112. <h3>UI design</h3>
  113. <p>Avec l'UI, l'optimisation de votre site est rendue plus intuitive pour les futurs utilisateurs</p>
  114. </div>
  115. </div>
  116. </li>
  117. <li>
  118. <div class="seo_design">
  119. <div class="icones">
  120. <div class="seo_icon"><i class="fa fa-pie-chart" aria-hidden="true"></i></div>
  121. <div class="point_bleu"></div>
  122. </div>
  123. <div class="texte_icone_4">
  124. <h3>SEO</h3>
  125. <p>Positionner votre site au sommet de la page des moteurs de recherche est votre ambition ?! Notre équipe de développeurs se charge de satisfaire vos exigeances</p>
  126. </div>
  127. </div>
  128. </li>
  129. </ul>
  130. </div>
  131. </div>
  132. </div>
  133. </section> <!-- Fin section Nos Services -->
  134. <!-- Section 2: Les Projets -->
  135. <section id="nos_projets">
  136. <div class="conteneur_5"> <!-- titre + separateur + texte + barre hover + portfolio dynamique -->
  137. <div id="titre_projets"> <!-- titre + separateur + texte -->
  138. <div class="titre_2">
  139. <h2>NOS PROJETS</h2>
  140. </div>
  141. <div class="separateur"> <!-- ligne + icone + ligne -->
  142. <hr/>
  143. <span class="icone_x"><i class="fa fa-circle" color="" aria-hidden="true"></i></span>
  144. <hr/>
  145. </div>
  146. <div class="texte_2">
  147. <p>Notre travail vous intéresse ? Voici quelques unes de nos créations,<br/>
  148. libres pour certaines et répondant à un cahier des charges pour d'autres.
  149. </p>
  150. </div>
  151. </div>
  152. <!-- barre dynamique + portfolio-->
  153. <nav class="barre_nav"> <!-- barre dynamique -->
  154. <div class="barre">
  155. <a href=""><p>All works</p></a>
  156. <div class="indicateur_hover"></div>
  157. </div>
  158. <div class="barre">
  159. <a href=""><p>Creative</p></a>
  160. <div class="indicateur_hover"></div>
  161. </div>
  162. <div class="barre">
  163. <a href=""><p>Corporate</p></a>
  164. <div class="indicateur_hover"></div>
  165. </div>
  166. <div class="barre">
  167. <a href=""><p>Portfolio</p></a>
  168. <div class="indicateur_hover"></div>
  169. </div>
  170. </nav>
  171. <!-- placement images portfolio -->
  172. <div class="portfolio">
  173. <div class="folios" id="folio_1" >
  174. <a href="images/portfolio/01.jpg">
  175. <img src="images/portfolio/01.jpg" alt="Nez à lunettes">
  176. </a>
  177. <div class="icone_oeil_legend"><i class="fa fa-eye"></i>
  178. <span class="folio_legend"><bold>Projet Creative</bold><br/>Nez à lunettes</span></div>
  179. </div>
  180. <div class="folios" id="folio_2">
  181. <a href="images/portfolio/02.jpg">
  182. <img src="images/portfolio/02.jpg" alt="Le lapin rose">
  183. </a>
  184. <div class="icone_oeil_legend"><i class="fa fa-eye"></i>
  185. <span class="folio_legend"><bold>Projet Creative</bold><br/>Le lapin rose</span></div>
  186. </div>
  187. <div class="folios" id="folio_3">
  188. <a href="images/portfolio/03.jpg">
  189. <img src="images/portfolio/03.jpg" alt="La Pompadour">
  190. </a>
  191. <div class="icone_oeil_legend"><i class="fa fa-eye"></i>
  192. <span class="folio_legend"><bold>Projet Creative</bold><br/>La Pompadour</span></div>
  193. </div>
  194. <div class="folios" id="folio_4">
  195. <a href="images/portfolio/04.jpg">
  196. <img src="images/portfolio/04.jpg" alt="Le carnet">
  197. </a>
  198. <div class="icone_oeil_legend"><i class="fa fa-eye"></i>
  199. <span class="folio_legend"><bold>Projet Corporate</bold><br/>Le carnet</span></div>
  200. </div>
  201. <div class="folios" id="folio_5">
  202. <a href="images/portfolio/05.jpg">
  203. <img src="images/portfolio/05.jpg" alt="Deux jolis sacs">
  204. </a>
  205. <div class="icone_oeil_legend"><i class="fa fa-eye"></i>
  206. <span class="folio_legend"><bold>Projet Creative</bold><br/>Deux jolis sacs</span></div>
  207. </div>
  208. <div class="folios" id="folio_6">
  209. <a href="images/portfolio/06.jpg">
  210. <img src="images/portfolio/06.jpg" alt="La ville">
  211. </a>
  212. <div class="icone_oeil_legend"><i class="fa fa-eye"></i>
  213. <span class="folio_legend"><bold>Projet Corporate</bold><br/>La ville</span></div>
  214. </div>
  215. <div class="folios" id="folio_7">
  216. <a href="images/portfolio/07.jpg">
  217. <img src="images/portfolio/07.jpg" alt="The rocket">
  218. </a>
  219. <div class="icone_oeil_legend"><i class="fa fa-eye"></i>
  220. <span class="folio_legend"><bold>Projet Corporate</bold><br/>The rocket</span></div>
  221. </div>
  222. <div class="folios" id="folio_8">
  223. <a href="images/portfolio/08.jpg">
  224. <img src="images/portfolio/08.jpg" alt="Le bureau">
  225. </a>
  226. <div class="icone_oeil_legend"><i class="fa fa-eye"></i>
  227. <span class="folio_legend"><bold>Projet Corporate</bold><br/>Le bureau</span></div>
  228. </div>
  229. </div>
  230. </div>
  231. </section> <!-- fin section projets -->
  232. <!-- section 3: Contact -->
  233. <section id="contact">
  234. <div class="conteneur_6"> <!-- google map + encart avec contact info (formulaire + bouton) + Z-index ou flexbox pour superposé + opacité -->
  235.  
  236. <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2624.167204789613!2d2.348407315674912!3d48.87408897928906!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e148945b521%3A0xc1d96f15b6fa4951!2sRue+d&#39;Hauteville%2C+75010+Paris!5e0!3m2!1sfr!2sfr!4v1509614285578" width="100%" height="600" frameborder="0" style="border:0" allowfullscreen>
  237. </iframe>
  238.  
  239. <div class="voile_bleu"></div>
  240.  
  241. <div class="contact_info">
  242. <div class="texte_info">
  243. <h3>Contact Info</h3>
  244. <p><strong>WebAgency SAS</strong> <br />
  245. 25 Rue d'Hauteville 75010 Paris <br />
  246. Tel : 01 02 03 04 05
  247. </p>
  248. </div>
  249. <div class="formulaire">
  250. <form method="post" action="">
  251. <label for="nom"></label>
  252. <input type="text" name="nom" id="nom" placeholder="Name" />
  253. <br />
  254. <label for="email"></label>
  255. <input type="email" name="email" id="email" placeholder="Email" />
  256. <br/ >
  257. <label for="sujet"></label>
  258. <input type="text" name="subject" id="subject" placeholder="Subject" />
  259. <br />
  260. <label for="message"></label><textarea name="message" id="message" rows="20" cols="50" placeholder="Message"></textarea>
  261. <br/>
  262. <button class="send" type="submit">Send Message</button>
  263. </form>
  264. </div>
  265. </div>
  266. </div>
  267. </section>
  268. </body>
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!