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 CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

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.

            
              <link href="https://fonts.googleapis.com/css?family=Baloo Bhaina|Nova+Mono|Tangerine" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body style="background-color:#6FB4DB">
<div class="container-fluid">
  <p></p>
  <p></p>
  <p></p>
  <h2 class="text-primary text-center" style="font-family:Baloo Bhaina"><strong> Alexandra Camelia POTRA</strong></h2>
  </body>
  <h2 class="text-center" style="font-family:Tangerine, Cursive; color:yellow"> A great hero for futer!</h2>
  <p></p>
  <p></p>
  <p></p>
  
    <div class="row">
      <div class="col-sm-4">
      </div>
      <div class="col-sm-6">
  <img class ="smaller-image thick-green-border" src="http://cgr.centre.ubbcluj.ro/en/img/members/potra.jpg" alt="AlexandraPotraPic">

      </div>
  </div>
  <p></p>
     <p></p>
      <div class="row">
         <div class="col-sm-2">
        </div>
        
      <div class="col-sm-8">
         <div class="thumbnail" style="background-color:rgba(0, 0, 0, 0.5);">
        <p style="text-align:justify"> If you didn`t know until now who is this beautiful girl, you will discover in the next paragraphs about her. She is a young  Ph.D. geographer, who is pasioned for GIS (Geographical Information System),Regional Geography; Territorial Planning; Digital Mapping; Topography  and you will find out more in the next future when she will rock the world with her new geographic vision in future mapping.</p>
        <p>Let's make a little leap into the biography of this young doctor:</p>
        <p>&#10004; Surely few of you know, but the roots of the Potra family are the same with the great romanian writer Octavian Goga.</p>
        <p>&#10004; In <b>1989</b>, in a small village from the bottom of Vladeasa Mountains,Sacuieu- Romania, born Alexandra. </p>
  <p>&#10004; In <b>2011</b> she completed the courses of the  Faculty of Geography in Cluj Napoca, specialization in cartography.</p>
  
    <p>&#10004; In <b>2013</b> she finished her Master`s degree in Geomatics.Next you can find her first interview for her thesis. </p>
  <p>&#10004; In <b>2017</b> she finished her phD`s degree. <br/>
    
   For more information please click <a href="http://cgr.centre.ubbcluj.ro/en/cv/CV%20Potra%20Alexandra.pdf" target="_blank"> here</a></p>
        </div>
      </div>
    </div>
    
  <div class="col-sm-2">
        </div>
  <div class="col-sm-6">
  <iframe  width="100%" height="315" src="https://www.youtube.com/embed/vDfkbX9QHks" frameborder="0" allowfullscreen></iframe>
  </div>
    
  </div>
<p></p>
<p></p>
<p></p>
<h3 style="text-align:right; font-family:Tangerine,Cursive; color:pink">&bdquo; How could you live, <br/>if you did not learn that the importance of life is given by the actions made,</br> namely by overcoming the threshold that gives you satisfaction ?!&bdquo;</h3>
<footer>
  <hr></hr>
  &copy 2017 Alexandru MARIAN
</footer>
            
          
!
            
              body{
  background-image:url("http://cdn.wonderfulengineering.com/wp-content/uploads/2014/06/earth-wallpapers-16.jpg");
   background-repeat: no-repeat;
    background-attachment:fixed ;
    background-position: center-top; 
}
p  {
  color:white;
}
footer {
  background-color:black;
  color:white;
  text-align:center;
}
.thick-green-border {
    border-color: grey;
    border-width: 5px;
    border-style: solid;
    border-radius: 30%;
  }

  .smaller-image {
    width: 300px;
    
  
p{
  text-indent:50px;
}


            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console