diff --git a/README.md b/README.md index d449525..f48e63d 100644 --- a/README.md +++ b/README.md @@ -14,4 +14,3 @@ Midterm Project for Interface Programming 1 at KCC NMA. + PC: Firefox, IE9+, Opera, Chrome + MAC: Safari, Firefox, Opera, Chrome - Turn in your final assignment by creating a pull request. - diff --git a/about/images/camera.png b/about/images/camera.png new file mode 100644 index 0000000..34e12df Binary files /dev/null and b/about/images/camera.png differ diff --git a/about/images/cameraicon.png b/about/images/cameraicon.png new file mode 100644 index 0000000..cc16410 Binary files /dev/null and b/about/images/cameraicon.png differ diff --git a/about/index.html b/about/index.html new file mode 100644 index 0000000..c75dfef --- /dev/null +++ b/about/index.html @@ -0,0 +1,157 @@ + + + + + Lissa Hardbarger's Midterm + + + + + + + + + + + + + + + + +
+

+ Company Name +

+

+ A Fictional Company Website +

+
+ + + + +
+
+ +
+
+ +
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ +

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ultrices augue vitae purus sodales eleifend.

+Date MM/DD/YYYY

+
Sed faucibus egestas ultricies. Vivamus enim
auctor hendrerit elit. Morbi facilisis tempus orci, sed placerat metus auctor non. Etiam non lacus erat, sit amet porttitor tellus. Curabitur pretium tincidunt tortor in vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi quam eros, bibendum ut pellentesque id, tristique eget lacus. Ut fermentum ligula vitae est luctus at iaculis nunc placerat.
+

Vestibulum urna erat, viverra in dignissim quis, bibendum lobortis sapien. Integer porttitor magna ut orci aliquam sed suscipit eros adipiscing. Pellentesque feugiat mi id eros placerat sit amet hendrerit tortor ultricies. Praesent pellentesque lorem eget ligula egestas sit amet elementum lacus dignissim. Duis semper sapien id massa vehicula quis malesuada est molestie. Vestibulum ac nunc in metus egestas sodales. In dignissim luctus eros, non facilisis nisi vulputate vulputate. Cras bibendum venenatis ipsum, sed euismod quam rhoncus rhoncus. Nullam consectetur augue ac mi convallis nec tempor odio pellentesque +
+
+ Nam ut metus sit amet odio tincidunt tincidunt vitae a orci. +
+ Maecenas at urna sapien, in lobortis tellus. Morbi eget felis eget tellus dapibus pellentesque. Duis dapibus pulvinar ipsum eu dapibus. Suspendisse potenti. Etiam sollicitudin velit eget nisi vulputate eu semper quam semper. Sed vitae ipsum quam. Nunc sed purus nisl, sit amet luctus nisi. Ut enim massa, sagittis et commodo eget,

+

+ Pellentesque rutrum, nunc sit amet adipiscing tempor, erat leo laoreet est, eu rhoncus risus elit quis lectus. Cras nulla tellus, sollicitudin quis commodo eget, commodo vel sapien. +

+

Auctor pretium elit. Nunc enim urna, accumsan sed ullamcorper eu, scelerisque gravida sapien. Phasellus tincidunt nunc elementum turpis ornare sit amet congue diam sodales. Sed interdum neque ut ipsum vestibulum euismod. Nulla nec purus ante. Praesent non diam et leo volutpat dictum in id erat. Donec elementum, leo ac blandit ornare, nunc nunc tincidunt mauris, sed ultricies lorem nibh quis lorem.

+

Morbi mauris mauris, aliquam eu sollicitudin id, sollicitudin sed nisl. Cras et nunc a leo pulvinar tincidunt. Suspendisse dignissim, sem sit amet consequat varius, eros enim ullamcorper eros, at tincidunt lacus dolor in turpis. Proin tempus ultricies mauris. Sed eu tortor nisi. Pellentesque non nisi justo, vel suscipit orci. Integer dolor metus, scelerisque aliquet sollicitudin sit amet, posuere at mauris. Nunc sem tellus, consequat at pulvinar quis, fringilla vel libero. Integer faucibus fermentum eros.

+
+

+ Scelerisque scelerisque +

+

Proin non ipsum ligula, ornare semper purus.
+ Morbi tincidunt ligula sit amet nulla venenatis sit amet tristique nisl pretium. Nunc facilisis, orci et gravida blandit, lectus augue viverra augue, non tempus ligula leo nec arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam eu elit quis sem posuere sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris congue dolor a magna accumsan eu pharetra mi porta. Cras eget interdum velit.

+

+ Aenean id nulla in dui iaculis adipiscing. Quisque commodo odio ut lacus auctor pellentesque. Pellentesque egestas pellentesque lorem sed imperdiet. Etiam porta egestas lectus eget interdum. Pellentesque purus neque, elementum non lobortis quis, vulputate ac metus. Etiam et purus a justo accumsan consequat eu elementum ligula. Nullam blandit pretium augue, vitae suscipit mauris lobortis sed. Nam iaculis sem at elit placerat sollicitudin. Ut quis pulvinar leo. +


+

Nam ut metus sit amet odio tincidunt tincidunt vitae a orci.
+ Maecenas at urna sapien, in lobortis tellus. Morbi eget felis eget tellus dapibus pellentesque. Duis dapibus pulvinar ipsum eu dapibus. Suspendisse potenti. Etiam sollicitudin velit eget nisi vulputate eu semper quam semper. Sed vitae ipsum quam. Nunc sed purus nisl, sit amet luctus nisi. Ut enim massa, sagittis et commodo eget,


+ +
+
+ + + + + + + + + + + diff --git a/about/style.css b/about/style.css new file mode 100644 index 0000000..e861e11 --- /dev/null +++ b/about/style.css @@ -0,0 +1,551 @@ +/* CSS TABLE OF CONTENTS +===================================== + #BASE CSS + #SITE-SPECIFIC CSS +===================================== */ + + +/* +===================================== +========== BEGIN BASE CSS =========== +===================================== +*/ + +/* BASE CSS (Initital Base Setup) +Description: "Base" css is an initial set of core +styles that can be used (and reused) as a start +for most sites. It should be placed at the top so +it can be over-written by site-specific styling +below. +===================================== + #RESET + #HTML5 + #BASE TYPOGRAPHY + #BODY + #HEADINGS + #PARAGRAPHS + #LINKS + #LISTS + #IMAGES + #CLEARFIX +===================================== */ + + +/* #RESET +================================================== */ +* { + margin: 0; + padding: 0; + box-sizing:border-box; +} + +/* #HTML5 +================================================== */ +header, section, footer, aside, nav, article, figure { + display: block; +} + +/* #BASE TYPOGRAPHY +================================================== */ + +/* #BODY */ +body { + font-family: Helvetica, Arial, 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-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; + font-size: 3.125em; + font-style: normal; + letter-spacing: -0.05em; + color: #000; + } + +h1 a { + color: #000; + text-decoration: none; + } + +h2 { + font-size: 2.25em; /* 36px / 16px = 2.25em */ + line-height: 1.1em; +} + +h3 { + font-size: 1.5em; /* 24px / 16px = 1.5em */ + line-height: 1.2em; +} + +h4 { + font-size: 1.3125em; /* 21px / 16px = 1.3125em */ + 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: #39c; text-decoration: none; } +a:visited, a:hover, a:focus { color: #069; } + + +/* #Lists +================================================== */ +ul, ol { + margin-bottom: .5em; +} + +ul li ul, ul li ol, ol li ul, ol li ol { + margin: 0; +} + +li { + margin-left: 1.875em; +} + + +/* #Images +================================================== */ +img.scale-with-grid { + max-width: 100%; + height: auto; +} + +a img { + border: none; +} + + +/* #CLEARFIX +================================================== */ +.row:before, +.row:after { + content: ""; + display: table; +} +.row:after { + clear: both; +} +.row { + clear: both; + *zoom: 1; +} + + +/* +===================================== +=========== END BASE CSS ============ +===================================== +*/ + + +/* +===================================== +===== BEGIN SITE- SPECIFIC CSS ====== +===================================== +*/ + +/* SITE-SPECIFIC CSS (Site-Specific Design) +Description: "Site-specific" css is where all +site-specific visual design styles. Site-specific +css should be placed on the bottom to +override any base styling above it. +===================================== + #SITE-SPECIFIC BASE STYLING + #SITE-SPECIFIC TYPOGRAPHY + #LAYOUT/GRID + #SECTIONS + #MEDIA QUERIES + #@FONT-FACE +===================================== */ + +/* SITE-SPECIFIC BASE STYLING +Description: Adjust general base settings above with +site-specific styles here. +(e.g. body background color) +===================================== */ + +body { + background: #fff; +} + +/* SITE-SPECIFIC TYPOGRAPHY +Description: Adjust the base typography settings above +with site-specific styles here. +(e.g. headings, paragraphs, colors, etc.) +===================================== */ + +header { + text-align: center; + margin: 2.5em; +} + +header .tagline { + text-transform: uppercase; + color: #000; + font-size: .725em; +} + +.mainnav { + text-align: center; + display: block; + width: 100%; + border-top: #d5d5d5 2px solid; + border-bottom: #d5d5d5 2px solid; +} + +.mainnav a { + font-family: Helvetica, Arial, sans-serif; + font-size: 1em; + font-weight: bold; + color:#000; + background-color: #fff; + text-align: center; + line-height: 0.875em; + margin: 2px auto; +} +.mainnav a:hover { + background-color: #ececec; +} +.mainnav small{ + font-size: 0.625em; + font-weight: normal; + color: #999; + list-style: none; +} + +.section2 h1 { + font-family: Helvetica, Arial, sans-serif; + font-size: 3em; + line-height:1.25em; + color:#000; + letter-spacing: normal; +} + +.section2 h3 { + font-family: Helvetica, Arial, sans-serif; + font-size: 1.5em; + font-weight: lighter; +} + +.section2 small { + font-family: Helvetica, Arial, sans-serif; + font-size: 0.625em; + font-weight: normal; + color: #666; +} + +.section2 h5 strong { + text-transform: uppercase; + font-size: 1.2em; +} + +.section2 h5 { + font-family: Helvetica, Arial, sans-serif; + font-size: 1.313em; + font-weight: 100; + color: #000; + text-align: justify; +} + +.section2 p { + font-family: Helvetica, Arial, sans-serif; + font-size: 1em; + font-weight: lighter; + text-align: justify; +} + +.section2 .indent { + font-family: Helvetica, Arial, sans-serif; + font-size: 1em; + text-indent: 40px; + margin-top: -6px; +} + +.section2 p strong { + font-family: Helvetica, Arial, sans-serif; + font-size: 1.125em; + font-weight: 600; + text-align: justify; +} + + +.section2 .quote { + font-family: Helvetica, Arial, sans-serif; + font-size: 1em; + font-weight: lighter; + background-color: #eee; + border-top: 3px #aaa solid; + border-bottom: 3px #aaa solid; + padding: 35px 50px; + margin: 30px 0; + text-align: left; + text-indent: 0; +} + +.section2 .subhead{ + font-family: Helvetica, Arial, sans-serif; + font-size: 1.313em; + text-transform: uppercase; + text-align: justify; + text-indent: 0; + font-weight: bold; +} + +.footer .col { + margin-top: 50px; +} + +.logo { + font-family: 'Helvetica', Arial, sans-serif; + font-size: 2em; + font-weight: bold; + letter-spacing: -0.05em; +} + +.copyright { + font-family: 'Helvetica', Arial, sans-serif; + font-size: 0.625em; + color: #999999; + margin-top: -1.5em; +} + +.footer a ul{ + font-family: 'Helvetica', Arial, sans-serif; + font-size: 1em; + line-height: 1em; + font-weight: bold; +} + +.footer a ul li{ + font-family: 'Helvetica', Arial, sans-serif; + font-size: 0.625em; + font-weight: normal; + color: #999; +} + + + + +/* LAYOUT/GRID +Description: Place grid and visual layout styling here. +(e.g. containers, rows, columns) +===================================== */ +.container { + /* Fixed width: 960px */ + width: 60em; /* 960px / 16px (base) = 60em - (5em padding x 2) = 50em */ + margin: 0.625em auto; + padding: 0 0.625em; +} + +.row { + /* Fixed width: 960px */ + width: 100%; /* 960px / 16px (base) = 60em - (5em padding x 2) = 50em */ +} + +header { + margin-top: 5em; +} + +.mainnav a { + display: inline-block; + width: 7.625em; + padding: .6em 0 .3em 0; +} + +.section1 .row { + background: #ececec; + border-radius: 20px; + padding:9em; + margin:1.875em 0; + text-align: center; + height: 380px; +} + +.section2 .row { + width: 660px; + background-color: white; + margin: auto; + margin-bottom:5em; + text-align: center; +} + +.footer { + background-color: #ececec; + height: 24.5em; + border-top: 1px #d5d5d5 solid; + position: inline-block; + clear:left; +} + + +.footer p { + position: absolute; + clear:none; +} + +.footer .copyright { + margin-top: 25px; +} + +.footer a ul{ + list-style: none; + color: #000; + text-align: right; + display: inline-block; + clear: none; + margin-left: 40px; +} + +.footer .footernav { + text-align: right; +} + + + + + + + + + + + +/* SECTIONS +Description: Style major site sections here. +(e.g. header, navs/navigation, site-specific content sections, +asides, sidebars, footer, sub page-specific styling, etc.) +===================================== */ + + +/* MEDIA QUERIES +Description: Define screen-size breakpoints here. +(e.g. Desktop, Tablet, Mobile) +===================================== */ + +/* Tablet (Between 768px - 992px)*/ +@media all and (min-width: 48em) and (max-width: 62em) { + + body { + font-size: 93.75%; /* 15px */ + } + + .container { + width: 96%; + margin: 2%; + padding: 2%; + } + + .mainnav a { + width:100%; + padding: .6em 0 .4em 0; + margin: 0; + } + + .footer a ul{ + clear:none; + float:left; + width:15%; + } + .footer .logo { + display:none; + } + + .footer .copyright { + margin: 7% 0 0 84%; + } + +} + +/* MOBILE (Smaller than 768px)*/ +@media all and (max-width: 47.9999em) { + + body { + font-size: 87.5%; /* 14px */ + } + + .container { + width: 96%; + margin: 2%; + padding: 2%; + } + + + .mainnav a { + width:100%; + padding: .6em 0 .4em 0; + margin: 0; + } + +.section2 .row{ + width:100%; +} + +.section2 h1 { + font-size:2.5em; +} + +.section2 h3 { + font-size: 1.4em; +} + +.section2 h5 { + font-size: 1em; +} + + .footer .copyright { + width: 20%; + float: left; + margin:0 0 0 70%; + } + + .footer a ul{ + width:21%; + } + + .footernav a ul { + clear:both; + margin:5px; + } + .footer .logo { + display:none; + } + +} + +/* @FONT-FACE (Webfonts) +===================================== */ + + +/* +===================================== +====== END SITE- SPECIFIC CSS ======= +===================================== +*/ diff --git a/assets/CompanyName2.psd b/assets/CompanyName2.psd index ece7284..8be82d2 100644 Binary files a/assets/CompanyName2.psd and b/assets/CompanyName2.psd differ diff --git a/images/camera.png b/images/camera.png new file mode 100644 index 0000000..caab875 Binary files /dev/null and b/images/camera.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..fe310fb --- /dev/null +++ b/index.html @@ -0,0 +1,244 @@ + + + + + Lissa Hardbarger's Midterm + + + + + + + + + + + + + + + + +
+

+ Company Name +

+

+ A Fictional Company Website +

+
+ + + + +
+
+

+ Lorem ipsum +

+ +

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+
+
+ +
+
+
+

+ Consectetur +

+

+ Dolor sit amet +

+ +

+ Duis eleifend, nisi vel venenatis blandit, nunc elit pretium ipsum, id tempus nisi lorem et quam. Integer tincidunt pellentesque pharetra. Phasellus ultricies varius tellus et hendrerit. Read more » +

+
+ +
+

+ Mauris Bibent +

+

+ Dolor sit amet +

+ +

+ Integer tincidunt pellentesque pharetra. Phasellus ultricies varius tellus et hendrerit. Pellentesque ultrices sem ut libero adipiscing at tincidunt orci elementum. Read more » +

+
+ +
+

+ Cras Varius +

+

+ Dolor sit amet +

+ +

+ Integer tincidunt pellentesque pharetra. Phasellus ultricies varius tellus et hendrerit. Pellentesque, nisi vel venenatis blandit, nunc elit pretium ipsum, id tempus nisi lorem et quam. Read more » +

+
+
+
+ +
+
+ +

+ In Ves Risus Vel Dui Porttitor +

+

+ Curabitur tincidunt pellentesque elit, quis hendrerit felis feugiat id. Nunc suscipit varius lacus a elementum. Aenean ut eleifend nulla. Suspendisse elementum. +

+
+
+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ + + + + + + + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..5b97fb1 --- /dev/null +++ b/style.css @@ -0,0 +1,670 @@ +/* CSS TABLE OF CONTENTS +===================================== + #BASE CSS + #SITE-SPECIFIC CSS +===================================== */ + + +/* +===================================== +========== BEGIN BASE CSS =========== +===================================== +*/ + +/* BASE CSS (Initital Base Setup) +Description: "Base" css is an initial set of core +styles that can be used (and reused) as a start +for most sites. It should be placed at the top so +it can be over-written by site-specific styling +below. +===================================== + #RESET + #HTML5 + #BASE TYPOGRAPHY + #BODY + #HEADINGS + #PARAGRAPHS + #LINKS + #LISTS + #IMAGES + #CLEARFIX +===================================== */ + + +/* #RESET +================================================== */ +* { + margin: 0; + padding: 0; + box-sizing:border-box; +} + +/* #HTML5 +================================================== */ +header, section, footer, aside, nav, article, figure { + display: block; +} + +/* #BASE TYPOGRAPHY +================================================== */ + +/* #BODY */ +body { + font-family: Helvetica, Arial, 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-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; + font-size: 3.125em; + font-style: normal; + letter-spacing: -0.05em; + color: #000; + } + +h1 a { + color: #000; + text-decoration: none; + } + +h2 { + font-size: 2.25em; /* 36px / 16px = 2.25em */ + line-height: 1.1em; +} + +h3 { + font-size: 1.5em; /* 24px / 16px = 1.5em */ + line-height: 1.2em; +} + +h4 { + font-size: 1.3125em; /* 21px / 16px = 1.3125em */ + 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: #39c; text-decoration: none; } +a:visited, a:hover, a:focus { color: #069; } + + +/* #Lists +================================================== */ +ul, ol { + margin-bottom: .5em; +} + +ul li ul, ul li ol, ol li ul, ol li ol { + margin: 0; +} + +li { + margin-left: 1.875em; +} + + +/* #Images +================================================== */ +img.scale-with-grid { + max-width: 100%; + height: auto; +} + +a img { + border: none; +} + + +/* #CLEARFIX +================================================== */ +.row:before, +.row:after { + content: ""; + display: table; +} +.row:after { + clear: both; +} +.row { + clear: both; + *zoom: 1; +} + + +/* +===================================== +=========== END BASE CSS ============ +===================================== +*/ + + +/* +===================================== +===== BEGIN SITE- SPECIFIC CSS ====== +===================================== +*/ + +/* SITE-SPECIFIC CSS (Site-Specific Design) +Description: "Site-specific" css is where all +site-specific visual design styles. Site-specific +css should be placed on the bottom to +override any base styling above it. +===================================== + #SITE-SPECIFIC BASE STYLING + #SITE-SPECIFIC TYPOGRAPHY + #LAYOUT/GRID + #SECTIONS + #MEDIA QUERIES + #@FONT-FACE +===================================== */ + +/* SITE-SPECIFIC BASE STYLING +Description: Adjust general base settings above with +site-specific styles here. +(e.g. body background color) +===================================== */ + +body { + background: #fff; +} + +/* SITE-SPECIFIC TYPOGRAPHY +Description: Adjust the base typography settings above +with site-specific styles here. +(e.g. headings, paragraphs, colors, etc.) +===================================== */ + +header { + text-align: center; + margin: 2.5em; +} + +header .tagline { + text-transform: uppercase; + color: #000; + font-size: .725em; +} + +.mainnav { + text-align: center; + display: block; + width: 100%; + border-top: #d5d5d5 2px solid; + border-bottom: #d5d5d5 2px solid; +} + +.mainnav a { + font-family: Helvetica, Arial, sans-serif; + font-size: 1em; + font-weight: bold; + color:#000; + background-color: #fff; + text-align: center; + line-height: 0.875em; + margin: 2px auto; +} +.mainnav a:hover { + background-color: #ececec; +} +.mainnav small{ + font-size: 0.625em; + font-weight: normal; + color: #999; + list-style: none; +} + +.section1 h2 { + font-family: Helvetica, Arial, sans-serif; + font-size: 5.946em; + font-weight: bold; + line-height:.75em; + color:#000; + text-align: center; +} + +.section1 p { + font-family: Helvetica, Arial, sans-serif; + font-size: 1.316em; + font-weight: lighter; + line-height: 1.55em; + color:#000; + text-align: center; +} + +.section2 h3 { + font-family: Helvetica, Arial, sans-serif; + font-size: 2.25em; + line-height: .2em; +} + +.section2 h4 { + font-family: Helvetica, Arial, sans-serif; + font-size: 0.625em; + color: #666666; +} + +.section2 img { + padding: .5em 0 .7em 0; +} + +.section2 p { + font-family: Helvetica, Arial, sans-serif; + font-size: 1em; + font-weight: lighter; + line-height: 1.5em; +} + +.section3 h2 { + font-family: Helvetica, Arial, sans-serif; + font-size: 1.5em; + text-transform: uppercase; + letter-spacing: 0.03em; + border-bottom: 1px #d6d6d6 solid; + padding: .5em 0 .5em 0; +} + +.section3 p { + font-family: Helvetica, Arial, sans-serif; + font-size: 1.316em; + line-height: 1.5em; + letter-spacing: 0.03em; + font-weight: lighter; + padding: 1em 0 1em 0; +} + +.section6 ul{ + font-family: Helvetica, Arial, sans-serif; + font-size: 1.125em; + font-weight: bold; + letter-spacing: 0.01em; +} + +.section6 ul li{ + font-family: 'Helvetica', Arial, sans-serif; + font-size: .9em; + font-weight: 100; + line-height: 1.25em; + margin:1em; + margin: 0; + padding:0; + list-style: none; + letter-spacing: normal; + list-style-type: none; + list-style-position:inside; +} + +.footer .col { + margin-top: 50px; +} + +.logo { + font-family: 'Helvetica', Arial, sans-serif; + font-size: 2em; + font-weight: bold; + letter-spacing: -0.05em; +} + +.copyright { + font-family: 'Helvetica', Arial, sans-serif; + font-size: 0.625em; + color: #999999; + margin-top: -1.5em; +} + +.footer a ul{ + font-family: 'Helvetica', Arial, sans-serif; + font-size: 1em; + line-height: 1em; + font-weight: bold; +} + +.footer a ul li{ + font-family: 'Helvetica', Arial, sans-serif; + font-size: 0.625em; + font-weight: normal; + color: #999; +} + + + + +/* LAYOUT/GRID +Description: Place grid and visual layout styling here. +(e.g. containers, rows, columns) +===================================== */ +.container { + /* Fixed width: 960px */ + width: 60em; /* 960px / 16px (base) = 60em - (5em padding x 2) = 50em */ + margin: 0.625em auto; + padding: 0 0.625em; +} + +.row { + /* Fixed width: 960px */ + width: 100%; /* 960px / 16px (base) = 60em - (5em padding x 2) = 50em */ +} + +header { + margin-top: 5em; +} + +.mainnav a { + display: inline-block; + width: 7.625em; + padding: .6em 0 .3em 0; +} + + +.section1 .row { + background: #ececec; + border-radius: 20px; + padding:5em; + margin:1.875em 0; +} + +.section2 .col-1, +.section2 .col-2, +.section2 .col-3 { + width: 32%; /* 960px / 16px (base) = 60em - (5em padding x 2) = 50em */ + margin-right: 2%; + margin-top: 1.875em; + margin-bottom: 2.5em; + float: left; + background: none; +} + +.section2 .col-3 { + margin-right: 0; +} + +.section3 .col-1 { + text-align: center; + display: inline-block; + width: 100%; + border-top: #d5d5d5 1px solid; + border-bottom: #d5d5d5 1px solid; + padding: 2px 0; +} + +.section6 { + margin-top: 4.5em; +} +.section6 .col-1, +.section6 .col-2, +.section6 .col-3, +.section6 .col-4, +.section6 .col-5, +.section6 .col-6 { + /* Fixed width: 960px */ + width: 32%; /* 960px / 16px (base) = 60em - (5em padding x 2) = 50em */ + margin-left: 16.66%; + float:left; + background: none; +} + +.section6 .col-2, +.section6 .col-4, +.section6 .col-6 { + /* Fixed width: 960px */ + width: 32%; /* 960px / 16px (base) = 60em - (5em padding x 2) = 50em */ + margin: 0 0 2.9% 8.33%; + float:left; + background: none; +} +.section6 .col-5 { + margin-bottom: 100px; +} + +.section6 i { + margin: 0 6% 0 0; + float: left; + height:70px; +} + +.footer { + background-color: #ececec; + height: 24.5em; + border-top: 1px #d5d5d5 solid; + position: inline-block; + clear:left; +} + + +.footer p { + position: absolute; + clear:none; +} + + +.footer .copyright { + margin-top: 25px; +} + +.footer a ul{ + list-style: none; + color: #000; + text-align: right; + display: inline-block; + clear: none; + margin-left: 40px; + margin-top:50px; + float:right; +} + +.footer .footernav { + text-align: right; +} + + + + + + + + + + + +/* SECTIONS +Description: Style major site sections here. +(e.g. header, navs/navigation, site-specific content sections, +asides, sidebars, footer, sub page-specific styling, etc.) +===================================== */ + + +/* MEDIA QUERIES +Description: Define screen-size breakpoints here. +(e.g. Desktop, Tablet, Mobile) +===================================== */ + +/* Tablet (Between 768px - 992px)*/ +@media all and (min-width: 48em) and (max-width: 62em) { + + body { + font-size: 93.75%; /* 15px */ + } + + .container { + width: 96%; + margin: 2%; + padding: 2%; + } + + .mainnav a { + width:100%; + padding: .6em 0 .4em 0; + margin: 0; +} + +.section2 .col-1, +.section2 .col-2, +.section2 .col-3 { + width:50%; + text-align: center; + clear: none; + margin:2% 25% 10% 25%; +} + +.section2 img { + width:100%; +} + +.section6 .col-1, +.section6 .col-2, +.section6 .col-3, +.section6 .col-4, +.section6 .col-5, +.section6 .col-6 { + margin: 2% 10% 10% 10%; + width:30%; +} + +.footer a ul{ + clear:none; + float:left; + width:15%; +} +.footer .logo { +display:none; +} + +.footer .copyright { +margin: 7% 0 0 84%; +} + + +} + +/* MOBILE (Smaller than 768px)*/ +@media all and (max-width: 47.9999em) { + + body { + font-size: 87.5%; /* 14px */ + } + + .container { + width: 96%; + margin: 2%; + padding: 2%; + } + + .mainnav a { + width:100%; + padding: .6em 0 .4em 0; + margin: 0; +} + +.section1 h2 { + font-family: Helvetica, Arial, sans-serif; + font-size: 3em; + font-weight: bold; + line-height:1em; + color:#000; + text-align: center; +} + +.section1 p { + font-family: Helvetica, Arial, sans-serif; + font-size: 1em; + color:#000; + text-align: center; +} + +.section2 .col-1, +.section2 .col-2, +.section2 .col-3 { + width:96%; + clear: both; + margin:2%; +} +.section2 img { + width:100%; +} +.footernav a ul { + clear:both; + margin:5px; +} +.footer .logo { +display:none; +} + + + +.section2 .col-1, +.section2 .col-2, +.section2 .col-3 { + width:50%; + text-align: center; + clear: none; + margin:2% 25% 10% 25%; +} + +.section2 h3 { + line-height: normal; + font-size: 2em; +} +.section2 img { + width:100%; +} + +.section6 .col-1, +.section6 .col-2, +.section6 .col-3, +.section6 .col-4, +.section6 .col-5, +.section6 .col-6 { + margin: 2% 10% 10% 10%; + width:80%; +} + + +.footer .copyright { + width: 20%; + float: left; +margin:0 0 0 70%; +} + +.footer a ul{ + clear:none; + float:left; + width:20%; +} +} + +/* @FONT-FACE (Webfonts) +===================================== */ + + +/* +===================================== +====== END SITE- SPECIFIC CSS ======= +===================================== +*/