Subscribe to Sports Illustrated

<!DOCTYPE html> <html lang="en"> <head>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="format-detection" content="telephone=no"> <link rel="icon" href="https://assets.emagazines.com/si.ico"/> <title>Subscribe to Sports Illustrated</title> <base href="/" />  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/>  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>  <link href="/css/bootstrap.min.css?v=Vm5qS7zLVNKrU7pW0eWPSqbWNbDGXVeNJxD3ehJeAUg" rel="stylesheet" /> <link href="/css/plugins.css?v=Pg1tRqXQMIyPxEK0NHat--FeN0xs1bA_JS4CvP4eYBw" rel="stylesheet" /> <link href="/css/fonts.css?v=2y7U-HXQUx7UApXMTRey5k7_dORHOWPdKpwvjAORSs8" rel="stylesheet" /> <link href="/css/style.css?v=4WbS0UyjoZjes_fNh1LmwjTKrGAkXsSRPBnWD4akE0U" rel="stylesheet" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> <script async src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script> <link href="https://fonts.googleapis.com/css?family=Poppins:300,300i,400,400i,700,700i&display=swap" rel="stylesheet"> <link href="/css/fontawesome-all.min.css" rel="stylesheet" /> <link href="/css/line-icons.css" rel="stylesheet" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simplebar/5.2.1/simplebar.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/simplebar/5.2.1/simplebar.js"></script>  <link href="assets/fonts/iconsmind/iconsmind.css" rel="stylesheet"> <link href="assets/fonts/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">  <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Poppins:wght@200;300;400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css"/> <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:300,400,500,700,400i,700i&display=swap" rel="stylesheet">  <script src="https://bc.thestreet.com/script.js"></script>  <style type="text/css"> @import url("https://fast.fonts.net/t/1.css?apiType=css&projectid=beb5b704-ca5d-4859-8e8e-17746c336b08"); @font-face { font-family: "Avenir Next W05"; src: url("https://assets.emagazines.com/uploads/86df2caf-2588-4bb9-a9a9-5290fb6bd63d_da92a44f-8e1d-4248-ba7b-b12c91a118a9.woff2") format("woff2"), url("https://assets.emagazines.com/uploads/ae824335-a7f0-425a-81b5-436dc22ea039_b679252b-1f50-49c3-9b2e-002bb8827c2e.woff") format("woff"); font-weight: 200; font-style: normal; } @font-face { font-family: "Avenir Next W05"; src: url("https://assets.emagazines.com/uploads/2a916cb0-7c05-48ce-a11f-851a3d5a7292_f64c3634-1027-4aec-8bd4-d96f2444f559.woff2") format("woff2"), url("https://assets.emagazines.com/uploads/3a215542-78db-4c56-bc1c-729471ec83bd_91f23395-35b5-470e-9680-45d860e84f5b.woff") format("woff"); font-weight: 400; font-style: normal; } @font-face { font-family: "Avenir Next W05"; src: url("https://assets.emagazines.com/uploads/8e00a826-1fba-4c4b-968f-01c4b067ba6e_a1049d00-54ad-4589-95b8-d353f7ab52f0.woff2") format("woff2"), url("https://assets.emagazines.com/uploads/9d66ae23-0e78-41c1-ac26-2a985a92cc05_13faf0ae-dcab-4d1c-9c08-f9ca339b6023.woff") format("woff"); font-weight: 500; font-style: normal; } @font-face { font-family: "Avenir Next W05"; src: url("https://assets.emagazines.com/uploads/28e6049e-b528-4c30-9ff9-a3ee6f96a154_8c6d7851-9978-4520-8c8f-dc1b38b36eb6.woff2") format("woff2"), url("https://assets.emagazines.com/uploads/92d7f2ef-17b1-4ef5-bfbc-b633fbe4e68e_73fd8503-a80c-4965-97ae-a1178b2caad0.woff") format("woff"); font-weight: 600; font-style: normal; } @font-face { font-family: "Avenir Next W05"; src: url("https://assets.emagazines.com/uploads/918bf6de-7721-41f8-91e7-ae06649ce7b2_9544095b-fbf6-4d50-870f-a5102776eae4.woff2") format("woff2"), url("https://assets.emagazines.com/uploads/918bf6de-7721-41f8-91e7-ae06649ce7b2_9544095b-fbf6-4d50-870f-a5102776eae4.woff2") format("woff"); font-weight: 700; font-style: normal; } @font-face { font-family: "Avenir Next W05"; src: url("https://assets.emagazines.com/uploads/918bf6de-7721-41f8-91e7-ae06649ce7b2_9544095b-fbf6-4d50-870f-a5102776eae4.woff2") format("woff2"), url("https://assets.emagazines.com/uploads/2c48580a-b3ab-46ab-af0a-aa48d007e363_888f1b57-0692-499d-91f0-718136703ef4.woff") format("woff"); font-weight: 900; font-style: normal; } @font-face { font-family: "Avenir Next Bold"; src: url("/assets/fonts/avenir/AvenirNext-Bold-01.ttf"); font-style: normal; } @font-face { font-family: "Avenir Next Bold"; src: url("/assets/fonts/avenir/AvenirNext-BoldItalic-02.ttf"); font-style: italic; } @font-face { font-family: "Avenir Next DemiBold"; src: url("/assets/fonts/avenir/AvenirNext-DemiBold-03.ttf"); font-style: normal; } @font-face { font-family: "Avenir Next DemiBold"; src: url("/assets/fonts/avenir/AvenirNext-DemiBoldItalic-04.ttf"); font-style: italic; } @font-face { font-family: "Avenir Next Heavy"; src: url("/assets/fonts/avenir/AvenirNext-Heavy-09.ttf"); font-style: normal; } @font-face { font-family: "Avenir Next Heavy"; src: url("/assets/fonts/avenir/AvenirNext-HeavyItalic-10.ttf"); font-style: italic; } @font-face { font-family: "Avenir Next Medium"; src: url("/assets/fonts/avenir/AvenirNext-Medium-06.ttf"); font-style: normal; } @font-face { font-family: "Avenir Next Medium"; src: url("/assets/fonts/avenir/AvenirNext-MediumItalic-07.ttf"); font-style: italic; } @font-face { font-family: "Avenir Next"; src: url("/assets/fonts/avenir/AvenirNext-Regular-08.ttf"); font-style: normal; } @font-face { font-family: "Avenir Next"; src: url("/assets/fonts/avenir/AvenirNext-Italic-05.ttf"); font-style: italic; } @font-face { font-family: "Avenir Next UltraLight"; src: url("/assets/fonts/avenir/AvenirNext-UltraLight-11.ttf"); font-style: normal; } @font-face { font-family: "Avenir Next UltraLight"; src: url("/assets/fonts/avenir/AvenirNext-UltraLightItalic-12.ttf"); font-style: italic; } </style> <link rel="stylesheet" href="https://use.typekit.net/ivx6tzt.css"> <script> // Define dataLayer and the gtag function. window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } </script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-YFNWQRHJKE"></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'G-YFNWQRHJKE'); //gtag('config', 'G-FBWQMV2ZEY'); </script> <script> window.enableGoogleAnalytics = function() { gtag('consent', 'update', { 'ad_storage': 'granted', 'analytics_storage': 'granted', 'ads_data_redaction': 'false' }); } </script> </head> <body data-spy="scroll" data-target="#landingkit-navbar"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script> <div id="preloader"> <div id="preloader-inner"></div> </div>  <h1 class="d-none"> Sports Illustrated logo </h1> <nav style="border-bottom: 2px solid #eee; height: 100px;" class="navbar navbar-light bg-white navbar-sticky navbar-expand-lg p-0"> <div class="container-fluid p-0"> <div class="row justify-content-center w-100 ml-0 mr-0"> <div class="col-auto p-0"> <a class="navbar-brand mr-0" href="https://si.com"> <img id="landingPageLogo" alt="Sports Illustrated logo" style="height: 70px;" src="https://cdn.emags.com/digital/sports_illustrated/logo.jpg"> </a> </div> </div> </div> </nav> <main class="main-content"> <div style="padding-top: 30px;" class='bg-white border-btm1 container-fluid pb50'> <div id="template-container" class="mx-auto" style="max-width: 1200px;"> <div class="row align-items-center justify-content-center"> <div id="feature-container" class="col-12 order-2 order-sm-2 order-md-1 order-lg-1 order-xl-1" style="max-width: 900px; margin-top: 65px;">  </div> <div id="catalog-container" class="p-0 col-12 order-3 order-sm-3 order-md-1" style="max-width: 1200px; margin-top: 15px;">  </div> <div id="cartContainer" class="col-12 order-4 order-sm-4 order-md-1 order-lg-1 order-xl-1" style="margin-top: 15px;"> <div style="max-width: 700px;" class="mx-auto">  </div> </div> <div id="form-container" class="col-12 order-5 order-sm-5 order-md-1 order-lg-1 order-xl-1" style="margin-top: 20px;"> <div style="max-width: 575px;" class="mx-auto"> <style> .emagsSubmit:hover { background-color:#FE4020; } </style> <div class="hero-form" style="background-color: white;"> <h6 id="formTitle" style="font-size: 1.1rem;" class="font-weight-bold text-dark mb20"><h2>Your Information<h2></h6> <h5 id="orderError" style="display: none;" class="mb20 text-danger"></h5> <form id="orderForm" action="/LandingPageV2/ProcessOrder" method="post"> <div style="display: none;"> <input value="" type="text" id="Order_Source" name="Order.Source" /> <input value="" type="text" id="Order_Channel" name="Order.Channel" /> <input value="" type="text" id="Order_S1" name="Order.S1" /> <input value="" type="text" id="Order_S2" name="Order.S2" /> <input value="" type="text" id="Order_S3" name="Order.S3" /> <input value="" type="text" id="Order_Aid" name="Order.Aid" /> <input value="" type="text" id="Order_Tid" name="Order.Tid" /> <input value="" type="text" id="Order_PartnerOrderId" name="Order.PartnerOrderId" /> <input type="number" data-val="true" data-val-required="The LandingPageId field is required." id="LandingPage_LandingPageId" name="LandingPage.LandingPageId" value="2477" /><input name="__Invariant" type="hidden" value="LandingPage.LandingPageId" /> <input data-val="true" data-val-required="The CartSessionId field is required." id="CartSessionId" name="CartSessionId" type="hidden" value="d1a02e7a-84c4-4f43-b78e-a6d84bc1c44d" />; <input data-val="true" data-val-required="The UserForcedDupes field is required." id="UserForcedDupes" name="UserForcedDupes" type="hidden" value="False" />; <input data-val="true" data-val-required="The UserConfirmedAddressValidation field is required." id="UserConfirmedAddressValidation" name="UserConfirmedAddressValidation" type="hidden" value="False" /> </div> <div class="row"> <script> document.addEventListener("DOMContentLoaded", function(event) { let element = document.getElementById('Email'); if (element) { // Only set the default value if it has not already been set if (element.value) { return; } else { element.value = ''; } } }); </script> <style> select[readonly] option, select[readonly] optgroup { display: none; } </style> <div class="col-12 form-field-col mb20 px-1"> <label style="color: black;" for="Email">Email *</label> <input id="Email" value="" type="email" class="form-control" placeholder="" name="Consumer.Email"> </div> <script> window.getShippingState = () => { let shippingState = ""; try { shippingState = document.getElementById("ShippingState").value; } catch (err) { } return shippingState; }; </script> <script> document.addEventListener("DOMContentLoaded", function(event) { let element = document.getElementById('BillingFirstName'); if (element) { // Only set the default value if it has not already been set if (element.value) { return; } else { element.value = ''; } } }); </script> <style> select[readonly] option, select[readonly] optgroup { display: none; } </style> <div class="col-6 form-field-col mb20 px-1"> <label style="color: black;" for="BillingFirstName">First Name *</label> <input id="BillingFirstName" value="" type="text" class="form-control" placeholder="" name="BillingAddress.FirstName"> </div> <script> window.getShippingState = () => { let shippingState = ""; try { shippingState = document.getElementById("ShippingState").value; } catch (err) { } return shippingState; }; </script> <script> document.addEventListener("DOMContentLoaded", function(event) { let element = document.getElementById('BillingLastName'); if (element) { // Only set the default value if it has not already been set if (element.value) { return; } else { element.value = ''; } } }); </script> <style> select[readonly] option, select[readonly] optgroup { display: none; } </style> <div class="col-6 form-field-col mb20 px-1"> <label style="color: black;" for="BillingLastName">Last Name *</label> <input id="BillingLastName" value="" type="text" class="form-control" placeholder="" autocomplete="family-name" name="BillingAddress.LastName"> </div> <script> window.getShippingState = () => { let shippingState = ""; try { shippingState = document.getElementById("ShippingState").value; } catch (err) { } return shippingState; }; </script> <script> document.addEventListener("DOMContentLoaded", function(event) { let element = document.getElementById('BillingAddress1'); if (element) { // Only set the default value if it has not already been set if (element.value) { return; } else { element.value = ''; } } }); </script> <style> select[readonly] option, select[readonly] optgroup { display: none; } </style> <div class="col-8 form-field-col mb20 px-1"> <label style="color: black;" for="BillingAddress1">Street Address *</label> <input id="BillingAddress1" type="text" class="form-control" placeholder="" name="BillingAddress.Address1" value=""> </div> <script> window.getShippingState = () => { let shippingState = ""; try { shippingState = document.getElementById("ShippingState").value; } catch (err) { } return shippingState; }; </script> <script> document.addEventListener("DOMContentLoaded", function(event) { let element = document.getElementById('BillingAddress2'); if (element) { // Only set the default value if it has not already been set if (element.value) { return; } else { element.value = ''; } } }); </script> <style> select[readonly] option, select[readonly] optgroup { display: none; } </style> <div class="col-4 form-field-col mb20 px-1"> <label style="color: black;" for="BillingAddress2">Apt, Floor, Unit</label> <input id="BillingAddress2" type="text" class="form-control" placeholder="" name="BillingAddress.Address2" value=""> </div> <script> window.getShippingState = () => { let shippingState = ""; try { shippingState = document.getElementById("ShippingState").value; } catch (err) { } return shippingState; }; </script> <script> document.addEventListener("DOMContentLoaded", function(event) { let element = document.getElementById('BillingCity'); if (element) { // Only set the default value if it has not already been set if (element.value) { return; } else { element.value = ''; } } }); </script> <style> select[readonly] option, select[readonly] optgroup { display: none; } </style> <div class="col-5 form-field-col mb20 px-1"> <label style="color: black;" for="BillingCity">City *</label> <input id="BillingCity" type="text" class="form-control" placeholder="" name="BillingAddress.City" value=""> </div> <script> window.getShippingState = () => { let shippingState = ""; try { shippingState = document.getElementById("ShippingState").value; } catch (err) { } return shippingState; }; </script> <script> document.addEventListener("DOMContentLoaded", function(event) { let element = document.getElementById('BillingState'); if (element) { // Only set the default value if it has not already been set if (element.value) { return; } else { element.value = ''; } } }); </script> <style> select[readonly] option, select[readonly] optgroup { display: none; } </style> <div class="col-3 form-field-col mb20 px-1"> <label style="color: black;" for="BillingState">State *</label> <select id="BillingState" class="form-control" placeholder="" name="BillingAddress.State"> <option value="">State</option> <optgroup label="States"> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> <option value="AR">Arkansas</option> <option value="CA">California</option> <option value="CO">Colorado</option> <option value="CT">Connecticut</option> <option value="DE">Delaware</option> <option value="DC">District Of Columbia</option> <option value="FL">Florida</option> <option value="GA">Georgia</option> <option value="HI">Hawaii</option> <option value="ID">Idaho</option> <option value="IL">Illinois</option> <option value="IN">Indiana</option> <option value="IA">Iowa</option> <option value="KS">Kansas</option> <option value="KY">Kentucky</option> <option value="LA">Louisiana</option> <option value="ME">Maine</option> <option value="MD">Maryland</option> <option value="MA">Massachusetts</option> <option value="MI">Michigan</option> <option value="MN">Minnesota</option> <option value="MS">Mississippi</option> <option value="MO">Missouri</option> <option value="MT">Montana</option> <option value="NE">Nebraska</option> <option value="NV">Nevada</option> <option value="NH">New Hampshire</option> <option value="NJ">New Jersey</option> <option value="NM">New Mexico</option> <option value="NY">New York</option> <option value="NC">North Carolina</option> <option value="ND">North Dakota</option> <option value="OH">Ohio</option> <option value="OK">Oklahoma</option> <option value="OR">Oregon</option> <option value="PA">Pennsylvania</option> <option value="RI">Rhode Island</option> <option value="SC">South Carolina</option> <option value="SD">South Dakota</option> <option value="TN">Tennessee</option> <option value="TX">Texas</option> <option value="UT">Utah</option> <option value="VT">Vermont</option> <option value="VA">Virginia</option> <option value="WA">Washington</option> <option value="WV">West Virginia</option> <option value="WI">Wisconsin</option> <option value="WY">Wyoming</option> </optgroup> </select> </div> <script> window.getShippingState = () => { let shippingState = ""; try { shippingState = document.getElementById("ShippingState").value; } catch (err) { } return shippingState; }; </script> <script> document.addEventListener("DOMContentLoaded", function(event) { let element = document.getElementById('BillingZipCode'); if (element) { // Only set the default value if it has not already been set if (element.value) { return; } else { element.value = ''; } } }); </script> <style> select[readonly] option, select[readonly] optgroup { display: none; } </style> <div class="col-4 form-field-col mb20 px-1"> <label style="color: black;" for="BillingZipCode">Zip Code *</label> <input id="BillingZipCode" type="text" class="form-control" placeholder="" name="BillingAddress.Zip" value=""> </div> <script> window.getShippingState = () => { let shippingState = ""; try { shippingState = document.getElementById("ShippingState").value; } catch (err) { } return shippingState; }; </script> <script> document.addEventListener("DOMContentLoaded", function(event) { let element = document.getElementById('DisplayOnly2'); if (element) { // Only set the default value if it has not already been set if (element.value) { return; } else { element.value = ''; } } }); </script> <style> select[readonly] option, select[readonly] optgroup { display: none; } </style> <div class="col-12 form-field-col mb20 px-1"> <div class="displayOnlyField m-auto h-100"><span style="color:#000;"><strong>If you are under 18 years old, your parent or guardian must provide their email address.</strong></span></div> </div> <script> window.getShippingState = () => { let shippingState = ""; try { shippingState = document.getElementById("ShippingState").value; } catch (err) { } return shippingState; }; </script> <script> document.addEventListener("DOMContentLoaded", function(event) { let element = document.getElementById('Checkbox1'); if (element) { // Only set the default value if it has not already been set if (element.value) { return; } else { element.value = ''; } } }); </script> <style> select[readonly] option, select[readonly] optgroup { display: none; } </style> <div class="col-12 form-field-col mb20 px-1"> <div class=""> <label for="Checkbox1" class="custom-checkbox mb-2 mr-sm-2 mb-sm-0" style="line-height: 1.60;"> <input id="Checkbox1" type="checkbox" style="border: 2px solid black;" class="custom-control-input" data-val="true" data-val-required="The Checkbox1 field is required." name="Order.Checkbox1" value="true"> <span class="custom-control-indicator" style="border-color: #BBB;"></span> <span style="color: #000; font-family: Arial; font-size: 0.8rem;"> I am over 18. </span> </label> </div> </div> <script> window.getShippingState = () => { let shippingState = ""; try { shippingState = document.getElementById("ShippingState").value; } catch (err) { } return shippingState; }; </script> <script> document.addEventListener("DOMContentLoaded", function(event) { let element = document.getElementById('Checkbox2'); if (element) { // Only set the default value if it has not already been set if (element.value) { return; } else { element.value = ''; } } }); </script> <style> select[readonly] option, select[readonly] optgroup { display: none; } </style> <div class="col-12 form-field-col mb20 px-1"> <div class=""> <label for="Checkbox2" class="custom-checkbox mb-2 mr-sm-2 mb-sm-0" style="line-height: 1.60;"> <input id="Checkbox2" type="checkbox" style="border: 2px solid black;" class="custom-control-input" data-val="true" data-val-required="The Checkbox2 field is required." name="Order.Checkbox2" value="true"> <span class="custom-control-indicator" style="border-color: #BBB;"></span> <span style="color: #000; font-family: Arial; font-size: 0.8rem;"> I am under 18 and have asked my parent/guardian to provide their email address. </span> </label> </div> </div> <script> window.getShippingState = () => { let shippingState = ""; try { shippingState = document.getElementById("ShippingState").value; } catch (err) { } return shippingState; }; </script> <div class="col"> <label><input value="False" type="checkbox" data-val="true" data-val-required="The UseShippingAddress field is required." id="UseShippingAddress" name="UseShippingAddress" /> GIVE A GIFT! - Enter Separate Shipping Address</label> <div id="shippingAddressContainer" style="display:none;"> <div class="row"> <script> document.addEventListener("DOMContentLoaded", function(event) { let element = document.getElementById('ShippingEmail'); if (element) { // Only set the default value if it has not already been set if (element.value) { return; } else { element.value = ''; } } }); </script> <style> select[readonly] option, select[readonly] optgroup { display: none; } </style> <div class="col-12 form-field-col mb20 px-1"> <label style="color: black;" for="ShippingEmail">Email *</label> <input id="ShippingEmail" value="" type="email" class="form-control" placeholder="" name="ShippingAddress.ShippingEmail"> </div> <script> window.getShippingState = () => { let shippingState = ""; try { shippingState = document.getElementById("ShippingState").value; } catch (err) { } return shippingState; }; </script> <script> document.addEventListener("DOMContentLoaded", function(event) { let element = document.getElementById('ShippingFirstName'); if (element) { // Only set the default value if it has not already been set if (element.value) { return; } else { element.value = ''; } } }); </script> <style> select[readonly] option, select[readonly] optgroup { display: none; } </style> <div class="col-6 form-field-col mb20 px-1"> <label style="color: black;" for="ShippingFirstName">First Name *</label> <input id="ShippingFirstName" value="" type="text" class="form-control" placeholder="" name="ShippingAddress.FirstName"> </div> <script> window.getShippingState = () => { let shippingState = ""; try { shippingState = document.getElementById("ShippingState").value; } catch (err) { } return shippingState; }; </script> <script> document.addEventListener("DOMContentLoaded", function(event) { let element = document.getElementById('ShippingLastName'); if (element) { // Only set the default value if it has not already been set if (element.value) { return; } else { element.value = ''; } } }); </script> <style> select[readonly] option, select[readonly] optgroup { display: none; } </style> <div class="col-6 form-field-col mb20 px-1"> <label style="color: black;" for="ShippingLastName">Last Name *</label> <input id="ShippingLastName" value="" type="text" class="form-control" placeholder="" autocomplete="family-name" name="ShippingAddress.LastName"> </div> <script> window.getShippingState = () => { let shippingState = ""; try { shippingState = document.getElementById("ShippingState").value; } catch (err) { } return shippingState; }; </script> <script> document.addEventListener("DOMContentLoaded", function(event) { let element = document.getElementById('ShippingAddress1'); if (element) { // Only set the default value if it has not already been set if (element.value) { return; } else { element.value = ''; } } }); </script> <style> select[readonly] option, select[readonly] optgroup { display: none; } </style> <div class="col-8 form-field-col mb20 px-1"> <label style="color: black;" for="ShippingAddress1">Street Address *</label> <input id="ShippingAddress1" type="text" class="form-control" placeholder="" name="ShippingAddress.Address1" value=""> </div> <script> window.getShippingState = () => { let shippingState = ""; try { shippingState = document.getElementById("ShippingState").value; } catch (err) { } return shippingState; }; </script> <script> document.addEventListener("DOMContentLoaded", function(event) { let element = document.getElementById('ShippingAddress2'); if (element) { // Only set the default value if it has not already been set if (element.value) { return; } else { element.value = ''; } } }); </script> <style> select[readonly] option, select[readonly] optgroup { display: none; } </style> <div class="col-4 form-field-col mb20 px-1"> <label style="color: black;" for="ShippingAddress2">Apt, Floor, Unit</label> <input id="ShippingAddress2" type="text" class="form-control" placeholder="" name="ShippingAddress.Address2" value=""> </div> <script> window.getShippingState = () => { let shippingState = ""; try { shippingState = document.getElementById("ShippingState").value; } catch (err) { } return shippingState; }; </script> <script> document.addEventListener("DOMContentLoaded", function(event) { let element = document.getElementById('ShippingCity'); if (element) { // Only set the default value if it has not already been set if (element.value) { return; } else { element.value = ''; } } }); </script> <style> select[readonly] option, select[readonly] optgroup { display: none; } </style> <div class="col-5 form-field-col mb20 px-1"> <label style="color: black;" for="ShippingCity">City *</label> <input id="ShippingCity" type="text" class="form-control" placeholder="" name="ShippingAddress.City" value=""> </div> <script> window.getShippingState = () => { let shippingState = ""; try { shippingState = document.getElementById("ShippingState").value; } catch (err) { } return shippingState; }; </script> <script> document.addEventListener("DOMContentLoaded", function(event) { let element = document.getElementById('ShippingState'); if (element) { // Only set the default value if it has not already been set if (element.value) { return; } else { element.value = ''; } } }); </script> <style> select[readonly] option, select[readonly] optgroup { display: none; } </style> <div class="col-3 form-field-col mb20 px-1"> <label style="color: black;" for="ShippingState">State *</label> <select id="ShippingState" class="form-control" placeholder="" name="ShippingAddress.State"> <option value="">State</option> <optgroup label="States"> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> <option value="AR">Arkansas</option> <option value="CA">California</option> <option value="CO">Colorado</option> <option value="CT">Connecticut</option> <option value="DE">Delaware</option> <option value="DC">District Of Columbia</option> <option value="FL">Florida</option> <option value="GA">Georgia</option> <option value="HI">Hawaii</option> <option value="ID">Idaho</option> <option value="IL">Illinois</option> <option value="IN">Indiana</option> <option value="IA">Iowa</option> <option value="KS">Kansas</option> <option value="KY">Kentucky</option> <option value="LA">Louisiana</option> <option value="ME">Maine</option> <option value="MD">Maryland</option> <option value="MA">Massachusetts</option> <option value="MI">Michigan</option> <option value="MN">Minnesota</option> <option value="MS">Mississippi</option> <option value="MO">Missouri</option> <option value="MT">Montana</option> <option value="NE">Nebraska</option> <option value="NV">Nevada</option> <option value="NH">New Hampshire</option> <option value="NJ">New Jersey</option> <option value="NM">New Mexico</option> <option value="NY">New York</option> <option value="NC">North Carolina</option> <option value="ND">North Dakota</option> <option value="OH">Ohio</option> <option value="OK">Oklahoma</option> <option value="OR">Oregon</option> <option value="PA">Pennsylvania</option> <option value="RI">Rhode Island</option> <option value="SC">South Carolina</option> <option value="SD">South Dakota</option> <option value="TN">Tennessee</option> <option value="TX">Texas</option> <option value="UT">Utah</option> <option value="VT">Vermont</option> <option value="VA">Virginia</option> <option value="WA">Washington</option> <option value="WV">West Virginia</option> <option value="WI">Wisconsin</option> <option value="WY">Wyoming</option> </optgroup> </select> </div> <script> window.getShippingState = () => { let shippingState = ""; try { shippingState = document.getElementById("ShippingState").value; } catch (err) { } return shippingState; }; </script> <script> document.addEventListener("DOMContentLoaded", function(event) { let element = document.getElementById('ShippingZipCode'); if (element) { // Only set the default value if it has not already been set if (element.value) { return; } else { element.value = ''; } } }); </script> <style> select[readonly] option, select[readonly] optgroup { display: none; } </style> <div class="col-4 form-field-col mb20 px-1"> <label style="color: black;" for="ShippingZipCode">Zip Code *</label> <input id="ShippingZipCode" type="text" class="form-control" placeholder="" name="ShippingAddress.Zip" value=""> </div> <script> window.getShippingState = () => { let shippingState = ""; try { shippingState = document.getElementById("ShippingState").value; } catch (err) { } return shippingState; }; </script> </div> </div> </div> <div class="mb-30 mt-30"> <div class="col-12"> <div class="card border-left-0 border-right-0 border-bottom-0 rounded-0"> <div class="card-body px-1"> <div class="form-row w-100"> <p id="ccErrText" class="alert alert-success" style="display: none;"></p> </div> <div class="form-row w-100 flex px-2"> <div class="col-12 w-100"> <label id="paymentInformation" for="card-element" style="font-size: 1.1rem;" class="font-weight-bold text-dark"> <h2>Payment Information</h2> </label> </div> <div class="col-12 w-100"> <label id="paymentSubtitle" for="card-element" style="font-size: 1rem;"> Please enter your card details </label> </div> </div> <div class="form-row w-100"> <div class="col-12 col-sm-8 pt-1"> <label style="color: black;" for="PassThroughPayment_PassthroughCardNumber">Card Number</label> <input value="" placeholder="" class="form-control" required type="text" id="PassThroughPayment_PassthroughCardNumber" name="PassThroughPayment.PassthroughCardNumber" /> </div> <div class="col-12 col-sm-4 pt-1"> <label style="color: black;" for="PassThroughPayment_PassthroughCardZip">Postal Code</label> <input value="" type="text" placeholder="" class="form-control" id="PassThroughPayment_PassthroughCardZip" name="PassThroughPayment.PassthroughCardZip" /> </div> <div class="col-6 col-sm-4 pt-1"> <label style="color: black;" for="PassThroughPayment_PassthroughCardExpMM">Month</label> <input value="" type="number" min="1" max="12" placeholder="MM" class="form-control" required id="PassThroughPayment_PassthroughCardExpMM" name="PassThroughPayment.PassthroughCardExpMM"><input name="__Invariant" type="hidden" value="PassThroughPayment.PassthroughCardExpMM" /> </div> <div class="col-6 col-sm-4 pt-1"> <label style="color: black;" for="PassThroughPayment_PassthroughCardExpYY">Year</label> <input value="" type="number" min="25" max="99" placeholder="YY" class="form-control" required id="PassThroughPayment_PassthroughCardExpYY" name="PassThroughPayment.PassthroughCardExpYY"><input name="__Invariant" type="hidden" value="PassThroughPayment.PassthroughCardExpYY" /> </div> <div class="col-12 col-sm-4 pt-1"> <label style="color: black;" for="PassThroughPayment_PassthroughCardCVV">CVC</label> <input value="" type="text" placeholder="" required class="form-control" id="PassThroughPayment_PassthroughCardCVV" name="PassThroughPayment.PassthroughCardCVV"> </div> </div> </div>  <div id="card-errors" role="alert"></div> </div> </div> </div> <div class="col-12 my-3"> <div style="color: #000000; border:1px solid black; padding:2%; -webkit-font-smoothing: antialiased;"><strong>Automatic Renewal Notice:</strong> After your initial term, your magazine subscriptions will automatically renew annually until you tell us to stop. You will receive a reminder of the renewal approximately 30 days in advance. Your credit card or method of payment will be charged at the time of purchase, and before the start of each new term, at the rate stated in the notice. You can contact customer service by clicking <a href="https://w1.buysub.com/servlet/CSGateway?cds_mag_code=SPI" target="_blank">here</a>, emailing <a href="mailto:SPIcustserv@cdsfulfillment.com">SPIcustserv@cdsfulfillment.com</a> or calling 877-747-1045 to change your renewal status or cancel your subscription at any time. If a magazine becomes unavailable, it may be replaced by another with the same renewal features. Automatic renewal not available in Vermont. By submitting your order, you agree to our <a href="https://www.minutemedia.com/policies/terms-and-conditions-si" target="_blank">Terms and Conditions</a> (including the <a href="https://www.minutemedia.com/policies/terms-and-conditions-si#18" target="_blank">class action waiver and arbitration</a> provisions) and our <a href="https://www.minutemedia.com/policies/privacy-policy-si" target="_blank">Privacy Policy</a>.</div> </div> <div class="col-12 mb20"> <button id="submitOrderButton" type="submit" class="btn btn-primary btn-block emagsSubmit mt-2 w-auto ml-auto mr-auto" style="padding: 9px 30px 10px 30px;">SUBMIT YOUR ORDER</button> </div> <div id="formTextBelow" class="col-12 border-top pt-3"><div style="color: #000000; font-size:12px"><p><em>Sports Illustrated</em> cover price is $8.99 a copy. <em>Sports Illustrated Kids</em> cover price is $5.99 a copy. Plus sales/use tax, if applicable. <em>Sports Illustrated</em> is published 12 times a year. <em>Sports Illustrated Kids</em> is published 6 times a year. Frequency subject to change without notice. First issue mails in 6-8 weeks. Rates outside U.S. available on request.</p><p>Sports Illustrated reserves the right to review pricing periodically. Offer subject to change.</p></div></div> </div> <input name="__RequestVerificationToken" type="hidden" value="CfDJ8FzjItsPIfRLl30GkmV8Mz-sYosvJAhu8Mt6li0-ZI6Aj1W1gxzbqD8Ep-s6SLg9LVmb6Oflr-d3Pzhe1vUBRafvo2VYH73ETgS3AMjJLR3n5Yv1xSXsuGxbE-vCzx5AQZl0NcP4ba4BB5ymk8atbfI" /><input name="Order.Checkbox1" type="hidden" value="false"><input name="Order.Checkbox2" type="hidden" value="false"><input name="UseShippingAddress" type="hidden" value="false" /></form> </div> <script> var shippingAddressContainer = document.getElementById("shippingAddressContainer"); var useShippingAddress = document.getElementById("UseShippingAddress"); if(useShippingAddress){ useShippingAddress.addEventListener("change", useShippingClicked); } $("#submitOrderButton, #digitalRiverContinueToPaymentButton").mousedown(function (e) { //if the shipping checkbox is not there or remains unchecked, copy over all billing fields to shipping if(!useShippingAddress || (useShippingAddress && !useShippingAddress.checked)) { var orderForm = document.getElementById("orderForm"); if(!orderForm) { return; } var inputs = orderForm.getElementsByTagName("input"); for(var i = 0; i < inputs.length; ++i){ var input = inputs[i]; CopyBillingToShipping(input); } var selects = orderForm.getElementsByTagName("select"); for(var i = 0; i < selects.length; ++i){ var select = selects[i]; CopyBillingToShipping(select); } } //e.preventDefault(); //for testing only }); function CopyBillingToShipping(element){ if(!element.id || (!element.id.toLowerCase().startsWith("billing") && element.id.toLowerCase() !== "email")){ return; } var shippingFieldId = "Shipping" + element.id.substring(7); if(element.id.toLowerCase() == "email"){ shippingFieldId = "ShippingEmail"; } var shippingElement = document.getElementById(shippingFieldId); if(!shippingElement){ return; } if(element.tagName.toUpperCase() == "INPUT"){ shippingElement.value = element.value; } else if(element.tagName.toUpperCase() == "SELECT") { $('#' + shippingFieldId).val($('#' + element.id + ' option:selected').val()); } } function useShippingClicked(evt){ if(shippingAddressContainer){ if(useShippingAddress.checked){ shippingAddressContainer.style.display = "block"; } else{ shippingAddressContainer.style.display = "none"; } } } </script> </div> </div> </div> </div> </div> </main> <footer class="footer" style="padding-top: 25px;"> <div class="container-fluid"> <div class="container col-12" style="padding-bottom:25px;"> <div class="row no-gutters d-flex"> <div class="col-12 col-lg-4 mx-3 ml-md-auto mt-2 d-flex justify-content-center"> <div class="mt-auto mb-0"> <a href="https://www.si.com/" target="_blank"> <img style="width:309px;" src="https://cdn.emagazines.com/default/SI_Linear_RGB_65b39d87-f0d7-41f0-83ec-8b1450e70fbb.png"> </a> </div> </div> </div> <div class="row no-gutters d-flex mt-2"> <div class="text-right mr-2 ml-auto" style="color:#6D6D6D !important;text-decoration: none !important;"> <span> <a href="https://www.minutemedia.com/policies/privacy-policy-si" target="_blank" class="text-muted">Privacy Policy</a>  •  </span> <span> <a href="https://www.minutemedia.com/policies/terms-and-conditions-si" target="_blank" class="text-muted">Terms of Use</a>  •  </span> <span> <a href="mailto:SPIcustserv@cdsfulfillment.com" target="_blank" class="text-muted">Customer Service</a> </span> </div> </div> <div class="row no-gutters d-flex mt-3"> <div class="text-right mr-2 ml-auto" style="color:#6D6D6D !important;text-decoration: none !important;"> <span class="text-muted">© 2025 ABG-SI LLC. SPORTS ILLUSTRATED is a registered trademark of ABG-SI LLC. All Rights Reserved. <br />Use of this site constitutes acceptance of our Terms of Use and Privacy Policy</span> </div> </div> </div> </div> </footer>  <a href="#" class="back-to-top" id="back-to-top"> <i class="icon-chevron-up"></i> </a>  <script src="/js/plugins.js"></script> <script src="/js/landing.custom.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="/js/PaymentServiceProviders/Common/common.js?v=RoownVTIg5ZLBOLqe68SUxXkmWa46n9AQLHcoL_ZeaY"></script> <script src="/js/PaymentServiceProviders/WSG/wsg.js?v=7taKItAIaCAnfl8OR1ICIpAKAheuL0p4uaa6YStffsM"></script> <script> $("#ShippingState").change(function () { refreshCart(); }); function refreshCart() { let cartRefreshFlag = $("#cartRefreshFlag"); if (cartRefreshFlag) { cartRefreshFlag.click(); } } </script> <script> $("#PassThroughPayment_PassthroughCardZip").hide(); var checkboxID = 'UseShippingAddress'; function setupEventListener(cardBody) { // Check if the card body contains "Digital Only" (case insensitive) if (cardBody.textContent.toLowerCase().includes('digital only')) { // Find the first button within the card var button = cardBody.querySelector('button'); if (button) { // Add a pointerup event listener to the button button.addEventListener('pointerup', function () { // Hide the closest parent div with class 'col' of the checkbox var checkbox = document.getElementById(checkboxID); if (checkbox) { var parentColDiv = checkbox.closest('div.col'); if (parentColDiv) { parentColDiv.style.display = 'none'; } } }); } } } // Function to initialize event listeners on existing card bodies function initializeExistingCardBodies() { var cardBodies = document.querySelectorAll('.card-body'); cardBodies.forEach(function (cardBody) { setupEventListener(cardBody); }); } // Create a MutationObserver to monitor changes in the DOM var observer = new MutationObserver(function (mutationsList) { mutationsList.forEach(function (mutation) { mutation.addedNodes.forEach(function (node) { if (node.nodeType === Node.ELEMENT_NODE) { if (node.matches('.card-body')) { setupEventListener(node); } else { // Check if any child nodes match '.card-body' var cardBodies = node.querySelectorAll('.card-body'); cardBodies.forEach(function (cardBody) { setupEventListener(cardBody); }); } } }); }); }); // Start observing the document body for added nodes observer.observe(document.body, { childList: true, subtree: true }); // Initialize event listeners on existing card bodies initializeExistingCardBodies(); </script> <script> function addValidation(fieldName, required, editable) { let field = $(`#${fieldName}`); if (required) { field.attr("required", "required"); } if (!editable) { field.attr("readonly", "readonly"); } } </script> <script> $(function() { let required = true; let editable = true; let fieldName = "Email"; addValidation(fieldName, required, editable); }); </script> <script> $(function() { let required = true; let editable = true; let fieldName = "ShippingFirstName"; addValidation(fieldName, required, editable); }); </script> <script> $(function() { let required = true; let editable = true; let fieldName = "ShippingLastName"; addValidation(fieldName, required, editable); }); </script> <script> $(function() { let required = true; let editable = true; let fieldName = "ShippingAddress1"; addValidation(fieldName, required, editable); }); </script> <script> $(function() { let required = false; let editable = true; let fieldName = "ShippingAddress2"; addValidation(fieldName, required, editable); }); </script> <script> $(function() { let required = true; let editable = true; let fieldName = "ShippingCity"; addValidation(fieldName, required, editable); }); </script> <script> $(function() { let required = true; let editable = true; let fieldName = "ShippingZipCode"; addValidation(fieldName, required, editable); }); </script> <script> $(function() { let required = true; let editable = true; let fieldName = "BillingFirstName"; addValidation(fieldName, required, editable); }); </script> <script> $(function() { let required = true; let editable = true; let fieldName = "BillingLastName"; addValidation(fieldName, required, editable); }); </script> <script> $(function() { let required = true; let editable = true; let fieldName = "BillingAddress1"; addValidation(fieldName, required, editable); }); </script> <script> $(function() { let required = false; let editable = true; let fieldName = "BillingAddress2"; addValidation(fieldName, required, editable); }); </script> <script> $(function() { let required = true; let editable = true; let fieldName = "BillingCity"; addValidation(fieldName, required, editable); }); </script> <script> $(function() { let required = true; let editable = true; let fieldName = "BillingZipCode"; addValidation(fieldName, required, editable); }); </script> <script> $(function() { let required = false; let editable = true; let fieldName = "Checkbox1"; addValidation(fieldName, required, editable); }); </script> <script> $(function() { let required = false; let editable = true; let fieldName = "Checkbox2"; addValidation(fieldName, required, editable); }); </script> <script> $(function() { let required = true; let editable = true; let fieldName = "ShippingState"; addValidation(fieldName, required, editable); }); </script> <script> $(function() { let required = true; let editable = true; let fieldName = "BillingState"; addValidation(fieldName, required, editable); }); </script> <script> $(function() { let required = false; let editable = true; let fieldName = "DisplayOnly2"; addValidation(fieldName, required, editable); }); </script> <script> $(function() { let required = true; let editable = true; let fieldName = "ShippingEmail"; addValidation(fieldName, required, editable); }); </script> <style> /* This is not quite right it will apply to all buttons not just form button */ .btn-primary, .btn-primary:hover, .btn-primary.disabled, .btn-primary.disabled:hover { background-color: #FE4020 !important; } </style> <style> * { font-family: "Avenir Next W05"; } </style> <style> * { font-family: 'IBM Plex Sans' !important; } #landingPageLogo { height: 60px !important; margin: 20px 0 20px 0; } h2 { font-size: 20px; color:#212529; } h3 { font-size:18px !important; } h5 { font-size: 16px; color:#212529; } .list-unstyled{ color:black; } footer { font-size: 14px; color:#000000; !important; } .mb-3 .text-center span { display: none; } .card-body img { width: auto !important; } .pt90 { padding-top: 50px !important; } #submitOrderButton:focus { border: 3px solid black; } .justify-content-around { justify-content: center !important; } label[for="PassThroughPayment_PassthroughCardZip"] { display:none; } </style> <style> .icon-cart-item { border-radius: 3px; } .catalog-product-image { border-radius: 3px; } </style> <style> .icon-cart-item { box-shadow: none !important; } .catalog-product-image { box-shadow: none !important; } </style> <div id="modal-container" class="modal hidden-print" tabindex="-1" role="dialog"> <div class="modal-dialog modal-dialog-centered modal-lg"> <div class="modal-content"> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> <script autostart="false" src="_framework/blazor.server.js"></script> <script> Blazor.start({ reconnectionOptions: { maxRetries: 10, retryIntervalMilliseconds: 1000, }, reconnectionHandler: { onConnectionDown: (options, error) => { console.log("Blazor SignalR Disconnected"); // Lost state refresh page to get new terminal SignalR Connection if (navigator.onLine) { if (navigator.userAgent.indexOf("Firefox") != -1) { setTimeout(function() { window.location.href = window.location.href; }, 5000); } else { window.location.href = window.location.href; } } else { Swal.fire({ title: 'Session Expired', text: "Would you like to try and refresh your session?", icon: 'warning', showCancelButton: true, confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', confirmButtonText: 'Yes' }).then((result) => { if (result.isConfirmed) { window.location.href = window.location.href; } else { // Do nothing //window.location.href = "https://store.emagazines.com/error"; } }); } } } }); </script> <script> $(function() { AOS.init(); }); </script> <script src="js/animate-intersection-observer.js?v=xg40odPC_aMRGSSN4FDYvwLZgI-0RPaO_j24H9y0Df4"></script> <script> $(function() { let attempts = 0; $(document).on('DOMNodeInserted', '.tier-image', function() { var img = $(this)[0]; let initInterval = setInterval(function () { var height = img.clientHeight; if (attempts > 50 || (height > 0 && img.complete)) { setTimeout(function() { requestAnimationFrame(window.resizeTiers); }, 100); clearInterval(initInterval); } attempts++; }, 100); }); window.resizeTiers = function() { let maxHeight = calculateMaxTierHeight(".tier-product-sales-message"); applyMaxTierHeight(maxHeight, ".tier-product-sales-message"); maxHeight = calculateMaxTierHeight(".tier-product-description2"); applyMaxTierHeight(maxHeight, ".tier-product-description2"); maxHeight = calculateMaxTierHeight(".tier-card"); applyMaxTierHeight(maxHeight, ".tier-card"); } function calculateMaxTierHeight(className) { $(className).css("height", "unset"); let values = $.map($(className), function(el, index) { return parseInt($(el).height()); }); let max = Math.max.apply(null, values); return max; } function applyMaxTierHeight(maxHeight, className) { $(className).each(function() { $(this).css("height", maxHeight); }); } }); </script> </body> </html>

CINXE.COM

Subscribe to Sports Illustrated