From 15fa4a64e6851d142d0fa0f142d3683d655b0a9b Mon Sep 17 00:00:00 2001 From: MikaKatagiri Date: Tue, 8 Mar 2016 09:52:00 -1000 Subject: [PATCH 01/16] add change on HTML --- css/style.css | 252 ++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 127 +++++++++++++++++++++++++ 2 files changed, 379 insertions(+) create mode 100644 css/style.css create mode 100644 index.html diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..50b85b0 --- /dev/null +++ b/css/style.css @@ -0,0 +1,252 @@ +/* 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; +} + +/* #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-size: 3em; /* 48px / 16px = 3em */ + line-height: 1em; +} + +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 +================================================== */ +.group:after { + content: ""; + display: table; + clear: both; +} + +/* +===================================== +=========== 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: #ddd; +} + +/* SITE-SPECIFIC TYPOGRAPHY +Description: Adjust the base typography settings above +with site-specific styles here. +(e.g. headings, paragraphs, colors, etc.) +===================================== */ + + + +/* LAYOUT/GRID +Description: Place grid and visual layout styling here. +(e.g. containers, rows, columns) +===================================== */ +.container { + /* Fixed width: 960px */ + width: 50em; /* 960px / 16px (base) = 60em - (5em padding x 2) = 50em */ + margin: 2em auto; + padding: 5em; + background: #fff; +} + +/* 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: 80%; + margin: 4%; + padding: 6%; + } + +} + +/* MOBILE (Smaller than 768px)*/ +@media all and (max-width: 47.9999em) { + + body { + font-size: 87.5%; /* 14px */ + } + + .container { + width: 84%; + margin: 3%; + padding: 5%; + } + +} + +/* @FONT-FACE (Webfonts) +===================================== */ + + +/* +===================================== +====== END SITE- SPECIFIC CSS ======= +===================================== +*/ diff --git a/index.html b/index.html new file mode 100644 index 0000000..4a42407 --- /dev/null +++ b/index.html @@ -0,0 +1,127 @@ + + + + + CompanyName2 + + + + + + + + + +
+

Company Name

+

AFICTIONAL COMPANY WEB SITE

+
+ + + +
+

Lorem ispum

+

Vivamus eu mollis velit. Maecenas id massa libero. Aliquam accumsan mauris vulputate purus volutpat vestibulum. Phasellus sed tellus id tortor ornare molestie. Quisque massa sapien, elementum +

+
+ +
+
+

Consecteur

+

Dolor sit amet

+ camera +

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 »

+
+ +
+

Consecteur

+

Dolor sit amet

+ camera +

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 »

+
+ +
+

Consecteur

+

Dolor sit amet

+ camera +

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 »

+
+ + +
+ +
+

In vel risus vel dui porttitor

+ +

Vivamus eu mollis velit. Maecenas id massa libero. Aliquam accumsan mauris vulputate purus volutpat vestibulum. Phasellus sed tellus id tortor ornare molestie. Quisque massa sapien, elementum +

+ +
+
    +
  • + +
    Sub heading
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    +
    • +
  • + +
    Sub heading
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    +
    • +
  • + +
    Sub heading
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    +
    • +
  • + +
    Sub heading
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    +
    • +
  • + +
    Sub heading
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    +
    • +
  • + +
    Sub heading
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    +
    • +
+
+
+ + + + + From 11c89d1f34fa181195a675eddb3759fe32d0f79e Mon Sep 17 00:00:00 2001 From: MikaKatagiri Date: Tue, 8 Mar 2016 10:40:02 -1000 Subject: [PATCH 02/16] made change on css --- css/style.css | 83 ++++++++++++++++++++++++++++++++------------------- index.html | 13 ++++---- 2 files changed, 59 insertions(+), 37 deletions(-) diff --git a/css/style.css b/css/style.css index 50b85b0..e95f2ef 100644 --- a/css/style.css +++ b/css/style.css @@ -48,51 +48,61 @@ header, section, footer, aside, nav, article, figure { ================================================== */ /* #BODY */ -body { + +body{ + margin:0 1.5%; 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; +section{ + display: inline-block; + width: 96%; + height: 200px; + text-align: center; + margin: 1.5% ; } -h1 { - font-size: 3em; /* 48px / 16px = 3em */ - line-height: 1em; +.section1 { + background: #ddd; } -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; +.footer{ + clear: both; } -h4 { - font-size: 1.3125em; /* 21px / 16px = 1.3125em */ - line-height: 1.3em; -} +.col-4{ + float: left; + width: 30%; -h5 { - font-size: 1.125em; /* 18px / 16px = 1.125em */ - line-height: 1.4em; } -h6 { - font-size: 1em; /* 16px / 16px = 1em */ - line-height: 1.5em; +.row:before, +.row:after { + content: ""; + display: table; +} +.row:after { + clear: both; +} +.row { + clear: both; + *zoom: 1; } +ul{ + list-style: none; + margin-bottom: 500px; +} + + +/* #HEADINGS +Based on a Traditional Typographic Scale: +48, 36, 24, 21, 18, 16 +================================================== */ + + /* #Paragraphs ================================================== */ @@ -176,7 +186,20 @@ site-specific styles here. ===================================== */ body { - background: #ddd; + background: #fff; +} + +header { + text-align: center; +} + + +nav { + text-align: center; +} +nav ul li{ + display: inline-block + } /* SITE-SPECIFIC TYPOGRAPHY diff --git a/index.html b/index.html index 4a42407..9485dd5 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,6 @@

Company Name

-
+

Lorem ispum

Vivamus eu mollis velit. Maecenas id massa libero. Aliquam accumsan mauris vulputate purus volutpat vestibulum. Phasellus sed tellus id tortor ornare molestie. Quisque massa sapien, elementum

+
From 2b701637bbcd9e10a8bccf340fdf7f3335cf1399 Mon Sep 17 00:00:00 2001 From: MikaKatagiri Date: Tue, 15 Mar 2016 09:22:08 -1000 Subject: [PATCH 07/16] added omg --- camera.jpg | Bin 0 -> 6362 bytes css/style.css | 11 ++++++----- index.html | 6 +++--- 3 files changed, 9 insertions(+), 8 deletions(-) create mode 100644 camera.jpg diff --git a/camera.jpg b/camera.jpg new file mode 100644 index 0000000000000000000000000000000000000000..ee1932c1bb11f61ebac80a980c72313a175c9b78 GIT binary patch literal 6362 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 RT`BXTs63~q6zm1|>R(hbF17#w literal 0 HcmV?d00001 diff --git a/css/style.css b/css/style.css index 196e9af..0b5caf9 100644 --- a/css/style.css +++ b/css/style.css @@ -189,7 +189,7 @@ Description: Place grid and visual layout styling here. .section2 { text-align: center; - padding: 3em; + padding: 5em; } @@ -205,7 +205,8 @@ Description: Place grid and visual layout styling here. .section3 .col-6 { float: left; - width: 45%; + width: 47%; + padding: 3em; } .section3 ul { @@ -217,8 +218,8 @@ Description: Place grid and visual layout styling here. } .footer { - width: 97%; - height: 400px; + width: 94%; + height: 500px; margin-top: 3%; background: #ddd; } @@ -232,7 +233,7 @@ Description: Place grid and visual layout styling here. .footer ul { margin-top: 4%; float: right; - width: 35%; + width: 40%; } diff --git a/index.html b/index.html index 79a90fd..b4880f4 100644 --- a/index.html +++ b/index.html @@ -38,21 +38,21 @@

Lorem ispum

Consecteur

Dolor sit amet

- camera + camera

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 »

Consecteur

Dolor sit amet

- camera + camera

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 »

Consecteur

Dolor sit amet

- camera + camera

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 »

From 6147c5776cbee45affc0394c4e09a85d04e451be Mon Sep 17 00:00:00 2001 From: MikaKatagiri Date: Tue, 15 Mar 2016 09:54:03 -1000 Subject: [PATCH 08/16] added links --- css/style.css | 17 ++++++++++------- index.html | 30 ++++++++++++++++++------------ 2 files changed, 28 insertions(+), 19 deletions(-) diff --git a/css/style.css b/css/style.css index 0b5caf9..c1ef920 100644 --- a/css/style.css +++ b/css/style.css @@ -114,11 +114,13 @@ body { .container { position: relative; - width: 55em; /* 960px / 16px = 60em */ + width: 47em; /* 960px / 16px = 60em */ padding: 0 .625em; margin: 0 auto; } + + header { margin: 2em; text-align: center; @@ -127,6 +129,7 @@ header { nav { text-align: center; + margin: 2em; } nav ul li{ display: inline-block @@ -157,7 +160,7 @@ h2 { h3 { font-family: Helvetica; font-weight: bold; - font-size: 2em; /* 24px */ + font-size: 3em; /* 24px */ line-height: 1.25em; /* 30px */ letter-spacing: -.025em; text-decoration: none; @@ -167,7 +170,7 @@ h3 { h6 { font-family: Helvetica; font-weight: bold; - font-size: 1.2em; /* 24px */ + font-size: 2em; /* 24px */ line-height: 1.25em; /* 30px */ letter-spacing: -.025em; text-decoration: none; @@ -188,8 +191,7 @@ Description: Place grid and visual layout styling here. } .section2 { - text-align: center; - padding: 5em; + padding: 2em; } @@ -200,13 +202,14 @@ Description: Place grid and visual layout styling here. .section3 { text-align: center; - padding: 3em; + padding: 1.5em; } .section3 .col-6 { + text-align: left; float: left; width: 47%; - padding: 3em; + padding: 4em; } .section3 ul { diff --git a/index.html b/index.html index b4880f4..a73c3fb 100644 --- a/index.html +++ b/index.html @@ -37,23 +37,29 @@

Lorem ispum

Consecteur

-

Dolor sit amet

+ Dolor sit amet camera -

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 »

+

Duis eleifend, nisi vel venenatis blandit, nunc elit pretium ipsum, id nisi lorem et quam. + Read more » +

Consecteur

-

Dolor sit amet

+ Dolor sit amet camera -

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 »

+

Duis eleifend, nisi vel venenatis blandit, nunc elit pretium ipsum, id nisi lorem et quam. + Read more » +

Consecteur

-

Dolor sit amet

+ Dolor sit amet camera -

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 »

+

Duis eleifend, nisi vel venenatis blandit, nunc elit pretium ipsum, id nisi lorem et quam. + Read more » +

@@ -61,7 +67,7 @@

Dolor sit amet

In vel risus vel dui porttitor

-

Vivamus eu mollis velit. Maecenas id massa libero. Aliquam accumsan mauris vulputate purus volutpat vestibulum. Phasellus sed tellus id tortor ornare molestie. Quisque massa sapien, elementum +

Duis eleifend, nisi vel venenatis blandit, nunc elit pretium ipsum, id tempus nisi lorem et quam. Duis eleifend, nisi vel venenatis blandit, nunc elit pretium ipsum, id tempus nisi lorem nunc elitet quam.

@@ -112,22 +118,22 @@
Sub heading
From 1d2e2e3870d78c51fb6222e9cbf2efcc8b5fa639 Mon Sep 17 00:00:00 2001 From: MikaKatagiri Date: Tue, 15 Mar 2016 10:07:40 -1000 Subject: [PATCH 09/16] made about page --- about.html | 144 ++++++++++++++++++++++++++++++++++++++++++++++++ about/style.css | 0 css/style.css | 16 +++--- 3 files changed, 151 insertions(+), 9 deletions(-) create mode 100644 about.html create mode 100644 about/style.css diff --git a/about.html b/about.html new file mode 100644 index 0000000..a73c3fb --- /dev/null +++ b/about.html @@ -0,0 +1,144 @@ + + + + + CompanyName2 + + + + + + + + + + +
+

Company Name

+

AFICTIONAL COMPANY WEB SITE

+
+ + + +
+

Lorem ispum

+

Vivamus eu mollis velit. Maecenas id massa libero. Aliquam accumsan mauris vulputate purus volutpat vestibulum. Phasellus sed tellus id tortor ornare molestie. Quisque massa sapien, elementum +

+ +
+ +
+
+
+

Consecteur

+ Dolor sit amet + camera +

Duis eleifend, nisi vel venenatis blandit, nunc elit pretium ipsum, id nisi lorem et quam. + Read more » +

+
+ +
+

Consecteur

+ Dolor sit amet + camera +

Duis eleifend, nisi vel venenatis blandit, nunc elit pretium ipsum, id nisi lorem et quam. + Read more » +

+
+ +
+

Consecteur

+ Dolor sit amet + camera +

Duis eleifend, nisi vel venenatis blandit, nunc elit pretium ipsum, id nisi lorem et quam. + Read more » +

+
+
+
+ +
+

In vel risus vel dui porttitor

+ +

Duis eleifend, nisi vel venenatis blandit, nunc elit pretium ipsum, id tempus nisi lorem et quam. Duis eleifend, nisi vel venenatis blandit, nunc elit pretium ipsum, id tempus nisi lorem nunc elitet quam. +

+
+
+
    +
  • + +
    Sub heading
    +

    Morbi eget accumsan orci. In viverra euismod congue. Mauris bibendum velit.

    +
    • +
  • + +
    Sub heading
    +

    Morbi eget accumsan orci. In viverra euismod congue. Mauris bibendum velit.

    +
    • +
  • + +
    Sub heading
    +

    Morbi eget accumsan orci. In viverra euismod congue. Mauris bibendum velit.

    +
    • + +
+
+
+
    + +
  • + +
    Sub heading
    +

    Morbi eget accumsan orci. In viverra euismod congue. Mauris bibendum velit.

    +
    • +
  • + +
    Sub heading
    +

    Morbi eget accumsan orci. In viverra euismod congue. Mauris bibendum velit.

    +
    • +
  • + +
    Sub heading
    +

    Morbi eget accumsan orci. In viverra euismod congue. Mauris bibendum velit.

    +
    • +
+
+ +
+
+ + + + + diff --git a/about/style.css b/about/style.css new file mode 100644 index 0000000..e69de29 diff --git a/css/style.css b/css/style.css index c1ef920..3b3a1d5 100644 --- a/css/style.css +++ b/css/style.css @@ -145,7 +145,7 @@ footer ul li{ h1 { font-family: Helvetica; font-weight: bold; - font-size: 2.3em; /* 42px */ + font-size: 3.5em; /* 42px */ } h2 { @@ -182,12 +182,12 @@ Description: Place grid and visual layout styling here. ===================================== */ .section1 { text-align: center; - padding: 3em; + padding: 5em; background: #ddd; } .section1 h2 { - font-size: 5em; + font-size: 7em; } .section2 { @@ -197,7 +197,7 @@ Description: Place grid and visual layout styling here. .section2 .col-4 { float: left; - width: 28%; + width: 30%; } .section3 { @@ -221,20 +221,18 @@ Description: Place grid and visual layout styling here. } .footer { - width: 94%; - height: 500px; - margin-top: 3%; + height: 600px; background: #ddd; } .footer .logo { - margin-top: 4%; + margin-top: 2%; float: left; width: 35%; } .footer ul { - margin-top: 4%; + margin-top: 2%; float: right; width: 40%; } From ce7afa9fb7370288e494c6ed7af181f38cd36814 Mon Sep 17 00:00:00 2001 From: MikaKatagiri Date: Tue, 15 Mar 2016 10:25:05 -1000 Subject: [PATCH 10/16] added about.html --- about.html | 111 +- about/style.css | 2353 +++++++++++++++++++++++++++++++++++++++ assets/CompanyName2.psd | Bin 7882414 -> 8937857 bytes camera2.jpg | Bin 0 -> 15813 bytes 4 files changed, 2388 insertions(+), 76 deletions(-) create mode 100644 camera2.jpg diff --git a/about.html b/about.html index a73c3fb..222c03a 100644 --- a/about.html +++ b/about.html @@ -9,7 +9,7 @@ - + @@ -27,92 +27,51 @@

Company Name

-

Lorem ispum

+ camera +

Lorem ispum Dolor sit amet, consecteur adipiscing elit.

Vivamus eu mollis velit. Maecenas id massa libero. Aliquam accumsan mauris vulputate purus volutpat vestibulum. Phasellus sed tellus id tortor ornare molestie. Quisque massa sapien, elementum

-
+

Date MM/DD/YYYY

-
-
-
-

Consecteur

- Dolor sit amet - camera -

Duis eleifend, nisi vel venenatis blandit, nunc elit pretium ipsum, id nisi lorem et quam. - Read more » -

-
+

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. -
-

Consecteur

- Dolor sit amet - camera -

Duis eleifend, nisi vel venenatis blandit, nunc elit pretium ipsum, id nisi lorem et quam. - Read more » -

-
+

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, -
-

Consecteur

- Dolor sit amet - camera -

Duis eleifend, nisi vel venenatis blandit, nunc elit pretium ipsum, id nisi lorem et quam. - Read more » -

-
-
-
+
+ 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. +
-
-

In vel risus vel dui porttitor

+

+ 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. +

-

Duis eleifend, nisi vel venenatis blandit, nunc elit pretium ipsum, id tempus nisi lorem et quam. Duis eleifend, nisi vel venenatis blandit, nunc elit pretium ipsum, id tempus nisi lorem nunc elitet quam. -

-
-
-
    -
  • - -
    Sub heading
    -

    Morbi eget accumsan orci. In viverra euismod congue. Mauris bibendum velit.

    -
    • -
  • - -
    Sub heading
    -

    Morbi eget accumsan orci. In viverra euismod congue. Mauris bibendum velit.

    -
    • -
  • - -
    Sub heading
    -

    Morbi eget accumsan orci. In viverra euismod congue. Mauris bibendum velit.

    -
    • +

    + 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, +

    +
-
  • - -
    Sub heading
    -

    Morbi eget accumsan orci. In viverra euismod congue. Mauris bibendum velit.

    -
    • -
  • - -
    Sub heading
    -

    Morbi eget accumsan orci. In viverra euismod congue. Mauris bibendum velit.

    -
    • -
  • - -
    Sub heading
    -

    Morbi eget accumsan orci. In viverra euismod congue. Mauris bibendum velit.

    -
    • - -
    -
    -
    -

    Sed faucibus egestas ultricies. Vivamus enim

    +
    +

    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.

    +
    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,
    @@ -55,8 +57,8 @@

    Nam ut metus sit amet odio tincidunt tincidunt vitae a orci.

    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.

    +

    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.

    @@ -64,8 +66,8 @@

    Proin non ipsum ligula, ornare semper purus.

    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.

    +
    + 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 index 8eded1f..1407ff7 100644 --- a/about/style.css +++ b/about/style.css @@ -142,25 +142,21 @@ footer ul li{ } -h1 { - font-family: Helvetica; - font-weight: bold; - font-size: 3.5em; /* 42px */ -} -h2 { + +h3 { font-family: Helvetica; font-weight: bold; font-size: 3em; /* 24px */ line-height: 1.25em; /* 30px */ - letter-spacing: .025em; - text-transform: none; + letter-spacing: -.025em; + text-decoration: none; } -h3 { +h4 { font-family: Helvetica; font-weight: bold; - font-size: 3em; /* 24px */ + font-size: 2em; /* 24px */ line-height: 1.25em; /* 30px */ letter-spacing: -.025em; text-decoration: none; @@ -170,7 +166,7 @@ h3 { h6 { font-family: Helvetica; font-weight: bold; - font-size: 2em; /* 24px */ + font-size: 1em; /* 24px */ line-height: 1.25em; /* 30px */ letter-spacing: -.025em; text-decoration: none; @@ -182,41 +178,11 @@ Description: Place grid and visual layout styling here. ===================================== */ .section1 { text-align: center; - padding: 5em; -} - -.section1 h2 { - font-size: 7em; + padding: 3em; } .section2 { - padding: 2em; - -} - -.section2 .col-4 { - float: left; - width: 30%; -} - -.section3 { - text-align: center; - padding: 1.5em; -} - -.section3 .col-6 { - text-align: left; - float: left; - width: 47%; - padding: 4em; -} - -.section3 ul { - list-style: none; -} - -.section3 li .fa { - float: left; + padding: 1em; } .footer { From 70dcd08ed1a206feba706636b48c0c99d66cd713 Mon Sep 17 00:00:00 2001 From: MikaKatagiri Date: Thu, 17 Mar 2016 09:08:49 -1000 Subject: [PATCH 12/16] add change --- about/style.css | 154 ++++++++++++++++++++++++++++++++++------ assets/CompanyName2.pdf | Bin 179831 -> 179674 bytes css/style.css | 150 ++++++++++++++++++++++++++++++-------- index.html | 29 ++++---- 4 files changed, 268 insertions(+), 65 deletions(-) diff --git a/about/style.css b/about/style.css index 1407ff7..3c07610 100644 --- a/about/style.css +++ b/about/style.css @@ -57,7 +57,7 @@ body{ h1 { font-size: 3em; - line-height: 1em; + line-height: 1.4em; } h2 { @@ -65,11 +65,34 @@ h2 { line-height: 1.1em; } +h3 { + font-size: 1.5em; + line-height: 1.25em; } + +h4 { + font-size: 1.7em; + line-height: 1.3em; +} + +h5 { + font-size: 1.125em; + line-height: 1.35em; +} + +h6 { + font-size: 1em; + line-height: 1.4em; + } + /* PARAGPRAHS */ p { - margin-bottom: .5em; + margin-bottom: 1.25em; } - +/* #Links +================================================== */ +a { color: black; text-decoration: none; outline: 0; } +a:hover, a:focus { color: #39c; } +p a, p a:visited { line-height: inherit; } /* LISTS */ /* IMAGES */ @@ -114,7 +137,7 @@ body { .container { position: relative; - width: 47em; /* 960px / 16px = 60em */ + width: 56em; /* 960px / 16px = 60em */ padding: 0 .625em; margin: 0 auto; } @@ -122,42 +145,68 @@ body { header { - margin: 2em; + margin: 3em; text-align: center; } nav { text-align: center; - margin: 2em; + margin: 1em; + padding-top: .7%; + padding-bottom: .1%; + color: #999; + border-top: 2px solid #d5d5d5; + border-bottom: 2px solid #d5d5d5; +} + +nav ul li a { + padding: .5em 3em; + font-weight: bold; } + + nav ul li{ display: inline-block - } + footer ul li{ float: left; list-style: none; + padding: .5em 1em; } +footer ul li a{ +font-weight: bold; +} -h3 { +h1 { + font-family: Helvetica; + font-weight: bold; + font-size: 3em; /* 42px */ + +} + +h2 { font-family: Helvetica; font-weight: bold; - font-size: 3em; /* 24px */ - line-height: 1.25em; /* 30px */ - letter-spacing: -.025em; - text-decoration: none; + font-size: 1.8em; /* 24px */ + line-height: 1.9em; /* 30px */ + letter-spacing: .025em; + text-transform: uppercase; + border-top: 2px solid #d5d5d5; + border-bottom: 2px solid #d5d5d5; + } -h4 { +h3 { font-family: Helvetica; font-weight: bold; font-size: 2em; /* 24px */ - line-height: 1.25em; /* 30px */ + line-height: 1em; /* 30px */ letter-spacing: -.025em; text-decoration: none; } @@ -166,7 +215,7 @@ h4 { h6 { font-family: Helvetica; font-weight: bold; - font-size: 1em; /* 24px */ + font-size: 1.4em; /* 24px */ line-height: 1.25em; /* 30px */ letter-spacing: -.025em; text-decoration: none; @@ -176,32 +225,93 @@ h6 { Description: Place grid and visual layout styling here. (e.g. containers, rows, columns) ===================================== */ + +.header p { + color: #999; +} + + .section1 { text-align: center; - padding: 3em; + margin: 3em: + padding: 4em; + +} + +.section1 h2 { + font-size: 4.5em; + text-transform: none; } .section2 { - padding: 1em; + padding: 2em; + +} + +.section2 .col-4 { + float: left; + width: 30%; + margin: 0 .9em; +} + +h4.byline { + font-size: .625em; + line-height: .625em; + color: #999; + margin: .75em 0; + font-weight: normal; +} + + +.section3 { + text-align: center; + padding: 1em; +} + +.section3 p { + padding: 3em; + border-bottom: 2px solid #d5d5d5; +} + +.section4 .col-6 { + text-align: left; + float: left; + width: 47%; + padding: 2em 4em 0 4em; + +} + +.section4 ul { + list-style: none; + margin: 0 0 6em 0; +} + +.section4 li .fa { + float: left; } .footer { - height: 600px; + height: 550px; background: #ddd; } .footer .logo { - margin-top: 2%; + margin:3% 18%; float: left; - width: 35%; + width: 45%; } .footer ul { - margin-top: 2%; + margin-top: -7.5%; + margin-right: 13%%; + padding: 0 7em; float: right; - width: 40%; + width: 45%; } +.footer p { + color: #999; +} /* SECTIONS Description: Style major site sections here. diff --git a/assets/CompanyName2.pdf b/assets/CompanyName2.pdf index a406904863cb66da6762a29a0a1ef1014224acc7..b91d4d55bb53a0097ac3c6738a3c7123a958ca4d 100644 GIT binary patch delta 667 zcmezVhwIjFt_fjr1`JNd&dRLC-pZ|uLRt%2ZCL*{Tv_zwO4FoEM`T(T`7DqMR#x6% zRcy@7DjdwZ;MJ2D*4pzi&aBgG7AQ6{>`4-8;7ZL)DK05WP0R(c@{_W-Oce|iK(x6@ zipj9Zs7DePh~G|)4deqtAs`*fwmCJw}#B z7-Gg2hNxnO=BAcFTfkPp>;jo#aEAf~%`Gquv@pgZW{&A0OJfX+ zEiBE@0t0A=rKK^#(IrKKiJ3X6MO-#E3i`pBRlwl2nErJylVW0$k)e5Nnwhb&L9(%B znrTW(QlgPTvZb-5p?Q)?QgW&tmkmKB3b6{nXeusAEGhvnjs~rDZ#LC=giio&Xr9ICps0aYucB- zZef$RU4Xj+!-j`^nOv!PDa9p4sfoEDR(?_zm#Kn*0+_aJ+|s&*aqAW)g|%1S*MuoEG>59w2*}7U$uG{xFF?pyz~o%4j0_Bo4U7%Uj0{Z-jm@JB4Ag-Lq0$nj z5-wz902PW>h=p4Q6|$M0vYSbPE4VZ%D>b=9!O(1a-EJnibS|)Cf)w zxv7N(nqH8(CYb6h4ba>KQfCCwTMu_AP|(~A(?APDEMjJu9%C0UOu*2N*vq7tXkwCPY?x|fk!qfrXlP() yX=s?5W}cL6XkunyZf0SbY{z9oP>Dh;C^m~r5{pW}aS61?$kd2SRn^tsjSB!lVAAdY diff --git a/css/style.css b/css/style.css index 3b3a1d5..f5bbe25 100644 --- a/css/style.css +++ b/css/style.css @@ -57,7 +57,7 @@ body{ h1 { font-size: 3em; - line-height: 1em; + line-height: 1.4em; } h2 { @@ -65,11 +65,34 @@ h2 { line-height: 1.1em; } +h3 { + font-size: 1.5em; + line-height: 1.25em; } + +h4 { + font-size: 1.3125em; + line-height: 1.3em; +} + +h5 { + font-size: 1.125em; + line-height: 1.35em; +} + +h6 { + font-size: 1em; + line-height: 1.4em; + } + /* PARAGPRAHS */ p { - margin-bottom: .5em; + margin-bottom: 1.25em; } - +/* #Links +================================================== */ +a { color: black; text-decoration: none; outline: 0; } +a:hover, a:focus { color: #39c; } +p a, p a:visited { line-height: inherit; } /* LISTS */ /* IMAGES */ @@ -114,7 +137,7 @@ body { .container { position: relative; - width: 47em; /* 960px / 16px = 60em */ + width: 56em; /* 960px / 16px = 60em */ padding: 0 .625em; margin: 0 auto; } @@ -122,46 +145,58 @@ body { header { - margin: 2em; + margin: 3em; text-align: center; } nav { text-align: center; - margin: 2em; + margin: 1em; + padding-top: .7%; + padding-bottom: .1%; + color: #999; + border-top: 2px solid #d5d5d5; + border-bottom: 2px solid #d5d5d5; } -nav ul li{ - display: inline-block +nav ul li a { + padding: .5em 3em; + font-weight: bold; } -footer ul li{ - float: left; - list-style: none; + +nav ul li{ + display: inline-block } + + + + h1 { font-family: Helvetica; font-weight: bold; - font-size: 3.5em; /* 42px */ + font-size: 3em; /* 42px */ + } h2 { font-family: Helvetica; font-weight: bold; - font-size: 3em; /* 24px */ - line-height: 1.25em; /* 30px */ + font-size: 1.8em; /* 24px */ + line-height: 1.9em; /* 30px */ letter-spacing: .025em; - text-transform: none; + text-transform: uppercase; + } h3 { font-family: Helvetica; font-weight: bold; - font-size: 3em; /* 24px */ - line-height: 1.25em; /* 30px */ + font-size: 2em; /* 24px */ + line-height: 1em; /* 30px */ letter-spacing: -.025em; text-decoration: none; } @@ -170,7 +205,7 @@ h3 { h6 { font-family: Helvetica; font-weight: bold; - font-size: 2em; /* 24px */ + font-size: 1.4em; /* 24px */ line-height: 1.25em; /* 30px */ letter-spacing: -.025em; text-decoration: none; @@ -180,14 +215,21 @@ h6 { Description: Place grid and visual layout styling here. (e.g. containers, rows, columns) ===================================== */ + +.header p { + color: #999; +} + + .section1 { text-align: center; - padding: 5em; + padding: 3.4em; background: #ddd; } .section1 h2 { - font-size: 7em; + font-size: 4.5em; + text-transform: none; } .section2 { @@ -198,45 +240,93 @@ Description: Place grid and visual layout styling here. .section2 .col-4 { float: left; width: 30%; + margin-right: 5%; } +.section2 .col-4:last-of-type { + margin-right: 0; + +} + +.section2 .col-4 img { + width: 100%; + height: auto; +} + +h4.byline { + font-size: .625em; + line-height: .625em; + color: #999; + margin: .75em 0; + font-weight: normal; +} + + .section3 { text-align: center; - padding: 1.5em; + padding: 1em; +} + +.section3 p { + padding: 3em; + border-bottom: 2px solid #d5d5d5; } -.section3 .col-6 { +.section4 .col-6 { text-align: left; float: left; width: 47%; - padding: 4em; + padding: 2em 4em 0 4em; + } -.section3 ul { +.section4 ul { list-style: none; + margin: 0 0 6em 0; } -.section3 li .fa { +.section4 li .fa { float: left; + font-size: 3.5em; + clear:both; + margin-bottom: 1em; + margin-right: .5em; } .footer { - height: 600px; + height: 550px; background: #ddd; } .footer .logo { - margin-top: 2%; + margin-top: 10%; float: left; - width: 35%; + width: 30%; } .footer ul { - margin-top: 2%; + margin-top: 10%; + text-align: right; float: right; - width: 40%; + width: 60%; +} + + +.footer ul li{ + list-style: none; + display: inline-block; + padding-top: .5em; + padding-left: 1em; } +.footer ul li a{ +font-weight: bold; +} + +.footer p { + font-size: 0.625em; + color: #999; +} /* SECTIONS Description: Style major site sections here. diff --git a/index.html b/index.html index a73c3fb..fe759ce 100644 --- a/index.html +++ b/index.html @@ -37,7 +37,7 @@

    Lorem ispum

    Consecteur

    - Dolor sit amet +

    Dolor sit amet

    camera

    Duis eleifend, nisi vel venenatis blandit, nunc elit pretium ipsum, id nisi lorem et quam. Read more » @@ -46,7 +46,7 @@

    Consecteur

    Consecteur

    - Dolor sit amet +

    Dolor sit amet

    camera

    Duis eleifend, nisi vel venenatis blandit, nunc elit pretium ipsum, id nisi lorem et quam. Read more » @@ -55,7 +55,7 @@

    Consecteur

    Consecteur

    - Dolor sit amet +

    Dolor sit amet

    camera

    Duis eleifend, nisi vel venenatis blandit, nunc elit pretium ipsum, id nisi lorem et quam. Read more » @@ -69,8 +69,10 @@

    In vel risus vel dui porttitor

    Duis eleifend, nisi vel venenatis blandit, nunc elit pretium ipsum, id tempus nisi lorem et quam. Duis eleifend, nisi vel venenatis blandit, nunc elit pretium ipsum, id tempus nisi lorem nunc elitet quam.

    -
    -
    +
    + +
    +
    • @@ -89,8 +91,8 @@
      Sub heading
    -
    -
    +
    +
    • @@ -111,11 +113,12 @@
      Sub heading
    -
    +