Zhenmao/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Tesoro & Amistades</title>
	<link href="https://fonts.googleapis.com/css?family=Arapey|Vollkorn" rel="stylesheet">
	<style>
		body {
			font-family: 'Vollkorn', serif;
			font-size: 14px;
		}

		h1 {
			font-family: 'Arapey', serif;
			text-transform: uppercase;
			font-size: 2.5rem;
		}

		.container {
			margin: 30px;
		}

		.title-row {
			display: flex;
			position: relative;
			justify-content: center;
		}

		.logo-container {
			position: absolute;
			top: 0;
			left: 0;
		}

		#logo-img {
			width: 225px;
		}

		.ring-row {
			display: flex;
			flex-wrap: wrap;
			align-items: flex-end;
			justify-content: center;
		}

		@media only screen and (max-width: 1024px) {
			.title-row {
				flex-direction: column;
				align-items: center;
				text-align: center;
			}

			.logo-container {
				position: static;
			}
		}
	</style>
	<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
	<div class="container">
		<div class="title-row">
			<div class="logo-container"><img src="/Sebslara_Tesoro_Amistades_png_1_225x_2x.png" alt="logo" id="logo-img"></div>
			<div><h1>Tabla de tallas para anillos</h1></div>
		</div>
		<div class="ring-row"></div>
	</div>
	<script>
		var sizes = [
			{ size: 3, measure: 13.3 },
			{ size: 3.5, measure: 13.9 },
			{ size: 4, measure: 14.6 },
			{ size: 4.5, measure: 15.0 },
			{ size: 5, measure: 15.7 },
			{ size: 5.5, measure: 16.0 },
			{ size: 6, measure: 16.5 },
			{ size: 6.5, measure: 17.0 },
		];

		var muteColor = "#F0F0F0",
				highlightColor = "#45AED5",
				measureColor = "#000";

		var margin = { top: 20, right: 10, bottom: 50, left: 10 };

		var x = d3.scaleLinear()
				.domain([0, 25])
				.range([0, 200]);

		var g = d3.select(".ring-row")
			.selectAll("div")
			.data(sizes)
			.enter().append("div")
				.attr("class", "ring-div")
			.append("svg")
				.attr("width", function(d) {
					d.diameter = x(d.measure);
					return d.diameter + margin.left + margin.right;
				})
				.attr("height", function(d) {
					return d.diameter + margin.top + margin.bottom;
				})
			.append("g")
				.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

		var gRing = g.append("g")
				.attr("transform", function(d) {
					return "translate(" + d.diameter / 2 + "," + d.diameter / 2 + ")";
				})
				.style("pointer-events", "all");

		gRing.append("circle")
				.attr("r", function(d) {
					return d.diameter / 2;
				})
				.style("fill", muteColor)
				.on("mouseover", highlight)
				.on("mouseout", unhighlight);

		gRing.append("text")
				.attr("y", "-0.6rem")
				.style("font-size", "1.5rem")
				.style("text-anchor", "middle")
				.text("Talla")
				.style("pointer-events", "none");

		gRing.append("text")
				.attr("y", "1rem")
				.style("font-size", "1.5rem")
				.style("text-anchor", "middle")
				.text(function(d) {
					return d.size;
				})
				.style("pointer-events", "none");

		gMeasure = g.append("g")
				.attr("class", "measure")
				.attr("transform", function(d) {
					return "translate(0," + (d.diameter + 10) + ")";
				});

		gMeasure.append("circle")
				.attr("r", 3)
				.style("fill", measureColor);

		gMeasure.append("circle")
				.attr("r", 3)
				.attr("cx", function(d) {
					return d.diameter;
				})
				.style("fill", measureColor);

		gMeasure.append("line")
				.attr("x2", function(d) {
					return d.diameter;
				})
				.style("stroke-width", 1.5)
				.style("stroke", measureColor);

		gMeasure.append("text")
				.attr("x", function(d) {
					return d.diameter / 2;
				})
				.attr("y", 20)
				.style("text-anchor", "middle")
				.style("font-size", "1.5rem")
				.text(function(d) {
					return d.measure + "mm";
				});

		function highlight() {
			var gHover = d3.select(this.parentNode);
			gHover.select("circle")
				.transition()
					.style("fill", highlightColor);
			gHover.selectAll("text")
				.transition()
					.style("fill", "#fff");
		}

		function unhighlight() {
			var gHover = d3.select(this.parentNode);
			gHover.select("circle")
				.transition()
					.style("fill", muteColor);
			gHover.selectAll("text")
				.transition().
					style("fill", "#000");
		}
	</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Tesoro & Amistades</title>
	<link href="https://fonts.googleapis.com/css?family=Arapey\|Vollkorn" rel="stylesheet">
	<style>
	body {
	font-family: 'Vollkorn', serif;
	font-size: 14px;
	}

	h1 {
	font-family: 'Arapey', serif;
	text-transform: uppercase;
	font-size: 2.5rem;
	}

	.container {
	margin: 30px;
	}

	.title-row {
	display: flex;
	position: relative;
	justify-content: center;
	}

	.logo-container {
	position: absolute;
	top: 0;
	left: 0;
	}

	#logo-img {
	width: 225px;
	}

	.ring-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: center;
	}

	@media only screen and (max-width: 1024px) {
	.title-row {
	flex-direction: column;
	align-items: center;
	text-align: center;
	}

	.logo-container {
	position: static;
	}
	}
	</style>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	</head>
	<body>
	<div class="container">
	<div class="title-row">
	<div class="logo-container"><img src="/Sebslara_Tesoro_Amistades_png_1_225x_2x.png" alt="logo" id="logo-img"></div>
	<div><h1>Tabla de tallas para anillos</h1></div>
	</div>
	<div class="ring-row"></div>
	</div>
	<script>
	var sizes = [
	{ size: 3, measure: 13.3 },
	{ size: 3.5, measure: 13.9 },
	{ size: 4, measure: 14.6 },
	{ size: 4.5, measure: 15.0 },
	{ size: 5, measure: 15.7 },
	{ size: 5.5, measure: 16.0 },
	{ size: 6, measure: 16.5 },
	{ size: 6.5, measure: 17.0 },
	];

	var muteColor = "#F0F0F0",
	highlightColor = "#45AED5",
	measureColor = "#000";

	var margin = { top: 20, right: 10, bottom: 50, left: 10 };

	var x = d3.scaleLinear()
	.domain([0, 25])
	.range([0, 200]);

	var g = d3.select(".ring-row")
	.selectAll("div")
	.data(sizes)
	.enter().append("div")
	.attr("class", "ring-div")
	.append("svg")
	.attr("width", function(d) {
	d.diameter = x(d.measure);
	return d.diameter + margin.left + margin.right;
	})
	.attr("height", function(d) {
	return d.diameter + margin.top + margin.bottom;
	})
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var gRing = g.append("g")
	.attr("transform", function(d) {
	return "translate(" + d.diameter / 2 + "," + d.diameter / 2 + ")";
	})
	.style("pointer-events", "all");

	gRing.append("circle")
	.attr("r", function(d) {
	return d.diameter / 2;
	})
	.style("fill", muteColor)
	.on("mouseover", highlight)
	.on("mouseout", unhighlight);

	gRing.append("text")
	.attr("y", "-0.6rem")
	.style("font-size", "1.5rem")
	.style("text-anchor", "middle")
	.text("Talla")
	.style("pointer-events", "none");

	gRing.append("text")
	.attr("y", "1rem")
	.style("font-size", "1.5rem")
	.style("text-anchor", "middle")
	.text(function(d) {
	return d.size;
	})
	.style("pointer-events", "none");

	gMeasure = g.append("g")
	.attr("class", "measure")
	.attr("transform", function(d) {
	return "translate(0," + (d.diameter + 10) + ")";
	});

	gMeasure.append("circle")
	.attr("r", 3)
	.style("fill", measureColor);

	gMeasure.append("circle")
	.attr("r", 3)
	.attr("cx", function(d) {
	return d.diameter;
	})
	.style("fill", measureColor);

	gMeasure.append("line")
	.attr("x2", function(d) {
	return d.diameter;
	})
	.style("stroke-width", 1.5)
	.style("stroke", measureColor);

	gMeasure.append("text")
	.attr("x", function(d) {
	return d.diameter / 2;
	})
	.attr("y", 20)
	.style("text-anchor", "middle")
	.style("font-size", "1.5rem")
	.text(function(d) {
	return d.measure + "mm";
	});

	function highlight() {
	var gHover = d3.select(this.parentNode);
	gHover.select("circle")
	.transition()
	.style("fill", highlightColor);
	gHover.selectAll("text")
	.transition()
	.style("fill", "#fff");
	}

	function unhighlight() {
	var gHover = d3.select(this.parentNode);
	gHover.select("circle")
	.transition()
	.style("fill", muteColor);
	gHover.selectAll("text")
	.transition().
	style("fill", "#000");
	}
	</script>
	</body>
	</html>