diff --git a/pages/about.html b/pages/about.html new file mode 100644 index 000000000..e214c32c3 --- /dev/null +++ b/pages/about.html @@ -0,0 +1,51 @@ + + + + + About + + + + + +
+

Bennett Rahn

+ + +
+
+

About Me

+
+ profile-w-drawing +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+
+
+ + + diff --git a/pages/code-journal.html b/pages/code-journal.html new file mode 100644 index 000000000..8d0e79382 --- /dev/null +++ b/pages/code-journal.html @@ -0,0 +1,82 @@ + + + + + Code Journal + + + + + +
+

Bennett Rahn

+ + +
+ +
+

Code Journal

+
+
+

1.

+

Ruby is fun!

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+
+ + +
+

2.

+

CLI is hard and ugly...

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+
+ +
+

3.

+

CSS is hard!

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+
+ +
+

4.

+

Ada is pretty cool.

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+
+ +
+
+ + + + diff --git a/pages/contact.html b/pages/contact.html new file mode 100644 index 000000000..ed3d3e888 --- /dev/null +++ b/pages/contact.html @@ -0,0 +1,61 @@ + + + + + Contact + + + + + +
+

Bennett Rahn

+ + +
+
+

Get In Touch

+
+ profile-w-drawing +
+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+ + +
+
+ +
+ + + diff --git a/pages/index.html b/pages/index.html new file mode 100644 index 000000000..041e5bf85 --- /dev/null +++ b/pages/index.html @@ -0,0 +1,112 @@ + + + + + Bennett Rahn + + + + +
+

Bennett Rahn

+ + +
+ +
+
+ +

LIFESTYLE

+

Art and Adventure in the Pacific NorthWest

+

an exploration of my world, my backyard, and my imagination.

+
+ +
+ Profile Photo +
+

Who Are I?

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+
+
+ +
+
+

No. 1

+

Software Engineer

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+
+ + +
+

No. 2

+

Artist

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+
+ +
+

No. 3

+

Teacher

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+
+
+ +
+

Things I Like To Do

+ +
+ Crescent Lake + +
+ Garrett Drawing + Lemon Cake + Heather Lake +
+ + Lauterbrunnen Valley + +
+
+ + + +
+

Big Quote about how important creativity is!

+
+
+ + + diff --git a/pages/portfolio.html b/pages/portfolio.html new file mode 100644 index 000000000..e69de29bb diff --git a/styles/about.css b/styles/about.css new file mode 100644 index 000000000..8b1378917 --- /dev/null +++ b/styles/about.css @@ -0,0 +1 @@ + diff --git a/styles/code-journal.css b/styles/code-journal.css new file mode 100644 index 000000000..76b8774af --- /dev/null +++ b/styles/code-journal.css @@ -0,0 +1,9 @@ +h1 { + width: 100%; +} + +.content { + margin: ; + flex-wrap: wrap; + /*justify-content: flex-start;*/ +} diff --git a/styles/contact.css b/styles/contact.css new file mode 100644 index 000000000..72930e398 --- /dev/null +++ b/styles/contact.css @@ -0,0 +1,15 @@ + +main ul { +list-style: none; +} + +main li { + padding: 1em; + display: flex; + align-items: center; +} + +img { + width: 1em; + padding-right: 1em; +} diff --git a/styles/main.css b/styles/main.css new file mode 100644 index 000000000..5ad24285d --- /dev/null +++ b/styles/main.css @@ -0,0 +1,337 @@ +@import url('https://fonts.googleapis.com/css?family=Lato'); +@import url('https://fonts.googleapis.com/css?family=Droid+Serif'); +@import url('https://fonts.googleapis.com/css?family=Open+Sans'); + +.clearfix:after { + visibility: hidden; + display: block; + font-size: 0; + content: " "; + clear: both; + height: 0; +} +.clearfix { display: inline-block; } +/* start commented backslash hack \*/ +* html .clearfix { height: 1%; } +.clearfix { display: block; } +/* close commented backslash hack */ + +/*************/ +/*GENERAL STYLE*/ +/*************/ +body { + /*font-family: Birdseye;*/ + + font-family: "Lato"; +} + +h1 { + text-align: center; + padding-top: 1em; + width: 50%; +} + +h2 { + font-family: "Lato"; + color: #626262 +} + +h3 { + font-family: "Droid Serif"; + color: #626262 +} + +h4 { + color: #818181; +font-family: 'Montserrat', sans-serif; +font-size: 12px; +font-weight: 700; +line-height: 1.15; +letter-spacing: 0.15em; +} + +p { + text-align: justify; + padding: .5em; + font-family: "Open Sans"; + font-weight: 300; + color: #818181; +} + + +nav li { + display: inline-block; + padding-left: 1em; + padding-right: 1em; +} + + +.content { + display: flex; + justify-content: space-around; + align-items: center; +} + +.content > img { + width: 45%; + padding: 2%; + +} + +.content p { + max-width: 350px; + text-align: left; +} + +a { + text-decoration: none; + color: black; +} + +a:visited { + color: black; +} + +a:hover { + text-decoration: underline; +} + +/*************/ +/*HEADER*/ +/*************/ +header nav { + float: right; + width: 50%; + text-align: right; +} + +header a { + text-decoration: none; + color: white; +} + +header a:visited { + color: white; +} +header { + position: fixed; + width: 100%; + z-index: 100; + height: 60px; + background-color: #403C4C; + top: 0; + color: white; + /*display: flex; + justify-content: space-around; + align-items: center;*/ +} +header h2 { + float: left; + margin: .7em 0; + /*line-height: 75px;*/ + width: 30%; + padding: 0 1em; + +} + +header ul { + margin: 1.3em 0; +} + +main { + margin-top: 60px; +} + +/*************/ +/*TITLE AND QUOTE BANNERS*/ +/*************/ + + +.photo_back { + height: 500px; + text-align: center; + /*position: relative;*/ + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + +} + +#top_photo { + /*position: absolute; + top: 0px; + left: 0px; + width: 100%; + height: auto; + background-color: Black; + z-index: 1; + opacity: .5;*/ + background-image: url('../website_photos/arms-up-rainier.jpg'); + background-size: cover; +} + +#top_photo h2 { + position: relative; + color: lightgrey; + font-size: 3em; + font-family: "Droid Serif"; + margin: 0; +} +#top_photo h4 { + margin-bottom: .3em; + color: #5e5e5e; +} +#top_photo h3 { + color: grey; +} + + + +#bottom_photo { + background-image: url('../website_photos/bridge-into-mist.jpg'); + background-size: cover; +} + +#bottom_photo h2 { + font-size: 3em; +} + +/*************/ +/*WHO ARE I*/ +/*************/ +#who_are_i { + display: flex; + justify-content: space-around; + align-items: center; + background-color: white; + opacity: 1.0; + z-index: 10; +} + +#who_are_i img, #who_are_i div { + width: 46%; + padding: 2%; +} + +#who_are_i h2{ + text-align: center; +} + +#who_are_i p { + margin: 0 auto; + padding: 0; +} + +/*************/ +/*THREE THINGS*/ +/*************/ +#three_things { + display: flex; + justify-content: space-around; + align-items: flex-start; + padding-top: 50px; +} + + +.post { + width: 30%; + /*margin: 1%;*/ + vertical-align: top; + /*text-align: center;*/ + /*display: flex; + flex-direction: column; + justify-content: space-around;*/ + /*background-color: #F4F4F4;*/ +} + +.post h4 { + margin: 0; +} + + +.post h3 { + border-bottom: 1px solid grey; + border-top-right-radius: 2rem; + border-top-left-radius: 2rem; + margin: 0; + padding: 5%; +} + +.post p { + margin: 1em auto; + height: 60%; +} + + +/*************/ +/*PORTFOLIO*/ +/*************/ +#portfolio { + text-align: center; + padding: 50px 0; +} + +#pics-layout { + display: flex; + align-items: center; + justify-content: center; +} + +#portfolio img { + margin: 1.5%; + width: 26%; +} + +#middle_three_photos { + width: 38%; +} + +#middle_three_photos img { + width: 46% +} + +#middle_three_photos img:last-child { + width: 95%; +} + +#middle_three_photos { + display: flex; + align-items: flex-start; + flex-wrap: wrap; + justify-content: flex-start; + +} + + + + + +/*************/ +/*FOOTER*/ +/*************/ +footer { + display: flex; + margin: 1em 0; + +} + + +footer nav:first-of-type { + float: left; +} + +footer nav:last-of-type { + float: right; +} + +footer ul { + margin: 0; + padding: 0; +} + +footer h4 { + float: left; + margin: 0; + padding-left: 1em; +} diff --git a/styles/portfolio.css b/styles/portfolio.css new file mode 100644 index 000000000..e69de29bb diff --git a/website_photos/arms-up-rainier.jpg b/website_photos/arms-up-rainier.jpg new file mode 100644 index 000000000..eba6c9fb6 Binary files /dev/null and b/website_photos/arms-up-rainier.jpg differ diff --git a/website_photos/bridge-into-mist.jpg b/website_photos/bridge-into-mist.jpg new file mode 100644 index 000000000..c8257eb12 Binary files /dev/null and b/website_photos/bridge-into-mist.jpg differ diff --git a/website_photos/garrett.jpg b/website_photos/garrett.jpg new file mode 100644 index 000000000..c75f801d3 Binary files /dev/null and b/website_photos/garrett.jpg differ diff --git a/website_photos/hands-meet.jpg b/website_photos/hands-meet.jpg new file mode 100644 index 000000000..7326e8a4d Binary files /dev/null and b/website_photos/hands-meet.jpg differ diff --git a/website_photos/heather-lake.jpg b/website_photos/heather-lake.jpg new file mode 100644 index 000000000..e543212a4 Binary files /dev/null and b/website_photos/heather-lake.jpg differ diff --git a/website_photos/lampost-into-mist.jpg b/website_photos/lampost-into-mist.jpg new file mode 100644 index 000000000..4712a17d6 Binary files /dev/null and b/website_photos/lampost-into-mist.jpg differ diff --git a/website_photos/lauterbrunnen.jpg b/website_photos/lauterbrunnen.jpg new file mode 100644 index 000000000..ae0e25f29 Binary files /dev/null and b/website_photos/lauterbrunnen.jpg differ diff --git a/website_photos/lemon-cake.jpg b/website_photos/lemon-cake.jpg new file mode 100644 index 000000000..1e1af4b06 Binary files /dev/null and b/website_photos/lemon-cake.jpg differ diff --git a/website_photos/profile-pic.jpg b/website_photos/profile-pic.jpg new file mode 100644 index 000000000..453cc1168 Binary files /dev/null and b/website_photos/profile-pic.jpg differ diff --git a/website_photos/profile_w_drawing.jpg b/website_photos/profile_w_drawing.jpg new file mode 100644 index 000000000..f5cd0d727 Binary files /dev/null and b/website_photos/profile_w_drawing.jpg differ diff --git a/website_photos/rainier-with-lake.jpg b/website_photos/rainier-with-lake.jpg new file mode 100644 index 000000000..e0e257f34 Binary files /dev/null and b/website_photos/rainier-with-lake.jpg differ diff --git a/website_photos/rainier.jpg b/website_photos/rainier.jpg new file mode 100644 index 000000000..9ca12a9b6 Binary files /dev/null and b/website_photos/rainier.jpg differ diff --git a/website_photos/zala-beach.jpg b/website_photos/zala-beach.jpg new file mode 100644 index 000000000..96915572e Binary files /dev/null and b/website_photos/zala-beach.jpg differ