Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>MultiPop!</title>
- <link rel="stylesheet" href="css/style.css">
- <link rel="stylesheet" href="css/1140.css">
- <meta charset="utf-8">
- <meta name="keywords" content="phone, case, holder, car, vent, iphone, 4, 5, 6, galaxy, s2, s3, s4, s5, s6, samsung, apple">
- <meta name="description" content="Smartphone car holder and stand ALL IN ONE for iPhone or Android!">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
- </head>
- <body>
- <div class="container12">
- <div class="head">
- <a href="#"><img class="logo"src="img/logo.png"></a>
- <div class="menu">
- <ul>
- <li data-slide="1">What is It?</li>
- <li data-slide="2">How?</li>
- <li data-slide="3">FAQ</li>
- <li><a class="buy" href="#"><p>Buy Now</p></a></li>
- </ul>
- </div>
- </div>
- <div class="headFix"></div>
- <div class="row">
- <div class="column12">
- "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."
- </div>
- </div>
- <div class="footer">
- <div class="column6">
- hello
- </div>
- <div class="column6">
- </div>
- </div>
- </div>
- </body>
- </html>
- 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%}
- /* -------------------- custom .head and .headfix class -------------------- */
- .head {
- padding-bottom: 30px !important;
- position: fixed !important;
- border-bottom: 1px solid #9C9C9C;
- z-index: 3;
- background-color: #fff;
- }
- .headFix {
- height: 106px;
- padding-bottom: 25px;
- }
- .container12, .container16, .head, .headfix{
- margin:0 auto;
- padding:0;
- position:relative;
- width:1140px;
- }
- .row {margin-bottom:20px;}
- .column1, .column2, .column3, .column4, .column5, .column6, .column7, .column8, .column9, .column10, .column11, .column12, .column13, .column14, .column15, .column16 {
- display:inline;
- float:left;
- margin-left:10px;
- margin-right:10px;
- }
- .container12 .alpha, .container16 .alpha {margin-left:0;}
- .container12 .omega, .container16 .omega {margin-right:0;}
- .container12 .column1 {width:75px;}
- .container12 .column2 {width:170px;}
- .container12 .column3 {width:265px;}
- .container12 .column4 {width:360px;}
- .container12 .column5 {width:455px;}
- .container12 .column6 {width:550px;}
- .container12 .column7 {width:645px;}
- .container12 .column8 {width:740px;}
- .container12 .column9 {width:835px;}
- .container12 .column10 {width:930px;}
- .container12 .column11 {width:1025px;}
- .container12 .column12 {width:1120px;}
- .container12 .prefix1 {padding-left:95px;}
- .container12 .prefix2 {padding-left:190px;}
- .container12 .prefix3 {padding-left:285px;}
- .container12 .prefix4 {padding-left:380px;}
- .container12 .prefix5 {padding-left:475px;}
- .container12 .prefix6 {padding-left:570px;}
- .container12 .prefix7 {padding-left:665px;}
- .container12 .prefix8 {padding-left:760px;}
- .container12 .prefix9 {padding-left:855px;}
- .container12 .prefix10 {padding-left:950px;}
- .container12 .prefix11 {padding-left:1045px;}
- .container16 .column1 {width:51.25px;}
- .container16 .column2 {width:122.5px;}
- .container16 .column3 {width:193.75px;}
- .container16 .column4 {width:265px;}
- .container16 .column5 {width:336.25px;}
- .container16 .column6 {width:407.5px;}
- .container16 .column7 {width:478.75px;}
- .container16 .column8 {width:550px;}
- .container16 .column9 {width:621.25px;}
- .container16 .column10 {width:692.5px;}
- .container16 .column11 {width:763.75px;}
- .container16 .column12 {width:835px;}
- .container16 .column13 {width:906.25px;}
- .container16 .column14 {width:977.5px;}
- .container16 .column15 {width:1048.75px;}
- .container16 .column16 {width:1120px;}
- .container16 .prefix1 {padding-left:71.25px;}
- .container16 .prefix2 {padding-left:142.5px;}
- .container16 .prefix3 {padding-left:213.75px;}
- .container16 .prefix4 {padding-left:285px;}
- .container16 .prefix5 {padding-left:356.25px;}
- .container16 .prefix6 {padding-left:427.5px;}
- .container16 .prefix7 {padding-left:498.75px;}
- .container16 .prefix8 {padding-left:570px;}
- .container16 .prefix9 {padding-left:641.25px;}
- .container16 .prefix10 {padding-left:712.5px;}
- .container16 .prefix11 {padding-left:783.75px;}
- .container16 .prefix12 {padding-left:855px;}
- .container16 .prefix13 {padding-left:926.25px;}
- .container16 .prefix14 {padding-left:997.5px;}
- .container16 .prefix15 {padding-left:1068.75px;}
- @media only screen and (min-width: 960px) and (max-width: 1160px) {
- .container12, .container16, .head {width:960px;}
- .container12 .column1 {width:60px;}
- .container12 .column2 {width:140px;}
- .container12 .column3 {width:220px;}
- .container12 .column4 {width:300px;}
- .container12 .column5 {width:380px;}
- .container12 .column6 {width:460px;}
- .container12 .column7 {width:540px;}
- .container12 .column8 {width:620px;}
- .container12 .column9 {width:700px;}
- .container12 .column10 {width:780px;}
- .container12 .column11 {width:860px;}
- .container12 .column12 {width:940px;}
- .container12 .prefix1 {padding-left:80px;}
- .container12 .prefix2 {padding-left:160px;}
- .container12 .prefix3 {padding-left:240px;}
- .container12 .prefix4 {padding-left:320px;}
- .container12 .prefix5 {padding-left:400px;}
- .container12 .prefix6 {padding-left:480px;}
- .container12 .prefix7 {padding-left:560px;}
- .container12 .prefix8 {padding-left:640px;}
- .container12 .prefix9 {padding-left:720px;}
- .container12 .prefix10 {padding-left:800px;}
- .container12 .prefix11 {padding-left:880px;}
- .container16 .column1 {width:40px;}
- .container16 .column2 {width:100px;}
- .container16 .column3 {width:160px;}
- .container16 .column4 {width:220px;}
- .container16 .column5 {width:280px;}
- .container16 .column6 {width:340px;}
- .container16 .column7 {width:400px;}
- .container16 .column8 {width:460px;}
- .container16 .column9 {width:520px;}
- .container16 .column10 {width:580px;}
- .container16 .column11 {width:640px;}
- .container16 .column12 {width:700px;}
- .container16 .column13 {width:760px;}
- .container16 .column14 {width:820px;}
- .container16 .column15 {width:880px;}
- .container16 .column16 {width:940px;}
- .container16 .prefix1 {padding-left:60px;}
- .container16 .prefix2 {padding-left:120px;}
- .container16 .prefix3 {padding-left:180px;}
- .container16 .prefix4 {padding-left:240px;}
- .container16 .prefix5 {padding-left:300px;}
- .container16 .prefix6 {padding-left:360px;}
- .container16 .prefix7 {padding-left:420px;}
- .container16 .prefix8 {padding-left:480px;}
- .container16 .prefix9 {padding-left:540px;}
- .container16 .prefix10 {padding-left:600px;}
- .container16 .prefix11 {padding-left:660px;}
- .container16 .prefix12 {padding-left:720px;}
- .container16 .prefix13 {padding-left:780px;}
- .container16 .prefix14 {padding-left:840px;}
- .container16 .prefix15 {padding-left:900px;}
- }
- @media only screen and (min-width: 768px) and (max-width: 959px) {
- .container12, .container16, .head {width:768px;}
- .container12 .column1 {width:44px;}
- .container12 .column2 {width:108px;}
- .container12 .column3 {width:172px;}
- .container12 .column4 {width:236px;}
- .container12 .column5 {width:300px;}
- .container12 .column6 {width:364px;}
- .container12 .column7 {width:428px;}
- .container12 .column8 {width:492px;}
- .container12 .column9 {width:556px;}
- .container12 .column10 {width:620px;}
- .container12 .column11 {width:684px;}
- .container12 .column12 {width:748px;}
- .container12 .prefix1 {padding-left:64px;}
- .container12 .prefix2 {padding-left:128px;}
- .container12 .prefix3 {padding-left:192px;}
- .container12 .prefix4 {padding-left:256px;}
- .container12 .prefix5 {padding-left:320px;}
- .container12 .prefix6 {padding-left:384px;}
- .container12 .prefix7 {padding-left:448px;}
- .container12 .prefix8 {padding-left:512px;}
- .container12 .prefix9 {padding-left:576px;}
- .container12 .prefix10 {padding-left:640px;}
- .container12 .prefix11 {padding-left:704px;}
- .container16 .column1 {width:28px;}
- .container16 .column2 {width:76px;}
- .container16 .column3 {width:124px;}
- .container16 .column4 {width:172px;}
- .container16 .column5 {width:220px;}
- .container16 .column6 {width:268px;}
- .container16 .column7 {width:316px;}
- .container16 .column8 {width:364px;}
- .container16 .column9 {width:412px;}
- .container16 .column10 {width:460px;}
- .container16 .column11 {width:508px;}
- .container16 .column12 {width:556px;}
- .container16 .column13 {width:604px;}
- .container16 .column14 {width:652px;}
- .container16 .column15 {width:700px;}
- .container16 .column16 {width:748px;}
- .container16 .prefix1 {padding-left:48px;}
- .container16 .prefix2 {padding-left:96px;}
- .container16 .prefix3 {padding-left:144px;}
- .container16 .prefix4 {padding-left:192px;}
- .container16 .prefix5 {padding-left:240px;}
- .container16 .prefix6 {padding-left:288px;}
- .container16 .prefix7 {padding-left:336px;}
- .container16 .prefix8 {padding-left:384px;}
- .container16 .prefix9 {padding-left:432px;}
- .container16 .prefix10 {padding-left:480px;}
- .container16 .prefix11 {padding-left:528px;}
- .container16 .prefix12 {padding-left:576px;}
- .container16 .prefix13 {padding-left:624px;}
- .container16 .prefix14 {padding-left:672px;}
- .container16 .prefix15 {padding-left:720px;}
- }
- @media only screen and (max-width: 767px) {
- .container12, .container16, .head {width:300px;}
- .container12 .column1, .container16 .column1,
- .container12 .column2, .container16 .column2,
- .container12 .column3, .container16 .column3,
- .container12 .column4, .container16 .column4,
- .container12 .column5, .container16 .column5,
- .container12 .column6, .container16 .column6,
- .container12 .column7, .container16 .column7,
- .container12 .column8, .container16 .column8,
- .container12 .column9, .container16 .column9,
- .container12 .column10, .container16 .column10,
- .container12 .column11, .container16 .column11,
- .container12 .column12, .container16 .column12,
- .container16 .column13,
- .container16 .column14,
- .container16 .column15,
- .container16 .column16, .head {
- margin:0 0 20px 0;
- width:300px;
- }
- .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;}
- .row, .head {margin:0;}
- }
- @media only screen and (min-width: 480px) and (max-width: 767px) {
- .container12, .container16, .head {width:420px;}
- .container12 .column1, .container16 .column1,
- .container12 .column2, .container16 .column2,
- .container12 .column3, .container16 .column3,
- .container12 .column4, .container16 .column4,
- .container12 .column5, .container16 .column5,
- .container12 .column6, .container16 .column6,
- .container12 .column7, .container16 .column7,
- .container12 .column8, .container16 .column8,
- .container12 .column9, .container16 .column9,
- .container12 .column10, .container16 .column10,
- .container12 .column11, .container16 .column11,
- .container12 .column12, .container16 .column12,
- .container16 .column13,
- .container16 .column14,
- .container16 .column15,
- .container16 .column16, .head {
- margin:0 0 20px 0;
- width:420px;
- }
- .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;}
- .row, .head {margin:0;}
- }
- .clearfix:before, .clearfix:after,
- .row:before, .row:after,
- .container12:before, .container12:after, .container16:before, .container16:after {
- content:'.';
- display:block;
- height:0;
- overflow:hidden;
- visibility:hidden;
- width:0;
- }
- /* http://sonspring.com/journal/clearing-floats */
- .clear {
- clear:both;
- display:block;
- height:0;
- overflow:hidden;
- visibility:hidden;
- width:0;
- }
- .row:after, .clearfix:after, .container12:after, .container16:after {clear:both;}
- /* For IE7. Move this to separate file when you notice some problems */
- .row, .clearfix {zoom: 1;}
- img, object, embed {max-width:100%;}
- img {height:auto;}
- /* -------------------- basic styles -------------------- */
- body {
- font-family: 'Open Sans';
- }
- /* -------------------- heading -------------------- */
- /* .head class in 1140.css */
- .logo {
- padding-top: 30px;
- height: 40px;
- clear: both;
- }
- .menu {
- float: right;
- padding-top: 32px;
- clear: both;
- }
- .menu li {
- text-decoration: none;
- list-style-type: none;
- display: inline-block;
- padding-right: 20px;
- color: #616161;
- }
- .buy {
- background-color: #e5482e;
- border-radius: 10px;
- height: 40px;
- width: 100px;
- padding-top: -20px;
- text-decoration: none;
- color: #fff;
- text-align: center;
- display: block;
- }
- .buy:hover {
- background-color: #F25B41;
- }
- .buy:active {
- background-color: #F0725D;
- }
- .buy p {
- padding-top: 9px;
- }
- /* -------------------- footer -------------------- */
- .footer {
- border-top: 1px solid #9C9C9C;
- padding-top: 25px;
- }
- /* -------------------- media queries -------------------- */
- @media (max-width: 770px) {
- .menu {
- float: none;
- margin-left: auto;
- margin-right: auto;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement