Last active
August 29, 2015 14:27
-
-
Save kingrichardiii/7aa2cf75fa26cd8321e0 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* { box-sizing: border-box; } | |
.container { | |
width: 80%; | |
margin: 0 auto; | |
} | |
.header h1 { | |
text-align: center; | |
margin-bottom: 30px; | |
} | |
.image { | |
display: inline-block; | |
float: left; | |
padding-right: 25px; | |
} | |
.column { | |
display: inline-block; | |
float: left; | |
width: 30%; | |
padding: 30px 20px; | |
} | |
.main-text { | |
clear: both; | |
padding-top: 30px; | |
} | |
.skills { | |
background-color: #6fd9f4; | |
color:#fff; | |
padding: 30px 10px 10px 30px; | |
} | |
#skill-list { | |
margin-left: 40px; | |
} | |
body { | |
background-color: #0ac5f4; | |
color: #FFF; | |
} | |
.nav ul li { | |
display: inline-block; | |
float: right; | |
} | |
.nav { | |
background-color: #6d7276; | |
position: fixed; | |
width: 100%; | |
top: 0; | |
padding: 20px 10px 20px; | |
} | |
.nav ul li a { | |
text-transform: uppercase; | |
letter-spacing: 0.05em; | |
color: #FFF; | |
padding-right: 10px; | |
-webkit-transition: color 600ms; | |
} | |
.nav a:hover { | |
color: #4b9dd0; | |
text-decoration: none; | |
} | |
/*typography*/ | |
h1, | |
h2, | |
h3 { | |
font-family: Josefin Slab, Times, Times New Roman, serif; | |
font-size: 1.5em; | |
} | |
p, | |
li { | |
font-family: Josefin Sans, Helvetica, Arial, sans-serif;; | |
font-size: 1.25em; | |
} | |
.into p { | |
font-family: Futura, Helvetica, Arial, sans-serif; | |
font-size: 3em; | |
font-weight: 100; | |
-webkit-margin-before: 0; | |
} | |
.skills h2 { | |
text-align: center; | |
text-transform: uppercase; | |
} | |
.header h1 { | |
font-size: 2.5em; | |
} | |
.nav ul li { | |
font-size: 1em; | |
} | |
.nav { | |
font-family: Josefin Sans, Helvetica, Arial, sans-serif; | |
font-size: 1em; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html lang="eng"> | |
<head> | |
<meta charset="utf-8"> | |
<link href="css/normalize.css" rel="stylesheet"> | |
<link href="css/bootstrap.css" rel="stylesheet"> | |
<link href="css/about_style.css" rel="stylesheet"> | |
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:400' rel='stylesheet' type='text/css'> | |
<link href='http://fonts.googleapis.com/css?family=Josefin+Slab:700' rel='stylesheet' type='text/css'> | |
<title> About Richard Rabeau III </title> | |
<!--[if lt IE 9]> | |
<script src+"dist/html5shiv.js"></script> | |
<![endif]--> | |
</head> | |
<body> | |
<div class="nav"> | |
<ul> | |
<li><a href="contact.html"> Contact </a></li> | |
<li><a href="#"> FAQ </a></li> | |
<li><a href="#"> Work </a></li> | |
<li><a href="about.html"> About </a></li> | |
<li><a href="index.html"> Home </a></li> | |
</ul> | |
</div> | |
<div class="container"> | |
<div class="header"> | |
<h1> About Richard Rabeau III </h1> | |
</div> | |
<div class="image"> | |
<img src="img/richardiii.png" alt="richard"> | |
</div> | |
<div class="intro column"> | |
<h2> Introduction </h2> | |
<p> | |
Hello! I'm Richard Rabeau III. I'm a graphic and web designer from Philadelphia. I solve problems visually, and create various things for the web. I’m also learning how to code. | |
</p> | |
</div> | |
<div class="skills column"> | |
<h2> My Skills </h2> | |
<ul id="skill-list"> | |
<li>Graphic Design</li> | |
<li>Web Design</li> | |
<li>Web Development</li> | |
<li>Branding</li> | |
<li>Copywriting</li> | |
</ul> | |
</div> | |
<div class="main-text"> | |
<h3> My Story </h3> | |
<p> | |
I’m a graphic and web designer living and working in the City of Brotherly Love. Before pursuing a career in the design industry, I dabbled in a variety of other disciplines (including working part-time in college as a cake decorator), and switched majors at least three times (psychology to creative writing to digital media). I’m currently in the works of adding web developer to my bag of tricks. | |
<p/> | |
<p> | |
As a design professional, I maintain a healthy balance between functionality and visual impact in all my work. I believe good design should simple and effective with a hint of playfulness. | |
</p> | |
</div> | |
</div> <!--end container --> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* { box-sizing: border-box; } | |
.container { | |
width: 50%; | |
margin: 0 auto; | |
} | |
.header h1 { | |
text-align: center; | |
margin-bottom: 30px; | |
} | |
.image { | |
display: inline-block; | |
float: left; | |
padding-right: 25px; | |
} | |
.main-text { | |
clear: both; | |
padding-top: 30px; | |
text-align: center; | |
} | |
.email { | |
clear: both | |
} | |
body { | |
background-image: url("../img/skyline.jpg"); | |
background-size: cover; | |
background-repeat: no-repeat; | |
background-position: fixed; | |
color: #FFF; | |
text-align: center; | |
} | |
.nav ul li { | |
display: inline-block; | |
float: right; | |
} | |
.nav { | |
background-color: #6d7276; | |
position: fixed; | |
width: 100%; | |
top: 0; | |
padding: 20px 10px 20px; | |
} | |
.nav ul li a { | |
text-transform: uppercase; | |
letter-spacing: 0.05em; | |
color: #FFF; | |
padding-right: 10px; | |
-webkit-transition: color 600ms; | |
} | |
.nav a:hover { | |
color: #4b9dd0; | |
text-decoration: none; | |
} | |
/*typography*/ | |
h1, | |
h2 { | |
font-family: Josefin Slab, Times, Times New Roman, serif; | |
font-size: 2em; | |
} | |
p { | |
font-family: Josefin Sans, Helvetica, Arial, sans-serif; | |
font-size: 2em; | |
} | |
.header h1 { | |
font-size: 3em; | |
} | |
.nav { | |
font-family: Josefin Sans, Helvetica, Arial, sans-serif; | |
font-size: 1em; | |
} | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html lang="eng"> | |
<head> | |
<meta charset="utf-8"> | |
<link href="css/normalize.css" rel="stylesheet"> | |
<link href="css/bootstrap.css" rel="stylesheet"> | |
<link href="css/contact_style.css" rel="stylesheet"> | |
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:400' rel='stylesheet' type='text/css'> | |
<link href='http://fonts.googleapis.com/css?family=Josefin+Slab:700' rel='stylesheet' type='text/css'> | |
<title> Contact Richard Rabeau III </title> | |
<!--[if lt IE 9]> | |
<script src+"dist/html5shiv.js"></script> | |
<![endif]--> | |
</head> | |
<body> | |
<div class="nav"> | |
<ul> | |
<li><a href="contact.html"> Contact </a></li> | |
<li><a href="#"> FAQ </a></li> | |
<li><a href="#"> Work </a></li> | |
<li><a href="about.html"> About </a></li> | |
<li><a href="index.html"> Home </a></li> | |
</ul> | |
</div> | |
<div class="container"> | |
<div class="header"> | |
<h1> Contact me </h1> | |
</div> | |
<div class="main-text"> | |
<p> | |
Let's work together. Drop me a line. Tell me what you need. I'm here to help your business grow. | |
</p> | |
<div> | |
<div class="email"> | |
<h2> richard.rabeau@gmail.com </h2> | |
</div> | |
<div class="location"> | |
<p> Philadelpiha, PA </p> | |
</div> | |
</div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Richard Rabeau III</title> | |
<!-- Bootstrap core CSS --> | |
<link href="css/bootstrap.css" rel="stylesheet"> | |
<link href="css/style.css" rel="main stylesheet"> | |
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:300' rel='stylesheet' type='text/css'> | |
<link href='http://fonts.googleapis.com/css?family=Josefin+Slab:700' rel='stylesheet' type='text/css'> | |
<!-- Custom styles for this template go here --> | |
<!-- Just for debugging purposes. Don't actually copy this line! --> | |
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]--> | |
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> | |
<!--[if lt IE 9]> | |
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> | |
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> | |
<![endif]--> | |
</head> | |
<body> | |
<!-- Main jumbotron for a primary marketing message or call to action --> | |
<div class="nav"> | |
<ul> | |
<li><a href="contact.html"> Contact </a></li> | |
<li><a href="#"> FAQ </a></li> | |
<li><a href="#"> Work </a></li> | |
<li><a href="about.html"> About </a></li> | |
<li><a href="index.html"> Home </a></li> | |
</ul> | |
</div> | |
<div class="jumbotron"> | |
<div class="container"> | |
<h1>Richard Rabeau III</h1> | |
<p><strong>Graphic & Digital Designer. Developer-in-Training. Philadelphia. | |
<strong><a href="about.html">About Me</a></p> | |
</div> | |
</div> | |
<div class="container"> | |
<!-- Example row of columns --> | |
<div class="row"> | |
<div class="col-md-4"> | |
<h2>Portfolio Concepts</h2> | |
<p> I took a course in web design while studying at The New School, which gave me some exposure to HTML/CSS, and an eagerness to learn more. In terms of design, I am minimalist attracted to bold colors, so I would like my portfolio site to reflect that. I also dig the flat design trend and parallax scrolling. </p> | |
<p><a class="btn btn-default" href="#" role="button">View details »</a></p> | |
</div> | |
<div class="col-md-4"> | |
<h2>Project Goals</h2> | |
<p>I currently work full-time as a graphic designer in the marketing department of a real estate firm. I’ll be dedicating my evenings (and slow days at work, shhh) to this course. As a somewhat recent college grad, I am hoping I am still a quick learner and haven’t yet lost my work ethic. </p> | |
<p><a class="btn btn-default" href="#" role="button">View details »</a></p> | |
</div> | |
<div class="col-md-4"> | |
<h2>Course Goals</h2> | |
<p>I am taking this course to gain coding skills and experience, so I can transition my career from graphic design to web design and development. My goal is to find a entry-level, front-end developer job, preferably at a cool tech start-up or boutique marketing agency.</p> | |
<p><a class="btn btn-default" href="#" role="button">View details »</a></p> | |
</div> | |
</div> | |
<hr> </hr> | |
<div class="contact"> | |
<p><strong><a href="contact.html">Contact Me</a></p> | |
</div> | |
<hr> </hr> | |
</div> <!-- /container --> | |
<!-- | |
================================================== --> | |
<!-- Can place script tags with JavaScript files here --> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* { box-sizing: border-box; } | |
.container { | |
width: 50%; | |
margin: 0 auto; | |
} | |
.header h1 { | |
text-align: center; | |
margin-bottom: 30px; | |
} | |
.image { | |
display: inline-block; | |
float: left; | |
padding-right: 25px; | |
} | |
.main-text { | |
clear: both; | |
padding-top: 30px; | |
text-align: center; | |
} | |
.email { | |
clear: both | |
} | |
body { | |
background-image: url("../img/skyline.jpg"); | |
background-size: cover; | |
background-repeat: no-repeat; | |
background-position: fixed; | |
color: #FFF; | |
text-align: center; | |
} | |
.nav ul li { | |
display: inline-block; | |
float: right; | |
} | |
.nav { | |
background-color: #6d7276; | |
position: fixed; | |
width: 100%; | |
top: 0; | |
padding: 20px 10px 20px; | |
} | |
.nav ul li a { | |
text-transform: uppercase; | |
letter-spacing: 0.05em; | |
color: #FFF; | |
padding-right: 10px; | |
-webkit-transition: color 600ms; | |
} | |
.nav a:hover { | |
color: #4b9dd0; | |
text-decoration: none; | |
} | |
/*typography*/ | |
h1, | |
h2 { | |
font-family: Josefin Slab, Times, Times New Roman, serif; | |
font-size: 2em; | |
} | |
p { | |
font-family: Josefin Sans, Helvetica, Arial, sans-serif; | |
font-size: 2em; | |
} | |
.header h1 { | |
font-size: 3em; | |
} | |
.nav { | |
font-family: Josefin Sans, Helvetica, Arial, sans-serif; | |
font-size: 1em; | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment