Responsive Website Design: Responsive Single Page Portfolio Template

Create index.html

Put these codes in head part

this code is for Navigation

this is remaining body part code

<div class="main-wrapper">
  <div class="main">
    <p> Hi I am Ram, I am Freelancer UI/UX Designer,Frontend, Web Developer. </p>
  </div>
  
  <div class="about"> <a name="a1">
    <h2>About</h2>
    </a>
    <p>I am Expertise in UI/UX Design and Development.
      I have 3 Year Experience in UI/UX Design and Development,
      and good experience in PSD to Html conversion.</p>
    <p>I have good hands on Wordpress,prestashop PHP CMS Framework, Wireframing,Logo Design,Banner Design</p>
    <p>Good knowledge to develop Responsive Website design, good skills in Html5,css3,Jquery,Javascript,Angularjs</p>
    <p>I Know SEO(search Engine Optimization), content writting</p>
  </div>
  
  <div class="expertise"> <a name="a2">
    <h2>Expertise</h2>
    </a>
    
    <ul class="progress-new">
      
      <li data-name="Wordpress" data-percent="80%">
        <svg viewBox="-10 -10 220 220">
          <g fill="none" stroke-width="3" transform="translate(100,100)">
            <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"/>
            <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"/>
            <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"/>
            <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"/>
            <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"/>
            <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"/>
          </g>
        </svg>
        <svg viewBox="-15 -11 237 225">
          <path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="81"></path>
        </svg>
      </li>
      
      <li data-name="HTML5 Skill" data-percent="87%">
        <svg viewBox="-10 -10 220 220">
          <g fill="none" stroke-width="2" transform="translate(100,100)">
            <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"/>
            <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"/>
            <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"/>
            <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"/>
            <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"/>
            <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"/>
          </g>
        </svg>
        <svg viewBox="-15 -11 237 225">
          <path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="547"></path>
        </svg>
      </li>
      
      <li data-name="jQuery Skill" data-percent="75%">
        <svg viewBox="-10 -10 220 220">
          <g fill="none" stroke-width="12" transform="translate(100,100)">
            <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"/>
            <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"/>
            <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"/>
            <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"/>
            <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"/>
            <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"/>
          </g>
        </svg>
        <svg viewBox="-15 -11 237 225">
          <path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="81"></path>
        </svg>
      </li>
      
      <li data-name="Photoshop Skill" data-percent="85%">
        <svg viewBox="-10 -10 220 220">
          <g fill="none" stroke-width="2" transform="translate(100,100)">
            <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"/>
            <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"/>
            <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"/>
            <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"/>
            <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"/>
            <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"/>
          </g>
        </svg>
        <svg viewBox="-15 -11 237 225">
          <path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="547"></path>
        </svg>
      </li>
      
      <li data-name="Responsive" data-percent="90%">
        <svg viewBox="-10 -10 220 220">
          <g fill="none" stroke-width="2" transform="translate(100,100)">
            <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"/>
            <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"/>
            <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"/>
            <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"/>
            <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"/>
            <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"/>
          </g>
        </svg>
        <svg viewBox="-15 -11 237 225">
          <path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="547"></path>
        </svg>
      </li>
      
      <li data-name="UI Skill" data-percent="97%">
        <svg viewBox="-10 -10 220 220">
          <g fill="none" stroke-width="9" transform="translate(100,100)">
            <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"/>
            <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"/>
            <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"/>
            <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"/>
            <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"/>
            <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"/>
          </g>
        </svg>
        <svg viewBox="-15 -11 237 225">
          <path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="610"></path>
        </svg>
      </li>
      
      <li data-name="PHP Skill" data-percent="80%">
        <svg viewBox="-10 -10 220 220">
          <g fill="none" stroke-width="6" transform="translate(100,100)">
            <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"/>
            <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"/>
            <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"/>
            <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"/>
            <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"/>
            <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"/>
          </g>
        </svg>
        <svg viewBox="-15 -11 237 225">
          <path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="364"></path>
        </svg>
      </li>
      
      <li data-name="CSS Skill" data-percent="95%">
        <svg viewBox="-10 -10 220 220">
          <g fill="none" stroke-width="6" transform="translate(100,100)">
            <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"/>
            <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"/>
            <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"/>
            <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"/>
            <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"/>
            <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"/>
          </g>
        </svg>
        <svg viewBox="-15 -11 237 225">
          <path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="629"></path>
        </svg>
      </li>
    </ul>
    
    <svg width="0" height="0">
      <defs>
        <linearGradient id="cl1" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
          <stop stop-color="#618099"/>
          <stop offset="100%" stop-color="#8e6677"/>
        </linearGradient>
        <linearGradient id="cl2" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1">
          <stop stop-color="#8e6677"/>
          <stop offset="100%" stop-color="#9b5e67"/>
        </linearGradient>
        <linearGradient id="cl3" gradientUnits="objectBoundingBox" x1="1" y1="0" x2="0" y2="1">
          <stop stop-color="#9b5e67"/>
          <stop offset="100%" stop-color="#9c787a"/>
        </linearGradient>
        <linearGradient id="cl4" gradientUnits="objectBoundingBox" x1="1" y1="1" x2="0" y2="0">
          <stop stop-color="#9c787a"/>
          <stop offset="100%" stop-color="#817a94"/>
        </linearGradient>
        <linearGradient id="cl5" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0">
          <stop stop-color="#817a94"/>
          <stop offset="100%" stop-color="#498a98"/>
        </linearGradient>
        <linearGradient id="cl6" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0">
          <stop stop-color="#498a98"/>
          <stop offset="100%" stop-color="#618099"/>
        </linearGradient>
        <linearGradient id="cl7" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0">
          <stop stop-color="#498a98"/>
          <stop offset="100%" stop-color="#618099"/>
        </linearGradient>
      </defs>
    </svg>
    
  </div>
  
  <div class="projects"> <a name="a3">
    <h2>Projects</h2>
    </a>
    
    <div id="musiciansCarousel" class="carousel slide">
      
      <div class="carousel-inner">
        <div class="active item"> <a href="#"><img src="http://www.curdweb.com/wp-content/uploads/2014/08/event_1.jpg"></a> </div>
        <div class="item"> <a href="#"><img src="http://curdweb.com/navin/click.com/images/slider/slider4.png"></a> </div>
        <div class="item"> <a href="#"><img src="http://curdweb.com/navin/click.com/images/slider/slider5.png"></a> </div>
        <div class="item"> <a href="#"><img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_2-1024x512.jpg"></a> </div>
        <div class="item"> <a href="#"><img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_1-1024x512.jpg"></a> </div>
      </div>
      
      <a class="carousel-control left" href="#musiciansCarousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#musiciansCarousel" data-slide="next">›</a> </div>
    
  </div>
  
  <div class="Experience"> <a name="a4">
    <h2>TimeLine</h2>
    </a>
    <div class="container">
      
      <ul class="timeline">
        <li>
          <div class="timeline-badge"><i class="glyphicon glyphicon-check"></i></div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4 class="timeline-title">Education</h4>
              <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p>
            </div>
            <div class="timeline-body">
              <p>BCA - XYZ COLLEGE India</p>
              <p>MCA - XYZ COLLEGE India</p>
            </div>
          </div>
        </li>
        <li class="timeline-inverted">
          <div class="timeline-badge warning"><i class="glyphicon glyphicon-credit-card"></i></div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4 class="timeline-title">Experiences</h4>
            </div>
            <div class="timeline-body">
              <p>2013-2014 Company - XYZ</p>
              <p>2014-2015 Company - XYZ</p>
            </div>
          </div>
        </li>
        <li>
          <div class="timeline-badge danger"><i class="glyphicon glyphicon-credit-card"></i></div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4 class="timeline-title">Skills</h4>
            </div>
            <div class="timeline-body">
              <p>Website Design and Development</p>
              <p>Responsive Website Design</p>
              <p>Mobile Website Design</p>
              <p>Wordpress Website Design</p>
            </div>
          </div>
        </li>
        <li class="timeline-inverted">
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4 class="timeline-title">Personel Details</h4>
            </div>
            <div class="timeline-body">
              <p>Name :- Ram Kumar</p>
              <p>Address :- Bangalore</p>
              <p>Current Company :- XYZ</p>
            </div>
          </div>
        </li>
        <li>
          <div class="timeline-badge info"><i class="glyphicon glyphicon-floppy-disk"></i></div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4 class="timeline-title">Our contributions</h4>
            </div>
            <div class="timeline-body">
              <p>Resposive Website Blog</p>
              <p>Jqueryui blog</p>
              <p>Bootstrap Blog</p>
            </div>
          </div>
        </li>
        <li>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4 class="timeline-title">Interest</h4>
            </div>
            <div class="timeline-body">
              <p>Photography</p>
              <p>Playing Guitar</p>
              <p>Painting</p>
              <p>Sketch</p>
            </div>
          </div>
        </li>
        <li class="timeline-inverted">
          <div class="timeline-badge success"><i class="glyphicon glyphicon-thumbs-up"></i></div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4 class="timeline-title">Latest Projects</h4>
            </div>
            <div class="timeline-body">
              <p>Shopping Cart</p>
              <p>Portfolio Design</p>
              <p>Company Website</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
  
  
</div>

Create Style.css

@charset "utf-8";
body {
	background:#333;
}
.header {
	/*padding:20px;*/
margin:auto;
	background:#ccc;
}
.main-wrapper {
	padding:10px;
	margin:auto;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a7cfdf+0,23538a+100;Blue+3d+%238 */
background: rgb(167,207,223); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(167, 207, 223, 1) 0%, rgba(35, 83, 138, 1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(167, 207, 223, 1)), color-stop(100%, rgba(35, 83, 138, 1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(167, 207, 223, 1) 0%, rgba(35, 83, 138, 1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(167, 207, 223, 1) 0%, rgba(35, 83, 138, 1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(167, 207, 223, 1) 0%, rgba(35, 83, 138, 1) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(167, 207, 223, 1) 0%, rgba(35, 83, 138, 1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a', GradientType=0 ); /* IE6-9 */
}
.main {
	padding:20px;
	margin:auto;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cedce7+0,596a72+100;Grey+3D+%231 */
background: #cedce7; /* Old browsers */
	background: -moz-linear-gradient(top, #cedce7 0%, #596a72 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cedce7), color-stop(100%, #596a72)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #cedce7 0%, #596a72 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #cedce7 0%, #596a72 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #cedce7 0%, #596a72 100%); /* IE10+ */
	background: linear-gradient(to bottom, #cedce7 0%, #596a72 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#596a72', GradientType=0 ); /* IE6-9 */
}
.main p {
	color: #333;
	font-family: tahoma;
	font-size: 22px;
	font-style: italic;
	font-weight: bold;
	text-align: center;
	text-shadow: 1px 2px 1px #fff;
}
.main h2 {
	text-align:center;
	padding:10px;
	color:#0099FF;
}
.about {
	padding:20px;
	margin:auto;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eeeeee+0,eeeeee+100;Grey+Flat */
background: #eeeeee; /* Old browsers */
	background: -moz-linear-gradient(top, #eeeeee 0%, #eeeeee 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #eeeeee)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #eeeeee 0%, #eeeeee 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #eeeeee 0%, #eeeeee 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #eeeeee 0%, #eeeeee 100%); /* IE10+ */
	background: linear-gradient(to bottom, #eeeeee 0%, #eeeeee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee', GradientType=0 ); /* IE6-9 */
}
.about h2 {
	text-align:center;
	padding:10px;
	color:#0099FF;
}
.expertise {
	padding:20px;
	margin:auto;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7d7e7d+0,0e0e0e+100;Black+3D */
background: rgb(125,126,125); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(125, 126, 125, 1) 0%, rgba(14, 14, 14, 1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(125, 126, 125, 1)), color-stop(100%, rgba(14, 14, 14, 1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(125, 126, 125, 1) 0%, rgba(14, 14, 14, 1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(125, 126, 125, 1) 0%, rgba(14, 14, 14, 1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(125, 126, 125, 1) 0%, rgba(14, 14, 14, 1) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(125, 126, 125, 1) 0%, rgba(14, 14, 14, 1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e', GradientType=0 ); /* IE6-9 */
	overflow:auto;
}
.expertise h2 {
	text-align:center;
	padding:10px;
	color:#0099FF;
}
.projects {
	padding:20px;
	margin:auto;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eeeeee+0,eeeeee+100;Grey+Flat */
background: #eeeeee; /* Old browsers */
	background: -moz-linear-gradient(top, #eeeeee 0%, #eeeeee 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #eeeeee)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #eeeeee 0%, #eeeeee 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #eeeeee 0%, #eeeeee 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #eeeeee 0%, #eeeeee 100%); /* IE10+ */
	background: linear-gradient(to bottom, #eeeeee 0%, #eeeeee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee', GradientType=0 ); /* IE6-9 */
}
.projects h2 {
	text-align:center;
	padding:10px;
	color:#0099FF;
}
.Experience {
	padding:20px;
	margin:auto;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cedce7+0,596a72+100;Grey+3D+%231 */
background: #cedce7; /* Old browsers */
	background: -moz-linear-gradient(top, #cedce7 0%, #596a72 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cedce7), color-stop(100%, #596a72)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #cedce7 0%, #596a72 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #cedce7 0%, #596a72 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #cedce7 0%, #596a72 100%); /* IE10+ */
	background: linear-gradient(to bottom, #cedce7 0%, #596a72 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#596a72', GradientType=0 ); /* IE6-9 */
}
.Experience h2 {
	text-align:center;
	padding:10px;
	color:#0099FF;
}
.contact {
	padding:20px;
	margin:auto;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#45484d+0,000000+100;Black+3D+%231 */
background: #45484d; /* Old browsers */
	background: -moz-linear-gradient(top, #45484d 0%, #000000 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #45484d), color-stop(100%, #000000)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #45484d 0%, #000000 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #45484d 0%, #000000 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #45484d 0%, #000000 100%); /* IE10+ */
	background: linear-gradient(to bottom, #45484d 0%, #000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000', GradientType=0 ); /* IE6-9 */
}
.contact h2 {
	text-align:center;
	padding:10px;
	color:#0099FF;
}
.myaddressmap {
	padding:20px;
	border:2px solid #fff;
	margin:auto;
}
.footer {
	padding:20px;
	margin:auto;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#45484d+0,000000+100;Black+3D+%231 */
background: #45484d; /* Old browsers */
	background: -moz-linear-gradient(top, #45484d 0%, #000000 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #45484d), color-stop(100%, #000000)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #45484d 0%, #000000 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #45484d 0%, #000000 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #45484d 0%, #000000 100%); /* IE10+ */
	background: linear-gradient(to bottom, #45484d 0%, #000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000', GradientType=0 ); /* IE6-9 */
}
.footer p {
	text-align:center;
	color:#fff;
}

/*circular processbar css starts here*/
/* Load animation */

@-webkit-keyframes load {
0% {
stroke-dashoffset:0
}
}
@-moz-keyframes load {
0% {
stroke-dashoffset:0
}
}
@keyframes load {
0% {
stroke-dashoffset:0
}
}
/* Container */

.progress-new {
	position: relative;
	display: inline-block;
	padding: 0;
	text-align: center;
}
/* Item */

.progress-new>li {
	display: inline-block;
	position: relative;
	text-align: center;
	color: #93A2AC;
	font-family: Lato;
	font-weight: 100;
	/*margin: 2rem;*/
  margin: 23px;
}
.progress-new>li:before {
	content: attr(data-name);
	position: absolute;
	width: 100%;
	bottom: -2rem;
	font-weight: 400;
}
.progress-new>li:after {
	content: attr(data-percent);
	position: absolute;
	width: 100%;
	top: 3.7rem;
	left: 0;
	font-size: 2rem;
	text-align: center;
}
.progress-new svg {
	width: 10rem;
	height: 10rem;
}
 .progress-new svg:nth-child(2) {
 position: absolute;
 left: 0;
 top: 0;
 transform: rotate(-90deg);
 -webkit-transform: rotate(-90deg);
 -moz-transform: rotate(-90deg);
 -ms-transform: rotate(-90deg);
}
 .progress-new svg:nth-child(2) path {
 fill: none;
 stroke-width: 25;
 stroke-dasharray: 629;
 stroke: rgba(255, 255, 255, 0.9);
 -webkit-animation: load 10s;
 -moz-animation: load 10s;
 -o-animation: load 10s;
 animation: load 10s;
}
/*--------------------------------------slider css starts here--------------------------------------*/
.carousel {
	position: relative;
	margin-bottom: 20px;
	line-height: 1;
}
.carousel-inner {
	position: relative;
	width: 100%;
	overflow: hidden;
}
.carousel .item {
	position: relative;
	display: none;
	-webkit-transition: 0.6s ease-in-out left;
	-moz-transition: 0.6s ease-in-out left;
	-o-transition: 0.6s ease-in-out left;
	transition: 0.6s ease-in-out left;
}
.carousel .item > img {
	display: block;
	line-height: 1;
}
.carousel .active, .carousel .next, .carousel .prev {
	display: block;
}
.carousel .active {
	left: 0;
}
.carousel .next, .carousel .prev {
	position: absolute;
	top: 0;
	width: 100%;
}
.carousel .next {
	left: 100%;
}
.carousel .prev {
	left: -100%;
}
.carousel .next.left, .carousel .prev.right {
	left: 0;
}
.carousel .active.left {
	left: -100%;
}
.carousel .active.right {
	left: 100%;
}
.carousel-control {
	position: absolute;
	top: 45%; /*little change here*/
	left: 15px;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	font-size: 60px;
	font-weight: 100;
	line-height: 30px;
	color: #ffffff;
	text-align: center;
	background: #222222;
	border: 3px solid #ffffff;
	-webkit-border-radius: 23px;
	-moz-border-radius: 23px;
	border-radius: 23px;
	opacity: 0.5;
	filter: alpha(opacity=50);
}
.carousel-control.right {
	right: 15px;
	left: auto;
}
.carousel-control:hover {
	color: #ffffff;
	text-decoration: none;
	opacity: 0.9;
	filter: alpha(opacity=90);
}
.carousel-caption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 15px;
	background: #333333;
	background: rgba(0, 0, 0, 0.75);
}
.carousel-caption h4, .carousel-caption p {
	line-height: 20px;
	color: #ffffff;
}
.carousel-caption h4 {
	margin: 0 0 5px;
}
.carousel-caption p {
	margin-bottom: 0;
}
.carousel-inner {
	overflow: hidden;
	width: 100%;
	position: relative;
}
/*---------------------------------------contacts css here----------------------------------------------*/
.contact-button-here {
	padding:10px;
	margin:auto;
	text-align:center;
	background:#000;
}
/*------------------------------------timeline css code here------------------------------------------------*/
.timeline {
	list-style: none;
	padding: 20px 0 20px;
	position: relative;
}
.timeline:before {
	top: 0;
	bottom: 0;
	position: absolute;
	content: " ";
	width: 3px;
	background-color: #eeeeee;
	left: 50%;
	margin-left: -1.5px;
}
.timeline > li {
	margin-bottom: 20px;
	position: relative;
}
.timeline > li:before, .timeline > li:after {
	content: " ";
	display: table;
}
.timeline > li:after {
	clear: both;
}
.timeline > li:before, .timeline > li:after {
	content: " ";
	display: table;
}
.timeline > li:after {
	clear: both;
}
.timeline > li > .timeline-panel {
	width: 46%;
	float: left;
	border: 1px solid #d4d4d4;
	border-radius: 2px;
	padding: 20px;
	position: relative;
	-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}
.timeline > li > .timeline-panel:before {
	position: absolute;
	top: 26px;
	right: -15px;
	display: inline-block;
	border-top: 15px solid transparent;
	border-left: 15px solid #ccc;
	border-right: 0 solid #ccc;
	border-bottom: 15px solid transparent;
	content: " ";
}
.timeline > li > .timeline-panel:after {
	position: absolute;
	top: 27px;
	right: -14px;
	display: inline-block;
	border-top: 14px solid transparent;
	border-left: 14px solid #fff;
	border-right: 0 solid #fff;
	border-bottom: 14px solid transparent;
	content: " ";
}
.timeline > li > .timeline-badge {
	color: #fff;
	width: 50px;
	height: 50px;
	line-height: 50px;
	font-size: 1.4em;
	text-align: center;
	position: absolute;
	top: 16px;
	left: 50%;
	margin-left: -25px;
	background-color: #999999;
	z-index: 100;
	border-top-right-radius: 50%;
	border-top-left-radius: 50%;
	border-bottom-right-radius: 50%;
	border-bottom-left-radius: 50%;
}
.timeline > li.timeline-inverted > .timeline-panel {
	float: right;
}
.timeline > li.timeline-inverted > .timeline-panel:before {
	border-left-width: 0;
	border-right-width: 15px;
	left: -15px;
	right: auto;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
	border-left-width: 0;
	border-right-width: 14px;
	left: -14px;
	right: auto;
}
.timeline-badge.primary {
	background-color: #2e6da4 !important;
}
.timeline-badge.success {
	background-color: #3f903f !important;
}
.timeline-badge.warning {
	background-color: #f0ad4e !important;
}
.timeline-badge.danger {
	background-color: #d9534f !important;
}
.timeline-badge.info {
	background-color: #5bc0de !important;
}
.timeline-title {
	margin-top: 0;
	color: inherit;
}
.timeline-body > p, .timeline-body > ul {
	margin-bottom: 0;
}
.timeline-body > p + p {
	margin-top: 5px;
}
.glyphicon {
	display: inline-block;
	font-family: "Glyphicons Halflings";
	font-style: normal;
	font-weight: 400;
	line-height: 1;
	position: relative;
	top: 13px!important;
}
/*--------------------------------------------------navbar css code-----------------------------------------------*/
.navbar {
	border: 1px solid transparent;
	margin-bottom:0px!important;
	min-height: 50px;
	position: relative;
}
.navbar {
	border-radius: 0px!important;
}
.lefty2 {
	color: #fcf;
	content: "^";
	float: right;
}
/*---------------------------------------------back to top css ----------------------------------------------*/
/*Main stylesheet for Backtop jQuery Plugin */
#backTop {
	width:35px;
	height:35px;
	padding:10px;
	border-radius:4px;
	text-indent:-9999px;
	cursor:pointer;
	z-index:999999999;
	display:none;
	box-sizing:content-box;
	-webkit-box-sizing:content-box;
}
#backTop.white {
	background:url(img/uparr-48-b.png) no-repeat center center rgba(255, 255, 255, 0.8);
	border:1px solid #ccc;
}
#backTop.black {
	background:url(img/uparr-48-w.png) no-repeat center center rgba(0, 0, 0, 0.8);
	border:1px solid #ccc;
}
#backTop.red {
	background:url(img/uparr-48-w.png) no-repeat center center rgba(217, 97, 81, 0.9);
	border:1px solid #fff;
}
#backTop.green {
	background:url(img/uparr-48-b.png) no-repeat center center rgba(81, 217, 187, 0.9);
	border:1px solid #fff;
}

Thursday 2 July 2015

Responsive Single Page Portfolio Template

Create index.html

Put these codes in head part

this code is for Navigation

Create Style.css

No comments:

Post a Comment