Skip to content

Instantly share code, notes, and snippets.

@StickmanNinja

StickmanNinja/pyramid.html

Last active September 12, 2018 22:03
Show Gist options
  • Save StickmanNinja/27b4f46626b512d0bc520178e3f98100 to your computer and use it in GitHub Desktop.
Save StickmanNinja/27b4f46626b512d0bc520178e3f98100 to your computer and use it in GitHub Desktop.
Download ZIP
A circular image portfolio page built using Bootstrap framework.
Raw
pyramid.html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body, html {width: 100%; height: 100%; margin: 0px;}
h1 {text-align: center;}
article {width: 100%; height: 20vh; margin-top 20%;}
img {
border-radius: 100%;
height: 130px;
width: 130px;
display: block;
margin-left: auto;
margin-right: auto;
transition-duration: .1s;
-webkit-box-shadow: -1px 10px 23px -2px rgba(173,173,173,1);
-moz-box-shadow: -1px 10px 23px -2px rgba(173,173,173,1);
box-shadow: -1px 10px 23px -2px rgba(173,173,173,1);
}
img:hover {
width: 140px;
height: 140px;
transition-duration: .1s;
-webkit-box-shadow: 0px 10px 18px 0px rgba(173,173,173,1);
-moz-box-shadow: 0px 10px 18px 0px rgba(173,173,173,1);
box-shadow: 0px 10px 18px 0px rgba(173,173,173,1);
}
</style>
</head>
<body>
<h1>Social Media Pyramid</h1>
<article class = "container">
<br>
<br>
<div class="row">
<div class="col-xs-3"></div>
<div class="col-xs-2"></div>
<div class="col-xs-2"><img src = "http://byt2.com/images/pro/medium-logo.png"></div>
<div class="col-xs-2"></div>
<div class="col-xs-3"></div>
</div>
</article>
<article class = "container">
<div class="row">
<div class="col-xs-2"></div>
<div class="col-xs-2"></div>
<div class="col-xs-2"><img src = "https://www.shareicon.net/download/2015/10/02/110737_twitter2.svg"></div>
<div class="col-xs-2"><img src = "https://i0.wp.com/www.vectorico.com/wp-content/uploads/2018/02/LinkedIn-Icon.png?resize=300%2C300"></div>
<div class="col-xs-2"></div>
</div>
</article>
<article class = "container">
<div class="row">
<div class="col-xs-3"></div>
<div class="col-xs-2"><img src = "https://uploads-ssl.webflow.com/5a9e6c4d3dd0520001f5b761/5abe2249cb75403fe5d29c68_009-github-logo.svg"></div>
<div class="col-xs-2"><img src = "https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/facebook_circle-512.png"></div>
<div class="col-xs-2"><img src = "https://www.shareicon.net/data/512x512/2016/11/22/855163_video_512x512.png"></div>
<div class="col-xs-3"></div>
</div>
</article>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment