API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Apr 19th, 2014
52
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.12 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>MultiPop!</title>
  5.  
  6. <link rel="stylesheet" href="css/style.css">
  7. <link rel="stylesheet" href="css/1140.css">
  8.  
  9. <meta charset="utf-8">
  10.  
  11. <meta name="keywords" content="phone, case, holder, car, vent, iphone, 4, 5, 6, galaxy, s2, s3, s4, s5, s6, samsung, apple">
  12. <meta name="description" content="Smartphone car holder and stand ALL IN ONE for iPhone or Android!">
  13. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  14.  
  15. <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
  16. </head>
  17. <body>
  18. <div class="container12">
  19. <div class="head">
  20. <a href="#"><img class="logo"src="img/logo.png"></a>
  21. <div class="menu">
  22. <ul>
  23. <li data-slide="1">What is It?</li>
  24. <li data-slide="2">How?</li>
  25. <li data-slide="3">FAQ</li>
  26. <li><a class="buy" href="#"><p>Buy Now</p></a></li>
  27. </ul>
  28. </div>
  29. </div>
  30. <div class="headFix"></div>
  31. <div class="row">
  32. <div class="column12">
  33. "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  34. </div>
  35. </div>
  36. <div class="footer">
  37. <div class="column6">
  38. hello
  39. </div>
  40. <div class="column6">
  41.  
  42. </div>
  43. </div>
  44. </div>
  45. </body>
  46. </html>
  47.  
  48. html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;margin:0;padding:0}article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block}a img{border:0}figure{position:relative}figure img{width:100%}
  49.  
  50. /* -------------------- custom .head and .headfix class -------------------- */
  51.  
  52. .head {
  53. padding-bottom: 30px !important;
  54. position: fixed !important;
  55. border-bottom: 1px solid #9C9C9C;
  56. z-index: 3;
  57. background-color: #fff;
  58. }
  59. .headFix {
  60. height: 106px;
  61. padding-bottom: 25px;
  62. }
  63.  
  64. .container12, .container16, .head, .headfix{
  65. margin:0 auto;
  66. padding:0;
  67. position:relative;
  68. width:1140px;
  69. }
  70.  
  71.  
  72. .row {margin-bottom:20px;}
  73. .column1, .column2, .column3, .column4, .column5, .column6, .column7, .column8, .column9, .column10, .column11, .column12, .column13, .column14, .column15, .column16 {
  74. display:inline;
  75. float:left;
  76. margin-left:10px;
  77. margin-right:10px;
  78. }
  79. .container12 .alpha, .container16 .alpha {margin-left:0;}
  80. .container12 .omega, .container16 .omega {margin-right:0;}
  81. .container12 .column1 {width:75px;}
  82. .container12 .column2 {width:170px;}
  83. .container12 .column3 {width:265px;}
  84. .container12 .column4 {width:360px;}
  85. .container12 .column5 {width:455px;}
  86. .container12 .column6 {width:550px;}
  87. .container12 .column7 {width:645px;}
  88. .container12 .column8 {width:740px;}
  89. .container12 .column9 {width:835px;}
  90. .container12 .column10 {width:930px;}
  91. .container12 .column11 {width:1025px;}
  92. .container12 .column12 {width:1120px;}
  93. .container12 .prefix1 {padding-left:95px;}
  94. .container12 .prefix2 {padding-left:190px;}
  95. .container12 .prefix3 {padding-left:285px;}
  96. .container12 .prefix4 {padding-left:380px;}
  97. .container12 .prefix5 {padding-left:475px;}
  98. .container12 .prefix6 {padding-left:570px;}
  99. .container12 .prefix7 {padding-left:665px;}
  100. .container12 .prefix8 {padding-left:760px;}
  101. .container12 .prefix9 {padding-left:855px;}
  102. .container12 .prefix10 {padding-left:950px;}
  103. .container12 .prefix11 {padding-left:1045px;}
  104.  
  105. .container16 .column1 {width:51.25px;}
  106. .container16 .column2 {width:122.5px;}
  107. .container16 .column3 {width:193.75px;}
  108. .container16 .column4 {width:265px;}
  109. .container16 .column5 {width:336.25px;}
  110. .container16 .column6 {width:407.5px;}
  111. .container16 .column7 {width:478.75px;}
  112. .container16 .column8 {width:550px;}
  113. .container16 .column9 {width:621.25px;}
  114. .container16 .column10 {width:692.5px;}
  115. .container16 .column11 {width:763.75px;}
  116. .container16 .column12 {width:835px;}
  117. .container16 .column13 {width:906.25px;}
  118. .container16 .column14 {width:977.5px;}
  119. .container16 .column15 {width:1048.75px;}
  120. .container16 .column16 {width:1120px;}
  121. .container16 .prefix1 {padding-left:71.25px;}
  122. .container16 .prefix2 {padding-left:142.5px;}
  123. .container16 .prefix3 {padding-left:213.75px;}
  124. .container16 .prefix4 {padding-left:285px;}
  125. .container16 .prefix5 {padding-left:356.25px;}
  126. .container16 .prefix6 {padding-left:427.5px;}
  127. .container16 .prefix7 {padding-left:498.75px;}
  128. .container16 .prefix8 {padding-left:570px;}
  129. .container16 .prefix9 {padding-left:641.25px;}
  130. .container16 .prefix10 {padding-left:712.5px;}
  131. .container16 .prefix11 {padding-left:783.75px;}
  132. .container16 .prefix12 {padding-left:855px;}
  133. .container16 .prefix13 {padding-left:926.25px;}
  134. .container16 .prefix14 {padding-left:997.5px;}
  135. .container16 .prefix15 {padding-left:1068.75px;}
  136.  
  137. @media only screen and (min-width: 960px) and (max-width: 1160px) {
  138. .container12, .container16, .head {width:960px;}
  139. .container12 .column1 {width:60px;}
  140. .container12 .column2 {width:140px;}
  141. .container12 .column3 {width:220px;}
  142. .container12 .column4 {width:300px;}
  143. .container12 .column5 {width:380px;}
  144. .container12 .column6 {width:460px;}
  145. .container12 .column7 {width:540px;}
  146. .container12 .column8 {width:620px;}
  147. .container12 .column9 {width:700px;}
  148. .container12 .column10 {width:780px;}
  149. .container12 .column11 {width:860px;}
  150. .container12 .column12 {width:940px;}
  151. .container12 .prefix1 {padding-left:80px;}
  152. .container12 .prefix2 {padding-left:160px;}
  153. .container12 .prefix3 {padding-left:240px;}
  154. .container12 .prefix4 {padding-left:320px;}
  155. .container12 .prefix5 {padding-left:400px;}
  156. .container12 .prefix6 {padding-left:480px;}
  157. .container12 .prefix7 {padding-left:560px;}
  158. .container12 .prefix8 {padding-left:640px;}
  159. .container12 .prefix9 {padding-left:720px;}
  160. .container12 .prefix10 {padding-left:800px;}
  161. .container12 .prefix11 {padding-left:880px;}
  162. .container16 .column1 {width:40px;}
  163. .container16 .column2 {width:100px;}
  164. .container16 .column3 {width:160px;}
  165. .container16 .column4 {width:220px;}
  166. .container16 .column5 {width:280px;}
  167. .container16 .column6 {width:340px;}
  168. .container16 .column7 {width:400px;}
  169. .container16 .column8 {width:460px;}
  170. .container16 .column9 {width:520px;}
  171. .container16 .column10 {width:580px;}
  172. .container16 .column11 {width:640px;}
  173. .container16 .column12 {width:700px;}
  174. .container16 .column13 {width:760px;}
  175. .container16 .column14 {width:820px;}
  176. .container16 .column15 {width:880px;}
  177. .container16 .column16 {width:940px;}
  178. .container16 .prefix1 {padding-left:60px;}
  179. .container16 .prefix2 {padding-left:120px;}
  180. .container16 .prefix3 {padding-left:180px;}
  181. .container16 .prefix4 {padding-left:240px;}
  182. .container16 .prefix5 {padding-left:300px;}
  183. .container16 .prefix6 {padding-left:360px;}
  184. .container16 .prefix7 {padding-left:420px;}
  185. .container16 .prefix8 {padding-left:480px;}
  186. .container16 .prefix9 {padding-left:540px;}
  187. .container16 .prefix10 {padding-left:600px;}
  188. .container16 .prefix11 {padding-left:660px;}
  189. .container16 .prefix12 {padding-left:720px;}
  190. .container16 .prefix13 {padding-left:780px;}
  191. .container16 .prefix14 {padding-left:840px;}
  192. .container16 .prefix15 {padding-left:900px;}
  193. }
  194.  
  195. @media only screen and (min-width: 768px) and (max-width: 959px) {
  196. .container12, .container16, .head {width:768px;}
  197. .container12 .column1 {width:44px;}
  198. .container12 .column2 {width:108px;}
  199. .container12 .column3 {width:172px;}
  200. .container12 .column4 {width:236px;}
  201. .container12 .column5 {width:300px;}
  202. .container12 .column6 {width:364px;}
  203. .container12 .column7 {width:428px;}
  204. .container12 .column8 {width:492px;}
  205. .container12 .column9 {width:556px;}
  206. .container12 .column10 {width:620px;}
  207. .container12 .column11 {width:684px;}
  208. .container12 .column12 {width:748px;}
  209. .container12 .prefix1 {padding-left:64px;}
  210. .container12 .prefix2 {padding-left:128px;}
  211. .container12 .prefix3 {padding-left:192px;}
  212. .container12 .prefix4 {padding-left:256px;}
  213. .container12 .prefix5 {padding-left:320px;}
  214. .container12 .prefix6 {padding-left:384px;}
  215. .container12 .prefix7 {padding-left:448px;}
  216. .container12 .prefix8 {padding-left:512px;}
  217. .container12 .prefix9 {padding-left:576px;}
  218. .container12 .prefix10 {padding-left:640px;}
  219. .container12 .prefix11 {padding-left:704px;}
  220. .container16 .column1 {width:28px;}
  221. .container16 .column2 {width:76px;}
  222. .container16 .column3 {width:124px;}
  223. .container16 .column4 {width:172px;}
  224. .container16 .column5 {width:220px;}
  225. .container16 .column6 {width:268px;}
  226. .container16 .column7 {width:316px;}
  227. .container16 .column8 {width:364px;}
  228. .container16 .column9 {width:412px;}
  229. .container16 .column10 {width:460px;}
  230. .container16 .column11 {width:508px;}
  231. .container16 .column12 {width:556px;}
  232. .container16 .column13 {width:604px;}
  233. .container16 .column14 {width:652px;}
  234. .container16 .column15 {width:700px;}
  235. .container16 .column16 {width:748px;}
  236. .container16 .prefix1 {padding-left:48px;}
  237. .container16 .prefix2 {padding-left:96px;}
  238. .container16 .prefix3 {padding-left:144px;}
  239. .container16 .prefix4 {padding-left:192px;}
  240. .container16 .prefix5 {padding-left:240px;}
  241. .container16 .prefix6 {padding-left:288px;}
  242. .container16 .prefix7 {padding-left:336px;}
  243. .container16 .prefix8 {padding-left:384px;}
  244. .container16 .prefix9 {padding-left:432px;}
  245. .container16 .prefix10 {padding-left:480px;}
  246. .container16 .prefix11 {padding-left:528px;}
  247. .container16 .prefix12 {padding-left:576px;}
  248. .container16 .prefix13 {padding-left:624px;}
  249. .container16 .prefix14 {padding-left:672px;}
  250. .container16 .prefix15 {padding-left:720px;}
  251. }
  252.  
  253. @media only screen and (max-width: 767px) {
  254. .container12, .container16, .head {width:300px;}
  255. .container12 .column1, .container16 .column1,
  256. .container12 .column2, .container16 .column2,
  257. .container12 .column3, .container16 .column3,
  258. .container12 .column4, .container16 .column4,
  259. .container12 .column5, .container16 .column5,
  260. .container12 .column6, .container16 .column6,
  261. .container12 .column7, .container16 .column7,
  262. .container12 .column8, .container16 .column8,
  263. .container12 .column9, .container16 .column9,
  264. .container12 .column10, .container16 .column10,
  265. .container12 .column11, .container16 .column11,
  266. .container12 .column12, .container16 .column12,
  267. .container16 .column13,
  268. .container16 .column14,
  269. .container16 .column15,
  270. .container16 .column16, .head {
  271. margin:0 0 20px 0;
  272. width:300px;
  273. }
  274. .container12 .prefix1, .container12 .prefix2, .container12 .prefix3, .container12 .prefix4, .container12 .prefix5, .container12 .prefix6, .container12 .prefix7, .container12 .prefix8, .container12 .prefix9, .container12 .prefix10, .container12 .prefix11, .container16 .prefix1, .container16 .prefix2, .container16 .prefix3, .container16 .prefix4, .container16 .prefix5, .container16 .prefix6, .container16 .prefix7, .container16 .prefix8, .container16 .prefix9, .container16 .prefix10, .container16 .prefix11, .container16 .prefix12, .container16 .prefix13, .container16 .prefix14, .container16 .prefix15 {padding-left:0;}
  275. .row, .head {margin:0;}
  276. }
  277.  
  278. @media only screen and (min-width: 480px) and (max-width: 767px) {
  279. .container12, .container16, .head {width:420px;}
  280. .container12 .column1, .container16 .column1,
  281. .container12 .column2, .container16 .column2,
  282. .container12 .column3, .container16 .column3,
  283. .container12 .column4, .container16 .column4,
  284. .container12 .column5, .container16 .column5,
  285. .container12 .column6, .container16 .column6,
  286. .container12 .column7, .container16 .column7,
  287. .container12 .column8, .container16 .column8,
  288. .container12 .column9, .container16 .column9,
  289. .container12 .column10, .container16 .column10,
  290. .container12 .column11, .container16 .column11,
  291. .container12 .column12, .container16 .column12,
  292. .container16 .column13,
  293. .container16 .column14,
  294. .container16 .column15,
  295. .container16 .column16, .head {
  296. margin:0 0 20px 0;
  297. width:420px;
  298. }
  299. .container12 .prefix1, .container12 .prefix2, .container12 .prefix3, .container12 .prefix4, .container12 .prefix5, .container12 .prefix6, .container12 .prefix7, .container12 .prefix8, .container12 .prefix9, .container12 .prefix10, .container12 .prefix11, .container16 .prefix1, .container16 .prefix2, .container16 .prefix3, .container16 .prefix4, .container16 .prefix5, .container16 .prefix6, .container16 .prefix7, .container16 .prefix8, .container16 .prefix9, .container16 .prefix10, .container16 .prefix11, .container16 .prefix12, .container16 .prefix13, .container16 .prefix14, .container16 .prefix15 {padding-left:0;}
  300. .row, .head {margin:0;}
  301. }
  302. .clearfix:before, .clearfix:after,
  303. .row:before, .row:after,
  304. .container12:before, .container12:after, .container16:before, .container16:after {
  305. content:'.';
  306. display:block;
  307. height:0;
  308. overflow:hidden;
  309. visibility:hidden;
  310. width:0;
  311. }
  312. /* http://sonspring.com/journal/clearing-floats */
  313. .clear {
  314. clear:both;
  315. display:block;
  316. height:0;
  317. overflow:hidden;
  318. visibility:hidden;
  319. width:0;
  320. }
  321. .row:after, .clearfix:after, .container12:after, .container16:after {clear:both;}
  322. /* For IE7. Move this to separate file when you notice some problems */
  323. .row, .clearfix {zoom: 1;}
  324. img, object, embed {max-width:100%;}
  325. img {height:auto;}
  326.  
  327. /* -------------------- basic styles -------------------- */
  328.  
  329.  
  330. body {
  331. font-family: 'Open Sans';
  332. }
  333.  
  334.  
  335. /* -------------------- heading -------------------- */
  336.  
  337. /* .head class in 1140.css */
  338.  
  339.  
  340. .logo {
  341. padding-top: 30px;
  342. height: 40px;
  343. clear: both;
  344. }
  345.  
  346. .menu {
  347. float: right;
  348. padding-top: 32px;
  349. clear: both;
  350. }
  351.  
  352. .menu li {
  353. text-decoration: none;
  354. list-style-type: none;
  355. display: inline-block;
  356. padding-right: 20px;
  357. color: #616161;
  358. }
  359.  
  360. .buy {
  361. background-color: #e5482e;
  362. border-radius: 10px;
  363. height: 40px;
  364. width: 100px;
  365. padding-top: -20px;
  366. text-decoration: none;
  367. color: #fff;
  368. text-align: center;
  369. display: block;
  370. }
  371. .buy:hover {
  372. background-color: #F25B41;
  373. }
  374. .buy:active {
  375. background-color: #F0725D;
  376. }
  377.  
  378. .buy p {
  379. padding-top: 9px;
  380. }
  381.  
  382. /* -------------------- footer -------------------- */
  383.  
  384. .footer {
  385. border-top: 1px solid #9C9C9C;
  386. padding-top: 25px;
  387. }
  388.  
  389. /* -------------------- media queries -------------------- */
  390.  
  391.  
  392. @media (max-width: 770px) {
  393. .menu {
  394. float: none;
  395. margin-left: auto;
  396. margin-right: auto;
  397. }
  398. }
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!