Skip to content

done #6

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
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

done #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
100 changes: 100 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
header {
text-align: center;
}

ul {
margin: 10px;
}

.topLinks {
display: inline;
padding: 10px 15px;
font-family: 'Lato', sans-serif;
font-weight: lighter;
font-size: 30px;

}

a {
text-decoration: underline;
color: #000000;
}

h1 {
font-family: 'Merriweather', sans-serif;
font-size: 48px;
border-bottom: 2px solid #000000;
padding: 0 0 10px 0;
}

body {
margin: 0 20px;
}

h2 {
padding: 0 20px;
font-family: helvetica;
font-size: 24px;
}

p {
padding: 0 20px;
font-family: Georgia;
font-size: 20px;
}
#bodyMiddle {
height: 800px;
}

#profile {
float: right;
margin: 0 0 10px 20px;
clear: bottom;
border: 1px solid #000000;
padding: 10px;
}

.portfolio {
margin: 10px 100px 50px 10px;
border: 1px solid #000000;
padding: 10px;
max-width: 550px;
text-align: center;

}

.exp {
padding: 0 20px;
}

.name {
font-weight: bold;
font-style: italic;
font-size: 18px;
}

.company {
font-size: 18px;
}

.date {
font-style: italic;
font-size: 18px;
}

.line {
border-bottom: 2px solid #000000;
margin: 30px 0 10px 0;
}

#bottom {
text-align: center;
}

.socialLinks {
display: inline;
padding: 10px 15px;
font-family: 'Lato', sans-serif;
font-weight: lighter;
font-size: 16px;
}
46 changes: 46 additions & 0 deletions html/about-me.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>
<meta charset="UTF-8">
<title>Joe Johnson | About Me</title>
<link rel="stylesheet" href="../css/style.css">
</head>

<body>
<header>
<ul class="topLinks">
<li class="topLinks">About Me</li>
<li class="topLinks">|</li>
<li class="topLinks"><a href="portfolio.html">Portfolio</a></li>
</ul>

<h1>JOE JOHNSON</h1>
</header>

<section>
<h2>I ENJOY LIFE AS A DEVELOPER</h2>

<img src="http://i.imgur.com/ZtkNn8G.jpg" alt="Joe" id="profile">

<p>I'm Joe Johnson, a Developer based in NYC. I have ten years of experience in the graphic design world, specializing in the creation of responsive websites.</p>

<p>During my spare time, I enjoy senior water aerobics, pickling, and spending time with my goldfish, Jerry.</p>
</section>

<footer>
<div class="line"></div>

<ul id="bottom">
<li class="socialLinks"><a href="http://www.facebook.com">Facebook</a></li>
<li class="socialLinks">|</li>
<li class="socialLinks"><a href="http://www.twitter.com">Twitter</a></li>
<li class="socialLinks">|</li>
<li class="socialLinks"><a href="http://www.instagram.com">Instagram</a></li>
<li class="socialLinks">|</li>
<li class="socialLinks"><a href="http://www.linkedin.com">LinkedIn</a></li>
</ul>
</footer>
</body>
</html>
76 changes: 76 additions & 0 deletions html/portfolio.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>
<meta charset="UTF-8">
<title>Joe Johnson | About Me</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<header>
<ul>
<li class="topLinks"><a href="about-me.html">About Me</a></li>
<li class="topLinks">|</li>
<li class="topLinks">Portfolio</a></li>
</ul>

<h1>JOE JOHNSON</h1>
</header>

<section>
<h2>EXPERIENCE</h2>

<p>I recently graduated from a Front-End Web Development course at General Assembly where I learned HTML, CSS, JavaScript, jQuery and how to be an awesome Front-End Web Developer!</p>

<ul>
<li class="exp"><span class="name">Web Developer,</span><span class="company"> Relaxr</span><span class="date"> 2015 - present</span></br>
Developed a multi-column layout blog, landing page, and contact forms that render on mobile devices.</li>
</ul>

<div class="portfolio">
<img src="../starter-code/images/relaxr-deliverable.png" alt="Relaxr">
</div>

<ul>
<li class="exp"><span class="name">Web Developer,</span><span class="company"> Startup Matchmaker</span><span class="date"> 2015 - present</span></br>
Used a design team's wireframes to develop this company's responsive homepage.</li>
</ul>

<div class="portfolio">
<img src="../starter-code/images/startup-matchmaker-deliverable.png" alt="Startup Matchmaker">
</div>

<ul>
<li class="exp"><span class="name">Web Developer,</span><span class="company"> CitiPix</span><span class="date"> 2015 – present</br>
Built web app prototype that allows users to store and quickly retrieve photos using keywords.</li>
</ul>

<div class="portfolio">
<img src="../starter-code/images/citipix-deliverable.png" alt="Citipix">
</div>
</section>

<section>
<h2>EDUCATION</h2>
<ul>
<li class="exp"><span class="company">General Assembly — FEWD</span><span class="date"> 2015</span></li>
<li class="exp"><span class="company">College of Soft Knocks — B.S.</span><span class="date"> 2009</span></li>
<li class="exp"><span class="company">School of Hard Knocks — (Honors)</span><span class="date"> 2005</span></li>
</ul>
</section>

<footer>
<div class="line"></div>
<ul id="bottom">
<li class="socialLinks"><a href="http://www.facebook.com">Facebook</a></li>
<li class="socialLinks">|</li>
<li class="socialLinks"><a href="http://www.twitter.com">Twitter</a></li>
<li class="socialLinks">|</li>
<li class="socialLinks"><a href="http://www.instagram.com">Instagram</a></li>
<li class="socialLinks">|</li>
<li class="socialLinks"><a href="http://www.linkedin.com">LinkedIn</a></li>
</ul>
</footer>
</body>
</html>