From 3667da355501ee85d0492f7bb093cc75778b045b Mon Sep 17 00:00:00 2001 From: Elijah Kim Date: Mon, 13 Jul 2020 15:27:18 -0400 Subject: [PATCH 1/4] Added basic semantic HTML --- index.html | 47 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/index.html b/index.html index d01f779ff..fc77c62b0 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,53 @@ Document +
+

Elijah Kim

+ + + +
+ +
+
+ +

Title

+
+ +
+ +

Title

+
+ +
+ +

Title

+
+ +
+ +

Title

+
+ +
+ +

Title

+
+ +
+ +

Title

+
+
+ + \ No newline at end of file From 227ad18027ac627f4caef1efa5db643ded8d76fa Mon Sep 17 00:00:00 2001 From: Elijah Kim Date: Mon, 13 Jul 2020 17:23:34 -0400 Subject: [PATCH 2/4] Finishing most of the HTML and going through formatting the projects section --- index.html | 26 ++++++----- style/index.css | 120 +++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 133 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index fc77c62b0..daab91c2f 100644 --- a/index.html +++ b/index.html @@ -3,49 +3,51 @@ - Document + Sample Portfolio + +

Elijah Kim

- + Canyons overcast
- + Beach waves

Title

- + Mountain peaks with little snow

Title

- + The coast

Title

- + A white flower

Title

- + night sky with trees and starts around

Title

- + bird flying near waterfall

Title

diff --git a/style/index.css b/style/index.css index 440e53514..0d27dedfb 100644 --- a/style/index.css +++ b/style/index.css @@ -1 +1,119 @@ -/* Add CSS styling here */ \ No newline at end of file +/* Add CSS styling here */ + +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + +* { + box-sizing: border-box; +} + +html { + font-size: 62.5%; +} + +header { + display: flex; + flex-direction: row; + /*border: solid 1px grey; */ + justify-content: space-between; + flex-wrap: wrap; + margin-bottom: 5%; +} + +header h1 { + font-size: 3rem; + width: 40%; +} + +header nav a { + text-decoration: none; + font-size: 2rem; + + border: 1px solid black; + padding: 2%; + margin-bottom: 5%; +} + +header nav { + width: 45%; + display: flex; + flex-direction: row; + justify-content: space-between; + margin-right: 2%; + + vertical-align: top; +} + +header img { + width: 60%; + margin-left: 20%; +} + +.projects { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + width: 80% +} + +.projects img { + width: 50%; + height: 50%; + border: 5px solid grey; +} + +.first, .second, .third, .fourth, .fifth, .sixth { + width: 30%; + +} + + + + From e2313361611e3146fb55ca4ee570c034080203c3 Mon Sep 17 00:00:00 2001 From: Elijah Kim Date: Mon, 13 Jul 2020 17:40:00 -0400 Subject: [PATCH 3/4] Finished HTML, almost done styling with CSS; starting footer --- index.html | 14 +++++++------- style/index.css | 28 +++++++++++++++++++++++++--- 2 files changed, 32 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index daab91c2f..5544e703e 100644 --- a/index.html +++ b/index.html @@ -23,37 +23,37 @@

Elijah Kim

Beach waves -

Title

+

Project 1

Mountain peaks with little snow -

Title

+

Project 2

The coast -

Title

+

Project 3

A white flower -

Title

+

Project 4

night sky with trees and starts around -

Title

+

Project 5

bird flying near waterfall -

Title

+

Project 6

diff --git a/style/index.css b/style/index.css index 0d27dedfb..f557a0e92 100644 --- a/style/index.css +++ b/style/index.css @@ -99,21 +99,43 @@ header img { display: flex; flex-direction: row; flex-wrap: wrap; - justify-content: center; + justify-content: space-evenly; + width: 80% + margin: 0 auto; + text-align: center; + + font-size: 2rem; } .projects img { - width: 50%; - height: 50%; + width: 80%; + height: 80%; border: 5px solid grey; } .first, .second, .third, .fourth, .fifth, .sixth { width: 30%; +} + +footer { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + + width: 100%; + height: 10rem; + border: 1px solid grey; + margin-bottom: 5%; + text-decoration: none; + font-size: 2rem; + vertical-align: middle; + } + From dd7b8e235c5ab4c2aa5a7da298f2e2e3ddf7060b Mon Sep 17 00:00:00 2001 From: Elijah Kim Date: Mon, 13 Jul 2020 17:50:27 -0400 Subject: [PATCH 4/4] Finished Product --- index.html | 2 +- style/index.css | 17 ++++++++++++----- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 5544e703e..39ebae870 100644 --- a/index.html +++ b/index.html @@ -53,7 +53,7 @@

Project 6

diff --git a/style/index.css b/style/index.css index f557a0e92..8761ca11e 100644 --- a/style/index.css +++ b/style/index.css @@ -73,7 +73,7 @@ header h1 { header nav a { text-decoration: none; - font-size: 2rem; + font-size: 1.6rem; border: 1px solid black; padding: 2%; @@ -111,7 +111,7 @@ header img { .projects img { width: 80%; height: 80%; - border: 5px solid grey; + /*border: 5px solid grey; */ } .first, .second, .third, .fourth, .fifth, .sixth { @@ -126,13 +126,20 @@ footer { width: 100%; height: 10rem; - border: 1px solid grey; + /*border: 1px solid white; */ margin-bottom: 5%; - text-decoration: none; + + background-color: salmon; font-size: 2rem; - vertical-align: middle; +} +footer button { + margin: 3% 0; + padding: 2%; + + text-decoration: none; + color: black; }