99 lines
7.4 KiB
HTML
99 lines
7.4 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>P2672045</title>
|
|
<link rel="stylesheet" href="css/styles.css">
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<div id="landing">
|
|
<div id="background"></div>
|
|
<div id="background-transition"></div>
|
|
<h1 id="titleBanner" class="black">Tom Cornes</h1>
|
|
<div id="colorSelector">
|
|
<label for="bgColour">Background Color:</label>
|
|
<input id="bgColour" type="color" value="#ffffff">
|
|
</div>
|
|
</div>
|
|
<div id="fullscreen"></div>
|
|
<div id="below-landing">
|
|
<section id="pokedex">
|
|
<h2>Pokedex</h2>
|
|
<form id="generation-selector"></form>
|
|
<div id="pokemon-container"></div>
|
|
<div id="type-selector"></div>
|
|
<p>Select any creature to view its profile. You can use the top buttons to toggle creatures from different generations or use the bottom buttons to toggle creatures with a specific type.</p>
|
|
</section>
|
|
|
|
<section id="features-intro" class="content-column features">
|
|
<h2>Features</h2>
|
|
<p>
|
|
This webpage has been designed to display a variety of different web development skills and features.
|
|
</p>
|
|
</section>
|
|
|
|
<div id="carousel">
|
|
<div id="carousel-container">
|
|
<div class="carousel-item" id="carousel-1">
|
|
<svg class="carousel-id" viewBox="-100 -50 450 450" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" fill="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M255.555 70.766l-23.241 260.36-104.47 28.962-104.182-28.922L.445 70.766h255.11z" fill="#E44D26"></path><path d="M128 337.95l84.417-23.403 19.86-222.49H128V337.95z" fill="#F16529"></path><path d="M82.82 155.932H128v-31.937H47.917l.764 8.568 7.85 88.01H128v-31.937H85.739l-2.919-32.704zM90.018 236.542h-32.06l4.474 50.146 65.421 18.16.147-.04V271.58l-.14.037-35.568-9.604-2.274-25.471z" fill="#EBEBEB"></path><path d="M24.18 0h16.23v16.035h14.847V0h16.231v48.558h-16.23v-16.26H40.411v16.26h-16.23V0zM92.83 16.103H78.544V0h44.814v16.103h-14.295v32.455h-16.23V16.103h-.001zM130.47 0h16.923l10.41 17.062L168.203 0h16.93v48.558h-16.164V24.49l-11.166 17.265h-.28L146.35 24.49v24.068h-15.88V0zM193.21 0h16.235v32.508h22.824v16.05h-39.06V0z"></path><path d="M127.89 220.573h39.327l-3.708 41.42-35.62 9.614v33.226l65.473-18.145.48-5.396 7.506-84.08.779-8.576H127.89v31.937zM127.89 155.854v.078h77.143l.64-7.178 1.456-16.191.763-8.568H127.89v31.86z" fill="#FFF"></path></g></svg>
|
|
<p class="carousel-title">HTML</p>
|
|
</div>
|
|
<div class="carousel-item" id="carousel-2">
|
|
<svg class="carousel-id" viewBox="-100 -50 450 450" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" fill="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M127.844 360.088L23.662 331.166.445 70.766h255.11l-23.241 260.36-104.47 28.962z" fill="#264DE4"></path><path d="M212.417 314.547l19.86-222.49H128V337.95l84.417-23.403z" fill="#2965F1"></path><path d="M53.669 188.636l2.862 31.937H128v-31.937H53.669zM47.917 123.995l2.903 31.937H128v-31.937H47.917zM128 271.58l-.14.037-35.568-9.604-2.274-25.471h-32.06l4.474 50.146 65.421 18.16.147-.04V271.58z" fill="#EBEBEB"></path><path d="M60.484 0h38.68v16.176H76.66v16.176h22.506v16.175H60.484V0zM106.901 0h38.681v14.066h-22.505v2.813h22.505v32.352h-38.68V34.46h22.505v-2.813H106.9V0zM153.319 0H192v14.066h-22.505v2.813H192v32.352h-38.681V34.46h22.505v-2.813H153.32V0z"></path><path d="M202.127 188.636l5.765-64.641H127.89v31.937h45.002l-2.906 32.704H127.89v31.937h39.327l-3.708 41.42-35.62 9.614v33.226l65.473-18.145.48-5.396 7.506-84.08.779-8.576z" fill="#FFF"></path></g></svg>
|
|
<p class="carousel-title">CSS</p>
|
|
</div>
|
|
<div class="carousel-item" id="carousel-3">
|
|
<svg class="carousel-id" viewBox="-0 -0 250 250" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M0 0h256v256H0V0z" fill="#F7DF1E"></path><path d="M67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371 7.905 0 12.89-3.092 12.89-15.12v-81.798h24.057v82.138c0 24.917-14.606 36.259-35.916 36.259-19.245 0-30.416-9.967-36.087-21.996M152.381 211.354l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607 9.969 0 16.325-4.984 16.325-11.858 0-8.248-6.53-11.17-17.528-15.98l-6.013-2.58c-17.357-7.387-28.87-16.667-28.87-36.257 0-18.044 13.747-31.792 35.228-31.792 15.294 0 26.292 5.328 34.196 19.247L210.29 147.43c-4.125-7.389-8.591-10.31-15.465-10.31-7.046 0-11.514 4.468-11.514 10.31 0 7.217 4.468 10.14 14.778 14.608l6.014 2.577c20.45 8.765 31.963 17.7 31.963 37.804 0 21.654-17.012 33.51-39.867 33.51-22.339 0-36.774-10.654-43.819-24.574"></path></g></svg>
|
|
<p class="carousel-title">Javascript</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<section id="feature-showcase-1" class="content-column features">
|
|
<h2 id="table-heading" class="content-column">A Few Features</h2>
|
|
<div class="feature-showcase">
|
|
<div class="feature-showcase-item" id="interactive-ui">
|
|
<h3>Interactive UI</h3>
|
|
<p>
|
|
This website has been designed to provide satisfying user feedback. From using javscript to expand the carousel, to using css to change the shape of the title on the landing page; the website has been designed to provide an outstanding user experience.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="feature-showcase-item" id="responsive-design">
|
|
<h3>Responsive Design</h3>
|
|
<p>
|
|
The website has been designed to support a variety of different devices and aspect ratios. The website will adapt to the size of the window and display the content in a way that is easy to read and navigate.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="feature-showcase-item" id="user-input">
|
|
<h3>User Input</h3>
|
|
<p>
|
|
The website has been designed to allow the user to interact with the website. This includes the ability to change the background color of the website.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="feature-showcase-item" id="modern-css">
|
|
<h3>Modern CSS</h3>
|
|
<p>
|
|
The website has been designed to use modern css features such as the flex layout and grids to provide a visually appealing layout.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!--
|
|
<section id="feature-showcase-2" class="content-column">
|
|
<div class="feature-showcase-item" id="animation"></div>
|
|
<div class="feature-showcase-item" id="api-useage"></div>
|
|
<div class="feature-showcase-item" id="browser-data"></div>
|
|
<div class="feature-showcase-item" id="great-website"></div>
|
|
</section>
|
|
</div>
|
|
-->
|
|
</main>
|
|
<script src="js/scripts.js"></script>
|
|
</body>
|
|
</html>
|