cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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.

Quick-add: + add another resource

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.

Quick-add: + add another resource

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.

            
              <body data-spy="scroll" data-target=".navbar-collapse">
  <header>
    <link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

  </header>

  <div class="pageOne" id="home">

    <div class="navbar navbar-default navbar-fixed-top">
      <div class="container">

        <div class="navbar-header">

          <a href="#" class="navbar-brand headera">Oleg Malinovsky</a>

          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

            <span class="sr-only">Toggle Navigation</span>

            <span class="glyphicon glyphicon-search"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

        </div>

        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#home">Contact</a></li>
            <li><a href="#aboutme">About Oleg</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
          </ul>
        </div>
      </div>
    </div>

    <div class="container" id="bg">
    <h1 class="text-center mainname">Oleg Malinovsky</h1>
      <h4 class="page-header text-center">On adventure to the future</h4>
    <div class="btnlist text-center">
      <a class="btn btn-default" href="https://twitter.com/olegitoweb" target="_blank">Twitter</a>
      <a class="btn btn-default" href="https://github.com/Cerberussian" target="_blank">GitHub</a>
      <a class="btn btn-default" href="https://www.linkedin.com/profile/view?id=AAIAABv46Y4BcFdTgZt6cF4FHx80gsp_ovareio&trk=nav_responsive_tab_profile_pic" target="_blank">Linkedin</a>
      <a class="btn btn-default" href="https://www.freecodecamp.com/cerberussian" target="_blank">FreeCodeCamp</a>
    </div>
    </div>
    
    <div class="bgmarger"></div>
    
    <!--end of pageOne container-->
  </div>
  
  
  
  <div class="pageTwo" id="aboutme"> 
    <div class="container">
      
      <div class="row">
    <div class="maincontentabout col-xs-12 col-sm-6 col-md-8">
    <h1 class="text-center abouth page-header">About Oleg</h1>
    <p class="text-center aboutp">
      <br>Hello to you!<br>
      I'm 26 years old and about to finish BA in Psychology.<br><br>
      Through last year I have taught myself Python (<a href="http://www.codecademy.com" target="_blank"> codecademy.com</a>, <a href="http://learnpythonthehardway.org/" target="_blank">learn python the hard way</a>), Java (<a href="http://www.udemy.com" target="_blank"> udemy.com</a>) and now I took interest in web development through <a href="http://www.udemy.com" target="_blank">udemy</a> and <a href="www.freecodecamp.com/cerberussian" target="_blank">freecodecamp.com</a> (this site is a direct result of it).<br><br>
      
      This is my portfolio site I plan to update with projects I do throught my adventure in coding!<br><br>You are welcome to follow and <a href="#home">contact me</a> on <a href="https://twitter.com/olegitoweb" target="_blank">twitter</a> or by <a href="mailto:olegitoweb@gmail.com?Subject=Hello%20from%20olegito.com!" target="_blank">mail</a><br><br>
      
    </p>
      </div> <!--main content about-->
        
        <img src="http://www.olegito.com/images/me.jpg" class="img-thumbnail img-responsive col-md-4 hidden-xs">
        
      
      </div> <!--row-->
      
    </div> <!--container end-->
    
      
   <div class="bgmarger"></div>
    <!--end of pageTwo container-->
  </div>
  
  <div class="pageThree" id="portfolio">
    <div class="container">
      
      
        <h1 class="text-center portfolioh page-header">Portfolio</h1>
      
    
      <div class="row adventures">
  <div class="col-xs-6 col-md-4">
    <a href="#" class="thumbnail adventuresthumb">
      <img src="http://www.olegito.com/images/adventuredwarfs.jpg" alt="Adventure Is In Progress">
    </a>
  </div>
  <div class="col-xs-6 col-md-4">
    <a href="#" class="thumbnail adventuresthumb">
      <img src="http://www.olegito.com/images/adventureprincess.jpg" alt="Adventure Is In Progress">
    </a>
  </div>
  <div class="col-xs-6 col-md-4">
    <a href="#" class="thumbnail adventuresthumb">
      <img src="http://www.olegito.com/images/adventuredragon.jpg" alt="Adventure Is In Progress">
    </a>
    
  </div>
</div>
      
      
      
    
    <!--end of pageThree container-->
      <div class="text-center">
        <button type="button" id="totop" class="btn btn-default"><a href="#home">Back to the top!</a></button>
      </div>
    </div>
    <div class="bgmarger"></div>
  </div>

            
          
!
            
              body {
  background-color: white;
  font-family: Lobster;
  padding: 0;
  margin:0;
}

a {
  color: #337ab7 !important;
}

.bgmarger {
  padding-top: 70px;
  padding-bottom: 70px;
}

.pageOne {
  background:url("http://www.olegito.com/images/pbg1.jpg") no-repeat center center fixed;
  background-size: cover;
  margin:0;
  padding: 0;
}

.headera {
  font-size: 2em !important;
}

.navbar-nav{
  font-size: 1.5em;
}

.mainname {
  margin-top: 140px;
  margin-bottom: -20px;
  font-size: 5.5em;
  color: 	#FFFFFF;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;  
}

h4 {
  font-size: 1.8em;
  font-family: Open Sans;
  color: 	#FFFFFF;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;  
  
}

.btn-default {
  color: #337ab7;
  font-size: 1.3em;
  margin: 5px;
}

.pageTwo {
 background:url("http://www.olegito.com/images/pbg7.jpg");
 background-size: cover;
}

.abouth {
  padding: 110px 0 0 0;
  margin:0;
  font-size: 4em;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #FFFFFF,
    -1px 1px 0 #FFFFFF,
    1px 1px 0 #000;  
}

.aboutp {
  margin-top: 10px;
  background-color: white;
  font-family: Open Sans;
  font-size:1.8em;
  color: #505050;
  border: 1px solid black;
  box-shadow: 4px 4px 1px rgba(0,0,0,0.6);
}

.img-thumbnail {
  margin-top: 260px;
  margin-left: 50px;
  width: 250px;
  border: 1px solid black;
  box-shadow: 4px 4px 1px rgba(0,0,0,0.6);
}

.pageThree {
 background:url("http://www.olegito.com/images/pbg5.jpg") no-repeat center center fixed;
 background-size: cover;
}

.portfolioh {
  font-size: 4em;
  color: 	#FFFFFF;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

.adventures {
  margin-top: 100px;
  margin-bottom: 50px;
}

.adventuresthumb {
  transition: 2s;
}

.adventuresthumb:hover {
  transition: 0.3s;
  box-shadow: 10px 10px 5px rgb(0,0,0);
}

#totop {
  margin-top: 30px;
}
            
          
!
999px
Loading ..................

Console