From b6dd7b08211af347289474b18aaebf0a8bb78dfc Mon Sep 17 00:00:00 2001 From: Daniel Rau Date: Thu, 2 Sep 2021 13:58:41 -0700 Subject: [PATCH 1/6] Added basic header, title and gallery HTML and styling --- index.html | 40 ++++++++++++- style/index.css | 150 +++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 188 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index d01f779ff..23c526269 100644 --- a/index.html +++ b/index.html @@ -4,8 +4,46 @@ Document + - +
+

Daniel Rau

+ +
+
+
+

Daniel Rau

+

My Projects

+
+
+
+ + + +
+
+

A wonderful waterfall!

+

Another thing!

+

Yet another thing!

+
+
+ + + +
+
+

blah

+

blah

+

blah

+
+ \ No newline at end of file diff --git a/style/index.css b/style/index.css index 440e53514..1d1c16f25 100644 --- a/style/index.css +++ b/style/index.css @@ -1 +1,149 @@ -/* Add CSS styling here */ \ No newline at end of file +/* Add CSS styling here */ +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; +} + +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^CSS RESET^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */ + +/* GENERAL STYLING */ +html{ + font-size:62.5%; + +} + +body{ + font-size: 2rem; + line-height: 1.5; + background-color: #283618; + +} + +a{ + text-decoration: none; + border: 3px solid black; +} + + +/* HEADER STYLING */ + +header{ + padding: 1%; + border: 3px solid purple; + display: flex; + justify-content: space-between; +} + +body { + font-size: 1.6rem; +} + + +nav { + width: 15%; + display: flex; +} + +a{ + background-color: green; + padding: 1%; +} + +.headername{ + font-size: 2.2rem; + background-color: antiquewhite; +} + +.home{ + background-color: black; +} + +/* MAIN TITLE STYLING */ + +.maintitle{ + display:flex; + justify-content: center; + margin: 5% 10%; + padding: 10%; + background-image: url(https://images.unsplash.com/photo-1629829386095-535f462b59e3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80); + background-repeat: no-repeat; + background-size: cover; +} + +.bigname { + color: snow; +} + +h1{ + font-size: 4.5rem; + border: 3px solid black; +} + +h3{ + display: flex; + border: 3px solid black; + justify-content: center; + background-color: black; +} + + +/* PROJECT GALLERY STYLING */ +.projectfolio1{ + display: flex; + justify-content:space-evenly; +} + +.foliotext1{ + display: flex; + justify-content:space-evenly; +} + +.projectfolio2{ + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; +} + +.foliotext2{ + display: flex; + justify-content: space-evenly; +} \ No newline at end of file From 8cd9bf69ff58b0385aca21372e4500d30793e95d Mon Sep 17 00:00:00 2001 From: Daniel Rau Date: Thu, 2 Sep 2021 16:44:22 -0700 Subject: [PATCH 2/6] project gallery functional and basic styling --- index.html | 46 +++++++++++++++++++----------- style/index.css | 75 +++++++++++++++++++++++++++++++++++++++++-------- 2 files changed, 93 insertions(+), 28 deletions(-) diff --git a/index.html b/index.html index 23c526269..7d12ccb8f 100644 --- a/index.html +++ b/index.html @@ -22,28 +22,40 @@

Daniel Rau

My Projects

-
- - - +
+
+
+
+
+
+
-
-

A wonderful waterfall!

-

Another thing!

-

Yet another thing!

+
+

generictext

+

generictext

+

generictext

-
- - - +
+
+
+
+
+
+
-
-

blah

-

blah

-

blah

+
+

generictext

+

generictext

+

generictext

+
+ +
+
- +
+

Contact Me

+
\ No newline at end of file diff --git a/style/index.css b/style/index.css index 1d1c16f25..407893e5f 100644 --- a/style/index.css +++ b/style/index.css @@ -61,8 +61,13 @@ body{ a{ text-decoration: none; border: 3px solid black; + font-size: 2rem; } +img{ + border: 5px solid black; + +} /* HEADER STYLING */ @@ -79,13 +84,13 @@ body { nav { - width: 15%; + width: 25%; display: flex; } a{ background-color: green; - padding: 1%; + padding: 1% 5%; } .headername{ @@ -127,23 +132,71 @@ h3{ /* PROJECT GALLERY STYLING */ -.projectfolio1{ + +.projectgallery1{ + display: flex; + justify-content: space-evenly +} + +.projectgallery1 div{ + width: 30%; + height: 50vh; + border: 5px solid black; +} + +.projectgallery1text{ display: flex; - justify-content:space-evenly; + justify-content: space-around; +} + +.first{ + background-image: url(https://images.unsplash.com/photo-1511497584788-876760111969?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1489&q=80); + background-repeat: no-repeat; +} + +.second{ + background-image: url(https://images.unsplash.com/photo-1476231682828-37e571bc172f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80); } -.foliotext1{ +.third{ + background-image: url(https://images.unsplash.com/photo-1534269222346-5a896154c41d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80); +} +.projectgallery2{ display: flex; - justify-content:space-evenly; + justify-content: space-evenly +} + +.projectgallery2 div{ + width: 30%; + height: 50vh; + border: 5px solid black; } -.projectfolio2{ +.projectgallery2text{ display: flex; - flex-wrap: wrap; - justify-content: space-evenly; + justify-content: space-around +} + +.fourth{ + background-image: url(https://images.unsplash.com/photo-1510248703225-7f7838dfd579?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzF8fGZvcmVzdHxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60) +} + +.fifth{ + background-image: url(https://images.unsplash.com/photo-1599220144359-d4b723bd476d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80) +} + +.sixth{ + background-image: url(https://images.unsplash.com/photo-1486162928267-e6274cb3106f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80) } -.foliotext2{ +/* FOOTER STYLING */ + +footer{ + background-color: tan; + padding: 3%; +} + +footer div{ display: flex; - justify-content: space-evenly; + justify-content: center; } \ No newline at end of file From 9c7de1fd820d60e34666494296a50b4046494c7f Mon Sep 17 00:00:00 2001 From: Daniel Rau Date: Thu, 2 Sep 2021 18:37:05 -0700 Subject: [PATCH 3/6] Basic markup and styling complete --- index.html | 33 ++++++++++++++-------- style/index.css | 73 +++++++++++++++++++++++++++++++++---------------- 2 files changed, 71 insertions(+), 35 deletions(-) diff --git a/index.html b/index.html index 7d12ccb8f..a6fcfcfba 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,9 @@ + + + Document @@ -31,9 +34,15 @@

My Projects

-

generictext

-

generictext

-

generictext

+
+

Generic text about trees!

+
+
+

Generic text about trees!

+
+
+

Generic text about trees!

+
@@ -44,17 +53,19 @@

My Projects

-

generictext

-

generictext

-

generictext

-
-
- +
+

Generic text about trees!

+
+
+

Generic text about trees!

+
+
+

Generic text about trees!

+
- diff --git a/style/index.css b/style/index.css index 407893e5f..9797838d8 100644 --- a/style/index.css +++ b/style/index.css @@ -48,7 +48,8 @@ table { /* GENERAL STYLING */ html{ font-size:62.5%; - + font-family: 'Oxygen', sans-serif; + color: #fefae0; } body{ @@ -60,8 +61,8 @@ body{ a{ text-decoration: none; - border: 3px solid black; font-size: 2rem; + color: #fefae0; } img{ @@ -69,11 +70,14 @@ img{ } +p{ + font-size: 2rem; +} + /* HEADER STYLING */ header{ padding: 1%; - border: 3px solid purple; display: flex; justify-content: space-between; } @@ -88,14 +92,15 @@ nav { display: flex; } -a{ - background-color: green; +nav a{ + background-color: #bc6c25; + color: #fefae0; padding: 1% 5%; + border: 3px solid black; } .headername{ font-size: 2.2rem; - background-color: antiquewhite; } .home{ @@ -120,7 +125,7 @@ a{ h1{ font-size: 4.5rem; - border: 3px solid black; + } h3{ @@ -149,18 +154,7 @@ h3{ justify-content: space-around; } -.first{ - background-image: url(https://images.unsplash.com/photo-1511497584788-876760111969?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1489&q=80); - background-repeat: no-repeat; -} - -.second{ - background-image: url(https://images.unsplash.com/photo-1476231682828-37e571bc172f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80); -} -.third{ - background-image: url(https://images.unsplash.com/photo-1534269222346-5a896154c41d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80); -} .projectgallery2{ display: flex; justify-content: space-evenly @@ -174,29 +168,60 @@ h3{ .projectgallery2text{ display: flex; - justify-content: space-around + justify-content: space-around; +} + + +/* GALLERY IMAGE STYLING */ + +.first{ + background-image: url(https://images.unsplash.com/photo-1511497584788-876760111969?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1489&q=80); + background-repeat: no-repeat; + background-position: center; +} + +.second{ + background-image: url(https://images.unsplash.com/photo-1476231682828-37e571bc172f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80); + background-repeat: no-repeat; + background-position: center; +} + +.third{ + background-image: url(https://images.unsplash.com/photo-1534269222346-5a896154c41d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80); + background-repeat: no-repeat; + background-position: center; } .fourth{ - background-image: url(https://images.unsplash.com/photo-1510248703225-7f7838dfd579?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzF8fGZvcmVzdHxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60) + background-image: url(https://images.unsplash.com/photo-1621848296279-7751546e9acc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1068&q=80); + background-repeat:no-repeat; + background-position: fixed; } .fifth{ - background-image: url(https://images.unsplash.com/photo-1599220144359-d4b723bd476d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80) + background-image: url(https://images.unsplash.com/photo-1599220144359-d4b723bd476d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80); + background-repeat: no-repeat; + background-position: center; } .sixth{ - background-image: url(https://images.unsplash.com/photo-1486162928267-e6274cb3106f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80) + background-image: url(https://images.unsplash.com/photo-1486162928267-e6274cb3106f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80); + background-repeat: no-repeat; + background-position: center; } /* FOOTER STYLING */ footer{ - background-color: tan; - padding: 3%; + background-color: #bc6c25; + padding: 2%; } footer div{ display: flex; justify-content: center; + background-color: #606c38; + margin-left:45%; + margin-right:45%; + padding: 1%; } \ No newline at end of file From fed2bd401af563f779f8b9ce344cfc2247e575c4 Mon Sep 17 00:00:00 2001 From: Daniel Rau Date: Mon, 6 Sep 2021 14:58:48 -0700 Subject: [PATCH 4/6] Revised the project gallery markup for ease of styling and began looking at responsive design changes for 800px devices. --- index.html | 58 ++++++++++++------------ style/index.css | 117 ++++++++++++++++++++++-------------------------- 2 files changed, 83 insertions(+), 92 deletions(-) diff --git a/index.html b/index.html index a6fcfcfba..e4c0219bd 100644 --- a/index.html +++ b/index.html @@ -13,10 +13,12 @@

Daniel Rau

@@ -25,44 +27,44 @@

Daniel Rau

My Projects

-
-
+
+
+ +

Generic text about trees!

+
+
+ +

Generic text about trees!

-
-
-
-
-
-
-
-

Generic text about trees!

-
-
+
+

Generic text about trees!

-
+
+ +

Generic text about trees!

+
+
+

Generic text about trees!

+
+ +

Generic text about trees!

+
-
-
-
-
-
-
-
-
-
+
-

Generic text about trees!

-
-
-

Generic text about trees!

+ +
+
+
-

Generic text about trees!

+
-
Contact Me diff --git a/style/index.css b/style/index.css index 9797838d8..99e873a78 100644 --- a/style/index.css +++ b/style/index.css @@ -138,90 +138,79 @@ h3{ /* PROJECT GALLERY STYLING */ -.projectgallery1{ +.projectgallery{ + border: 1px solid grey; display: flex; - justify-content: space-evenly + flex-wrap: wrap; + width: 100%; } -.projectgallery1 div{ - width: 30%; - height: 50vh; - border: 5px solid black; +.gallerycontainer{ + width: 33%; + border: 1px solid grey; + text-align: center; } -.projectgallery1text{ - display: flex; - justify-content: space-around; +img{ + width: 80%; + height: 40vh; } +/* FOOTER STYLING */ -.projectgallery2{ - display: flex; - justify-content: space-evenly -} - -.projectgallery2 div{ - width: 30%; - height: 50vh; - border: 5px solid black; +footer{ + background-color: #bc6c25; + padding: 2%; } -.projectgallery2text{ +footer div{ display: flex; - justify-content: space-around; + justify-content: center; + background-color: #606c38; + margin-left:45%; + margin-right:45%; + padding: 1%; } +/* MEDIA QUERIES */ -/* GALLERY IMAGE STYLING */ +@media (max-width: 800px){ -.first{ - background-image: url(https://images.unsplash.com/photo-1511497584788-876760111969?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1489&q=80); - background-repeat: no-repeat; - background-position: center; -} + /* 800 PX Header STYLING */ -.second{ - background-image: url(https://images.unsplash.com/photo-1476231682828-37e571bc172f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80); - background-repeat: no-repeat; - background-position: center; -} + header{ + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + /* border: 1px solid grey; */ + } + .headername{ + font-size: 4rem; + } + nav{ + width: 20%; + flex-direction: column; + /* border: 1px solid grey; */ + } -.third{ - background-image: url(https://images.unsplash.com/photo-1534269222346-5a896154c41d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80); - background-repeat: no-repeat; - background-position: center; -} + nav a{ + padding: 2% 0%; + } -.fourth{ - background-image: url(https://images.unsplash.com/photo-1621848296279-7751546e9acc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1068&q=80); - background-repeat:no-repeat; - background-position: fixed; -} - -.fifth{ - background-image: url(https://images.unsplash.com/photo-1599220144359-d4b723bd476d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80); - background-repeat: no-repeat; - background-position: center; -} + .maintitle{ + border: 1px solid grey; + width: 50%; + margin-left: 15%; + margin-top: 1%; + } -.sixth{ - background-image: url(https://images.unsplash.com/photo-1486162928267-e6274cb3106f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80); - background-repeat: no-repeat; - background-position: center; -} + footer div{ + width: 20%; + border: 1px solid grey; + } -/* FOOTER STYLING */ + /* 800 PX MAIN TITLE STYLING */ -footer{ - background-color: #bc6c25; - padding: 2%; -} -footer div{ - display: flex; - justify-content: center; - background-color: #606c38; - margin-left:45%; - margin-right:45%; - padding: 1%; } \ No newline at end of file From e7b0cafb1ef8576714f5296697a7153a2c590df1 Mon Sep 17 00:00:00 2001 From: Daniel Rau Date: Mon, 6 Sep 2021 15:30:58 -0700 Subject: [PATCH 5/6] Revised markup complete. Page and styling are now responsive at 800px. --- index.html | 28 ++++++++-------------------- style/index.css | 41 +++++++++++++++++++++++++++++++++++------ 2 files changed, 43 insertions(+), 26 deletions(-) diff --git a/index.html b/index.html index e4c0219bd..d2e9b9db5 100644 --- a/index.html +++ b/index.html @@ -29,12 +29,12 @@

My Projects

- -

Generic text about trees!

+ +

Generic text about trees!

- -

Generic text about trees!

+ +

Generic text about trees!

My Projects

Generic text about trees!

- +

Generic text about trees!

- +

Generic text about trees!

-
- +
+

Generic text about trees!

-
- -
- -
-
- -
-
- -