New Projects Showcase

by Spencer Smith

HTML

<div class="item">
  <div class="image" style="background-image: url(http://i.stack.imgur.com/E2JM4.png);"></div>
  <div class="made-with"><!-- http://i.stack.imgur.com/E2JM4.png, http://i.stack.imgur.com/silGW.png background-position:0px -30px; -->
    HTML + CSS <br>
    Javascript
  </div>
  <div class="description">
		<h3>With Blocks</h3>
		<p>Design tool for creating patterns and art</p>
	</div>
</div>
<div class="item">
  <div class="image" style="background-image: url(http://i.stack.imgur.com/Mzqxy.png)"></div>
  <div class="made-with">
    Ruby <br>
    HTML + CSS <br>
    Javascript
  </div>
  <div class="description">
		<h3>taken<strike>taken</strike></h3>
		<p>Domain name availability checker</p>
	</div>
</div>
<div class="item">
  <div class="image"></div>
  <div class="made-with">
    Python <br>
    HTML + CSS <br>
  </div>
  <div class="description"></div>
</div>
<div class="item">
  <div class="image"></div>
  <div class="made-with">
    Swift
  </div>
  <div class="description"></div>
</div>

CSS

*{margin: 0; box-sizing: border-box;}
body{margin: 15px;}
.item{
	float: left;
	margin: 20px 0;
	clear: both;
	cursor: pointer;
	outline: 2px solid transparent;
	transition: all .2s;
}
.item:hover{
	//outline: 10px solid indianred;
	/*box-shadow: 0 4px 8px -4px slategray;
	margin-top: 16px;
	margin-bottom: 24px;*/
	//opacity: .8;
	outline: 2px solid lightgray;
}
.image {
	height: 100px;
	width: 200px;
	background-color: white;
	float: left;
	background-size: cover;
	background-position: center;
}
.made-with{
	padding: 5px;
	float: left;
	font-family: Consolas, monospace;
	color: lightgray;
	min-width: 100px;
	height: 100px;
	background-color: #333;
	box-sizing: border-box;
}
.description{
	float: left;
	clear: both;
	font-family: sans-serif;
	padding: 12px;
	background-color: #e2e2e2;
	width: 100%;
}
.description p{
	margin-top: 6px;
	font-weight: 200;
}

JavaScript

var tags = {
	ruby: {
  	text: "Ruby",
    color: "indianred"
  },
  js: {
  	text: "Javascript",
    color: "gold"
  },
  py: {
  	text: "Python",
    color: "deepskyblue"
  },
  swift: {
  	text: "Swift",
    color: "lightgreen"
  }
}

function replace(tag){
	var re = new RegExp(tag.text, 'gi');
	var result = document.body.innerHTML.replace(re, "<span style='color:" + tag.color + "'>" + tag.text + "</span>");
	document.body.innerHTML = result;
}


for(key in tags){
	replace(tags[key]);
}