Responsive Website Design: Responsive Portfolio Template

You have to create only index.html and Style.css File, copy below code and get above screen shot

Features

Mouse hover effect on Project block

Tabbed menu (Onclick on Menu -> show correspondence information to Container

Jquery Progress-Bar

Mainly code is done in html and css, you can customize easily

Create Index.html

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Responsive Web-Design Template</title>
<link rel="stylesheet" href="style.css" type="text/css">

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
  $(function() {
    $( ".progressbar" ).progressbar({
      value: 96
    });
  });
  $(function() {
    $( ".progressbar2" ).progressbar({
      value: 80
    });
  });
   $(function() {
    $( ".progressbar3" ).progressbar({
      value: 85
    });
  });
  $(function() {
    $( ".progressbar4" ).progressbar({
      value: 70
    });
  });
  $(function() {
    $( ".progressbar5" ).progressbar({
      value: 60
    });
  });
  $(function() {
    $( ".progressbar6" ).progressbar({
      value: 99
    });
  });
  </script>
</head>
<body>
<div class="main-wrapper">
  <div class="second-container">
    <div class="menu-left">
      <h2>LOGO</h2>
      <ul>
        <li><a href="index.html#menu1">About</a></li>
        <li><a href="index.html#menu2">Educations</a></li>
        <li><a href="index.html#menu3">Experience</a></li>
        <li><a href="index.html#menu4">Skills</a></li>
        <li><a href="index.html#menu5">My Contributions</a></li>
        <li><a href="index.html#menu6">Expertise</a></li>
        <li><a href="index.html#menu7">Contacts</a></li>
      </ul>
      <h5>Latest</h5>
      <h6>New Update</h6>
      <h6>New Update</h6>
      <h6>New Update</h6>
      <h5>Link With Us</h5>
      <h6>f | g+ | li</h6>
    </div>
    
    <div class="right-main-container">
      <div class="left-part">
        <div class="about">
          <p>Web designer and developer</p>
        </div>
        <div class="details-about"> <a name="menu1">
          <h4>About</h4>
          </a>
          <p>Hi, I am Ram <br>
            I am Web designer and developer.<br>
            I have 2+ Year of Experience in Web designing and development.</p>
          <p>I am expert in Responsive web design and development <br>
            I have good experience in PHP CMS framework.</p>
          <a name="menu2">
          <h4>Educations</h4>
          </a>
          <p>10th - R.C.K Govt School</p>
          <p>12th - R.C.K High School</p>
          <p>B.E - G.V.K College M.P</p>
          <a name="menu3">
          <h4>Experience</h4>
          </a>
          <p>Company Name:-XYZ Software Solutions Pvt Ltd.</p>
          <p>Duration:- 2013 to 2014</p>
          <p>Company Name:-ABC Software Solutions Pvt Ltd.</p>
          <p>Duration:- 2014 to 2015 (Present)</p>
          <a name="menu4">
          <h4>Skills</h4>
          </a>
          <p>Html5</p>
          <p>Css3</p>
          <p>Java-Script</p>
          <p>Jquery</p>
          <p>JqueryUI</p>
          <p>PHP CMS Framework</p>
          <p>Adobe PS</p>
          <p>Adobe AI</p>
          <p>Responsive Website Design</p>
          <p>Mobile Website</p>
          <p>Facebook Website</p>
          <p>Banner Design</p>
          <p>Video Editing</p>
          <a name="menu5">
          <h4>My Contributions</h4>
          </a>
          <p>Abc Govt. School Website</p>
          <p>How to become Entrepreneur Website</p>
          <p>How to Create Responsive Website</p>
          <a name="menu6">
          <h4>Expertise</h4>
          </a>
          <p>Responsive website Design</p>
          <p>Jquery Framework</p>
          <p>PHP CMS Framework</p>
          <p>Wireframing</p>
          <p>Animation</p>
          <a name="menu7">
          <h4>Contacts</h4>
          </a>
          <p>Email-id :- ram@gmail.com</p>
          <p>Mob-No :- 00 7863 00 00</p>
          <p>Skype-Id :- ram123</p>
          <p>Facebook :- ram123/fb</p>
        </div>
        
        <div class="projects-view">
          <h2>Projects</h2>
          
          <div class="project-block">
            <div class="project-blockimg"> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_2-1024x512.jpg">
              <div class="text"> <a href="#">This is XYZ Company Website<br>
                <span style="color:#0000FF">View Website</span></a> </div>
            </div>
          </div>
          
          <div class="project-block">
            <div class="project-blockimg"> <img src="http://curdweb.com/navin/click.com/images/slider/slider1.png">
              <div class="text"> <a href="#">This is XYZ Company Website<br>
                <span style="color:#0000FF">View Website</span></a> </div>
            </div>
          </div>
          
          <div class="project-block">
            <div class="project-blockimg"> <img src="http://curdweb.com/navin/responsive/images/slider1.jpg">
              <div class="text"> <a href="#">This is XYZ Company Website<br>
                <span style="color:#0000FF">View Website</span></a> </div>
            </div>
          </div>
          
          <div class="project-block">
            <div class="project-blockimg"> <img src="http://curdweb.com/navin/responsive/images/slider4.jpg">
              <div class="text"> <a href="#">This is XYZ Company Website<br>
                <span style="color:#0000FF">View Website</span></a> </div>
            </div>
          </div>
          
          <div class="project-block">
            <div class="project-blockimg"> <img src="http://curdweb.com/navin/responsive/images/slider2.jpg">
              <div class="text"> <a href="#">This is XYZ Company Website<br>
                <span style="color:#0000FF">View Website</span></a> </div>
            </div>
          </div>
          
          <div class="project-block">
            <div class="project-blockimg"> <img src="http://curdweb.com/navin/fullwidthlider.com/images/slider3.png">
              <div class="text"> <a href="#">This is XYZ Company Website<br>
                <span style="color:#0000FF">View Website</span></a> </div>
            </div>
          </div>
          
          <div class="project-block">
            <div class="project-blockimg"> <img src="http://curdweb.com/navin/fullwidthlider.com/images/slider1.png">
              <div class="text"> <a href="#">This is XYZ Company Website<br>
                <span style="color:#0000FF">View Website</span></a> </div>
            </div>
          </div>
          
          <div class="project-block">
            <div class="project-blockimg"> <img src="http://curdweb.com/navin/fullwidthlider.com/images/slider2.png">
              <div class="text"> <a href="#">This is XYZ Company Website<br>
                <span style="color:#0000FF">View Website</span></a> </div>
            </div>
          </div>
          
          <div class="project-block">
            <div class="project-blockimg"> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/about_1.jpg">
              <div class="text"> <a href="#">This is XYZ Company Website<br>
                <span style="color:#0000FF">View Website</span></a> </div>
            </div>
          </div>
          
          <div class="project-block">
            <div class="project-blockimg"> <img src="http://www.curdweb.com/wp-content/uploads/2014/12/jquery-plugins-1024x512.jpg">
              <div class="text"> <a href="#">This is XYZ Company Website<br>
                <span style="color:#0000FF">View Website</span></a> </div>
            </div>
          </div>
          
          <div class="project-block">
            <div class="project-blockimg"> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/event_1.jpg">
              <div class="text"> <a href="#">This is XYZ Company Website<br>
                <span style="color:#0000FF">View Website</span></a> </div>
            </div>
          </div>
          
          <div class="project-block">
            <div class="project-blockimg"> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_1-1024x512.jpg">
              <div class="text"> <a href="#">This is XYZ Company Website<br>
                <span style="color:#0000FF">View Website</span></a> </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="left-part2">
        <h2>Skills</h2>
        <p>Photoshop</p>
        <span class="rework">96%</span>
        <div class="progressbar"></div>
        <p>Html5</p>
        <span class="rework">80%</span>
        <div class="progressbar2"></div>
        <p>Css3</p>
        <span class="rework">85%</span>
        <div class="progressbar3"></div>
        <p>Jquery</p>
        <span class="rework">70%</span>
        <div class="progressbar4"></div>
        <p>Javascript</p>
        <span class="rework">60%</span>
        <div class="progressbar5"></div>
        <p>PHP</p>
        <span class="rework">99%</span>
        <div class="progressbar6"></div>
        <h5>Testimonials</h5>
        <div class="testi">
          <div class="testipic"> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_1-1024x512.jpg"> </div>
          
          <div class="testi-article">
            <p>This is tistimonial phase where other people will write there view about you</p>
          </div>
          
        </div>
        
        <h5>Services</h5>
        <ul>
          <li>Graphics Design</li>
          <li>Web Design</li>
          <li>CMS Website development</li>
          <li>Template Design</li>
        </ul>
      </div>
      
    </div>
    
  </div>
  
  <div class="footer">©copyright Reserved ABC</div>
</div>

</body>
</html>

Create Style.css

@charset "utf-8";
body {
	background:#333;
}
.main-wrapper {
	padding:20px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4096ee+0,4096ee+100;Blue+Flat+%232 */
background: rgb(64,150,238); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(64, 150, 238, 1) 0%, rgba(64, 150, 238, 1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(64, 150, 238, 1)), color-stop(100%, rgba(64, 150, 238, 1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(64, 150, 238, 1) 0%, rgba(64, 150, 238, 1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(64, 150, 238, 1) 0%, rgba(64, 150, 238, 1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(64, 150, 238, 1) 0%, rgba(64, 150, 238, 1) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(64, 150, 238, 1) 0%, rgba(64, 150, 238, 1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4096ee', endColorstr='#4096ee', GradientType=0 ); /* IE6-9 */
	margin:auto;
	overflow:auto;
}
.second-container {
	margin:auto;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#feffff+0,ddf1f9+35,a0d8ef+100;Blue+3D+%2318 */
background: rgb(254,255,255); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(254, 255, 255, 1) 0%, rgba(221, 241, 249, 1) 35%, rgba(160, 216, 239, 1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(254, 255, 255, 1)), color-stop(35%, rgba(221, 241, 249, 1)), color-stop(100%, rgba(160, 216, 239, 1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(254, 255, 255, 1) 0%, rgba(221, 241, 249, 1) 35%, rgba(160, 216, 239, 1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(254, 255, 255, 1) 0%, rgba(221, 241, 249, 1) 35%, rgba(160, 216, 239, 1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(254, 255, 255, 1) 0%, rgba(221, 241, 249, 1) 35%, rgba(160, 216, 239, 1) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(254, 255, 255, 1) 0%, rgba(221, 241, 249, 1) 35%, rgba(160, 216, 239, 1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#a0d8ef', GradientType=0 ); /* IE6-9 */
}
.menu-left {
	width:21%;
	float:left;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#feffff+0,ddf1f9+35,a0d8ef+100;Blue+3D+%2318 */
background: rgb(254,255,255); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(254, 255, 255, 1) 0%, rgba(221, 241, 249, 1) 35%, rgba(160, 216, 239, 1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(254, 255, 255, 1)), color-stop(35%, rgba(221, 241, 249, 1)), color-stop(100%, rgba(160, 216, 239, 1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(254, 255, 255, 1) 0%, rgba(221, 241, 249, 1) 35%, rgba(160, 216, 239, 1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(254, 255, 255, 1) 0%, rgba(221, 241, 249, 1) 35%, rgba(160, 216, 239, 1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(254, 255, 255, 1) 0%, rgba(221, 241, 249, 1) 35%, rgba(160, 216, 239, 1) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(254, 255, 255, 1) 0%, rgba(221, 241, 249, 1) 35%, rgba(160, 216, 239, 1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#a0d8ef', GradientType=0 ); /* IE6-9 */
}
.menu-left h2, h5, h6 {
	padding:10px;
}
.menu-left ul {
	padding:0px;
	margin:0px;
}
.menu-left ul li {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f7fbfc+0,d9edf2+3,04b6e2+90 */
background: rgb(247,251,252); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(247, 251, 252, 1) 0%, rgba(217, 237, 242, 1) 3%, rgba(4, 182, 226, 1) 90%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(247, 251, 252, 1)), color-stop(3%, rgba(217, 237, 242, 1)), color-stop(90%, rgba(4, 182, 226, 1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(247, 251, 252, 1) 0%, rgba(217, 237, 242, 1) 3%, rgba(4, 182, 226, 1) 90%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(247, 251, 252, 1) 0%, rgba(217, 237, 242, 1) 3%, rgba(4, 182, 226, 1) 90%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(247, 251, 252, 1) 0%, rgba(217, 237, 242, 1) 3%, rgba(4, 182, 226, 1) 90%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(247, 251, 252, 1) 0%, rgba(217, 237, 242, 1) 3%, rgba(4, 182, 226, 1) 90%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7fbfc', endColorstr='#04b6e2', GradientType=0 ); /* IE6-9 */
	display: block;
	list-style-type: none;
	margin: 10px;
	padding: 11px;
	text-decoration: none;
}
.menu-left ul li a {
	color:#333333;
	text-decoration:none;
}
.menu-left ul li a:hover {
	text-decoration:none;
	color:#0099FF;
}
.right-main-container {
	/*padding:10px;*/
/*background:#919191;*/
margin:auto;
	overflow:auto;
}
.left-part {
	width: 65%;
	padding:10px;
	overflow:auto;
	/*background:#ddd;*/
float: left;
}
.left-part2 {
	width: 30%;
	padding:10px;
	/*background:#ccc;*/
float: left;
}
.about {
	height:48px;
	width:100%;
	margin:auto;/*background:#6F6F6F;*/
}
.about p {
	font-family: tahoma;
	font-size: 29px;
	font-weight: bold;
	/*padding: 20px;*/
    text-align: center;
	text-shadow: 1px 2px 1px #fff;
}
.about img {
	width:100%;
	height:100%;
	margin:auto;
}
.details-about {
	height:300px;
	overflow:scroll;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4f85bb+0,4f85bb+100;Blue+3D+%239 */
background: rgb(79,133,187); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(79, 133, 187, 1) 0%, rgba(79, 133, 187, 1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(79, 133, 187, 1)), color-stop(100%, rgba(79, 133, 187, 1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(79, 133, 187, 1) 0%, rgba(79, 133, 187, 1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(79, 133, 187, 1) 0%, rgba(79, 133, 187, 1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(79, 133, 187, 1) 0%, rgba(79, 133, 187, 1) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(79, 133, 187, 1) 0%, rgba(79, 133, 187, 1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f85bb', endColorstr='#4f85bb', GradientType=0 ); /* IE6-9 */
	margin:auto;
	overflow-x: hidden;
}
.details-about h4 {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a9e4f7+0,0fb4e7+100;Ble+3D+%235 */
background: rgb(169,228,247); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(169, 228, 247, 1) 0%, rgba(15, 180, 231, 1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(169, 228, 247, 1)), color-stop(100%, rgba(15, 180, 231, 1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(169, 228, 247, 1) 0%, rgba(15, 180, 231, 1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(169, 228, 247, 1) 0%, rgba(15, 180, 231, 1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(169, 228, 247, 1) 0%, rgba(15, 180, 231, 1) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(169, 228, 247, 1) 0%, rgba(15, 180, 231, 1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7', GradientType=0 ); /* IE6-9 */
	padding:10px;
	color:#0066FF;
	margin-top: 0;
}
.details-about p {
	padding:10px;
	text-align:justify;
}
.projects-view {
	height:400px;
	overflow:auto;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f7fbfc+0,d9edf2+3,04b6e2+90 */
background: rgb(247,251,252); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(247, 251, 252, 1) 0%, rgba(217, 237, 242, 1) 3%, rgba(4, 182, 226, 1) 90%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(247, 251, 252, 1)), color-stop(3%, rgba(217, 237, 242, 1)), color-stop(90%, rgba(4, 182, 226, 1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(247, 251, 252, 1) 0%, rgba(217, 237, 242, 1) 3%, rgba(4, 182, 226, 1) 90%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(247, 251, 252, 1) 0%, rgba(217, 237, 242, 1) 3%, rgba(4, 182, 226, 1) 90%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(247, 251, 252, 1) 0%, rgba(217, 237, 242, 1) 3%, rgba(4, 182, 226, 1) 90%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(247, 251, 252, 1) 0%, rgba(217, 237, 242, 1) 3%, rgba(4, 182, 226, 1) 90%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7fbfc', endColorstr='#04b6e2', GradientType=0 ); /* IE6-9 */
	margin:auto;
}
.projects-view h2 {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a9e4f7+0,0fb4e7+100;Ble+3D+%235 */
background: rgb(169,228,247); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(169, 228, 247, 1) 0%, rgba(15, 180, 231, 1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(169, 228, 247, 1)), color-stop(100%, rgba(15, 180, 231, 1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(169, 228, 247, 1) 0%, rgba(15, 180, 231, 1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(169, 228, 247, 1) 0%, rgba(15, 180, 231, 1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(169, 228, 247, 1) 0%, rgba(15, 180, 231, 1) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(169, 228, 247, 1) 0%, rgba(15, 180, 231, 1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7', GradientType=0 ); /* IE6-9 */
	color: #ccc;
	margin: 0;
	padding: 10px;
}
.project-block {
	background: #333333;
	float: left;
	height: 106px;
	margin: 5px;
	width: 144px;
}
.project-blockimg {
	width:100%;
	height:100%;
}
.project-blockimg img {
	width:100%;
	height:100%;
	margin:auto;
}
.text {
	width: 141px;
	height: 106px;
	background:#FFF;
	opacity:0;
	margin-top: -106px;
}
.text a {
	color: #000;
	font-size: 14px;
	line-height: 22px;
	text-decoration: none;
}
.project-blockimg:hover .text {
	opacity:0.6;
	text-align:justify;
	color:#000000;
	font-size:10px;
	font-weight:700;
	font-family:"Times New Roman", Times, serif;
	padding:2px;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
	border-bottom-right-radius: 4px;
	margin: 8px!important;
}
.ui-progressbar {
	height: 15px!important;
	overflow: hidden;
	text-align: left;
}
.rework {
	float: right;
}
.testi {
	margin:auto;
	padding:10px;
	background:#0066FF;
	overflow:auto;
}
.testipic {
	height:50px;
	width:50px;
	float:left;
}
.testipic img {
	height:100%;
	width:100%;
	margin:auto;
	background:#006699;
}
.testi-article {
	float: left;
	text-align: left;
	width: 70%;
	margin-left:10px;
}
.testi-article p {
	margin-top:0px;
}
.footer {
	padding:10px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a9e4f7+0,0fb4e7+100;Ble+3D+%235 */
background: rgb(169,228,247); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(169, 228, 247, 1) 0%, rgba(15, 180, 231, 1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(169, 228, 247, 1)), color-stop(100%, rgba(15, 180, 231, 1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(169, 228, 247, 1) 0%, rgba(15, 180, 231, 1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(169, 228, 247, 1) 0%, rgba(15, 180, 231, 1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(169, 228, 247, 1) 0%, rgba(15, 180, 231, 1) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(169, 228, 247, 1) 0%, rgba(15, 180, 231, 1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7', GradientType=0 ); /* IE6-9 */
}

/*-------------------------------Responsive code here----------------------------------*/
@media screen and (min-device-width: 320px) and (max-device-width: 768px) {
.menu-left {
width: 100%!important;
float:none!important;
}
.left-part {
width: 92%!important;
}
.project-block {
 width: 95%!important;
}
.text {
width: 100%!important;
}
.left-part2 {
 width: 92%!important;
}
}

Wednesday 1 July 2015

Responsive Portfolio Template