qjRvwx

index.html

<meta name="viewport" content="width=device-width, initial-scale=1">


<div class="container-fluid bg">

  <h3 class="text-center">Who Am I ?</h3>

  <div class="div1 text-center">
    <div class="div2">
    </div>
    <h3 class="text-center">I'm an adventurer</h3>
  </div>
</div>


<div class="text-center div3">
  <div class="row">
    <div class="col-xs-6">
      <h3>University I study in:</h3>
    </div>
    <div class="col-xs-6">
      <h3>What do I do?</h3>
    </div>
  </div>
</div>

<div style="margin:5%;">
  <h3 class="text-center"><strong>My Portfolio</strong></h3>
  <div>

    <div class="row">
      <div class="col-xs-4">
        <div class="polaroid">
          <img src="http://dailyblogvlog.com/wp-content/uploads/2017/02/cover-1.jpg" alt="Norway" style="width:100%">
          <div>
            <p class="text-center" style="padding:1%;"><strong>A Tribute Page</strong></p>
          </div>
        </div>
      </div>

      <div class="col-xs-4">
        <div class="polaroid">
          <img src="http://dailyblogvlog.com/wp-content/uploads/2017/02/cover-1.jpg" alt="Norway" style="width:100%">
          <div>
            <p class="text-center" style="padding:1%;"><strong>The Troll's tongue in Hardanger, Norway</strong></p>
          </div>
        </div>
      </div>

      <div class="col-xs-4">
        <div class="polaroid">
          <img src="http://dailyblogvlog.com/wp-content/uploads/2017/02/cover-1.jpg" alt="Norway" style="width:100%">
          <div>
            <p class="text-center" style="padding:1%;"><strong>The Troll's tongue in Hardanger, Norway</strong></p>
          </div>
        </div>
      </div>

qjrvwx.markdown

qjRvwx

A Pen by aakash karat thazhathethil on CodePen.

License.

style.css

.div1{
  margin-top:-25%;
  margin-bottom:-25%
}

.div2{
 background-image:url(https://www.pets4homes.co.uk/images/articles/889/large/information-about-birds-for-potential-pet-bird-owners-51d087e027333.jpg);

border-radius:50%;
padding:20% 5% 20% 5%;
margin:30%;  
background-size:100% 100%;
animation-name:fadeIn;
animation-duration:3s;
 

}

.div2:hover {
    border-radius:0;
    transition-timing-function: ease-in 2s;
}

.div3{
      background-color: #474e5d; /* Dark Blue */
      color: #ffffff;

}


.bg
{
   background-color: #1abc9c; 
   color: #ffffff;  
}

.img{
 margin:auto;
 display:block;
 width:50%;
 padding:2%;
}

  .bg-2 { 
      background-color: #474e5d; /* Dark Blue */
      color: #ffffff;
      margin:;
  }
  .bg-3 { 
      background-color: #ffffff; /* White */
      color: #555555;
  }


.polaroid {
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}




@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" rel="stylesheet" />