Value gain / loss calculator

:
:
% change in value =

Creating button and callout with CSS

button
callout

Creating shapes with CSS

Progress bars

HTML Progress Element

60%

HTML Meter Element

60%

CSS Progress Bar

Code for creating a child theme - style.css

/*
	Theme Name: Perry Sun
	Description: A child theme of Twenty Seventeen for perrysun.com
	Author: Perry Sun
	Author URI: https://perrysun.com
	Template: twentyseventeen
	Version: 1.1.0
*/

Code for creating a child theme - functions.php

<?php
	add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
	function enqueue_parent_styles() {
		wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
	}
?>

CSS Shapes demos

Valentine's Day is one of the major commercialized holidays in the United States, in terms of consumer spending. On this day, which occurs every 14th of February, it's a commonly formalized tradition for loved ones to recognize each other in a romantic way, usually with flowers and gifts, and also with dinner. A reality with dining out on Valentine's Day is that restaurants get very busy and raise their prices by offering exclusive Valentine Day's menu options. For this reason, many choose to celebrate with an intimate meal prepared at home.

Valentine's Day is one of the major commercialized holidays in the United States, in terms of consumer spending. On this day, which occurs every 14th of February, it's a commonly formalized tradition for loved ones to recognize each other in a romantic way, usually with flowers and gifts, and also with dinner. A reality with dining out on Valentine's Day is that restaurants get very busy and raise their prices by offering exclusive Valentine Day's menu options. For this reason, many choose to celebrate with an intimate meal prepared at home.

Valentine's Day is one of the major commercialized holidays in the United States, in terms of consumer spending. On this day, which occurs every 14th of February, it's a commonly formalized tradition for loved ones to recognize each other in a romantic way, usually with flowers and gifts, and also with dinner. A reality with dining out on Valentine's Day is that restaurants get very busy and raise their prices by offering exclusive Valentine Day's menu options. For this reason, many choose to celebrate with an intimate meal prepared at home.

Valentine's Day is one of the major commercialized holidays in the United States, in terms of consumer spending. On this day, which occurs every 14th of February, it's a common tradition for loved ones to recognize each other in a romantic way, usually with flowers and gifts, and also with dinner. A reality with dining out on Valentine's Day is that restaurants get very busy and raise their prices by offering exclusive Valentine Day's menu options. For this reason, many choose to celebrate with an intimate meal prepared at home.

When it comes to producing high quality, fine wines, we generally consider Northern and Central California, France, Italy, Argentina, Australia, and Spain among the best-known regions. But believe it or not, there are regions in Asia also known for winemaking, among them China and Japan. In fact, China is considered to be among the top ten wine markets worldwide. As one of the world's top five in terms of wine consumption, it's no surprise that winemaking is very active in China to meet an ever-increasing demand among a growing public with affluence.

When it comes to producing high quality, fine wines, we generally consider Northern and Central California, France, Italy, Argentina, Australia, and Spain among the best-known regions. But believe it or not, there are regions in Asia also known for winemaking, among them China and Japan. In fact, China is considered to be among the top ten wine markets worldwide. As one of the world's top five in terms of wine consumption, it's no surprise that winemaking is very active in China to meet an ever-increasing demand among a growing public with affluence.

Code presentations

img {
	float: left;
	width: 400px;
	shape-outside: polygon(33% 13.4%, 2.5% 3.55%, 1.85% 100.35%, 52.65% 99.60%, 58.5% 76.1%, 45.75% 62.05%, 39.25% 32.3%);
}
<img src="heart.png" />
<p>Valentine's Day is one of the major commercialized holidays in the United States, in terms of consumer spending.</p>
img {
	float: left;
	shape-outside: url(heart.png);
	shape-margin: 20px;
}
<html>Something goes here... like text long enough to span more than one line...</html>
<script></script>
<img src="heart.png" />
<p>Valentine's Day is one of the major commercialized holidays in the United States, in terms of consumer spending.</p>
img {
	float: left;
	/* These two lines define CSS Shapes */
	shape-outside: url(heart.png);
	shape-margin: 20px;
}
var modOpen = document.getElementsByClassName("modal-click");
// Open the Modal
for (let k = 0; k < modOpen.length; k++) {
modOpen[k].addEventListener("click", function() {
	this.nextElementSibling.style.display = "flex";
	// Prevents background from scrolling
	document.body.classList.add('noscroll');
	bodyScrollLock.disableBodyScroll(this.nextElementSibling);
});
}
// *** Instructs Jetpack to provide the Perry Sun banner for the Open Graph, if there is no image in the post.
function jeherve_custom_image( $media, $post_id, $args ) {
if ( $media ) {
	return $media;
} else {
	$permalink = get_permalink( $post_id );
	$url = apply_filters( 'jetpack_photon_url', 'https://perrysun.com/img/perrysun_banner.jpg' );
	return array( array(
		'type'  => 'image',
		'from'  => 'custom_fallback',
		'src'   => esc_url( $url ),
		'href'  => $permalink,
	) );
}
}
add_filter( 'jetpack_images_get_images', 'jeherve_custom_image', 10, 3 );
<p class="circle">Some products are easy to...</p>
p.circle::before {
	content: "";
	float: left;
	width: 12rem;
	⋮
	height: 12rem;
	/* These two lines define CSS Shapes */
	shape-outside: circle(40%);
	shape-margin: 20px;
	/* These two lines allow the circle to be visualized */
	clip-path: circle(40%);
	background-color: mediumaquamarine;
}
<div class="gradient-left"></div>
<div class="gradient-right"></div>
<p>Valentine's Day is one of the major commercialized holidays in the United States, in terms of consumer spending.</p>
div.gradient-left {
	float: left;
	width: calc(12rem * 1.25);
	height: 12rem;
	background: linear-gradient(140deg, rgba(0,212,255,1) 30%, rgba(9,9,121,0) 50%);
	shape-outside: linear-gradient(140deg, rgba(0,212,255,1) 30%, rgba(9,9,121,0) 50%);
	shape-image-threshold: 0.4;
	}
	/* div.gradient-right is similar except that it's floated to the right and the gradient is -40deg */
	p {
	text-align: justify;
}

Misc testing & demos

North American seafood for sushi
Seafood Origin Sustainability rating
Skipjack tuna US Good
King & snow crab Alaska Best
Lionfish US Best
Arctic char US Best
Halibut Atlantic Avoid
Albacore tuna US Good
Source: Seafood Watch

IBM Plex font in bold typeface.

IBM Plex font in semibold typeface.

IBM Plex font in medium typeface.

IBM Plex font in normal typeface.

IBM Plex font in light typeface.

IBM Plex font in ultra-light typeface.