Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <head><title>sapktoasabin</title></head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- main container -->
<div class="container-fluid text-center" id="container">
  <!-- nav bar-->
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
 <div class="navbar-header">
   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
     <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
   </button>
   <a id="navbar-brand" href="#about" style="text-decoration:none">sabinsapkota</a>
   </div>
    <div class="collapse navbar-collapse" id="myNavbar">
     <ul class="nav navbar-nav navbar-right" id="text">
       <li><a href="#about">ABOUT</a></li>
       <li><a href="#qualities">QUALITIES</a></li>
       <li><a href="#skills">SKILLS</a></li>
       <li><a href="#contacts">CONTACT</a></li>
      </ul>
    </div>
    </div>
  </nav>
  <!-- cover-->
  <div id="headline">
    <div id="covertitle">"a tech savvy person with enterpreneurial mind<br>working towards innovation"</div>
  </div>
  <!-- body after nav and cover-->
  <div class="container-body">
    <!--about-->
  <div id="about">
    <h1>ABOUT ME</h1>
    <div class="row" id="about-text">
      <div class="col-md-4">
        <h2>MY STORY </h2>
        With both technical and creative skills and mindset, I strive to make user-friendly and ease-of-use products. Technology is here for good for human  mankind, and I need to make sure that audience of every level is able to understand the product and take full advantage of it. In addition to that, my experience of living in first world and third world countries helps me to understand the need and wants od the world-wide audiences.<br>
     Currently a Computer Science and Economics student, I am improvising my technical skills in software development and side by side understanding the how the world runs and impact of mass psychology in world economics. I believe that education I am acquiring right now, will help me to produce great product relevant to the economic time and people. 
      </div>
      <div class="col-md-4">
       <img src="http://imageshack.com/a/img924/6909/XJ91vg.jpg" id="box-img">
      </div>
      <div class="col-md-4">
        <h2>  WHAT I'M LOOKING FOR </h2>
        I am always looking for growth and platform to learn more. want to be challenged and be inspired at the same time to work and produce wonderful products. With positive mindset and strong work ethics, I am always ready to learn new skills and receive constructive feedback for my work. Ideally, I want to part of something who knows the 'WHY' of their company. Surrounding your work towards 'WHY' always helps to make a company and help distingush best companies from good ones.
      </div>
    </div>
  </div>
    <!--Qualities-->
    <div id="qualities">
      <h1>QUALITIES</h1>
    <div class="row" id="about-text">
      <div class="col-md-4">
        <span class="glyphicon glyphicon-cog"></span>
        <h2>WORK ETHICS</h2>
       Although this might has been pretty old cliche, this quality of mine helps me to improvise my work and product better everyday. I know the value of hardwork, which is irrepalce regardless of person's abilities or any talent.Strong work ethics helps me to deal woit tough situtations and work load pressure. With strong ethic in my pocket, I can code for hours and hours to produce a better product.
      </div>
      <div class="col-md-4">
    <span class="glyphicon glyphicon-hourglass"></span>
        <h2>FAST LEARNER</h2>
        In today's volatile and challenging world, the most valuable skill one must possess is adaptation. Pretty much like Darwin's theory of evolution, only the fittest survive in today's ever changing economy. To keep up with that, I have been learning the skills to catch up new language and technology preety much faster. With strong programming basics, I can learn new language and technology preety much quickly, which I beleive is the most improtant skill for the programmer of the present time.
      </div>
      <div class="col-md-4">
        <span class="glyphicon glyphicon-thumbs-up"></span></i>
        <h2>  WILL-POWER</h2>
       There are several instances where ypu feel like giving up while programming and my will power keeps me alive in those situations. My  will power doesnot allow me to stop fron solving difficult algorithms or learninbg new languages, despite several failures and fallback. Being a programmer, it is important for me to  have posistive mindset, and always be working on what I am passionate about, i.e making product useful to audience of every kind.
      </div>
    </div>
  </div>
  <!--Skills-->
  <div id="skills">
    
       <h1>SKILLS</h1>
    <div id="skill-body">
    <div class="row">
      <div class="col-xs-1 ">
        HTML5
    </div>
      <div class="col-xs-11">
        <div class="progress">
         <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="87"ria-valuemin="0" aria-valuemax="100" style="width: 90%">
            Strong
            </div>
   </div>
  </div>
</div>
      <div class="row">
      <div class="col-xs-1 ">
        CSS3
    </div>
      <div class="col-xs-11">
        <div class="progress">
         <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="87"ria-valuemin="0" aria-valuemax="100" style="width: 90%">
            Strong
            </div>
   </div>
  </div>
</div>
      <div class="row">
      <div class="col-xs-1 ">
        JavaScript
    </div>
      <div class="col-xs-11">
        <div class="progress">
         <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="87"ria-valuemin="0" aria-valuemax="100" style="width: 84%">
            Strong
            </div>
   </div>
  </div>
      </div>
        <div class="row">
      <div class="col-xs-1 ">
        SQL
    </div>
      <div class="col-xs-11">
        <div class="progress">
         <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="87"ria-valuemin="0" aria-valuemax="100" style="width: 80%">
            Strong
            </div>
   </div>
  </div>
      </div>
          <div class="row">
      <div class="col-xs-1 ">
        AJAX,API
    </div>
      <div class="col-xs-11">
        <div class="progress">
         <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="87"ria-valuemin="0" aria-valuemax="100" style="width: 80%">
            Strong
            </div>
   </div>
  </div>
      </div>
            <div class="row">
      <div class="col-xs-1 ">
        C++
    </div>
      <div class="col-xs-11">
        <div class="progress">
         <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="87"ria-valuemin="0" aria-valuemax="100" style="width: 70%">
            Moderate
            </div>
   </div>
  </div>
      </div>
              <div class="row">
      <div class="col-xs-1 ">
        R
    </div>
      <div class="col-xs-11">
        <div class="progress">
         <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="87"ria-valuemin="0" aria-valuemax="100" style="width: 70%">
            Moderate
            </div>
   </div>
  </div>
              </div>
                <div class="row">
      <div class="col-xs-1 ">
        React
    </div>
      <div class="col-xs-11">
        <div class="progress">
         <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="87"ria-valuemin="0" aria-valuemax="100" style="width: 55%">
            Basic
            </div>
   </div>
  </div>
</div>
                <div class="row">
      <div class="col-xs-1 ">
        Python
    </div>
      <div class="col-xs-11">
        <div class="progress">
         <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="87"ria-valuemin="0" aria-valuemax="100" style="width: 50%">
            Basic
            </div>
   </div>
  </div>
</div>
 <div class="row">
   <div class="col-xs-4" id="certi">
     <h3>Certifications</h3>
     
       -Front End Development by FreeCodeCamp<br>
       -HTML & JavaScript by Microsoft
 
   </div>
   <div class="col-xs-8" id="courses">
     <h3>Relevant Courses</h3>
     <div class="row">
       <div class="col-xs-3">
         -Programming with C++<br>
         -MySQL by Codecademy
     </div>
       <div class="col-xs-3">
         -Data Visualization-EdX<br>
         -React by Codecademy
       </div>
       <div class="col-xs-6">
         -Front End Develoment by FreeCodeCamp<br>
         -Into to HTML & JavaScript by Microsoft
       </div>
      </div>
</div>
</div>
</div>
</div>
  <footer class="container-fluid text-center" id="contacts">
    <div class="row">
      <div class="col-md-10 address">
   sapkotasabin@outlook.com<br>
    300 Hawthorne Road,Spokane<br>
    &#169 Sabin Sapkota 2017
    </div>
     <div class="col-md-2">
       <a href="https://www.linkedin.com/in/sabinsapkota/" class="fa fa-linkedin"></a>
       <a href="https://github.com/sabin20" class="fa fa-github"></a>
       <a href="https://codepen.io/sabin20/" class="fa fa-codepen"></a>
       
      </div>
    </div>

  </div>
</div>
 

    
            
          
!
            
              body{
  color:black;
  font-family:"Trebuchet MS", Helvetica, sans-serif;
}

.navbar{
  background-color: #f4511e;
  font-size:20px;
  line-height:2.4;
  border:0;
  letter-spacing:4px;
  
}

#navbar-brand{
  margin-left:160px;
  color:white;
  text-align:center;
  margin-top:130px;
  
}
.navbar-deafult{
  color:white;
}
#myNavbar{
  margin-right:50px;
}
#text li a{
  color:white;
  margin-left:px;
}

.navbar-nav li a:hover, .navbar-nav li.active a{
  color: #f4511e !important;
    background-color: #fff !important;
}
#headline{
  margin-top:50px;
  width:100%;
  background-image:url(http://imagizer.imageshack.us/a/img922/1553/8yK7AY.jpg);
background-repeat:no-repeat;
  opacity:0.9;
  min-height:130px;
  color:white;
}

#container{
padding:0;

}
#covertitle{
 
  font-size:30px;
  padding-top:22px;
 align-items:center;
  opacity:1.0;
}
#box-img{
  box-shadow:5px 2px 5px grey;
  border-radius:2px;
  margin-top:30px;
}
.container-body{
  
  font-family:"Trebuchet MS", Helvetica, sans-serif;
  font-weight:200;
  font-size:16px;
  margin-top:-19px;
}
h1{
  font-size:40px;
 border-bottom:1px solid black;
  width: 200px;
  margin-left:auto;
  margin-right:auto;
  border-length:30 px;
  margin-top:60 px;
  
  
}

#about{
  background-color:#D7DBDD  ;
  margin-top:40 px;
  padding-top:30px;
  margin-bottom:15 px;
}
#about-text{
  margin-left:30px;
  margin-right:30px;
}
#qualities{
  background-color:#FEF9E7;
}
.glyphicon{
  font-size:80px;
}
#skill-body{
  color:black;
  margin-left:350px;
  margin-right:350px;
}
.progress-bar-danger{
  background-color:red;
}
h3{
  font-size:18px;
}
#courses{
  border:2px solid grey;
}
#certi{
  border:2px solid grey;
  border-radius:2px;
}
#contacts{
  background-color:#393939;
    color:white;
  width:100%;
  margin-top:30px;
}
.address{
  padding-left:340px;
}
.fa{
  padding-top:30px;
  font-size: 50px;
    width: 70px;
    text-align: center;
    text-decoration: none;
  color:#F2F3F4;
  margin-right:-19px;
}
.fa:hover {
    opacity: 0.7;
  
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console