Add photo and style elements to about me page

meglkts · Jun 30, 2015 · d9d7a3e · d9d7a3e
1 parent 0d50915
commit d9d7a3e
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 10 deletions.
diff --git a/about_me.html b/about_me.html
@@ -11,7 +11,18 @@
 	<header>meghan kline tuls</header>
 
 	<body>
-		<h1>About Me</h1>
+		<section id="post-heading">
+	  		<h1>About Me</h1>
+		</section>
+
+		<img id="about-me-photo" src="imgs/meg_dan.png">
+
+	  <ul id="blog-menu">
+	        <li id="about"><a href="https://meglkts.github.io/about_me">About Me</a></li>
+	        <li id="blog"><a href="https://meglkts.github.io/blog/index.html">Blog Spot</a></li>
+	        <li id="projects"><a href="#">My Projects</a></li>
+	        <!-- <li id="contact"><a href="https://meglkts.github.io/contact.html">Contact Me</li></a> -->
+	  </ul>
 		<section id="about-me">
 			<p>
 				I am a Michigan-raised girl, Chicago urban math teacher turned web devloper, and soon-to-be San Diegan.  I love traveling, experiencing culture, and having new life adventures, especially in the company of my husband and favorite person, Dan.  I am a Tigers and Red Wings fan.  At my small liberal arts college outside Chicago, I played volleyball and have since taken up running for fitness.  I feel lucky to have hit adulthood in the wake of craft coffee, food, and, of course, beer.
@@ -33,6 +44,8 @@ <h1>About Me</h1>
 			<a href="https://www.linkedin.com/in/meghanklinetuls"target="_blank"><img src="imgs/linkedin.png"/></a>
 			<a href="https://github.com/meglkts"target="_blank"><img src="imgs/github_alt.png"/></a>
 		</aside>
-		<footer class="favicons" id="contact-icons">
+		<footer>
 			Established 2015
 		</footer>
+</body>
+
diff --git a/stylesheets/default.css b/stylesheets/default.css
@@ -131,17 +131,25 @@ pre{
 
 /*ABOUT ME PAGE*/
 #about-me{
-	position: absolute;
+	/*position: absolute;*/
 	margin-top: 10%;
-	margin-left: 15%;
-	margin-right: 20%;
+	margin-left: 8%;
+	margin-right: 30%;
 	font-size: 1em;
 	border-left: 5px solid black;
-	padding-left: 5%;
+	padding-left: 2%;
+	padding-top: 1%;
 	font-family: Arial;
 	line-height: 150%;
 }
 
+#about-me-photo{
+	width: 25%;
+	position: fixed;
+	top: 33%;
+	right: 11%;
+}
+
 /*BLOG INDEX PAGE*/
 #blog-index-header{
 	top: 0%;
@@ -224,7 +232,7 @@ pre{
 	display: block;
 	top: 0%;
 	width: 100%;
-	height: 35%;
+	height: 33%;
 	line-height: 75%;
 }
 
@@ -274,8 +282,6 @@ footer{
 	display: block;
 	width: 100%;
 	text-align: center;
-	margin-top: 10%;
+	margin-top: 5%;
 	margin-bottom: 2%;
-	top: 95%;
-	bottom: 10%;
 }