A Pitted Olive w/o Pimento

In this example below you will see how to do a A Pitted Olive w/o Pimento with some HTML / CSS and Javascript

This awesome code was written by StevenVentimiglia, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright StevenVentimiglia ©


  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>A Pitted Olive w/o Pimento</title>
  <meta name="keywords" content="Codepen, Template, HTML, Emmet, CSS, Sass, CSS Reset, Normalize, jQuery, jQuery UI, Modernizr"
<meta name="author" content="Steven E. Ventimiglia">
<meta name="description" content="Basic frame template for my pens on Codepen."
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css'>

      <link rel="stylesheet" href="css/style.css">



  <div id="mainContainer">
	<div class="wrapper">
		<div class="page">
			<div class="content">
				<div id="olive_body"></div>
				<div id="olive_shadow"></div>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script>




/*Downloaded from https://www.codeseek.co/StevenVentimiglia/a-pitted-olive-witho-pimento-aYEBvW */
@import "https://s3-us-west-2.amazonaws.com/s.cdpn.io/183117/general.css";
body {
  background: #666;

.page {
  position: relative;

#olive_body {
  z-index: 1000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #98981b;
#olive_body::before {
  content: ' ';
  display: block;
  position: absolute;
  top: 6.6666666667px;
  right: 16px;
  width: 50px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transform: rotate(20deg);
#olive_body::after {
  content: ' ';
  display: block;
  position: absolute;
  top: 16px;
  right: 20px;
  width: 46px;
  height: 22px;
  border-radius: 50%;
  background: #7b7b00;
  transform: rotate(22deg);
  opacity: 0.85;
#olive_shadow {
  position: absolute;
  top: 60.25%;
  left: 50%;
  transform: translate(-50%, -60.25%);
  width: 100px;
  height: 10px;
  border-radius: 50%;
  background: #000;
  opacity: 0.15;