A Pen by aakash karat thazhathethil on CodePen.
Created
June 25, 2017 05:41
-
-
Save anonymous/73801390254fdd8044a512be36e48d3c to your computer and use it in GitHub Desktop.
qjRvwx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment