FC Gallery

<!DOCTYPE html>
<html lang="en">

	<head>
	<meta charset="UTF-8">
	<link rel="shortcut icon" href="{Favicon}">
    <link rel="alternate" type="application/rss+xml" href="{RSS}">
   <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
	<title>{Title}</title>

	<style>

		body {
			background-color:#970044;
			  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTjmEP75B7-D-BstBWtoiXuzQY81n3pbWmv4Q&usqp=CAU);
		  background-blend-mode:color-burn;
		}

.container-main{
	padding:0 20px 0 20px;
	width:75%;
	margin: 0 auto;
}

 .card-columns {
        -webkit-column-count:1;
        -moz-column-count:1;
        column-count:1;


    }

.card{
	margin: 0 10px 0 10px;
}

.card-title{
	font-size:25px;
	color:#ecbcc8;
	text-shadow: 2px 2px #000000;
}

ul{
	text-align:right;
}

.jumbotron{
	background-color:#970044;
	color:	#f2eef1;
	padding:2px;
	border:none;
}

.jumbotron a{
	color:	#ecbcc8;
}

.navbar{
	width:300px;
	margin-left:76%;
}

.navbar ul li{
	display:inline-block;
}

span{
position:absolute;
	margin-top:380px;
}

.btn{
	font-size: 10px;
	background-color:#00000070;
	border:1px white solid;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.btn:hover {
  background-color: #000000;
  color: white;
  border: 1px solid #943b5a;
}


	</style>
</head>

<body>


<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1>HKF's Faceclaim Gallery </h1>
    	<p>200x400 Avatars free to use <br>
    	    please credit me
    	</p>

    	<nav class="navbar">
  			<ul>
   				 <li class="nav-item">
    				  <a class="nav-link" href="/">Home</a>
    			</li>
    			<li class="nav-item">
    				  <a class="nav-link" href="https://hkfthemes.tumblr.com" target="blank_">Theme</a>
    			</li>
  </ul>

</nav>
</div>
</div>


<div class="container-main card-columns">

	<!--
 	<div class="card" style="width:250px">
 		<img class="card-img-top" src="IMAGE URL">
 		 <div class="card-img-overlay">
 		 <span>
 		 	<h4 class="card-title">NAME OF FACECLAIM</h4>
 		 	<a href="URL TO REDIRECT" class="btn btn-primary">See More</a>
 		 <span>
 	 </div>
	</div>
--->

<!---->
 	<div class="card" style="width:250px">
 		<img class="card-img-top" src="https://64.media.tumblr.com/dfb4f0186a7508889262349ad0eb1423/9841cefe10743994-7f/s250x400/573df39b1ec036a2f958968d900cba8ccb1c2ac0.png">
 		 <div class="card-img-overlay">
 			<span>
 				 <h4 class="card-title">Brittany Curran</h4>
 		 		 <a href="https://hkfthemes.tumblr.com/search/brittany%20curran" class="btn btn-primary">See More</a>
 			</span>
 	 </div>
	</div>
<!---->

<!---->
 	<div class="card" style="width:250px">
 		<img class="card-img-top" src="https://64.media.tumblr.com/4d028d00b0ba0f191723175d6da64501/c9f76b5a2a8e31fc-ac/s250x400/45f525d9ef8cb95854c3304757a4abe502a29db0.png">
 		 <div class="card-img-overlay">
 		 	<span>
 		 		<h4 class="card-title">Hale Appleman</h4>
 		 		 <a href="https://hkfthemes.tumblr.com/search/hale%20appleman"class="btn btn-primary">See More</a>
 		 	</span>
 	 </div>
	</div>
<!---->

<!---->
 	<div class="card" style="width:250px">
 		<img class="card-img-top" src="https://64.media.tumblr.com/e0b1cc9008ab815bd005b09d1725dba9/b5365b2a8bc49166-7b/s250x400/547349634833f1997034d7a9943ba0a052b56b31.png">

 		 <div class="card-img-overlay">	<span>
 		 <h4 class="card-title">Jason Ralph</h4>
 		  <a href="https://hkfthemes.tumblr.com/search/jason%20ralph" class="btn btn-primary">See More</a>
 		<span>
 	 </div>
	</div>
<!---->
<!---->
 	<div class="card" style="width:250px">
 		<img class="card-img-top" src="https://64.media.tumblr.com/ac0058294a12494f782fc82f466f1f2b/9b58ea39b4588a62-3d/s250x400/bfe0f8c6808bc45cafa1494188bf01c9ed1c95f3.png">

 		 <div class="card-img-overlay"><span>
 		 <h4 class="card-title">Stella Maeve</h4>
 		   <a href="https://hkfthemes.tumblr.com/search/stella%20maeve" class="btn btn-primary">See More</a>
 		 <span>
 	 </div>
	</div>
<!---->

<!---->
 	<div class="card" style="width:250px">
 		<img class="card-img-top" src="https://64.media.tumblr.com/b86fc6b153cae12b79a1d732de0ba0e1/11a6c473e4a2ac9a-c1/s250x400/cb839a94762e186299a76e8fa13b35aef0c072a9.png">
 		 <div class="card-img-overlay">
 		 <span>
 		 <h4 class="card-title">Summer Bishil</h4>
 		  <a href="https://hkfthemes.tumblr.com/search/summer%20bishil" class="btn btn-primary">See More</a>
 		<span>
 	 </div>
	</div>
<!---->


</div>


</body>
</html>