file:///users/nma/desktop/chris_mac/chris_school/kcc_nmawebsite/_technology/sitebuild/htdocs/gargiulo/data/johndoe/spring/art128...

Size: px

Start display at page:

Download "file:///users/nma/desktop/chris_mac/chris_school/kcc_nmawebsite/_technology/sitebuild/htdocs/gargiulo/data/johndoe/spring/art128..."

Emmeline Bell
6 years ago
Views:

1 file:///users/nma/desktop/chris_mac/chris_school/kcc_nmawebsite/_technology/sitebuild/htdocs/gargiulo/data/johndoe/spring/art <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>company Name About</title> 6 7  8   13 <meta name="viewport" content="width=device-width; initial-scale=1"/>  16 <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <body> <header> 24 <div class="container"> <h2><a href="index.html">company Name</a></h2> 27 <p>tagline</p> <nav id="utilitynav"> 30 <ul> 31 <li><a href="#">link</a></li> 32 <li><a href="#">link</a></li> 33 <li><a href="#">link</a></li> 34 </ul> 35 </nav> </div> 38 </header> <nav id="mainnav"> 41 <div class="container"> <ul class="group"> 44 <li><a href="index.html">home</a></li> 45 <li class="selected"><a href="about.html">about</a></li> 46 <li><a href="#">products</a></li> 47 <li><a href="#">contact</a></li> 48 </ul> </div> 51 </nav> <section id="main"> 54 <div class="container group"> <article> 57 <h1>title of the Main Article</h1> 58 <h2>lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi semper, nunc quis euismod porta. Cras volutptat neque eget neque volutpat in 1 of 3

2 file:///users/nma/desktop/chris_mac/chris_school/kcc_nmawebsite/_technology/sitebuild/htdocs/gargiulo/data/johndoe/spring/art congue diam eleifend.</h2> 59 <h4 class="date">date of Article MM/DD/YYYY</h4> 60 <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus scelerisque condimentum leo in porta. Pellentesque ac mauris diam, et scelerisque tortor. Cras volutpat neque eget neque volutpat in congue diam eleifend. Donec aliquam accumsan urna, volutpat semper augue lobortis eget. Maecenas condimentum est eu urna consectetur vestibulum. Curabitur eget purus massa, non lobortis ipsum. Nulla mollis rhoncus vehicula. Pellentesque nunc metus, posuere et pellentesque non, faucibus ut dui. Ut rhoncus iaculis est eget pulvinar. Mauris consectetur ornare quam, congue vehicula tortor pharetra et. Morbi ornare ipsum vel tortor ultricies venenatis consequat magna convallis. Nullam fermentum, magna nec mattis porttitor, sem tortor faucibus ipsum, sed rutrum tellus velit vel mauris. Vivamus vitae mauris ut lacus blandit consectetur.</p> <p>maecenas ac lacus massa, ac sodales velit. Nullam viverra felis quis mi volutpat non posuere lacus tempor. Aliquam erat volutpat. Curabitur pellentesque, nunc sed ornare ultricies, libero nibh convallis odio, sit amet pretium ante massa et erat. Nulla facilisi. In hac habitasse platea dictumst. Suspendisse non metus justo. Cras sapien turpis, convallis ac fringilla quis, aliquam egestas dui. Suspendisse mollis fringilla eros tempus congue. Aenean diam dui, tempor sit amet placerat a, pellentesque non nisl. Nulla facilisi. Integer nec ligula felis, eget mattis magna. In sit amet quam eu augue commodo pharetra. Nunc eu magna nulla. Sed a diam nibh, non fermentum velit. Etiam et facilisis neque.</p> <p>in hac habitasse platea dictumst. Vestibulum orci urna, egestas sit amet luctus eu, ullamcorper varius libero. Vivamus in diam mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi vulputate vehicula orci, eu pellentesque nibh viverra porta. Phasellus tristique sem eu urna elementum vulputate. Cras eu enim sem. Vivamus ullamcorper enim sit amet lectus porta loborti.</p> </article> <aside id="sidebar"> <div class="widget"> 71 <h3>subnav</h3> 72 <ul> 73 <li><a href="#">sub Section 1</a></li> 74 <li><a href="#">sub Section 2</a></li> 75 </ul> 76 </div> <div class="widget"> 79 <h3>testimonials</h3> 80 <p> Curabitur a nunc at arcu elementum tincidunt. Sed sit amet turpis sed tortor venenatis lacinia. Suspendisse ut felis in tortor porttitor euismod. <span class="author">john Doe</span></p> 81 </div> </aside> </div> 86 </section> <footer> 90 <div class="container"> 2 of 3

3 file:///users/nma/desktop/chris_mac/chris_school/kcc_nmawebsite/_technology/sitebuild/htdocs/gargiulo/data/johndoe/spring/art <nav id="footernav"> 93 <ul class="group"> 94 <li class="column1"><a href="#">products</a> 95 <ul> 96 <li><a href="#">services</a></li> 97 <li><a href="#">packages</a></li> 98 <li><a href="#">custom</a></li> 99 </ul> 100 </li> 101 <li class="column2"><a href="#">news</a> 102 <ul> 103 <li><a href="#">latest News</a></li> 104 <li><a href="#">facebook</a></li> 105 <li><a href="#">twitter</a></li> 106 </ul> 107 </li> 108 <li class="column3"><a href="#">about</a> 109 <ul> 110 <li><a href="#">mission Statement</a></li> 111 <li><a href="#">history</a></li> 112 </ul> 113 </li> 114 <li class="column4"><a href="#">contact</a> 115 <ul> 116 <li> 117 <address> 118 John Doe<br> 119 Company Name<br> Street Address, Town, ST </address> 122 </li> 123 <li>(800) </li> 124 <li> [at] companyname.com</li> 125 </ul> 126 </li> 127 </ul> 128 </nav> <p id="copyright"> Copyright 2013 Company Name</p> </div> 133 </footer> </body> 138 </html> of 3

4 /* BASE (Initital Setup) ===================================== #RESET #HTML5 #BASE TYPOGRAPHY #BODY #HEADINGS #PARAGRAPHS #LINKS #LISTS #IMAGES #CLEARFIX #LAYOUT/GRID #SITE-SPECIFIC #SECTIONS #MEDIA QUERIES ===================================== */ /* #RESET * { padding: 0; /* #HTML5 header, section, footer, aside, nav, article, figure { display: block; /* BODY */ body { font-family: Arial, Helvetica, sans-serif; font-size: 100%; /* 1em = 16px */ line-height: 1.5em; /* 16px x 1.5em = 24px */ color: #333; /* HEADINGS Based on a Traditional Typographic Scale 48, 36, 24, 21, 18, 16 */ h1, h2, h3, h4, h5, h6 { margin-bottom:.5em; h1 { font-size: 3em; /* 48px / 16px = 3em */ line-height: 1em; h2 { font-size: 2.25em; /* 36px / 16px = 2.25em */ line-height: 1.1em; 1 of 10

5 h3 { font-size: 1.5em; /* 24px / 16px = 1.5em */ line-height: 1.2em; h4 { font-size: em; /* 21px / 16px = em */ line-height: 1.3em; h5 { font-size: 1.125em; /* 18px / 16px = 1.125em */ line-height: 1.4em; h6 { font-size: 1em; /* 16px / 16px = 1em */ line-height: 1.5em; /* #Paragraphs p { margin-bottom:.5em; /* #Links a { color: #369; text-decoration: none; a:visited, a:hover, a:focus { color: #036; /* #Lists ul, ol { margin-bottom:.5em; ul li ul, ul li ol, ol li ul, ol li ol { li { margin-left: 1.875em; /* #Images img.scale-with-grid { max-width: 100%; height: auto; a img { border: none; 2 of 10

6 /* #CLEARFIX.group:after { content: ""; display: table; clear: both; /* LAYOUT/GRID ===================================== */.container { width: 60em; /* 960px / 16px (base) = 60em */ margin: 0 auto; /* SITE SPECIFIC CSS ===================================== */ /* #Sections (Header, Navigation, Content Sections, Footer) */ body { background: #333; h1 { font-family: 'ChunkFiveRegular', Helvetica, Arial, sans-serif; font-weight: normal; font-style: normal; font-size: 2.625em; /* 42px / 16px = 2.625em */ line-height: 1.2em; /* 50px / 42px = ~1.2em */ margin-bottom:.3em; h2 { font-size: 1.5em; /* 24px / 16px = 1.5em */ line-height: 1.25em; /* 30px / 24px = 1.25em */ font-weight: normal; margin-bottom: 1em; h3 { font-size: em; /* 21px / 16px = em */ line-height: 1.143em; /* 24px / 21px = ~1.143em */ h4 { font-size:.6875em; /* 11px / 16px =.6875em */ line-height: 1.27em; /* 14px / 11px = ~1.27em */ text-transform: uppercase; color: #666; font-weight: normal;.container { width: 58.75em; /* 960px - 10px left and rigth side margins */ padding: 0.625em; /*10px side margins */ 3 of 10

7 position: relative; header { background: #3279a1; height: 155px; header h1, header h2, header p { padding: 0; header h1 a, header h2 a { position: absolute; top: 50px; left: 10px; display: block; background: url(../images/companyname-logo.png) no-repeat; width: 352px; height: 0px; padding-top: 65px; overflow: hidden; header p { text-indent: -9000px; height: 0px; header #utilitynav { position: absolute; top: 10px; right: 10px; font-size:.75em; header #utilitynav ul li { list-style: none; header #utilitynav ul li a { color: #fff; text-decoration: underline; margin-left: 1em; #mainnav { background: #333; font-family: "Arial Black", "Arial Bold", Arial, Helvetica, sans-serif; font-weight: bold; text-transform:uppercase; letter-spacing:.05em; #mainnav ul { 4 of 10

8 #mainnav ul li { list-style: none; #mainnav ul li a { color: #fff; text-decoration: none; display: block; padding:.8em 1.5em; #mainnav ul li a:hover { color: #000; background: #aaa; #mainnav ul li.selected a, #mainnav ul li.selected a:hover { color: #69c; background: #333; #section01 { background: #ccc; padding: 2em 0; #section01.column1 { width: 36.17%; float: right; margin: %; #section01.column2 { width: 61.71%; margin: % 0 0; #section01 h2 { font-family: 'ChunkFiveRegular', Helvetica, Arial, sans-serif; font-weight: normal; font-style: normal; font-size: 2.625em; /* 42px / 16px = 2.625em */ line-height: 1.2em; /* 50px / 42px = ~1.2em */ margin-bottom:.2em; #section01 p { font-size: 1.125em; /* 18px / 16px = 1.125em */ line-height: 1.39em; /* 25px / 18px = ~1.39em */ #section01 a.button-big { background: url(../images/button-big.gif) no-repeat 0 0; display: block; width: 235px; /*width of image*/ height: 0; 5 of 10

9 padding: 57px 0 0 0; /*top padding of 1/2 the height*/ overflow: hidden; #section01 a.button-big:hover { background: url(../images/button-big.gif) no-repeat 0-57px; #section02 { background: #fff; padding: 2em 0; #section02.column1 { width: 23.4%; #section02.column2 { width: 23.4%; margin: %; #section02.column3 { width: 23.4%;; margin: %; #section02 h3 { margin-bottom:.1em; #section02 h4 { border-bottom: 4px solid #000; padding-bottom:.3em; #section02 a.button-small { margin: 7px 0 0 0; background: url(../images/button-small.gif) no-repeat 0 0; display: block; width: 128px; /*width of image*/ height: 0; padding: 30px 0 0 0; /*top padding of 1/2 the height*/ overflow: hidden; #section02 a.button-small:hover { background: url(../images/button-small.gif) no-repeat 0-30px; footer { background: #333; color: #fff; padding: 2em 0; 6 of 10

10 footer #footernav ul li { list-style: none; text-transform: uppercase; font-size: 1.125em; /* 18px / 16px = 1.125em */ line-height: 1.1em; /* 20px / 18px = ~1.1em */ footer #footernav ul li.column1, footer #footernav ul li.column2, footer #footernav ul li.column3 { width: 17.02%; margin: % 0 0; footer #footernav ul li.column4 { float: right; width: 23.4%; footer #footernav ul li a { color: #fff; footer #footernav ul li a:hover { text-decoration: none; footer #footernav ul li ul { border-top: 1px solid #fff; margin-top:.4em; margin-bottom: 1em; padding-top:.4em; footer #footernav ul li ul li { text-transform: none; font-size:.61em; /* 11px / 18px = ~.61em */ line-height: 1.64em; /* 18px / 11px = ~1.64em */ footer #footernav ul li ul li a:hover { text-decoration: underline; footer #footernav ul li ul li address { font-style: normal; footer #copyright { font-size:.5625em; /* 9px / 16px =.5625em */ color: #999; /* SUB PAGES */ #main { background: #fff; 7 of 10

11 #main article{ width: 62%; margin: 3em 0; #main aside{ float: right; width: 30%; margin: 3em 0; #main aside.widget { margin: 0 0 2em 0; padding: 2em; background: #ccc; -webkit-border-radius: 1.25em; -moz-border-radius: 1.25em; border-radius: 1.25em; #main aside.widget h3 { border-bottom: 4px solid #000; padding-bottom:.2em; text-transform: uppercase; font-size: 1.125em; /* 18px / 16px = 1.125em */ line-height: 1.1em; /* 20px / 18px = ~1.1em */ #main aside.widget p { font-size:.75em; /* 12px / 16px =.75em */ line-height: 1.6em; /* 20px / 12px = ~1.6em */ /* MEDIA QUERIES ===================================== */ /* Tablet (Between 768px - all and (min-width: 48em) and (max-width: 62em) { body { font-size: 87.5%; /* 14px */.container { width: 96%; margin: 0 2%; padding: 0; #section02.column1 { width: 30%; 8 of 10

12 #section02.column2, #section02.column3 { width: 30%; margin: %; footer #footernav ul li.column1, footer #footernav ul li.column2, footer #footernav ul li.column3 { width: 17%; margin: 0 2% 0 0; footer #footernav ul li.column4 { float: right; width: 24%; /* MOBILE (Smaller than all and (max-width: em) { body { font-size: 75%; /* 12px */.container { width: 96%; margin: 0 2%; padding: 0; header { height: auto; padding: 2em 1em; header h1 a, header h2 a { position: static; background-size: 211px 39px; width: 211px; padding-top: 39px; margin: 0 auto; header #utilitynav { display: none; #mainnav ul { padding: 1em 0; #mainnav ul li a { float: none; 9 of 10

13 #section01.column1, #section01.column2 { width: 96%; float: none; margin:.5em 2%; #section01 img { margin-bottom: 1em; #section02.column1, #section02.column2, #section02.column3 { width: 96%; float: none; margin: 1em 2% 3em 2%; footer #footernav ul li.column1, footer #footernav ul li.column2, footer #footernav ul li.column3, footer #footernav ul li.column4 { width: 96%; float: none; margin: 2%; #main article, #main aside { width: 96%; float: none; margin: 2%; padding: 3em 0 0 0; footer #copyright { margin: 0 2%; ===================================== { font-family: 'ChunkFiveRegular'; src: url('../fonts/chunkfive-webfont.eot'); src: url('../fonts/chunkfive-webfont.eot?#iefix') format('embeddedopentype'), url('../fonts/chunkfive-webfont.woff') format('woff'), url('../fonts/chunkfive-webfont.ttf') format('truetype'), url('../fonts/chunkfive-webfont.svg#chunkfiveregular') format('svg'); font-weight: normal; font-style: normal; 10 of 10

BOOTSTRAP AFFIX PLUGIN

BOOTSTRAP AFFIX PLUGIN http://www.tutorialspoint.com/bootstrap/bootstrap_affix_plugin.htm Copyright tutorialspoint.com The affix plugin allows a to become affixed to a location on the page. You can