API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Nov 24th, 2014
277
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.55 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Clos des Désirs</title>
  6. <style type="text/css">
  7. <!--
  8. html {
  9. background: url(img/bg.jpg) no-repeat center center fixed;
  10. -webkit-background-size: cover;
  11. -moz-background-size: cover;
  12. -o-background-size: cover;
  13. background-size: cover;
  14. }
  15. body {
  16. padding: 0;
  17. margin: 0;
  18. }
  19. .container-header {
  20. max-width: 840px;
  21. padding: 0 60px;
  22. margin: 0 auto;
  23. background-color: #fefbf4;
  24. overflow:hidden;
  25. }
  26. .header {
  27. position: fixed;
  28. padding: 25px 0 0;
  29. margin-right: 60px;
  30. text-align: center;
  31. background-color: #fefbf4;
  32. z-index: 0;
  33. }
  34. .header .nav {
  35. font-family: 'open_sanslight';
  36. text-transform: uppercase;
  37. color: #9e924a;
  38. font-size: 1.1rem;
  39. margin-bottom: 50px;
  40. margin-top: 20px;
  41. }
  42. .nav ul {
  43. list-style:
  44. }
  45. .nav li {
  46. display: inline;
  47. margin-right: 30px;
  48. letter-spacing: 2px;
  49. }
  50. .nav li:last-child {
  51. margin-right: 0;
  52. }
  53. .header img {
  54. text-align: center;
  55. }
  56.  
  57.  
  58. /* FLEXSLIDER */
  59.  
  60. .flexslider1 {
  61. max-width: 840px;
  62. }
  63. .flexslider1 img {
  64. width: 100%;
  65. }
  66. .flexslider2 {
  67. max-width: 420px;
  68. }
  69. .flexslider2 img {
  70. width: 100%;
  71. }
  72.  
  73.  
  74. /* CONTENT */
  75.  
  76. .content {
  77. background-color: #fefbf4;
  78. margin: 0 auto;
  79. max-width: 840px;
  80. overflow: hidden;
  81. padding: 0 60px;
  82. }
  83. .continue {
  84. margin-top: 700px;
  85. text-align: center;
  86. }
  87. .slide {
  88. background-color: #fefbf4;
  89. }
  90. .info {
  91. position: relative;
  92. padding-bottom: 400px;
  93. background-color: #fefbf4;
  94. z-index: 1;
  95. }
  96. .sentence {
  97. color: #666633;
  98. font-family: "open_sanslight";
  99. font-size: 1.6rem;
  100. line-height: 2.3rem;
  101. margin: 0;
  102. padding: 30px 0;
  103. position: relative;
  104. text-align: center;
  105. z-index: 1;
  106. }
  107. .detail-left {
  108. position: relative;
  109. max-width: 420px;
  110. float: left;
  111. }
  112. .detail-right {
  113. position: relative;
  114. background-color: #cccc99;
  115. max-width: 320px;
  116. height: 297px;
  117. padding: 0 50px;
  118. float: left;
  119. font-family: 'ralewaylight';
  120. color: #fff;
  121. font-size: 1.2rem;
  122. line-height: 1.7rem;
  123. font-weight: normal;
  124. text-align: center;
  125. box-shadow: 0 0 6px #888888;
  126. }
  127. .detail-right img {
  128. margin: 30px 0;
  129. }
  130.  
  131. /* FOOTER */
  132.  
  133.  
  134. .footer-content {
  135. position: relative;
  136. max-width: 840px;
  137. padding-bottom: 250px;
  138. height: 100px;
  139. font-family: 'ralewaybold';
  140. color: #fff;
  141. font-size: 1.6rem;
  142. text-align: center;
  143. background-color: #fefbf4;
  144. }
  145. .footer {
  146. position: relative;
  147. max-width: 840px;
  148. margin: 0 auto;
  149. padding: 40px 0;
  150. background-color: #cccc99;
  151. }
  152. fieldset {
  153. border: 0 none;
  154. margin-top: 20px !important;
  155. }
  156. input#email {
  157. background-image:url(img/mail.png);
  158. background-repeat:no-repeat;
  159. background-position:6% 50%;
  160. background-color: #fefbf4;
  161. width:225px;
  162. height:28px;
  163. color: #666633;
  164. font-family: 'ralewaylight';
  165. font-size: 1rem;
  166. background-color: #cccc99;
  167. border:1px solid #666633;
  168. margin-left:130px;
  169. padding-left: 48px;
  170. }
  171. input#submit {
  172. background-color:#666633;
  173. border:none;
  174. padding:5px 25px;
  175. font-family: 'ralewaymedium';
  176. color:#FFF;
  177. font-size: 0.9rem;
  178. margin-left:5px;
  179. text-transform: uppercase;
  180. }
  181. input#submit:hover{
  182. color: #000;
  183. background-color:#fefbf4;
  184. }
  185.  
  186. /* FONT */
  187.  
  188. @font-face {
  189. font-family: 'open_sanslight';
  190. src: url('font/OpenSans-Light-webfont.eot');
  191. src: url('font/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
  192. url('font/OpenSans-Light-webfont.woff') format('woff'),
  193. url('font/OpenSans-Light-webfont.ttf') format('truetype'),
  194. url('font/OpenSans-Light-webfont.svg#open_sanslight') format('svg');
  195. font-weight: normal;
  196. font-style: normal;
  197.  
  198. }
  199. @font-face {
  200. font-family: 'ralewaylight';
  201. src: url('font/raleway-light-webfont.eot');
  202. src: url('font/raleway-light-webfont.eot?#iefix') format('embedded-opentype'),
  203. url('font/raleway-light-webfont.woff2') format('woff2'),
  204. url('font/raleway-light-webfont.woff') format('woff'),
  205. url('font/raleway-light-webfont.ttf') format('truetype'),
  206. url('font/raleway-light-webfont.svg#ralewaylight') format('svg');
  207. font-weight: normal;
  208. font-style: normal;
  209.  
  210. }
  211. @font-face {
  212. font-family: 'ralewaymedium';
  213. src: url('font/raleway-medium-webfont.eot');
  214. src: url('font/raleway-medium-webfont.eot?#iefix') format('embedded-opentype'),
  215. url('font/raleway-medium-webfont.woff2') format('woff2'),
  216. url('font/raleway-medium-webfont.woff') format('woff'),
  217. url('font/raleway-medium-webfont.ttf') format('truetype'),
  218. url('font/raleway-medium-webfont.svg#ralewaymedium') format('svg');
  219. font-weight: normal;
  220. font-style: normal;
  221.  
  222. }
  223. @font-face {
  224. font-family: 'ralewaybold';
  225. src: url('font/raleway-bold-webfont.eot');
  226. src: url('font/raleway-bold-webfont.eot?#iefix') format('embedded-opentype'),
  227. url('font/raleway-bold-webfont.woff2') format('woff2'),
  228. url('font/raleway-bold-webfont.woff') format('woff'),
  229. url('font/raleway-bold-webfont.ttf') format('truetype'),
  230. url('font/raleway-bold-webfont.svg#ralewaybold') format('svg');
  231. font-weight: normal;
  232. font-style: normal;
  233.  
  234. }
  235.  
  236. -->
  237. </style>
  238. <link rel="stylesheet" href="css/flexslider.css">
  239. <link rel="stylesheet" href="css/flexslider2.css">
  240. </head>
  241.  
  242. <body>
  243. <div class="container-header">
  244. <div class="header">
  245. <img src="img/clos_des_desirs_logo.png" width="340" height="114" alt="Clos des Désirs"/>
  246. <div class="nav">
  247. <ul>
  248. <li>Situation</li>
  249. <li>Finitions</li>
  250. <li>Plans</li>
  251. <li>Concepteurs</li>
  252. <li>Contact</li>
  253. </ul>
  254. </div>
  255.  
  256. <div class="flexslider1">
  257. <ul class="slides">
  258. <li><img src="img/slide_home1.jpg" alt=""/></li>
  259. <li><img src="img/slide_home2.jpg" alt=""/></li>
  260. <li><img src="img/slide_home3.jpg" alt=""/></li>
  261. </ul>
  262. </div>
  263.  
  264. </div>
  265. </div>
  266. <div class="content">
  267. <div class="continue">
  268. <a data-scroll data-options='{ "easing": "easeInQuad" }' href="#content"><img src="img/continue.jpg" width="124" height="90" alt=""/></a>
  269. </div>
  270. <div class="info">
  271. <div id="content"></div>
  272. <div class="sentence">
  273. Le Clos des Désirs est une résidence intimiste de 15 appartements composée de 3 petits immeubles en intérieur d’îlot calme et verdoyant.
  274. </div>
  275. <div class="detail-left">
  276. <div class="flexslider2">
  277. <ul class="slides">
  278. <li><img src="img/slide_detail1.jpg" alt=""/></li>
  279. <li><img src="img/slide_detail2.jpg" alt=""/></li>
  280. <li><img src="img/slide_detail3.jpg" alt=""/></li>
  281. </ul>
  282. </div>
  283. </div>
  284. <div class="detail-right"><img src="img/icon_tree.png" width="150" height="105" alt=""/><br />Les appartements (studio, 1,2 & 3 chambres) sont pourvus d’un jardin et/ou grande terrasse.</div>
  285. </div>
  286. <div class="footer-content">
  287. <div class="footer">
  288. INFO 0486 254 898<br />
  289. <fieldset>
  290. <input type="email" name="email" size="20" maxlength="40" value="Mon adresse email" id="email" />
  291. <input id="submit" type="submit" value="Envoyer">
  292. </fieldset>
  293. </div>
  294. </div>
  295. </div>
  296.  
  297. <!-- jQuery -->
  298. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  299. <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>
  300.  
  301. <!-- FlexSlider -->
  302. <script defer src="js/jquery.flexslider.js"></script>
  303.  
  304. <script type="text/javascript">
  305. $(function(){
  306. SyntaxHighlighter.all();
  307. });
  308. $(window).load(function(){
  309. $('.flexslider1').flexslider({
  310. animation: 'fade',
  311. controlNav: false,
  312. directionNav: false,
  313. controlsContainer: '.flex-container'
  314. });
  315.  
  316. $('.flexslider2').flexslider({
  317. animation: 'slide',
  318. reverse: true,
  319. directionNav: false,
  320. controlsContainer: '.flex-container'
  321. });
  322. });
  323. </script>
  324.  
  325. <!-- Javascript -->
  326. <script src='js/bind-polyfill.js'></script>
  327. <script src='js/smooth-scroll.js'></script>
  328. <script>
  329. smoothScroll.init({
  330. speed: 1000,
  331. easing: 'easeInOutCubic',
  332. offset: 0,
  333. updateURL: true,
  334. callbackBefore: function ( toggle, anchor ) {},
  335. callbackAfter: function ( toggle, anchor ) {}
  336. });
  337. </script>
  338.  
  339. </body>
  340. </html>
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!