css - Responsive Design… really confused? -
i still attempting make website responsive, have looked @ many tutorials , sort of how works, @ minute lost in terms of own code of tutorials starting scratch have 95% completed website.
i don't know parts of webpage have have media query each part of website split of 6 containers essentially, need have percentages container , inside of or on wrong track?
any appreciated first time working responsive web design confused.
index.html
/* content */ #container { display: block; width: 1280px; margin: 0 auto; margin-top: -1%; padding-bottom: 10px; } body{ max-width:100%; max-height:100%; } #section1-container { display: block; width: 1280px; height: 100%; padding-bottom: 10px; position: relative; } .section1text-container{ position: relative } #section2-container{ position: relative; width: 1280px; } .section2text-container{ position: relative; top:-641px; left:-335px; } .section3-container{ position: relative; width: 1280px; } .section3text-container{ position: relative; top:-1762px; left:-514px; text-align:center; z-index: 1; } .circleimage{ left:8px; position: relative; } #section4-container{ position: relative; width: 1280px; } #section5-container{ position: relative; left: 48px; top: 0;"> } .section5text-container{ position: relative; top:-525px; left:-64px; text-align:center; width: 1280px; } .section5forum-container{ position: absolute; top: 14px; left: 0px; display:block; } .section6footer{ position: relative; top:-3343px; left:-286px; width: 1280px; } img { max-width: 100%; } /* responsive css */ @media screen , (max-width:1979px){ section1-container { width:100%; } header-container { width:70%; } section1text-container{ width:30% } img{ width:100% } @media screen , (max-width:640px){ header-container { width:100%; } section1text-container{ width:100% } } @media screen , (max-width:320px){ section1-container { width:320px; } } /* h1 p typography */ h5{ @font-face font-family: 'lato'; src: url('lato-regular.ttf'); } h1{ font-family: 'yesevaone'; src: url('yesevaone-regular_v2.otf'); } h3{ font-size: 121.5%; line-height: 2.; font-family: 'pt sans', sans-serif; } h4{ font-size: 121.5%; line-height: 1.8; font-family: 'pt sans', sans-serif; } /** nav bar **/ .top-bar-container { width: 103%; position: absolute; top: -11px; left: -259px; margin: 0 auto; z-index:999; @font-face { font-family: 'lato'; src: url('lato-regular.ttf'); } } .top-bar-container .top-bar { width: 800px; } .top-bar-container .top-bar .logo { float: left; } .top-bar-container .top-bar .logo span { color: #27ad60; } .top-bar-container .nav-bar { float: right; } .top-bar-container .nav-bar ul li { list-style-type: none; display: inline-block; padding: 21px 27px; font-size:15px; } .top-bar-container .nav-bar ul li a:not(.active) { text-decoration: none; color: white; } .top-bar-container .nav-bar .active { color: white; text-decoration: none; padding-top:34px; } .underlining { list-style: none; } .underlining .hover { display: block; } .underlining .hover { display: block; padding: 16px; color: grey; text-decoration: none; position: relative; } .underlining .hover a:hover, .underlining .hover a.selected{ color:white; } .underlining .hover a.selected:before, .underlining .hover a:hover:before { content: ''; width: 100%; position: absolute; top: -19px; left: 0; height: 3px; background: white; } /* parallax scrolling image */ #parallax .parallax-one {padding-top: 200px; padding-bottom: 200px; overflow: hidden; position: relative; width: 100%; height: 100%; background-image: url(http://s24.postimg.org/h42wluhw3/1_3.jpg); background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: top center;} @media screen , (max-width: 959px) , (min-width: 768px) { #parallax .block {padding: 40px; width:620px;} } @media screen , (max-width: 767px) { #parallax .block {padding: 30px; width:420px;} #parallax h2 {font-size:30px;} #parallax .block {padding: 30px;} #parallax .parallax-one, {padding-top:100px; padding-bottom:100px;} } @media screen , (max-width: 479px) { #parallax .block {padding: 30px 15px; width:290px;} }<!doctype html> <html lang="en-us"> <head> <meta charset="utf-8"> <meta http-equiv="content-type" content="text/html"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>mens buns , beards</title> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> <!--favicon--> <link rel="icon" href="/favicon.ico" type="image/x-icon"> <!--favicon--> <!--css stylesheets--> <link rel="stylesheet" type="text/css" media="all" href="css/style.css"> <link rel="stylesheet" type="text/css" media="all" href="css/buttons.css"> <link rel="stylesheet" type="text/css" media="all" href="css/paymentbox.css"> <link rel="stylesheet" href="css/flexslider.css" type="text/css"> <!--favicon--> <link rel="shortcut icon" href="http://www.iconj.com/ico/s/n/snyfanowkh.ico" type="image/x-icon" /> <!--jquery--> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="js/jquery.scrollto.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.flexslider.js"></script> <!--fonts--> <link href='http://fonts.googleapis.com/css?family=pt+sans' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=open+sans' rel='stylesheet' type='text/css'> <!--modal box--> <script> $(document).on('ready', function() { $modal = $('.modal-frame'); $overlay = $('.modal-overlay'); /* need clear out keyframe classes dont clash each other between ener/leave. cheers. */ $modal.bind('webkitanimationend oanimationend msanimationend animationend', function(e) { if ($modal.hasclass('state-leave')) { $modal.removeclass('state-leave'); } }); $('.close').on('click', function() { $overlay.removeclass('state-show'); $modal.removeclass('state-appear').addclass('state-leave'); }); $('.open').on('click', function() { $overlay.addclass('state-show'); $modal.removeclass('state-leave').addclass('state-appear'); }); }); </script> <!-- flex slider --> <script type="text/javascript" charset="utf-8"> $(window).load(function() { $('.flexslider').flexslider(); }); </script> <!-- smooth scroll --> <script> $(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrolltop: target.offset().top }, 1000); return false; } } }); }); </script> <!-- fancy box --> <!-- add mousewheel plugin (this optional) --> <script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script> <!-- add fancybox --> <link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" /> <script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script> <!-- optionally add helpers - button, thumbnail and/or media --> <link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" /> <script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script> <script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script> <link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" /> <script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script> </head> <body> <div id="container"> <!--section1--> <div id="section1-container"> <h3> <div class="header-container" style="position: relative"> <img alt="bordertop" style="position: absolute;top:10px;left:0px;width:100%;" src="img/borderblacktop.png"> <div class="top-bar-container"> <div class="top-bar"> </div> <nav class="nav-bar"> <ul class="underlining"> <li class="hover"><a href="#section2-container" >about</a></li> <li class="hover"><a href="#section3-container" >gallery</a></li> <li class="hover"><a href="#section4-container">menu</a></li> <li class="hover"><a href="#section5-container">contact</a></li> </ul> </nav> </div> </div> </h3> <div class="section1text-container" > <h1 style="text-align: center;position: absolute;top:185px;left:343px;font-size:70px;color:#ffffff">find right cut at</h1> <h1 style="text-align: center;position: absolute;top:257px;left:329px;font-size:70px;color:#ffffff">mens buns & beards</h1> <h4> <!--button1--> <a href="#section5-container" style="position: absolute;top:427px;left:443px;" class="btn paper paper-curl">book appointment</a> </div> <!--button1end--> </h4> </div> <img src="img/barber-website.gif" alt="image1" style="margin:0; padding:0;display:block;"> <!--section1end--> <!--section2--> <div id="section2-container" > <img src="img/scissor.png" style="position: absolute;top:70px; left:673px;width:39%;display:block"> <section id="about" class="content"> <!--typesection2--> <div class="section2text-container" > <b><p style="text-align: center;position: absolute;top:760px; left:544px;font-size:12.7px;font-family: 'lato', sans-serif;color:#505050">if you’ve been 1 of our barbershops, you’ve seen – and</p> <p style="text-align: center;position: absolute;top:780px; left:556px;font-size:12.7px;font-family: 'lato', sans-serif;color:#505050">experienced keeps our customers coming for</p> <p style="text-align: center;position: absolute;top:800px; left:544px;font-size:12.7px;font-family: 'lato', sans-serif;color:#505050"> more. perfect haircuts , shaves, served delicious buns,</p> <p style="text-align: center;position: absolute;top:821px; left:543px;font-size:12.7px;font-family: 'lato', sans-serif;color:#505050"> , gourmet coffees makes hard resist! stop in today</p> <p style="text-align: center;position: absolute;top:841px; left:663px;font-size:12.7px;font-family: 'lato', sans-serif;color:#505050">and check out!</p> </b> <!--typesection2end--> </div> <img src="img/logopnggrey.png" style="position: absolute;top:266px; left:272px;height:34.5%;width:15.5%;display:block"> <img src="img/background2.png" alt="image2" style="margin:0; padding:0;display:block;"> </div> <!--section2end--> <!--section3--> <div id="section3-container" > <!--parallax scroll--> <div id="parallax"> <div class="parallax-one"style="margin:0; padding:0;display:block;height:609px;background-size:75%;"></div> </div> <!--parallax scrolling image--> <img src="img/box.png" style="position:absolute; top:1257px; left:965px;height:481px;display:block"> <!--box.png text--> <div class="section3text-container" > <h1 style="text-align: center;position: absolute;top:1232px;left:1055px;font-size:2.4em;color:#eaeaea;width:56%;">fine cuts , shaves</h1> <p style="position: absolute;top:1372px; left:1051px;font-size:0.8em;width:55.5%;font-family: 'lato', sans-serif;color:#eaeaea">if you’ve been 1 of our barbershops, you’ve seen – and</p> <p style="position: absolute;top:1392px; left:1058px;font-size:0.8em;width:54.3%;font-family: 'lato', sans-serif;color:#eaeaea">tasted – keeps our customers coming more.</p> <p style="text-align: center;position: absolute;top:1413px; left:1059px;font-size:0.8em;width:54.3%;font-family: 'lato', sans-serif;color:#eaeaea">perfect cuts , shaves, freshly baked delicious food, </p> <p style="text-align: center;position: absolute;top:1433px; left:1063px;font-size:0.8em;width:53.7%;font-family: 'lato', sans-serif;color:#eaeaea">cakes, buns, , gourmet coffees make hard resist!</p> <p style="text-align: center;position: absolute;top:1454px; left:1122px;font-size:0.8em;width:45.3%;font-family: 'lato', sans-serif;color:#eaeaea">stop in today , check out!</p> <!--box.png text end--> </div> <!--circularimages--> <div class="circleimage" > <a class="fancybox" rel="group" href="img/photo2.jpg"><img src="img/img3big.png" style="position: absolute; top: -233px; left:978px;width:8%;display:block"/></a> <a class="fancybox" rel="group" href="img/photo1.jpg"><img src="img/img2big.png" style="position: absolute; top: -233px; left:840px;width:8%;display:block"/></a> <a class="fancybox" rel="group" href="img/photo3.jpg"><img src="img/img1big.png" style="position: absolute; top: -233px; left:701px;width:8%;display:block"/></a> </div> <!--circularimagesend--> </div> <!--section3end--> <!--section4--> <div id="section4-container"> <div class="flexslider"> <ul class="slides"> <li> <img src="img/barber4.jpg" alt="" style="margin:0; padding:0;display:block;"> </li> <li> <img src="img/menuew-2.jpg" alt="" style="margin:0; padding:0;display:block;"> </li> </ul> </div> </div> <!--section4end--> <!--section5--> <div id="section5-container" > <img src="img/blackandwhite.jpg" style="position: relative; top: 0; left: -48px;display:block;"> <!--header--> <h1 style="text-align: center;position: absolute;top:16px;left:781px;font-size:2.4em;color:#d5ab2d">just right look</h1> <!--headerend--> <!--divider--> <img alt="" style="position: absolute;top:76px; left:825px; width:16.5%;" src="img/dividersmall.png"> <div class="section5forum-container" > <!--booking forum--> <input type = "text" id = "mytext" value = "your name*" style="position: absolute;top:287px; left:762px;width:157px;height:23px;" /> <input type = "text" id = "mytext" value = "your email*" style="position: absolute;top:287px; left:942px;width:157px;height:23px;" /> <input type = "text" id = "mytext" value = "date*" style="position: absolute;top:346px; left:762px;width:157px;height:23px;" /> <input type = "text" id = "mytext" value = "number*" style="position: absolute;top:346px; left:942px;width:157px;height:23px;" /> <h5 style="text-align: center;position: absolute;top:247px;left:762px;font-size:0.8em;font-family: 'lato', sans-serif;color:#d5ab2d">name</h5> <h5 style="text-align: center;position: absolute;top:247px; left:941px;font-size:0.8em;font-family: 'lato', sans-serif;color:#d5ab2d">email</h5> <h5 style="text-align: center;position: absolute;top:306px; left:762px;font-size:0.8em;font-family: 'lato', sans-serif;color:#d5ab2d">date</h5> <h5 style="text-align: center;position: absolute;top:306px; left:943px;font-size:0.8em;font-family: 'lato', sans-serif;color:#d5ab2d">number</h5> <!--booking forum end--> </div> <!--modal window--> <div class="modal-frame"> <div class="modal"> <div class="modal-inset"> <div class="button close"><i class="fa fa-close"></i></div> <div class="modal-body"> <section class="container"> <div class="thecard"> <figure class="thecardfront"> <br class="clear" /> <div class="cardnumber">card number:<br/> <input class="firstfour" placeholder="1111" maxlength="4"/> <input placeholder="2222" maxlength="4" /> <input placeholder="3333" maxlength="4" /> <input placeholder="4444" maxlength="4" /> </div> <div class="cardexpiration">expiration date:<br/> <input class="month" placeholder="mo" maxlength="2"/> / <input class="year" placeholder="year" maxlength="4"/> </div> <div class="cardsecurity">security code:<br/> <input class="csc" placeholder="csc" maxlength="4"/> <small><span class="tooltip">what's this?</span><span class="help">the csc typically printed on of credit card (3 digit number).</span></small> </div> <br class="clear"> <input type="submit" value="pay now" class="pay"/> </figure> <figure class="thecardback"> <div class="login"> <input placeholder="username or email" class="username"/> <input placeholder="password" class="password"/><br /> <input type="submit" class="signin" value="login" /> </div> </figure> </div> </section> </div> </div> </div> </div> <button style="position: absolute; top:408px; left:866px;width:137px;height:38.4px;line-height: 0.7;font-family: 'pt sans', sans-serif;font-size:1.1em;" class="btn paper paper-raise open"><b>book now</b></button> <!--modal window end--> <!--google maps--> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d18490.146328128205!2d-5.9311083039819!3d54.599266105727196!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48610856ce1bb5ef%3a0xaa3a67df08db1e90!2slower+garfield+st%2c+belfast+bt1!5e0!3m2!1sen!2suk!4v1431039110375" frameborder="0" style="position: absolute; top: 33px; left:77px; width:591px;height:450px;display:block"></iframe> <div class="section5text-container"> <!--paragraphscontact--> <p style="text-align: center;position: absolute;top:115px; left:773px;font-size:0.8em;font-family: 'lato', sans-serif;width:34.6%">experience our laid atmosphere , enjoy 5 star</p> <p style="text-align: center;position: absolute;top:135px; left:758px;font-size:0.8em;font-family: 'lato', sans-serif;width:36.9%"> service in our barbershops. men’s grooming never out</p> <p style="text-align: center;position: absolute;top:155px; left:840px;font-size:0.8em;font-family: 'lato', sans-serif;width:24.9%"> of style. guys, belong here. </p> <p style="text-align: center;position: absolute;top:189px; left:756px;font-size:0.8em;font-family: 'lato', sans-serif;width:38%">relax , sit cup of coffee , iced bun, while</p> <p style="text-align: center;position: absolute;top:208px; left:755px;font-size:0.8em;font-family: 'lato', sans-serif;width:38.3%">experiencing our high standards haircuts , shaves - will</p> <p style="text-align: center;position: absolute;top:226px; left:867px;font-size:0.8em;font-family: 'lato', sans-serif;width:21.3%">never want leave.</p> <!--paragraphscontactend--> </div> </div> <!--section5end--> <!--section6footer--> <img src="img/footer.jpg" alt="" style="margin:0; padding:0;display:block;"> <div class="section6footer" > <!--divider--> <img alt="" style="position: absolute;top:3149px; left:547px; width:13.5%;" src="img/dividersmall1.png"> <img alt="" style="position: absolute;top:3149px; left:868px; width:13.5%;" src="img/dividersmall1.png"> <img alt="" style="position: absolute;top:3149px; left:1189px; width:13.5%;" src="img/dividersmall1.png"> <!--dividerend--> <!--payment icons--> <img src="img/icon1.png" style="position: absolute;top:3258px;left:899px;color:#eaeaea"> <img src="img/icon2.png" style="position: absolute;top:3265px;left:926px;color:#eaeaea"> <img src="img/icon3.png" style="position: absolute;top:3265px;left:951px;color:#eaeaea"> <img src="img/icon4.png" style="position: absolute;top:3267px;left:979px;color:#eaeaea"> <!--payment icons--> <!--social media icons--> <a href="https://www.facebook.com/" target=”_blank”> <img src="img/socialmedia1.png" style="position: absolute;top:3262px;left:1236px;color:#eaeaea"></a> <a href="https://www.youtube.com/" target=”_blank”> <img src="img/socialmedia2.png" style="position: absolute;top:3262px;left:1251px;color:#eaeaea"></a> <a href="https://twitter.com/" target=”_blank”> <img src="img/socialmedia3.png" style="position: absolute;top:3262px;left:1274px;color:#eaeaea"></a> <a href="https://www.linkedin.com/" target=”_blank”> <img src="img/socialmedia4.png" style="position: absolute;top:3269px;left:1297px;width:14px;color:#eaeaea"></a> <!--social media icons--> <!--typefooter--> <h1 style="text-align: center;position: absolute;top:3116px;left:592px;font-size:1.27em;color:#eaeaea">about us</h1> <h1 style="text-align: center;position: absolute;top:3116px;left:889px;font-size:1.27em;color:#eaeaea;">opening hours</h1> <h1 style="text-align: center;position: absolute;top:3116px;left:1217px;font-size:1.27em;color:#eaeaea;width:8.6%">our location</h1> <b><p style="text-align: center;position: absolute;top:3180px; left:516px;font-size:0.8em;font-family: 'open sans', sans-serif;color:#eaeaea">mens buns , beards has been newly </p> <p style="text-align: center;position: absolute;top:3199px; left:500px;font-size:0.8em;font-family: 'open sans', sans-serif;color:#eaeaea">expanded belfast featuring legendary</p> <p style="text-align: center;position: absolute;top:3218px; left:515px;font-size:0.8em;font-family: 'open sans', sans-serif;color:#eaeaea">selection of cuts , shaves not be</p> <p style="text-align: center;position: absolute;top:3237px; left:489px;font-size:0.8em;font-family: 'open sans', sans-serif;color:#eaeaea">dissapointed when visiting our barbershops - sit</p> <p style="text-align: center;position: absolute;top:3256px; left:504px;font-size:0.8em;font-family: 'open sans', sans-serif;color:#eaeaea">back , relax cup of coffee , iced</p> <p style="text-align: center;position: absolute;top:3275px; left:511px;font-size:0.8em;font-family: 'open sans', sans-serif;color:#eaeaea">bun , right barber experience.</p> </b> <b><p style="text-align: center;position: absolute;top:3180px; left:876px;font-size:0.8em;font-family: 'open sans', sans-serif;color:#eaeaea"><b>mon-thu:</b> 7:00am-8:00pm </p> <b><p style="text-align: center;position: absolute;top:3198px; left:879px;font-size:0.8em;font-family:'open sans', sans-serif;color:#eaeaea"><b>fri-sun:</b> 7:00am-10:00pm </p> <b><p style="text-align: center;position: absolute;top:3180px; left:1229px;font-size:0.8em;font-family: 'open sans', sans-serif;color:#eaeaea;width:7.2%"><b>lower garfield</b></p> <b><p style="text-align: center;position: absolute;top:3198px; left:1252px;font-size:0.8em;font-family: 'open sans', sans-serif;color:#eaeaea;width:4%"><b>street</b></p> <!--typesection1end--> </div> <!-- fancybox --> <script type="text/javascript"> $(document).ready(function() { $(".fancybox").fancybox(); }); </script> <!-- fancyboxend --> <!--parallax background--> <div class="background"> </div> </body> </html>
Comments
Post a Comment