Skip to content

Pipes - Bennett - Static Site #46

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
bennettrahn wants to merge 11 commits into
base: master
Choose a base branch
from
Open

Pipes - Bennett - Static Site #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
a635f91
copy set up stuff from meowspace, reformat to keep what I want, add w…
bennettrahn Sep 15, 2017
3b9803a
finish basic layout
bennettrahn Sep 15, 2017
7250db6
add my own photos rather than stock images.
bennettrahn Sep 16, 2017
0f24892
make files for next pages, start framework html for about
bennettrahn Sep 16, 2017
860364f
add some style to about
bennettrahn Sep 16, 2017
9e3b540
add contact page and content for code-journal
bennettrahn Sep 17, 2017
07666bc
try to get hover effects on photos - not working, giving up.
bennettrahn Sep 17, 2017
1a5cb92
fix the mess I made with the portfolio section
bennettrahn Sep 17, 2017
7a3de41
clean up some css stuff and git some basic nice layout for the sub pages
bennettrahn Sep 19, 2017
574558d
fix code-journal to look not terrible
bennettrahn Sep 19, 2017
33489fb
finish things finally even though it doesn't look good.
bennettrahn Sep 19, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 51 additions & 0 deletions pages/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>About</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css" integrity="sha256-sxzrkOPuwljiVGWbxViPJ14ZewXLJHFJDn0bv+5hsDY=" crossorigin="anonymous" />
<link href="../styles/main.css" rel="stylesheet">
<link href="../styles/about.css" rel="stylesheet">
</head>
<body>
<header class="clearfix">
<h2><a href="index.html"> Bennett Rahn </a></h2>

<nav>
<ul>
<li><a href="index.html"> home </a></li>
<li><a href="code-journal.html"> blog </a> </li>
<li><a href="about.html"> about </a></li>
<li><a href="contact.html"> contact </a></li>
</ul>
</nav>
</header>
<main class="clearfix">
<h1>About Me</h1>
<div class = 'content'>
<img alt="profile-w-drawing" src="../website_photos/profile_w_drawing.jpg"/>
<p>
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.
</p>
</div>
</main>
<footer class = "clearfix">
<h4> &copy; Bennett Rahn, 2017 </h4>
<nav>
<ul>
<li><a href="#li"> LinkedIn </a></li>
<li><a href="#ig"> Instagram </a> </li>
<li><a href="#tw"> Twitter </a> </li>
</ul>
</nav>
<nav>
<ul>
<li><a href="index.html"> home </a></li>
<li><a href="code-journal.html"> blog </a> </li>
<li><a href="about.html"> about </a></li>
<li><a href="contact.html"> contact </a></li>
</ul>
</nav>
</footer>
</body>
</html>
82 changes: 82 additions & 0 deletions pages/code-journal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Code Journal</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css" integrity="sha256-sxzrkOPuwljiVGWbxViPJ14ZewXLJHFJDn0bv+5hsDY=" crossorigin="anonymous" />
<link href="../styles/main.css" rel="stylesheet">
<link href="../styles/code-journal.css" rel="stylesheet">
</head>
<body>
<header class="clearfix">
<h2><a href="index.html"> Bennett Rahn </a></h2>

<nav>
<ul>
<li><a href="index.html"> home </a></li>
<li><a href="code-journal.html"> blog </a> </li>
<li><a href="about.html"> about </a></li>
<li><a href="contact.html"> contact </a></li>
</ul>
</nav>
</header>

<main>
<h1>Code Journal</h1>
<div class='content'>
<article class = "post">
<h4> 1. </h4>
<h3><a href="#thing1"> Ruby is fun! </a></h3>
<p class="post_content">
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.
</p>
</article>


<article class = "post">
<h4> 2. </h4>
<h3><a href="#thing1"> CLI is hard and ugly... </a></h3>
<p class="post_content">
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.
</p>
</article>

<article class = "post">
<h4> 3. </h4>
<h3><a href="#thing1"> CSS is hard! </a></h3>
<p class="post_content">
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.
</p>
</article>

<article class = "post">
<h4> 4. </h4>
<h3><a href="#thing1"> Ada is pretty cool. </a></h3>
<p class="post_content">
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.
</p>
</article>

</div>
</main>

<footer class = "clearfix">
<h4> &copy; Bennett Rahn, 2017 </h4>
<nav>
<ul>
<li><a href="#li"> LinkedIn </a></li>
<li><a href="#ig"> Instagram </a> </li>
<li><a href="#tw"> Twitter </a> </li>
</ul>
</nav>
<nav>
<ul>
<li><a href="index.html"> home </a></li>
<li><a href="code-journal.html"> blog </a> </li>
<li><a href="about.html"> about </a></li>
<li><a href="contact.html"> contact </a></li>
</ul>
</nav>
</footer>
</body>
</html>
61 changes: 61 additions & 0 deletions pages/contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Contact</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css" integrity="sha256-sxzrkOPuwljiVGWbxViPJ14ZewXLJHFJDn0bv+5hsDY=" crossorigin="anonymous" />
<link href="../styles/main.css" rel="stylesheet">
<link href="../styles/contact.css" rel="stylesheet">
</head>
<body>
<header class="clearfix">
<h2><a href="index.html"> Bennett Rahn </a></h2>

<nav>
<ul>
<li><a href="index.html"> home </a></li>
<li><a href="code-journal.html"> blog </a> </li>
<li><a href="about.html"> about </a></li>
<li><a href="contact.html"> contact </a></li>
</ul>
</nav>
</header>
<main class="clearfix">
<h1>Get In Touch</h1>
<div class='content'>
<img alt="profile-w-drawing" src="../website_photos/lampost-into-mist.jpg"/>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>

<ul>
<li> <img src='https://cdn.worldvectorlogo.com/logos/gmail-icon.svg'/><a href="#email"> Email</a></li>
<li> <img src='https://cdn0.iconfinder.com/data/icons/social-flat-rounded-rects/512/linkedin-256.png'/><a href="#fb"> LinkedIn </a></li>
<li> <img src="https://instagram-brand.com/wp-content/uploads/2016/11/app-icon2.png"/> <a href="#ig"> Instagram </a> </li>
<li> <img src='http://icons.iconarchive.com/icons/limav/flat-gradient-social/256/Twitter-icon.png' /><a href="#tw"> Twitter </a> </li>
</ul>
</div>
</div>

</main>
<footer class = "clearfix">
<h4> &copy; Bennett Rahn, 2017 </h4>
<nav>
<ul>
<li><a href="#li"> LinkedIn </a></li>
<li><a href="#ig"> Instagram </a> </li>
<li><a href="#tw"> Twitter </a> </li>
</ul>
</nav>
<nav>
<ul>
<li><a href="index.html"> home </a></li>
<li><a href="code-journal.html"> blog </a> </li>
<li><a href="about.html"> about </a></li>
<li><a href="contact.html"> contact </a></li>
</ul>
</nav>
</footer>
</body>
</html>
112 changes: 112 additions & 0 deletions pages/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bennett Rahn</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css" integrity="sha256-sxzrkOPuwljiVGWbxViPJ14ZewXLJHFJDn0bv+5hsDY=" crossorigin="anonymous" />
<link href="../styles/main.css" rel="stylesheet">
</head>
<body>
<header class="clearfix">
<h2><a href="index.html"> Bennett Rahn </a></h2>

<nav>
<ul>
<li><a href="index.html"> home </a></li>
<li><a href="code-journal.html"> blog </a> </li>
<li><a href="about.html"> about </a></li>
<li><a href="contact.html"> contact </a></li>
</ul>
</nav>
</header>

<main>
<section id = "top_photo" class = "photo_back">

<h4> LIFESTYLE </h4>
<h2> Art and Adventure in the Pacific NorthWest </h2>
<h3> an exploration of my world, my backyard, and my imagination. </h3>
</section>

<section id = "who_are_i">
<img alt="Profile Photo" src="../website_photos/profile-pic.jpg"/>
<div>
<h2> Who Are I? </h2>
<p>
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.
</p>
</div>
</section>

<section id = "three_things">
<article class = "post">
<h4> No. 1 </h4>
<h3><a href="/code-journal.html"> Software Engineer </a></h3>
<p class="post_content">
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.
</p>
</article>


<article class = "post">
<h4> No. 2 </h4>
<h3><a href="#thing1"> Artist </a></h3>
<p class="post_content">
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.
</p>
</article>

<article class = "post">
<h4> No. 3 </h4>
<h3><a href="#thing1"> Teacher </a></h3>
<p class="post_content">
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.
</p>
</article>
</section>

<section id = "portfolio" class = "clearfix">
<h3> Things I Like To Do </h3>

<div id="pics-layout">
<img id = "left_photo" alt="Crescent Lake" src="../website_photos/hands-meet.jpg"/>

<div id = "middle_three_photos">
<img alt="Garrett Drawing" src="../website_photos/garrett.jpg"/>
<img alt="Lemon Cake" src="../website_photos/lemon-cake.jpg"/>
<img alt="Heather Lake" src="../website_photos/heather-lake.jpg"/>
</div>

<img id = "right_photo" alt="Lauterbrunnen Valley" src="../website_photos/lauterbrunnen.jpg"/>

</div>
</section>



<section id = "bottom_photo" class = "photo_back">
<h2> Big Quote about how important creativity is! </h2>
</section>
</main>
<footer class = "clearfix">
<h4> &copy; Bennett Rahn, 2017 </h4>
<nav>
<ul>
<li><a href="#li"> LinkedIn </a></li>
<li><a href="#ig"> Instagram </a>
</li>
<li><a href="#tw"> Twitter </a>
</li>
</ul>
</nav>
<nav>
<ul>
<li><a href="index.html"> home </a></li>
<li><a href="code-journal.html"> blog </a> </li>
<li><a href="about.html"> about </a></li>
<li><a href="contact.html"> contact </a></li>
</ul>
</nav>
</footer>
</body>
</html>
Empty file added pages/portfolio.html
View file
Open in desktop
Empty file.
1 change: 1 addition & 0 deletions styles/about.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@

9 changes: 9 additions & 0 deletions styles/code-journal.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
h1 {
width: 100%;
}

.content {
margin: ;
Copy link

@Hamled Hamled Oct 2, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this declaration do anything, since it doesn't have a value?

flex-wrap: wrap;
/*justify-content: flex-start;*/
}
15 changes: 15 additions & 0 deletions styles/contact.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@

main ul {
list-style: none;
}

main li {
padding: 1em;
display: flex;
align-items: center;
}

img {
width: 1em;
padding-right: 1em;
}
Loading