Skip to content

Instantly share code, notes, and snippets.

@LukeXF

LukeXF/csgo.php

Last active August 29, 2015 14:24
Show Gist options
  • Save LukeXF/ed2220e804885e2c924d to your computer and use it in GitHub Desktop.
Save LukeXF/ed2220e804885e2c924d to your computer and use it in GitHub Desktop.
Download ZIP
CSGO Store CSS - http://demo.luke.sx/csgo/
Raw
csgo.php
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link href='//fonts.googleapis.com/css?family=Open+Sans:700,400|Roboto:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<?php
function gunTile($title, $grade, $image, $price, $suggestedPrice, $link = "#")
{
echo '
<div class="col-md-3 col-xs-6">
<a><div class="gun-tile">
<h2>' . $title . '</h2>
<h4>' . $grade . '</h4>
<img src="images/' . $image . '">
<div class="price-overlay">
<h1><i class="fa fa-shield"></i> ' . number_format($price) . '</h1>
<h3>Suggested Price: <i class="fa fa-shield"></i> ' . number_format($suggestedPrice) . '</h3>
</div>
</div></a>
</div>
';
}
?>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12"><h1 class="intro">Skin Pricing Table Overview</h1></div>
<div class="col-md-3 col-xs-6">
<a href="#"><div class="gun-tile">
<h2>MAC-10 | Nuclear Garden (Factory New)</h2>
<h4>Mil-Spec Grade GSM</h4>
<img src="images/mac-10.png">
<div class="price-overlay">
<h1><i class="fa fa-shield"></i> 200</h1>
<h3>Suggested Price: <i class="fa fa-shield"></i> 192</h3>
</div>
</div></a>
</div>
<div class="col-md-3 col-xs-6">
<a href="#"><div class="gun-tile">
<h2>Flip Knife | Doppler (Factory New)</h2>
<h4>Covert Knife</h4>
<img src="images/knife.png">
<div class="price-overlay">
<h1><i class="fa fa-shield"></i> 12,500</h1>
<h3>Suggested Price: <i class="fa fa-shield"></i> 14,382</h3>
</div>
</div></a>
</div>
<div class="col-md-3 col-xs-6">
<a href="#"><div class="gun-tile">
<h2>AK-47 | Case Hardened (Minimal Wear)</h2>
<h4>Classified Rifle</h4>
<img src="images/ak.png">
<div class="price-overlay">
<h1><i class="fa fa-shield"></i> 55,300</h1>
<h3>Suggested Price: <i class="fa fa-shield"></i> 3,012</h3>
</div>
</div></a>
</div>
<div class="col-md-3 col-xs-6">
<a href="#"><div class="gun-tile">
<h2>MAC-10 | Nuclear Garden (Factory New) </h2>
<h4>Mil-Spec Grade GSM</h4>
<img src="images/mac-10.png">
<div class="price-overlay">
<h1><i class="fa fa-shield"></i> 200</h1>
<h3>Suggested Price: <i class="fa fa-shield"></i> 192</h3>
</div>
</div></a>
</div>
<?php gunTile("StatTrak™ M4A4 | Howl (Minimal Wear)", "StatTrak™ Contraband Rifle", "m4a4.png", 92000, 81000); ?>
<?php gunTile("MAC-10 | Nuclear Garden (Factory New)", "Mil-Spec Grade GSM", "mac-10.png", 200, 192); ?>
<?php gunTile("StatTrak™ M4A4 | Howl (Minimal Wear)", "StatTrak™ Contraband Rifle", "m4a4.png", 92000, 81000); ?>
<?php gunTile("Flip Knife | Doppler (Factory New)", "Covert Knife", "knife.png", 12500, 14382); ?>
<div class="col-xs-12 disclaimer">All images and content used here belong to their respective owners, this is just an example and I hold no copyright or ownership of the image used.</div>
</div>
</div>
<script type="text/javascript">
$(document).on("click",".row .gun-tile",function(){
if (!$(this).hasClass("trusted")) {
// $(".gun-tile").removeClass("trusted");
// $(".gun-tile *").removeClass("hidden");
$(this).addClass("trusted");
$(this).children().addClass("hidden");
}
});
</script>
</body>
</html>
Raw
style.css
body {
background-color: #0D1015;
margin: 20px auto;
}
.disclaimer, .intro {
text-align: center;
color: #999;
font-weight: 300;
}
a:hover {
text-decoration: none;
}
/* TILE CODE BELOW */
.gun-tile, .gun-tile:hover, .gun-tile *, .gun-tile:hover * {
transition: border-color .30s ease-out;
-moz-transition: border-color .30s ease-out;
-webkit-transition: border-color .30s ease-out;
transition: background-color .30s ease-out;
-moz-transition: background-color .30s ease-out;
-webkit-transition: background-color .30s ease-out;
}
.gun-tile {
border-radius: 5px;
background-color: #080F18;
border: 1px solid #022D3E;
color: #eee;
font-family: "Open Sans";
padding: 10px;
margin: 10px auto;
min-height: 300px;
}
.gun-tile h2 {
font-size: 12px;
margin: 0px auto;
color: #ddd;
}
.gun-tile h4 {
font-size: 10px;
color: #999;
}
.gun-tile img {
height: 200px;
margin: auto;
display: block;
max-width: 100%;
}
.gun-tile .price-overlay {
background-color: rgba(0, 0, 0, 0.35);
margin: -75px -10px -10px;
padding: 20px 10px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
font-family: "Roboto";
text-align: center;
z-index: 10;
position: relative;
display: block;
}
.gun-tile .price-overlay h1 {
margin: 5px auto -20px;
font-weight: bold;
}
.gun-tile .price-overlay h3 {
font-size: 12px;
color: #ddd;
}
.gun-tile:hover {
border: 1px solid #084963;
}
.gun-tile:hover .price-overlay {
background-color: rgba(0, 0, 0, 0.75);
}
.gun-tile:hover h1 {
color: #F1F1F1;
}
.gun-tile:hover h4 {
color: #828282;
}
.gun-tile.trusted {
text-align: center;
font-size: 14px;
padding-top: 132px;
font-weight: bold;
font-family: Roboto;
text-transform: uppercase;
}
.gun-tile.trusted:after {
content: "Trading";
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment