index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- Google Console Verification -->
<meta name="google-site-verification" content="Ypc_O50xyYcRsv6t5OlfQYcCYE6oPsvqoFYubJ__8UY" />
<!-- Default Settings -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- SEO -->
<meta name="keywords" content="alexlostorto, Alex, Alex lo Storto, Alex Lo Storto, portfolio, portfolio website, Portfolio Website, programmer, coder, web developer, open source, papersss, past papers, past-papers, maths, GCSE, AQA, mark scheme, question paper, start-up, tech" />
<meta name="description" content="Papersss - finding GCSE past papers has never been easier!" />
<meta name="author" content="Alex lo Storto" />
<!-- Icons -->
<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />
<!-- Styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="styles.css" />
<!-- Javascript -->
<script src="assets/js/component.js" defer></script>
<script src="assets/js/universal.js" defer></script>
<script src="app.js" defer></script>
<title>Papersss</title>
</head>
<body>
<!-- Navbar -->
<app-navbar></app-navbar>
<div class="body-container">
<!-- Splash Screen -->
<section class="slide">
<header class="header">
<span class="header-text fade">Papersss</span>
<p class="header-description fade">Finding past papers has never been easier!</p>
</header>
<div class="arrow bounce fade">
<a class="fa fa-arrow-down fa-2x" href="#" aria-label="Arrow down"></a>
</div>
</section>
<!-- Search Screen -->
<section class="slide form fade">
<div class="inputs dropdowns">
<!-- Year -->
<div class="dropdown">
<div>
<label for="columns">Year</label>
<input autocomplete="off" type="text" id="year" onkeyup="filterFunction()" aria-label="Year" />
<div class="dropdown-content">
<span>2017</span>
<span>2018</span>
<span>2019</span>
<span>2020</span>
<span>2021</span>
<span>2022</span>
</div>
</div>
</div>
<!-- Month -->
<div class="dropdown">
<div>
<label for="columns">Month</label>
<input autocomplete="off" type="text" id="month" onkeyup="filterFunction()" aria-label="Month" />
<div class="dropdown-content">
<span>November</span>
<span>June</span>
</div>
</div>
</div>
<!-- Paper -->
<div class="dropdown">
<div>
<label for="columns">Paper</label>
<input autocomplete="off" type="text" id="paper" onkeyup="filterFunction()" aria-label="Paper number" />
<div class="dropdown-content">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</div>
</div>
</div>
<div class="inputs switches">
<div class="type switch">
<span class="active question-paper check-text">Question paper</span>
<label>
<input type="checkbox" aria-label="Mark scheme" />
<span class="slider round"></span>
</label>
<span class="mark-scheme check-text">Mark scheme</span>
</div>
<div class="tier switch">
<span class="active higher check-text">Higher</span>
<label>
<input type="checkbox" aria-label="Foundation paper" />
<span class="slider round"></span>
</label>
<span class="foundation check-text">Foundation</span>
</div>
</div>
<button id="search-button" class="button">
Search
<div class="button__horizontal"></div>
<div class="button__vertical"></div>
</button>
</section>
</div>
<!-- Footer -->
<app-footer></app-footer>
<!-- Custom cursor -->
<div class="custom-cursor">
<div id="cursor" class="custom-cursor inner"></div>
<div class="custom-cursor outer"></div>
</div>
</body>
</html>