Hacked up Apple Product Page Design

by Nicholas Berlette

HTML

<link rel="stylesheet" href="https://www.apple.com/ac/ac-films/6.7.1/styles/modal.css">
<link rel="stylesheet" href="https://www.apple.com/ac/globalfooter/7/en_US/styles/ac-globalfooter.built.css">
<link rel="stylesheet" href="https://www.apple.com/v/apple-card/h/built/styles/main-overview.built.css">
<link rel="stylesheet" href="https://www.apple.com/v/apple-card/h/built/styles/overview.built.css">
<script type="text/javascript" src="https://www.apple.com/v/apple-card/h/built/scripts/main.built.js" crossorigin></script>
<script type="text/javascript" src="https://www.apple.com/v/apple-card/h/built/scripts/head.built.js" crossorigin></script>
<script type="text/javascript" src="https://www.apple.com/metrics/data-relay/1.1.4/scripts/data-relay.js" crossorigin></script>
<section class="section section-tiles-grid" data-component-list="TileFlip Modal">
			<div class="section-content">
				<div class="tiles-container">
					<div class="tile-overlay"></div>
					<div class="tile full built-iphone appear animate" data-tile-id="built-iphone" data-tile-type="tile-flip" data-anim-keyframes="[{&quot;start&quot;: &quot;a0t - 70vh&quot;, &quot;end&quot;: &quot;a0b&quot;}]" data-component-list="TriggerAnimation" data-analytics-section-engagement="name:built for iphone" tabindex="0">
						<div class="back-face">
							<h2 class="typography-tile-iphone">Apple Products<br> <br> </h2>
							<figure class="image-built-for-iphone" data-component-list="Parallax" data-anim-start="t" data-anim-end="b" data-translate-y="5h,-15h" style="transform: matrix(1, 0, 0, 1, 0, -129.6);"></figure>
						</div>
						<div role="dialog" class="front-face image-layout built-iphone" aria-labelledby="headline-built-iphone">
							<div class="content-column">
								<h2 id="headline-built-iphone" tabindex="0" class="typography-tile-frontface-content frontface-headline">Built for iPhone</h2>
								<p class="typography-tile-frontface-content frontface-copy">Apple&nbsp;Card lives on your iPhone, in...

CSS

.card.green {
  background: 
    -webkit-radial-gradient(5% 5%, ellipse, #7bcf6a 0%, rgba(123, 207, 106, 0) 75%)
  , -webkit-radial-gradient(95% 5%, ellipse, #aec154 0%, rgba(174, 193, 84, 0) 75%)
  , -webkit-radial-gradient(95% 95%, ellipse, #68a9bb 0%, rgba(104, 169, 187, 0) 75%)
  , -webkit-radial-gradient(5% 95%, ellipse, #5fc28a 0%, rgba(95, 194, 138, 0) 75%);
  
  background: 
    radial-gradient(ellipse at 5% 5%, #7bcf6a 0%, rgba(123, 207, 106, 0) 75%)
  , radial-gradient(ellipse at 95% 5%, #aec154 0%, rgba(174, 193, 84, 0) 75%)
  , radial-gradient(ellipse at 95% 95%, #68a9bb 0%, rgba(104, 169, 187, 0) 75%)
  , radial-gradient(ellipse at 5% 95%, #5fc28a 0%, rgba(95, 194, 138, 0) 75%);
  -webkit-filter: saturate(1.2); filter: saturate(1.2);
  color: #fff;
  opacity: 1;
}