index.html (145 lines of code) (raw):
<!DOCTYPE html>
<html>
<head>
<title>The Guardian - Open Platform</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="shortcut icon" type="image/png" href="https://assets.guim.co.uk/images/favicons/48bc5564bb01b74cf7cd1a08ae0dd98e/32x32.ico"></link>
<mate name="description" content="The Guardian Open Platform is a public service for accessing over 2 million pieces of high quality content"/>
<link rel="stylesheet" type="text/css" href="../public/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="../public/js/bootstrap.min.js"></script>
<script src="../public/js/smooth-scrolling.js"></script>
<link rel="stylesheet" type="text/css" href="./public/css/lib-normalize.css"></link>
<link rel="stylesheet" type="text/css" href="./public/css/_fonts.scss"></link>
<link rel="stylesheet" type="text/css" href="./public/css/common.css"></link>
</head>
<body class="home">
<!-- Navigation -->
<div class="navbar-wrapper">
<div class="container">
<nav class="navbar navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<svg height="32px" id="Layer_1" style="enable-background:new 0 0 32 32; color: #FFFFFF" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="#FFFFFF" d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z"/></svg>
</button>
<a href="../" class="navbar-brand"><img src="../public/img/theguardian-op-logo.svg" alt="Guardian"/></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav ">
<li>
<a href="../" id="house-icon"><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="14" height="17" viewBox="0 0 14 17"><path class="st0" d="M13.1 16.6H9.2v-5.7H4.8v5.7H.9l-.9-.8V6.5L6.5 0h1L14 6.5v9.3l-.9.8z"></path></svg></a>
</li>
<li>
<a href="../access">Get Started</a>
</li>
<li>
<a href="../explore">Explore</a>
</li>
<li>
<a href="../documentation">Documentation</a>
</li>
<li><a href="https://groups.google.com/forum/#!forum/guardian-api-talk">Support</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<!-- Body -->
<div class=" hero home" >
<div class="container" >
<div class="row">
<div class="col-sm-12 hero-text" >
<h1 class="blue">Award-winning journalism</h1><h1>Open to everyone</h1>
<h3>Access over 2 million pieces of content</h3>
<br/>
<div class="chevron">
<a href="#getStarted">
<svg width="50" height="50" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-120 -425) translate(120 425)" fill="none"><circle cx="25" cy="25" r="24" style="stroke: #FFFFFF; fill:none"/>
<path fill="#FFFFFF" d="M35.933 20l-10.936 8.781-10.931-8.781-1.067 1.024 9.868 9.471h-.002l1.575 1.505h1.119l1.573-1.505 9.866-9.471z"/></g></svg>
</a>
</div>
</div>
</div>
</div>
</div>
<a name="getStarted"></a>
<div class="container full blue">
<div class="container">
<div class="row">
<div class="col-sm-6" >
<div class="promo-text">
<h3>Build incredible apps with our rich archive of content</h3>
<p>Our API stores all articles, images, audio and videos dating back to 1999. All accessible with a single open platform key.</p>
<a href="../access" class="button">Get Started</a>
</div>
</div>
<div class="col-sm-6 align-right" >
<img src="../public/img/PhonesAll.svg" alt="" class="bordered"/>
</div>
</div>
</div>
</div>
<div class="container full light-blue">
<div class="container">
<div class="row">
<div class="col-sm-6" >
<img src="../public/img/WatchAll.svg" alt="" class="bordered"/>
</div>
<div class="col-sm-6" >
<div class="promo-text right">
<h3>Free instant access for developers</h3>
<p>We believe in the open source community. That's why any non-profit project can use our content for <b>free</b>.</p>
<a href="https://bonobo.capi.gutools.co.uk/register/developer" class="button">Register for a developer key</a>
</div>
</div>
</div>
</div>
</div>
<div class="container full blue">
<div class="container">
<div class="row">
<div class="col-sm-6" >
<div class="promo-text">
<h3>Commercial packages available</h3>
<p>We're always looking to collaborate with new partners and create new ways to distribute our content. Request a commercial key and our team will be in touch to discuss your needs.</p>
<a href="https://bonobo.capi.gutools.co.uk/register/commercial" class="button">Request a commercial key</a>
</div>
</div>
<div class="col-sm-6 align-right" >
<img src="../public/img/windows.svg" alt="" class="bordered"/>
</div>
</div>
</div>
</div>
<div class="container full light-blue">
<div class="container">
<div class="row">
<div class="col-sm-12" >
<div class="promo-text right">
<h3>Already using the Open Platform? We want to hear from you!</h3>
<p>Please share with us what you created, how you used our API and any ideas you have. We will try our best to promote your work.</p>
<a href="mailto:openplatform@theguardian.com" class="button">Email the team</a>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="home">
<div class="container" >
<div class="row">
<div class="col-sm-11">
<ul class="nav navbar ">
<li><a href="https://groups.google.com/forum/#!forum/guardian-api-talk">Support</a></li>
<li><a href="https://www.theguardian.com/info/developer-blog">Developer Blog</a></li>
<li><a href="https://developers.theguardian.com/join-the-team.html">Join Us</a></li>
<li><a href="https://twitter.com/gdndevelopers">Follow Us</a></li>
</ul>
<p>© 2023 Guardian News and Media Limited or its affiliated companies. All rights reserved.</p>
</div>
</div>
</div>
</footer>
</body>
</html>