Social Icons

Pages

Tuesday, November 29, 2016

Build a Resume 1/8

What you'll be building
You'll be using your CSS skills to style an eye-catching resume. You'll need to call on your knowledge of CSS selectors, classes/IDs, margins, padding, borders, and positioning to make everything look exactly the way you want it to.
That said, this project will be relatively hands-off. We've put a demo resume in the editor (check the Result tab) for you to use as a template, but you should feel free to style your resume the way you'd like.


Instructions
Ready to roll? Click Save & Submit Code to continue!
div {
 border-radius: 5px;
}

#header {
 z-index: 1;
 position: fixed;
 width: 97.5%;
 margin-top: -20px;
 height: 60px;
 background-color: #668284;
 margin-bottom: 10px;
}

#name {
 float:left;
 margin-left: 5px;
 padding-top: 5px;
 font-size: 16px;
 font-family: Verdana, sans-serif;
 color: #ffffff;
}

#email{
 float:right;
 margin-right: 5px;
 padding-top: 5px;
 font-size: 16px;
 font-family: Verdana, sans-serif;
 color: #ffffff;
}

h4 {
 margin-left: 5px;
 margin-bottom: 15px;
 font-family: Verdana, sans-serif;
}

.right p {
 margin-left: 5px;
 margin-right: 5px;
 margin-top: -10px;
 font-family: Garamond, serif;
 color: #000000;
}

li {
 list-style-type: square;
}

a:hover {
 font-weight: bold;
}

.left {
 position: relative;
 float: left;
 margin-top: 50px;
 width: 10%;
 height: 400px;
 background-color: #B9D7D9;
 margin-bottom: 10px;
}

.right {
 position: relative;
 float: right;
 margin-top: 50px;
 width: 88%;
 height: 400px;
 background-color: #F4EBC3;
 margin-bottom: 10px;
}

#footer {
 position: relative;
 height: 50px;
 background-color: #668284;
 clear: both;
 font-family: Verdana, sans-serif;
 font-size: 14px;
 text-align: center;
 color: #ffffff;
}

#footer p {
 position: relative;
 padding-top: 15px;
}

<!DOCTYPE html>
<html>
 <head>
  <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
  <title></title>
 </head>
 <body>
  <div id="header">
   <p id="name">Your Name Here</p>
   <a href="mailto:you@yourdomain.com"><p id="email">you@yourdomain.com</p></a>
  </div>
  <div class="left"></div>
  <div class="right">
   <h4>Objective</h4>
   <p>To take a position as a software engineer.</p>
   <h4>Experience</h4>
   <p>Junior Developer, Software Company (2010 - Present)</p>
   <ul>
    <li>Designed and implemented end-user features for Flagship Product</li>
    <li>Wrote third-party JavaScript and Ruby libraries</li>
   </ul>
   <h4>Skills</h4>
   <p>Languages: C#, JavaScript, Python, Ruby</p>
   <p>Frameworks: .NET, Node.js, Django, Ruby on Rails</p>
   <h4>Education</h4>
   <p>BS, Economics, My University</p>
   <ul>
    <li>Award for best senior thesis</li>
    <li>GPA: 3.8</li>
   </ul>
  </div>
  <div id="footer">
   <p>123 Your Street, Anytown, State 12345-6789 | Tel: (555) 555-5555</p>
  </div>
 </body>
</html>

No comments:

Post a Comment