mirror of
https://github.com/jcreek/LivingDexTracker.git
synced 2026-07-12 18:43:45 +00:00
Merge pull request #40 from jcreek/35-style-the-about-page
Design About Page
This commit is contained in:
Amber Marie
+308
-22
@@ -1,41 +1,327 @@
|
||||
<svelte:head>
|
||||
<title>About Us</title>
|
||||
<meta name="description" content="About this app" />
|
||||
<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=Pixelify+Sans:wght@400..700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Staatliches&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</svelte:head>
|
||||
|
||||
<div class="h-screen">
|
||||
<div id="introduction">
|
||||
<p id="about-us">About Us</p>
|
||||
<p id="about-us-features">Features</p>
|
||||
<p id="helpful-info">Helpful Information</p>
|
||||
<div class="content h-full bg-base inline-block">
|
||||
<div id="grad">
|
||||
<div id="banner-content">
|
||||
<p class=" text-xs opacity-70 tracking-wide">Learn</p>
|
||||
<h2 class=" mt-0 pt-0 text-5xl tracking-widest text-center font-bold p-24">
|
||||
About<br /> Us
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="team-information">
|
||||
Include a section introducing the development team behind the application, highlighting key
|
||||
members and their roles.
|
||||
<ul>
|
||||
<li>Team Member Name</li>
|
||||
<li>Team Member Name</li>
|
||||
</ul>
|
||||
<div id="introduction">
|
||||
<p class="font-semibold text-xl mb-5 ml-5">
|
||||
Introducing <span class="typewriter-text underline decoration-accent">Living Dex Tracker</span
|
||||
>
|
||||
</p>
|
||||
<p class="text-base mt-10 mb-5 ml-5 mr-5">
|
||||
<img src="/placeholder-bulb.png" alt="bulb" class="float-right w-28" />
|
||||
Living Dex Tracker is dolor sit amet, consectetur adipiscing elit. Proin dignissim risus eu quam
|
||||
feugiat malesuada. Vivamus arcu sapien, feugiat sed lacus ut, malesuada congue nibh. In lacinia
|
||||
lacus quis bibendum pulvinar. Aliquam in suscipit risus. Aliquam ut justo dolor.
|
||||
</p>
|
||||
|
||||
<p class="font-semibold text-xl mt-20 mb-5 ml-5">Features</p>
|
||||
|
||||
<!-- TODO (#41) - Make this a card carousel -->
|
||||
<div class="card md:card-side bg-base-00 shadow-m">
|
||||
<figure>
|
||||
<img src="/OIG3.jpeg" alt="Album" />
|
||||
</figure>
|
||||
<div class="card-body">
|
||||
<p class="card-title">Player Dex Search</p>
|
||||
<p>Find and explore your friends' Pokémon collections effortlessly.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-neutral pb-20">
|
||||
<p class="font-semibold text-white text-xl mt-0 mb-5 ml-5">Meet The Team</p>
|
||||
<div class="avatar flex items-center justify-end mb-20">
|
||||
<p class="text-m mb-5 ml-5 mr-5">Team Member 1</p>
|
||||
<div class="w-24 rounded-full flex justify-end">
|
||||
<img src="/OIG5.jpg" alt="profile" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="avatar">
|
||||
<div class="w-24 rounded-full">
|
||||
<img src="/OIG5.jpg" alt="profile " />
|
||||
</div>
|
||||
|
||||
<p class="text-m mb-5 ml-5 mr-5">Team Member 2</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="project-details">
|
||||
Share insights into the development process, challenges faced, and any interesting anecdotes or
|
||||
milestones achieved during the project's journey.
|
||||
<p class="font-semibold text-xl mt-10 mb-5 ml-5">The Developement</p>
|
||||
<p class="text-sm mb-5 ml-5 mr-5">
|
||||
Share insights into the development process, challenges faced, and any interesting anecdotes
|
||||
or milestones achieved during the project's journey.
|
||||
</p>
|
||||
|
||||
<ul class="timeline timeline-vertical">
|
||||
<li>
|
||||
<div class="timeline-start timeline-box">Example</div>
|
||||
<div class="timeline-middle">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
class="w-5 h-5 text-primary"
|
||||
><path
|
||||
fill-rule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
|
||||
clip-rule="evenodd"
|
||||
/></svg
|
||||
>
|
||||
</div>
|
||||
<hr class="bg-primary" />
|
||||
</li>
|
||||
<li>
|
||||
<hr class="bg-primary" />
|
||||
<div class="timeline-middle">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
class="w-5 h-5 text-primary"
|
||||
><path
|
||||
fill-rule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
|
||||
clip-rule="evenodd"
|
||||
/></svg
|
||||
>
|
||||
</div>
|
||||
<div class="timeline-end timeline-box">Example</div>
|
||||
<hr class="bg-primary" />
|
||||
</li>
|
||||
<li>
|
||||
<hr class="bg-primary" />
|
||||
<div class="timeline-start timeline-box">Example</div>
|
||||
<div class="timeline-middle">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
class="w-5 h-5 text-primary"
|
||||
><path
|
||||
fill-rule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
|
||||
clip-rule="evenodd"
|
||||
/></svg
|
||||
>
|
||||
</div>
|
||||
<hr />
|
||||
</li>
|
||||
<li>
|
||||
<hr />
|
||||
<div class="timeline-middle">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
class="w-5 h-5"
|
||||
><path
|
||||
fill-rule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
|
||||
clip-rule="evenodd"
|
||||
/></svg
|
||||
>
|
||||
</div>
|
||||
<div class="timeline-end timeline-box">Example</div>
|
||||
<hr />
|
||||
</li>
|
||||
<li>
|
||||
<hr />
|
||||
<div class="timeline-start timeline-box">Example</div>
|
||||
<div class="timeline-middle">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
class="w-5 h-5"
|
||||
><path
|
||||
fill-rule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
|
||||
clip-rule="evenodd"
|
||||
/></svg
|
||||
>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="contact-information">
|
||||
Offer ways for users to get in touch with the development team, such as through social media, or
|
||||
a contact form.
|
||||
<p class="font-semibold text-xl mt-10 mb-5 ml-5">Join Us On Discord!</p>
|
||||
|
||||
<div id="contact-information ">
|
||||
<a href="https://discord.gg/2ytj4pkUPY">
|
||||
<button
|
||||
class="relative inline-flex items-center justify-center w-16 p-0.5 ml-5 mb-20 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-cyan-500 to-blue-500 group-hover:from-cyan-500 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-cyan-200 dark:focus:ring-cyan-800"
|
||||
>
|
||||
<img src="/discord1.svg" class="w-12" /></button
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="acknowledgements">
|
||||
Express gratitude to any individuals or organisations that have contributed to the project's
|
||||
success, including sponsors, supporters, or open-source contributors.
|
||||
<div class="contact-form">
|
||||
<p class="font-semibold text-xl mt-0 mb-5 text-white pt-10">Contact Form</p>
|
||||
<input type="text" name="first" placeholder="First Name" autocomplete="off" required />
|
||||
<input type="text" name="last" placeholder="Last Name" autocomplete="off" required />
|
||||
<input type="email" name="Email" placeholder="Email Address" autocomplete="off" required />
|
||||
<textarea
|
||||
rows="5"
|
||||
cols="50"
|
||||
name="message"
|
||||
placeholder="Enter text"
|
||||
autocomplete="off"
|
||||
required
|
||||
/>
|
||||
<button type="submit" id="submit-button">Send Message</button>
|
||||
</div>
|
||||
|
||||
<div id="legal-information">
|
||||
Provide necessary legal disclaimers, privacy policies, or terms of service to ensure compliance
|
||||
with relevant regulations and protect user rights.
|
||||
<p class="font-semibold text-xl mt-0 mb-5 ml-5 text-white pt-10">Legal</p>
|
||||
|
||||
<p class="text-sm mb-5 ml-5 mr-5">
|
||||
Living Dex Tracker is a fan-made website dedicated to providing information about Pokemon
|
||||
creatures. We do not claim ownership of any Pokemon characters, images, or other content
|
||||
featured on this website.
|
||||
</p>
|
||||
<p class="text-sm mb-5 ml-5 mr-5">
|
||||
We do not generate revenue from the use of Pokemon content. Any advertisements or sponsored
|
||||
content on this website are unrelated to Pokemon and are used solely to support the
|
||||
maintenance and operation of the website.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="Acknowledgments">
|
||||
<p class="font-semibold text-xl mt-0 mb-5 ml-5 text-white pt-10">Acknowledgments</p>
|
||||
<p class="text-sm mb-5 ml-5 mr-5">
|
||||
Express gratitude to any individuals or organisations that have contributed to the project's
|
||||
success, including sponsors, supporters, or open-source contributors.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#banner-content {
|
||||
padding-top: 170px;
|
||||
}
|
||||
#grad {
|
||||
font-family: 'Pixelify Sans', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
|
||||
width: 100%;
|
||||
height: 422px;
|
||||
margin: 0 auto;
|
||||
background: linear-gradient(45deg, #d2001a, #7462ff, #f48e21, #23d5ab);
|
||||
color: #fff;
|
||||
background-size: 300% 300%;
|
||||
animation: color 12s ease-in-out infinite;
|
||||
text-align: center;
|
||||
}
|
||||
@keyframes color {
|
||||
0% {
|
||||
background-position: 0 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0 50%;
|
||||
}
|
||||
}
|
||||
|
||||
#introduction .font-semibold {
|
||||
font-family: 'Staatliches', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 25px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.contact-form {
|
||||
background-color: rgb(216, 224, 178);
|
||||
width: 380px;
|
||||
height: 590px;
|
||||
border-radius: 20px;
|
||||
margin-bottom: 40px;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.contact-form > p {
|
||||
margin-left: 9px;
|
||||
}
|
||||
input {
|
||||
background-color: rgb(156, 186, 139);
|
||||
width: 70%;
|
||||
margin-left: 12%;
|
||||
padding: 16px 16px;
|
||||
border-radius: 10px;
|
||||
border-color: rgb(131, 167, 124);
|
||||
border-width: 2px;
|
||||
margin-bottom: 20px;
|
||||
font-family: 'Staatliches', sans-serif;
|
||||
}
|
||||
|
||||
textarea {
|
||||
background-color: rgb(156, 186, 139);
|
||||
width: 70%;
|
||||
margin-left: 12%;
|
||||
padding: 16px 16px;
|
||||
border-radius: 10px;
|
||||
border-color: rgb(83, 145, 50);
|
||||
margin-bottom: 25px;
|
||||
font-family: 'Staatliches', sans-serif;
|
||||
}
|
||||
|
||||
input:focus-within {
|
||||
outline: none;
|
||||
border-color: rgb(169, 227, 157);
|
||||
border-width: 3px;
|
||||
font-family: 'Staatliches', sans-serif;
|
||||
}
|
||||
textarea:focus-within {
|
||||
outline: none;
|
||||
border-color: rgb(169, 227, 157);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
#submit-button {
|
||||
background-color: rgb(185, 201, 135);
|
||||
border-radius: 20px;
|
||||
border-color: #fff;
|
||||
padding: 10px 18px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
margin: auto;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
opacity: 80%;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,2 @@
|
||||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path d="M18.942 5.556a16.299 16.299 0 0 0-4.126-1.297c-.178.321-.385.754-.529 1.097a15.175 15.175 0 0 0-4.573 0 11.583 11.583 0 0 0-.535-1.097 16.274 16.274 0 0 0-4.129 1.3c-2.611 3.946-3.319 7.794-2.965 11.587a16.494 16.494 0 0 0 5.061 2.593 12.65 12.65 0 0 0 1.084-1.785 10.689 10.689 0 0 1-1.707-.831c.143-.106.283-.217.418-.331 3.291 1.539 6.866 1.539 10.118 0 .137.114.277.225.418.331-.541.326-1.114.606-1.71.832a12.52 12.52 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595c.415-4.396-.709-8.209-2.973-11.589zM8.678 14.813c-.988 0-1.798-.922-1.798-2.045s.793-2.047 1.798-2.047 1.815.922 1.798 2.047c.001 1.123-.793 2.045-1.798 2.045zm6.644 0c-.988 0-1.798-.922-1.798-2.045s.793-2.047 1.798-2.047 1.815.922 1.798 2.047c0 1.123-.793 2.045-1.798 2.045z"/></svg>
|
||||
|
After Width: | Height: | Size: 1007 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
Reference in New Issue
Block a user