Online Responsive Resume

In this tutorial I want to demonstrate how we can build a responsive single-page resume layout. I’ll be coding everything in HTML5/CSS3 to work properly at various screen resolutions.

Demo
HTML
CSS
JS
Edit Online
Download


<div class="myResume">
  <div class="myResume-Contact-Info">
    <h1>Pawan Mall</h1>
    <h3>Web Designer, Developer & Blogger</h3>
    <h6>New Delhi, Delhi, INDIA</h6>
    <h6>email@pawanmall.net</h6>
    <h6>My Portfolio • <a href="http://www.pawanmall.net">www.pawanmall.net</a></h6>
  </div>
  <div class="myResume-Profile-Pic">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3nF77G71_dDwfHSm4tH1WNNA4BTzQ1t0vYIxhE5u342sRI11yvl_OVe2VIHf7rm9we5anAaVD78FBgJ_b7pIZCoD6h3W2Ra6E3ct4_1B3Bgb7bLdb3I8pV_lXZWGvXRY9Ztsh1sREBzQ/s1600/Pawan+Mall+-+Profile+Pic-Small.jpg" alt="Pawan Mall - resume photo avatar" />
  </div>
  <div class="clear"></div>
  <div class="myResume-Profile-Intro">
    <h1 class="title">Profile</h1>
    <p>I'm something poet, marketer, social media consultant, web designer, web developer, web programmer, blogger(hobby) & a good human being. Originally from Gorakhpur, UP and currently living in the New Delhi. ..</p>
   
  </div>   
  <div class="myResume-Skills">
    <h1 class="title">Skills</h1>
    
        <ul class="myResume-Skills-left">
          <li>Development</li>
          <li>HTML5/CSS3</li>
          <li>JavaScript & jQuery</li>
          <li>PHP Backend</li>
          <li>SQL Databases</li>
          <li>Wordpress</li>
          <li>Pligg CMS</li>
          <li>Some Objective-C</li>
        </ul>
    
        <ul class="myResume-Skills-right">
          <li>Software</li>
          <li>Adobe Photoshop</li>
          <li>Adobe Dreamweaver</li>
          <li>MS Office 2007-2010</li>
          <li>cPanel & phpMyAdmin</li>
          <li>Xcode 4</li>
        </ul>
    
  </div>
  <div class="clear"></div>
  <div class="myResume-Education">
    <h1 class="title">Education</h1>
    <ul>
      <li>Sikkim Manipal University graduate of 2015.</li>
    </ul>
  </div>   
  <div class="myResume-Experience">
    <h1 class="title">Experience</h1>
    <ul>
      <li>Web Designer/Developer ~ 2007-2014</li>
    </ul>
  </div>   
</div>


/* 
// Online Responsive Resume
// Made with ❤ by @Pawan_Mall
// http://www.pawanmall.net 
*/

* { margin: 0; padding: 0; }

body { 
  background: #f2f2f2; 
  font-size: 62.5%; 
  padding: 10px; 
}
.myResume-Contact-Info h1 { 
  font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; 
  margin-bottom: 20px;
  font-size: 40px; 
}
.myResume-Contact-Info > h3 { 
  font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; 
  color: #484848; 
  margin-bottom: 10px; 
  text-decoration: underline; 
}
.myResume-Contact-Info > h6 { 
  font-family: "Trebuchet MS", Verdana, Arial, sans-serif; 
  color: #777; 
  font-weight: normal; 
  font-size: 1em; 
}

.myResume{
  background: #fff; 
  width:80%;
  font-family: "Balthazar", "Droid Serif", serif; 
  color: #565656; 
  font-size: 1.8em; 
  line-height: 1.4em; 
  margin: 3% auto; 
  padding: 10px 0px 35px 80px; 
  //padding: 35px;
    text-shadow: 1px 1px 10px #CCC;
}
.myResume-Contact-Info{
  width:50%;
  margin-top: 50px; 
  margin-bottom: 30px;
  margin-right:100px;
  float:left;
}
.clear{
  clear:both;
}
.myResume-Profile-Pic{
  width:100%;
  margin:40px auto;
}
.myResume-Profile-Pic img{
  width:25%;
  height:auto;  
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 5px;
}
.myResume-Profile-Intro{
  width:88.5%;
  margin:10 px auto;
  text-align:justify;
  margin-top:50px;
}
.myResume-Skills{
  width:88.5%;
  margin:10 px auto;
  text-align:justify;
  margin-top:50px;
}

.myResume-Education{ 
  width:88.5%;
  margin-top:50px;
}
.myResume-Education > ul > li {
  list-style-type: circle; 
}
.myResume-Experience{
  width:88.5%;
  margin-top:50px;
}
 .myResume-Experience > ul > li {
  list-style-type: circle; 
}

h1.title{
  text-transform: uppercase;
  font-size: 150%;
  background-color:#CCC;
  padding:10px 0px 10px 100px;
  border-radius:0px 50px 50px 0px;
  width:80%;
  margin-bottom:10px;
  color:#fff;
  text-shadow: 2px 2px 8px #000;
  position:relative;
  left:-85px;
}

.myResume-Skills-left { 
  display: block; 
  float: left; 
  padding-bottom:20px;
   margin-left:30px;
}

.myResume-Skills-right { 
  display: block; 
  float: left;
  margin-left:30px;
}


ul.myResume-Skills-left,ul.myResume-Skills-right { 
  display: block; 
}
ul.myResume-Skills-left > li { 
  padding-left: 10px; 
  list-style-type: circle; 
  vertical-align: top; 
  font-family: "Balthazar", "Droid Serif", serif; 
}
ul.myResume-Skills-right > li { 
  padding-left: 10px; 
  list-style-type: circle; 
  vertical-align: top; 
  font-family: "Balthazar", "Droid Serif", serif; 
}
ul.myResume-Skills-left > li:first-child {
  list-style-type: none;  
  font-weight:bolder;
  font-size:20px;
  text-decoration:underline;
}
ul.myResume-Skills-right > li:first-child { 
  list-style-type: none;  
  font-weight:bolder; 
  font-size:20px;
  text-decoration:underline;
}

@media only screen and (max-width: 740px) {
.myResume{
  width:90%;
  font-family: "Balthazar", "Droid Serif", serif; 
  color: #565656; 
  padding: 10px;
  }
  .myResume-Contact-Info h1{
    font-size:30px;
    padding-left:10%;
  }
  .myResume-Contact-Info > h3 { 
   font-size:14px;
   padding-left:10%;
}
.myResume-Contact-Info > h6 { 
  font-size:13px;
  padding-left:10%;
}
  .myResume-Contact-Info {
   width:40%;
    text-align:center;
  }
  .myResume-Profile-Pic{
  width:60%;
  margin-right:5%;
    
}
.myResume-Profile-Pic img{
  width:45%; 
  float:right;  
}
  
h1.title{
  font-size: 25px;
  background-color:#CCC;
  padding:5px 0px 5px 0px;
  border-radius:0px;
  width:100%;
  margin-bottom:10px;
  position:relative;
  left:-35px;
  text-align:center;  
}
.myResume-Profile-Intro{
  width:90%;  
  text-align:justify;
  font-size: 20px;
  padding-left:18px;  
}
.myResume-Skills{
  width:90%;
  font-size: 15px;
  padding-left:18px;      
}
.myResume-Education{ 
  width:90%;
  font-size: 18px;
  padding-left:18px;          
}  
.myResume-Experience{
  width:90%;
  font-size: 18px;
  padding-left:18px;              
}    
}

@media only screen and (max-width: 570px) {
  .myResume{
  width:90%;
  font-family: "Balthazar", "Droid Serif", serif; 
  color: #565656; 
  padding: 10px;
  }
  .myResume-Contact-Info h1{
    font-size:60px;
    padding-left:10%;
  }
  .myResume-Contact-Info > h3 { 
   font-size:18px;
   padding-left:10%;
}
.myResume-Contact-Info > h6 { 
  font-size:15px;
  padding-left:10%;
}
  .myResume-Contact-Info {
   width:90%;
    font-size:60%;
    text-align:center;
  }
  .myResume-Profile-Pic{
  width:90%;
  margin:auto 6%;
}
.myResume-Profile-Pic img{
  width:70%;
  margin:auto 15%;  
}
  
h1.title{
  font-size: 25px;
  background-color:#CCC;
  padding:5px 0px 5px 0px;
  border-radius:0px;
  width:100%;
  margin-bottom:10px;
  position:relative;
  left:-35px;
  text-align:center;  
}
.myResume-Profile-Intro{
  width:90%;  
  text-align:justify;
  font-size: 20px;
  padding-left:18px;  
}
.myResume-Skills{
  width:90%;
  font-size: 15px;
  padding-left:18px;      
}
.myResume-Education{ 
  width:90%;
  font-size: 18px;
  padding-left:18px;          
}  
.myResume-Experience{
  width:90%;
  font-size: 18px;
  padding-left:18px;              
}  
}

@media only screen and (max-width: 480px) {
  .myResume{
  width:90%;
  font-family: "Balthazar", "Droid Serif", serif; 
  color: #565656; 
  padding: 10px;
  }
  .myResume-Contact-Info h1{
    font-size:40px;
    padding-left:10%;
  }
  .myResume-Contact-Info > h3 { 
   font-size:13px;
   padding-left:10%;
}
.myResume-Contact-Info > h6 { 
  font-size:13px;
  padding-left:10%;
}
  .myResume-Contact-Info {
   width:90%;
    font-size:60%;
    text-align:center;
  }
  .myResume-Profile-Pic{
  width:90%;
}
.myResume-Profile-Pic img{
  width:80%;
  margin:auto 10%;  
}
  
h1.title{
  font-size: 25px;
  background-color:#CCC;
  padding:5px 0px 5px 0px;
  border-radius:10px;
  width:122.0%;
  margin-bottom:10px;
  position:relative;
  left:-32px;
  text-align:center;  
}
.myResume-Profile-Intro{
  width:90%;  
  text-align:justify;
  font-size: 20px;
  padding-left:18px;  
}
.myResume-Skills{
  width:90%;
  font-size: 18px;
  padding-left:18px;      
}
.myResume-Education{ 
  width:90%;
  font-size: 18px;
  padding-left:18px;          
}  
.myResume-Experience{
  width:90%;
  font-size: 18px;
  padding-left:18px;              
}  
  
}

@media only screen and (max-width: 320px) {
  .myResume{
  background: #fff; 
  width:80%;
  font-family: "Balthazar", "Droid Serif", serif; 
  color: #565656; 
  margin: auto; 
  padding: 0px 10px 10px 45px;
  }
  .myResume-Contact-Info h1{
    font-size:30px;
  }
  .myResume-Contact-Info > h3 { 
   font-size:12px;
}
.myResume-Contact-Info > h6 { 
  font-size:12px;
}
  .myResume-Contact-Info {
   width:90%;
    font-size:60%;
    text-align:center;
    margin-left:-15px;
  }
  .myResume-Profile-Pic{
  width:90%;
  margin:auto 0%;    
}
.myResume-Profile-Pic img{
  width:80%;
}
  
h1.title{
  font-size: 20px;
  background-color:#CCC;
  padding:5px 0px 5px 0px;
  border-radius:0px 0px 0px 0px;
  width:146%;
  margin-bottom:10px;
  position:relative;
  left:-41px;
  text-align:center;  
}
.myResume-Profile-Intro{
  width:90%;
  text-align:justify;
  margin-top:50px;
  font-size: 18px;
  margin-left:-25px;  
}
.myResume-Skills{
  width:90%;
  font-size: 15px; 
  margin-left:-25px;   
}
.myResume-Education{ 
  width:90%;
  font-size: 15px;
  margin-left:-25px;   
}  
.myResume-Experience{
  width:90%;
  font-size: 15px;
  margin-left:-25px;   
}  
}


No need for any JS script...

Pawan Mall : Blog

Search Box

Labels

Online Responsive Resume

Like this post? Then, Share it

1 comment:

Image

About

Resume

Curriculum Vitae

Pawan Mall

Web Designer, Developer & Blogger

New Delhi, Delhi, INDIA

mailpawanmall.net

www.pawanmall.net

Objective

Skills

Education

Experience

Contact Form

Contact