From ec40e6806a7f3ca8aad804c31b3555fbb46785ac Mon Sep 17 00:00:00 2001 From: Scott Allen Date: Thu, 3 Sep 2020 14:47:24 -0600 Subject: [PATCH 1/5] A large portion of the HTML is done --- index.html | 77 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 76 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index d01f779ff..87ca56021 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,86 @@ + Document - +
+
+

Scott Allen

+
+ +
+ +
+
+ main image +
+
+

Scott Allen

+ +

I recently have begun building webpages

+
+
+ +
+
+ stock image +
+ Text +
+
+
+ stock image +
+ Text +
+
+
+ stock image +
+ Text +
+
+
+ stock image +
+ Text +
+
+
+ stock image +
+ Text +
+
+
+ stock image +
+ Text +
+
+
+ stock image +
+ Text +
+
+
+ stock image +
+ Text +
+
+
+ + \ No newline at end of file From cfa669ffd51c9097e0898a00f8be2f279af8cdd9 Mon Sep 17 00:00:00 2001 From: Scott Allen Date: Thu, 3 Sep 2020 14:50:14 -0600 Subject: [PATCH 2/5] the HTML is finished --- index.html | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 87ca56021..966af7545 100644 --- a/index.html +++ b/index.html @@ -25,7 +25,7 @@

Scott Allen

Scott Allen

- +

I recently have begun building webpages

@@ -81,6 +81,13 @@

Scott Allen

+
+
+

Interested?

+
+ +
+ \ No newline at end of file From 9bd0ccbf7a879b37203e48dd23e8c1898826e2a8 Mon Sep 17 00:00:00 2001 From: Scott Allen Date: Thu, 3 Sep 2020 17:04:06 -0600 Subject: [PATCH 3/5] finished a lot of the CSS --- index.html | 5 +- style/index.css | 134 +++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 136 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 966af7545..3a2ac540a 100644 --- a/index.html +++ b/index.html @@ -26,11 +26,11 @@

Scott Allen

Scott Allen

-

I recently have begun building webpages

+

I have a passion for learning new things and have recently begun learning how to code. I am currently a student at Lambda School where I am learning how to be a web developer. I love the creativity of being a developer and the ability to make something from the ground up. I build projects because it's something that I love to do.

-
+
stock image
@@ -79,6 +79,7 @@

Scott Allen

Text
+
diff --git a/style/index.css b/style/index.css index 440e53514..0cfdb9c02 100644 --- a/style/index.css +++ b/style/index.css @@ -1 +1,133 @@ -/* Add CSS styling here */ \ No newline at end of file +/* Add CSS styling here */ +@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=PT+Serif&display=swap'); + +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; +} + +*{ + box-sizing:border-box; + border:1px solid grey; + max-width:100%; +} + +/*General Styles*/ +html{ + font-size:62.5%; +} + +body{ + font-size:1.6rem; + line-height:1.5; + font-family: 'PT Serif', serif; +} + +h1{ + font-family: 'Bebas Neue', cursive; + font-size:6rem; + margin-left:1%; +} + +h2{ + font-family: 'Bebas Neue', cursive; + font-size:4rem; +} + + +section{ + padding:2% 0; +} + +/*Styles for the header*/ +header{ + background-color:gainsboro; +} + +nav{ + display:flex; + margin-left:2.5%; +} + +nav a{ + display:inline-block; + text-decoration:none; + width:7.5%; + background-color:white; + border:2px blue; + text-align:center; + color:black; + margin-bottom:2%; + padding:.3% 0; +} + +nav a:hover{ + color:white; + background-color:black; +} + + +/*About section styles*/ +#about{ + display:flex; +} + +.main-image{ + margin:0 1%; + width:60%; +} + +.main-image img{ + width:100%; +} + +.about-text{ + display:flex; + justify-content:flex-end; + flex-direction:column; + width:40%; +} + +.about-text p{ + padding:3% 0; +} + +.button-projects{ + width:25%; + padding:1% 0; + font-size:1.6rem; +} + +/*Images section styling*/ + +#projects{ + display:flex; + flex-wrap:wrap; +} + +#projects div{ + width:25%; + margin-bottom:4%; +} + +#projects div img{ + padding:0 5%; + width:75%; +} + From f054e39f9b71f6b2d502133ade45f4a42b5527c4 Mon Sep 17 00:00:00 2001 From: Scott Allen Date: Thu, 3 Sep 2020 17:28:49 -0600 Subject: [PATCH 4/5] I finished the CSS --- index.html | 40 ++++++++++++++++++++-------------------- style/index.css | 26 ++++++++++++++++++++++++++ 2 files changed, 46 insertions(+), 20 deletions(-) diff --git a/index.html b/index.html index 3a2ac540a..da5dff849 100644 --- a/index.html +++ b/index.html @@ -12,10 +12,10 @@

Scott Allen

@@ -31,52 +31,52 @@

Scott Allen

-
+
stock image
- Text +

Text

-
+
stock image
- Text +

Text

-
+
stock image
- Text +

Text

-
+
stock image
- Text +

Text

-
+
stock image
- Text +

Text

-
+
stock image
- Text +

Text

-
+
stock image
- Text +

Text

-
+
stock image
- Text +

Text

diff --git a/style/index.css b/style/index.css index 0cfdb9c02..15d7d1027 100644 --- a/style/index.css +++ b/style/index.css @@ -131,3 +131,29 @@ nav a:hover{ width:75%; } +.image-text{ + display:flex; + flex-direction:column; + align-items:center; +} + +.image-text div{ + padding:2% 0 0 7.5%; +} + +/*footer styling*/ + +footer{ + background-color:gainsboro; + padding:5%; + text-align:center; +} + +footer div{ + text-align:center; + font-size:1.8rem; +} + +footer button{ + font-size:1.6rem; +} From 5d6bedecefb7fcebb0596c31d6e3d532555b7f84 Mon Sep 17 00:00:00 2001 From: Scott Allen Date: Tue, 8 Sep 2020 08:49:19 -0600 Subject: [PATCH 5/5] finished making my portfolio responsive --- style/index.css | 57 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 57 insertions(+) diff --git a/style/index.css b/style/index.css index 15d7d1027..824c46780 100644 --- a/style/index.css +++ b/style/index.css @@ -157,3 +157,60 @@ footer div{ footer button{ font-size:1.6rem; } + + +/*Styling for 800 px*/ +@media (max-width:800px){ + nav a{ + width:15%; + } + + .button-projects{ + width:50%; + } + + .about-text{ + margin-right:1%; + } +} + +/*Styling for 500 px*/ +@media (max-width:500px){ + header{ + background-color:white; + } + + h1{ + text-align:center; + } + + nav{ + flex-direction:column; + align-items:center; + padding:.5%; + border:1px black; + } + + #about{ + flex-wrap:wrap; + justify-content:center; + } + + .main-image{ + width:85%; + } + + .button-projects{ + width:50%; + background-color:white; + } + + .about-text{ + width:70%; + align-items:center; + } + + #projects div{ + width:50%; + } +}