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="front-face">
							<h2 class="typography-tile-iphone">Created by Apple.<br>Powered by iPhone.</h2>
							<figure class="image-built-for-iphone" data-component-list="Parallax" data-anim-start="t - 100vh" data-anim-end="b" data-translate-y="5h,-15h" style="transform: matrix(1, 0, 0, 1, 0, -129.6);"></figure>
							<button class="icon-wrapper flip-tile-button open-tile" tabindex="-1" data-analytics-title="open | built for iphone" data-analytics-click="prop3:open | built for iphone" data-analytics-intrapage-link="">
			<i class="icon icon-plussolid" tabindex="0"></i>
			<span class="visuallyhidden">Open to read more about Built for iPhone</span>
		</button>
						</div>
						<div...

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;
}